Merge pull request #4788 from continuedev/nate/edit-button

Nate/edit-button

Author: sestinj

extensions/vscode/src/extension/ConfigYamlDocumentLinkProvider.ts

@@ -0,0 +1,43 @@
+import * as vscode from "vscode";
+
+export class ConfigYamlDocumentLinkProvider
+  implements vscode.DocumentLinkProvider
+{
+  private usesPattern = /^\s*#?\s*-\s*uses:\s*(.+)$/;
+  provideDocumentLinks(
+    document: vscode.TextDocument,
+    token: vscode.CancellationToken,
+  ): vscode.ProviderResult<vscode.DocumentLink[]> {
+    const links: vscode.DocumentLink[] = [];
+
+    for (let lineIndex = 0; lineIndex < document.lineCount; lineIndex++) {
+      const line = document.lineAt(lineIndex);
+      const match = this.usesPattern.exec(line.text);
+
+      if (match) {
+        const slug = match[1].trim();
+        const startPos = line.text.indexOf(slug);
+        const range = new vscode.Range(
+          lineIndex,
+          startPos,
+          lineIndex,
+          startPos + slug.length,
+        );
+
+        const link = new vscode.DocumentLink(
+          range,
+          vscode.Uri.parse(`https://hub.continue.dev/${slug}`),
+        );
+        links.push(link);
+      }
+    }
+
+    return links;
+  }
+  resolveDocumentLink(
+    link: vscode.DocumentLink,
+    token: vscode.CancellationToken,
+  ): vscode.ProviderResult<vscode.DocumentLink> {
+    return link;
+  }
+}

extensions/vscode/src/extension/VsCodeExtension.ts

@@ -37,6 +37,7 @@ import { Battery } from "../util/battery";
 import { FileSearch } from "../util/FileSearch";
 import { VsCodeIde } from "../VsCodeIde";
 
+import { ConfigYamlDocumentLinkProvider } from "./ConfigYamlDocumentLinkProvider";
 import { VsCodeMessenger } from "./VsCodeMessenger";
 
 import type { VsCodeWebviewProtocol } from "../webviewProtocol";
@@ -401,6 +402,12 @@ export class VsCodeExtension {
       ),
     );
 
+    const linkProvider = vscode.languages.registerDocumentLinkProvider(
+      { language: "yaml" },
+      new ConfigYamlDocumentLinkProvider(),
+    );
+    context.subscriptions.push(linkProvider);
+
     this.ide.onDidChangeActiveTextEditor((filepath) => {
       void this.core.invoke("didChangeActiveTextEditor", { filepath });
     });

gui/src/components/mainInput/Lump/EditBlockButton.tsx

@@ -0,0 +1,52 @@
+import { ConfigYaml } from "@continuedev/config-yaml";
+import { PencilIcon } from "@heroicons/react/24/outline";
+import { useContext } from "react";
+import { useAuth } from "../../../context/Auth";
+import { IdeMessengerContext } from "../../../context/IdeMessenger";
+
+type SectionKey = Exclude<keyof ConfigYaml, "name" | "version" | "schema">;
+
+interface EditBlockButtonProps<T extends SectionKey> {
+  blockType: T;
+  block?: NonNullable<ConfigYaml[T]>[number];
+  className?: string;
+}
+
+function isUsesBlock(block: any): block is { uses: string } {
+  return typeof block !== "string" && "uses" in block;
+}
+
+export default function EditBlockButton<T extends SectionKey>({
+  block,
+  blockType,
+  className = "",
+}: EditBlockButtonProps<T>) {
+  const ideMessenger = useContext(IdeMessengerContext);
+  const { selectedProfile } = useAuth();
+
+  const openUrl = (path: string) =>
+    ideMessenger.request("controlPlane/openUrl", {
+      path,
+      orgSlug: undefined,
+    });
+
+  const handleEdit = () => {
+    if (selectedProfile?.profileType === "local") {
+      ideMessenger.post("config/openProfile", {
+        profileId: undefined,
+      });
+    } else if (block && isUsesBlock(block)) {
+      openUrl(`${block.uses}/new-version`);
+    } else if (selectedProfile?.fullSlug) {
+      const slug = `${selectedProfile.fullSlug.ownerSlug}/${selectedProfile.fullSlug.packageSlug}`;
+      openUrl(`${slug}/new-version`);
+    }
+  };
+
+  return (
+    <PencilIcon
+      className={`h-3 w-3 cursor-pointer text-gray-400 hover:brightness-125 ${className}`}
+      onClick={handleEdit}
+    />
+  );
+}

