Add IDE buttons to Incident details page

.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.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",

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

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

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

@@ -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/index.tsx

@@ -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/scanRunningVSCodeIdeProjects.ts

@@ -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/styles.ts

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

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

@@ -0,0 +1,15 @@
+export interface IdeToolbarProps {
+  incidentId: string;
+}
+
+export interface VSCodeExtensionInfo {
+  ideName: string;
+  ideUriScheme: string;
+  ideVersion: string;
+  workspace: string;
+}
+
+export type VSCodeIdeScanningResult = {
+  port: number;
+  response: VSCodeExtensionInfo;
+}[];

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

@@ -12,10 +12,12 @@ import {
 import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
 import { intersperse } from "../../../../utils/intersperse";
 import { InfoCircleIcon } from "../../../common/icons/InfoCircleIcon";
+import { NewButton } from "../../../common/v3/NewButton";
 import { NewIconButton } from "../../../common/v3/NewIconButton";
 import { Tooltip } from "../../../common/v3/Tooltip";
 import { trackingEvents } from "../../tracking";
 import { Divider } from "./Divider";
+import { IdeToolbar } from "./IdeToolbar";
 import * as s from "./styles";
 
 const DATE_FORMAT = "dd MMM, yyyy HH:mm";
@@ -194,24 +196,27 @@ export const IncidentMetaData = () => {
   return (
     <s.Container>
       <s.AttributesList>{attributes}</s.AttributesList>
-      {data.status === "active" && (
-        <s.CloseIncidentButton
-          label={"Cancel incident"}
-          onClick={handleCancelButtonClick}
-        />
-      )}
-      {data.status === "pending" && (
-        <s.CloseIncidentButton
-          label={"Close incident"}
-          onClick={handleCloseButtonClick}
-        />
-      )}
-      {["error", "closed", "canceled"].includes(data.status) && (
-        <s.CloseIncidentButton
-          label={"Delete incident"}
-          onClick={handleDeleteButtonClick}
-        />
-      )}
+      <s.Toolbar>
+        {incidentId && <IdeToolbar incidentId={incidentId} />}
+        {data.status === "active" && (
+          <NewButton
+            label={"Cancel incident"}
+            onClick={handleCancelButtonClick}
+          />
+        )}
+        {data.status === "pending" && (
+          <NewButton
+            label={"Close incident"}
+            onClick={handleCloseButtonClick}
+          />
+        )}
+        {["error", "closed", "canceled"].includes(data.status) && (
+          <NewButton
+            label={"Delete incident"}
+            onClick={handleDeleteButtonClick}
+          />
+        )}
+      </s.Toolbar>
     </s.Container>
   );
 };

src/components/Agentic/IncidentDetails/IncidentMetaData/styles.ts

@@ -1,6 +1,5 @@
 import styled from "styled-components";
 import { subheading1RegularTypography } from "../../../common/App/typographies";
-import { NewButton } from "../../../common/v3/NewButton";
 
 export const Container = styled.div`
   display: flex;
@@ -14,6 +13,7 @@ export const AttributesList = styled.div`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  margin-right: auto;
 `;
 
 export const DividerContainer = styled.div`
@@ -22,13 +22,6 @@ export const DividerContainer = styled.div`
   display: flex;
 `;
 
-export const CloseIncidentButton = styled(NewButton)`
-  flex-shrink: 0;
-  margin-top: 12px;
-  margin-left: auto;
-  margin-right: 16px;
-`;
-
 export const Attribute = styled.div`
   ${subheading1RegularTypography}
   display: flex;
@@ -77,3 +70,12 @@ export const HiddenServicesCountTag = styled(Tag)`
   border: 1px solid ${({ theme }) => theme.colors.v3.stroke.primary};
   color: ${({ theme }) => theme.colors.v3.text.secondary};
 `;
+
+export const Toolbar = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  margin-top: 12px;
+  margin-right: 16px;
+`;

src/components/Agentic/IncidentDirectives/index.tsx

@@ -279,7 +279,11 @@ export const IncidentDirectives = () => {
       },
       cell: (info) => {
         const value = info.getValue();
-        return <s.Condition>{value}</s.Condition>;
+        return (
+          <Tooltip title={value}>
+            <s.Condition>{value}</s.Condition>
+          </Tooltip>
+        );
       },
       enableSorting: true,
       sortingFn: (rowA, rowB) => {
@@ -313,7 +317,14 @@ export const IncidentDirectives = () => {
       },
       cell: (info) => {
         const value = info.getValue();
-        return <span>{value.join(", ")}</span>;
+        const valueString = value.join(", ");
+        return (
+          <Tooltip title={valueString}>
+            <s.TruncatedTableCellContent>
+              {valueString}
+            </s.TruncatedTableCellContent>
+          </Tooltip>
+        );
       },
       enableSorting: true,
       sortingFn: (rowA, rowB) => {