Wire up data flow paths view (#2182)

Author: charisk

extensions/ql-vscode/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## [UNRELEASED]
 
+- Show data flow paths of a variant analysis in a new tab
+
 ## 1.8.0 - 9 March 2023
 
 - Send telemetry about unhandled errors happening within the extension. [#2125](https://github.com/github/vscode-codeql/pull/2125)

extensions/ql-vscode/src/pure/interface-types.ts

@@ -449,6 +449,11 @@ export interface CancelVariantAnalysisMessage {
   t: "cancelVariantAnalysis";
 }
 
+export interface ShowDataFlowPathsMessage {
+  t: "showDataFlowPaths";
+  dataFlowPaths: DataFlowPaths;
+}
+
 export type ToVariantAnalysisMessage =
   | SetVariantAnalysisMessage
   | SetRepoResultsMessage
@@ -462,7 +467,8 @@ export type FromVariantAnalysisMessage =
   | CopyRepositoryListMessage
   | ExportResultsMessage
   | OpenLogsMessage
-  | CancelVariantAnalysisMessage;
+  | CancelVariantAnalysisMessage
+  | ShowDataFlowPathsMessage;
 
 export interface SetDataFlowPathsMessage {
   t: "setDataFlowPaths";

extensions/ql-vscode/src/stories/common/CodePaths.stories.tsx

@@ -1,21 +1,14 @@
 import * as React from "react";
 
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { ThemeProvider } from "@primer/react";
 
 import { CodePaths } from "../../view/common";
 import type { CodeFlow } from "../../variant-analysis/shared/analysis-result";
 
 export default {
   title: "Code Paths",
   component: CodePaths,
-  decorators: [
-    (Story) => (
-      <ThemeProvider colorMode="auto">
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
+  decorators: [(Story) => <Story />],
 } as ComponentMeta<typeof CodePaths>;
 
 const Template: ComponentStory<typeof CodePaths> = (args) => (

extensions/ql-vscode/src/stories/data-flow-paths/DataFlowPaths.stories.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { DataFlowPaths as DataFlowPathsComponent } from "../../view/data-flow-paths/DataFlowPaths";
+import { createMockDataFlowPaths } from "../../../test/factories/variant-analysis/shared/data-flow-paths";
+export default {
+  title: "Data Flow Paths/Data Flow Paths",
+  component: DataFlowPathsComponent,
+} as ComponentMeta<typeof DataFlowPathsComponent>;
+
+const Template: ComponentStory<typeof DataFlowPathsComponent> = (args) => (
+  <DataFlowPathsComponent {...args} />
+);
+
+export const PowerShell = Template.bind({});
+PowerShell.args = {
+  dataFlowPaths: createMockDataFlowPaths(),
+};

extensions/ql-vscode/src/variant-analysis/variant-analysis-view.ts

@@ -21,12 +21,15 @@ import {
 } from "../helpers";
 import { telemetryListener } from "../telemetry";
 import { redactableError } from "../pure/errors";
+import { DataFlowPathsView } from "./data-flow-paths-view";
+import { DataFlowPaths } from "./shared/data-flow-paths";
 
 export class VariantAnalysisView
   extends AbstractWebview<ToVariantAnalysisMessage, FromVariantAnalysisMessage>
   implements VariantAnalysisViewInterface
 {
   public static readonly viewType = "codeQL.variantAnalysis";
+  private readonly dataFlowPathsView: DataFlowPathsView;
 
   public constructor(
     ctx: ExtensionContext,
@@ -36,6 +39,8 @@ export class VariantAnalysisView
     super(ctx);
 
     manager.registerView(this);
+
+    this.dataFlowPathsView = new DataFlowPathsView(ctx);
   }
 
   public async openView() {
@@ -151,6 +156,9 @@ export class VariantAnalysisView
           this.variantAnalysisId,
         );
         break;
+      case "showDataFlowPaths":
+        await this.showDataFlows(msg.dataFlowPaths);
+        break;
       case "telemetry":
         telemetryListener?.sendUIInteraction(msg.action);
         break;
@@ -201,4 +209,8 @@ export class VariantAnalysisView
       ? `${variantAnalysis.query.name} - Variant Analysis Results`
       : `Variant Analysis ${this.variantAnalysisId} - Results`;
   }
+
+  private async showDataFlows(dataFlows: DataFlowPaths): Promise<void> {
+    await this.dataFlowPathsView.showDataFlows(dataFlows);
+  }
 }

extensions/ql-vscode/src/view/common/CodePaths/CodePaths.tsx

@@ -1,17 +1,13 @@
 import * as React from "react";
-import { useRef, useState } from "react";
 import styled from "styled-components";
 import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 
-import { Overlay, ThemeProvider } from "@primer/react";
-
 import {
   AnalysisMessage,
   CodeFlow,
   ResultSeverity,
 } from "../../../variant-analysis/shared/analysis-result";
-import { CodePathsOverlay } from "./CodePathsOverlay";
-import { useTelemetryOnChange } from "../telemetry";
+import { vscode } from "../../vscode-api";
 
 const ShowPathsLink = styled(VSCodeLink)`
   cursor: pointer;
@@ -24,46 +20,27 @@ export type CodePathsProps = {
   severity: ResultSeverity;
 };
 
-const filterIsOpenTelemetry = (v: boolean) => v;
-
 export const CodePaths = ({
   codeFlows,
   ruleDescription,
   message,
   severity,
 }: CodePathsProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-  useTelemetryOnChange(isOpen, "code-path-is-open", {
-    filterTelemetryOnValue: filterIsOpenTelemetry,
-  });
-
-  const linkRef = useRef<HTMLAnchorElement>(null);
-
-  const closeOverlay = () => setIsOpen(false);
+  const onShowPathsClick = () => {
+    vscode.postMessage({
+      t: "showDataFlowPaths",
+      dataFlowPaths: {
+        codeFlows,
+        ruleDescription,
+        message,
+        severity,
+      },
+    });
+  };
 
   return (
     <>
-      <ShowPathsLink onClick={() => setIsOpen(true)} ref={linkRef}>
-        Show paths
-      </ShowPathsLink>
-      {isOpen && (
-        <ThemeProvider colorMode="auto">
-          <Overlay
-            returnFocusRef={linkRef}
-            onEscape={closeOverlay}
-            onClickOutside={closeOverlay}
-            anchorSide="outside-top"
-          >
-            <CodePathsOverlay
-              codeFlows={codeFlows}
-              ruleDescription={ruleDescription}
-              message={message}
-              severity={severity}
-              onClose={closeOverlay}
-            />
-          </Overlay>
-        </ThemeProvider>
-      )}
+      <ShowPathsLink onClick={onShowPathsClick}>Show paths</ShowPathsLink>
     </>
   );
 };

extensions/ql-vscode/src/view/common/CodePaths/CodePathsOverlay.tsx

@@ -18,20 +18,25 @@ describe(CodePaths.name, () => {
       />,
     );
 
-  it("renders correctly when unexpanded", () => {
+  it("renders 'show paths' link", () => {
     render();
 
     expect(screen.getByText("Show paths")).toBeInTheDocument();
-    expect(screen.queryByText("Code snippet text")).not.toBeInTheDocument();
-    expect(screen.queryByText("Rule description")).not.toBeInTheDocument();
   });
 
-  it("renders correctly when expanded", async () => {
+  it("posts extension message when 'show paths' link clicked", async () => {
     render();
 
     await userEvent.click(screen.getByText("Show paths"));
 
-    expect(screen.getByText("Code snippet text")).toBeInTheDocument();
-    expect(screen.getByText("Rule description")).toBeInTheDocument();
+    expect((window as any).vsCodeApi.postMessage).toHaveBeenCalledWith({
+      t: "showDataFlowPaths",
+      dataFlowPaths: {
+        codeFlows: createMockCodeFlows(),
+        ruleDescription: "Rule description",
+        message: createMockAnalysisMessage(),
+        severity: "Recommendation",
+      },
+    });
   });
 });