gui/src/components/mainInput/Lump/sections/docs/DocsIndexingStatus.tsx

@@ -1,12 +1,7 @@
 import { ConfigYaml } from "@continuedev/config-yaml";
-import {
-  ArrowPathIcon,
-  PencilIcon,
-  StopIcon,
-} from "@heroicons/react/24/outline";
+import { ArrowPathIcon, StopIcon } from "@heroicons/react/24/outline";
 import { SiteIndexingConfig } from "core";
 import { useContext, useMemo, useState } from "react";
-import { useAuth } from "../../../../../context/Auth";
 import { IdeMessengerContext } from "../../../../../context/IdeMessenger";
 import { useAppDispatch, useAppSelector } from "../../../../../redux/hooks";
 import { updateIndexingStatus } from "../../../../../redux/slices/indexingSlice";
@@ -16,22 +11,18 @@ import {
 } from "../../../../../redux/slices/uiSlice";
 import { fontSize } from "../../../../../util";
 import ConfirmationDialog from "../../../../dialogs/ConfirmationDialog";
+import EditBlockButton from "../../EditBlockButton";
 import { StatusIndicator } from "./StatusIndicator";
 interface IndexingStatusViewerProps {
   docConfig: SiteIndexingConfig;
   docFromYaml?: NonNullable<ConfigYaml["docs"]>[number];
 }
 
