Add IDE buttons to Incident details page (#1445)

* Add IDE buttons to Incident page

* Add jiti as explicit dependency for ESLint

* Improve styling in Directives table

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: kshmidt-digma

.github/workflows/build.yml

@@ -16,6 +16,7 @@ jobs:
       contents: read
       actions: write
     runs-on: ubuntu-latest
+
     outputs:
       artifact-name: ${{ steps.get-artifact-name.outputs.artifact_name }}
     steps:
@@ -29,7 +30,7 @@ jobs:
       - run: npm ci
 
       - env:
-          GITHUB_TOKEN: ${{ secrets.CONTENTS_WRITE_PAT }} # TODO: fix
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: npm run build:prod:${{ inputs.platform }}
 
       - name: Get artifact name

.github/workflows/release-asset.yml

@@ -27,4 +27,4 @@ jobs:
         with:
           files: dist/${{ inputs.artifact-name }}.zip
         env:
-          GITHUB_TOKEN: ${{ secrets.CONTENTS_WRITE_PAT }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/update-dependencies.yml

@@ -28,7 +28,7 @@ jobs:
 
       - name: Commit, push changes and create PR
         env:
-          GH_TOKEN: ${{ secrets.CONTENTS_WRITE_PAT }}
+          GITHUB_TOKEN: ${{ secrets.CONTENTS_WRITE_PAT }}
         run: |
           git config user.name "github-actions[bot]"
           git config user.email "github-actions[bot]@users.noreply.github.com"

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "digma-ui",
-  "version": "16.6.4",
+  "version": "16.7.0-alpha.3",
   "description": "Digma UI",
   "scripts": {
     "lint:eslint": "eslint --cache .",
@@ -96,6 +96,7 @@
     "husky": "^9.1.7",
     "jest": "^30.0.5",
     "jest-environment-jsdom": "^30.0.5",
+    "jiti": "^2.5.1",
     "knip": "^5.62.0",
     "lint-staged": "^16.1.2",
     "postcss-styled-syntax": "^0.7.1",

package.json

@@ -100,7 +100,7 @@ export const Header = ({
           onGoHome={handleGoHome}
         />
         <ScopeBar
-          isExpanded={false}
+          isExpanded={isSpanInfoVisible}
           isSpanInfoEnabled={isSpanInfoEnabled}
           linkedEndpoints={linkedEndpoints}
           scope={scope}

src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Header/index.tsx

@@ -0,0 +1,7 @@
+export const addChatContextIncidentFile = (
+  ideUriScheme: string,
+  incidentId: string
+): void => {
+  const url = `${ideUriScheme}://digma.digma/chat/context/add/file/incident/${incidentId}`;
+  window.open(url, "_blank", "noopener noreferrer");
+};

src/components/Agentic/IncidentDetails/IncidentMetaData/IdeToolbar/addChatContextFile.ts

@@ -0,0 +1,79 @@
+import { useEffect, useState, type ComponentType } from "react";
+import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
+import { uniqueBy } from "../../../../../utils/uniqueBy";
+import { VSCodeLogoIcon } from "../../../../common/icons/100px/VSCodeLogoIcon";
+import { CursorLogoIcon } from "../../../../common/icons/24px/CursorLogoIcon";
+import type { IconProps } from "../../../../common/icons/types";
+import { NewIconButton } from "../../../../common/v3/NewIconButton";
+import { Tooltip } from "../../../../common/v3/Tooltip";
+import { trackingEvents } from "../../../tracking";
+import { addChatContextIncidentFile } from "./addChatContextFile";
+import { scanRunningVSCodeIdeProjects } from "./scanRunningVSCodeIdeProjects";
+import * as s from "./styles";
+import type { IdeToolbarProps, VSCodeExtensionInfo } from "./types";
+
+const IDE_ICONS: Record<string, ComponentType<IconProps>> = {
+  cursor: CursorLogoIcon,
+  vscode: VSCodeLogoIcon
+};
+
+export const IdeToolbar = ({ incidentId }: IdeToolbarProps) => {
+  const [ides, setIdes] = useState<VSCodeExtensionInfo[]>();
+
+  const handleIdeButtonClick = (ide: string) => {
+    sendUserActionTrackingEvent(trackingEvents.INCIDENT_IDE_BUTTON_CLICKED, {
+      ide
+    });
+    addChatContextIncidentFile(ide, incidentId);
+  };
+
+  useEffect(() => {
+    const scan = async () => {
+      try {
+        const results = await scanRunningVSCodeIdeProjects();
+        const ides = uniqueBy(
+          results.map((x) => x.response),
+          "ideUriScheme"
+        );
+        setIdes(ides);
+      } catch {
+        setIdes([]);
+      }
+    };
+
+    void scan();
+  }, []);
+
+  if (!ides || ides.length === 0) {
+    return null;
+  }
+
+  return (
+    <s.Container>
+      {ides
+        ?.map((ide) => {
+          const IdeIcon = IDE_ICONS[ide.ideUriScheme];
+
+          if (!IdeIcon) {
+            return null;
+          }
+
+          return (
+            <Tooltip
+              title={"Attach to chat in " + ide.ideName}
+              key={ide.ideUriScheme}
+            >
+              <NewIconButton
+                buttonType={"secondaryBorderless"}
+                size={"large"}
+                key={ide.ideUriScheme}
+                icon={(props) => <IdeIcon {...props} />}
+                onClick={() => handleIdeButtonClick(ide.ideUriScheme)}
+              />
+            </Tooltip>
+          );
+        })
+        .filter(Boolean)}
+    </s.Container>
+  );
+};

src/components/Agentic/IncidentDetails/IncidentMetaData/IdeToolbar/index.tsx

@@ -0,0 +1,42 @@
+import axios from "axios";
+import { isString } from "../../../../../typeGuards/isString";
+import type { VSCodeExtensionInfo, VSCodeIdeScanningResult } from "./types";
+
+const START_PORT_TO_SCAN = 33100;
+const END_PORT_TO_SCAN = 33119;
+
+const ABOUT_PATH = "api/digma/about";
+
+export const scanRunningVSCodeIdeProjects =
+  async (): Promise<VSCodeIdeScanningResult> => {
+    const instances = Array.from(
+      { length: END_PORT_TO_SCAN - START_PORT_TO_SCAN + 1 },
+      (_, i) => START_PORT_TO_SCAN + i
+    ).map((port) => ({
+      port,
+      url: `http://localhost:${port}/${ABOUT_PATH}`
+    }));
+
+    const responses = await Promise.allSettled(
+      instances.map((x) =>
+        axios
+          .get<VSCodeExtensionInfo>(x.url)
+          .then((response) => ({ port: x.port, response: response.data }))
+          .catch((error) => ({
+            port: x.port,
+            response: axios.isAxiosError(error)
+              ? `${error.message}`
+              : "Unknown error"
+          }))
+      )
+    );
+
+    const successfulResponses = responses.filter(
+      (x) => x.status === "fulfilled" && !isString(x.value.response)
+    ) as unknown as PromiseFulfilledResult<{
+      port: number;
+      response: VSCodeExtensionInfo;
+    }>[];
+
+    return successfulResponses.map((x) => x.value);
+  };

src/components/Agentic/IncidentDetails/IncidentMetaData/IdeToolbar/scanRunningVSCodeIdeProjects.ts

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;