-function isUsesBlock(block: any): block is { uses: string } {
-  return typeof block !== "string" && "uses" in block;
-}
-
 function DocsIndexingStatus({
   docConfig,
   docFromYaml,
 }: IndexingStatusViewerProps) {
   const ideMessenger = useContext(IdeMessengerContext);
-  const { selectedProfile } = useAuth();
   const dispatch = useAppDispatch();
 
   const status = useAppSelector(
@@ -77,25 +68,6 @@ function DocsIndexingStatus({
     dispatch(setShowDialog(true));
   };
 
-  const openUrl = (path: string) =>
-    ideMessenger.request("controlPlane/openUrl", {
-      path,
-      orgSlug: undefined,
-    });
-
-  const handleEdit = () => {
-    console.log("edit", docFromYaml);
-    if (selectedProfile?.profileType === "local") {
-      ideMessenger.post("config/openProfile", {
-        profileId: undefined,
-      });
-    } else if (docFromYaml && isUsesBlock(docFromYaml)) {
-      openUrl(`${docFromYaml.uses}/new-version`);
-    } else if (selectedProfile?.fullSlug) {
-      const slug = `${selectedProfile.fullSlug.ownerSlug}/${selectedProfile.fullSlug.packageSlug}`;
-      openUrl(`${slug}/new-version`);
-    }
-  };
   const progressPercentage = useMemo(() => {
     if (!status) {
       return 0;
@@ -161,6 +133,8 @@ function DocsIndexingStatus({
               />
             )}
 
+            <EditBlockButton blockType="docs" block={docFromYaml} />
+
             {["aborted", "complete", "failed"].includes(
               status?.status ?? "",
             ) && (
@@ -170,11 +144,6 @@ function DocsIndexingStatus({
               />
             )}
 
-            <PencilIcon
-              className="h-3 w-3 cursor-pointer text-gray-400 hover:brightness-125"
-              onClick={handleEdit}
-            />
-
             {/* Removed StatusIndicator from here */}
           </div>
         </div>

gui/src/pages/config/MCPServersPreview.tsx

@@ -1,3 +1,4 @@
+import { ConfigYaml, parseConfigYaml } from "@continuedev/config-yaml";
 import {
   ArrowPathIcon,
   CircleStackIcon,
@@ -6,18 +7,21 @@ import {
   WrenchScrewdriverIcon,
 } from "@heroicons/react/24/outline";
 import { MCPServerStatus } from "core";
-import { useContext } from "react";
+import { useContext, useMemo } from "react";
 import { ToolTip } from "../../components/gui/Tooltip";
+import EditBlockButton from "../../components/mainInput/Lump/EditBlockButton";
 import { ExploreBlocksButton } from "../../components/mainInput/Lump/sections/ExploreBlocksButton";
+import { useAuth } from "../../context/Auth";
 import { IdeMessengerContext } from "../../context/IdeMessenger";
 import { useAppDispatch, useAppSelector } from "../../redux/hooks";
 import { updateConfig } from "../../redux/slices/configSlice";
 import { fontSize } from "../../util";
 
 interface MCPServerStatusProps {
   server: MCPServerStatus;
+  serverFromYaml?: NonNullable<ConfigYaml["mcpServers"]>[number];
 }
-function MCPServerPreview({ server }: MCPServerStatusProps) {
+function MCPServerPreview({ server, serverFromYaml }: MCPServerStatusProps) {
   const ideMessenger = useContext(IdeMessengerContext);
   const config = useAppSelector((store) => store.config.config);
   const dispatch = useAppDispatch();
@@ -124,6 +128,7 @@ function MCPServerPreview({ server }: MCPServerStatusProps) {
 
       {/* Refresh button */}
       <div className="flex items-center gap-2">
+        <EditBlockButton blockType={"mcpServers"} block={serverFromYaml} />
         <div
           className="text-lightgray flex cursor-pointer items-center hover:opacity-80"
           onClick={onRefresh}
@@ -153,12 +158,27 @@ function MCPServersPreview() {
   const servers = useAppSelector(
     (store) => store.config.config.mcpServerStatuses,
   );
+  const { selectedProfile } = useAuth();
+
+  const mergedBlocks = useMemo(() => {
+    const parsed = selectedProfile?.rawYaml
+      ? parseConfigYaml(selectedProfile?.rawYaml ?? "")
+      : undefined;
+    return (servers ?? []).map((doc, index) => ({
+      block: doc,
+      blockFromYaml: parsed?.mcpServers?.[index],
+    }));
+  }, [servers, selectedProfile]);
 
   return (
     <div className="flex flex-col gap-1">
       <div className="flex max-h-[170px] flex-col gap-1 overflow-y-auto overflow-x-hidden pr-2">
-        {servers.map((server, idx) => (
-          <MCPServerPreview key={idx} server={server} />
+        {mergedBlocks.map(({ block, blockFromYaml }, idx) => (
+          <MCPServerPreview
+            key={idx}
+            server={block}
+            serverFromYaml={blockFromYaml}
+          />
         ))}
       </div>
       <ExploreBlocksButton blockType="mcpServers" />

packages/config-yaml/src/load/unroll.ts

@@ -346,6 +346,12 @@ export async function resolveBlock(
   // Retrieve block raw yaml
   const rawYaml = await registry.getContent(fullSlug);
 
+  if (rawYaml === undefined) {
+    throw new Error(
+      `Block ${fullSlug.ownerSlug}/${fullSlug.packageSlug} not found`,
+    );
+  }
+
   // Convert any input secrets to FQSNs (they get FQSNs as if they are in the block. This is so that we know when to use models add-on / free trial secrets)
   const renderedInputs = inputsToFQSNs(inputs || {}, fullSlug);