Merge pull request #1815 from github/robertbrignull/view_paths

Add theme provider when rendering code flows

Author: robertbrignull

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

@@ -3,7 +3,7 @@ import { useRef, useState } from "react";
 import styled from "styled-components";
 import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 
-import { Overlay } from "@primer/react";
+import { Overlay, ThemeProvider } from "@primer/react";
 
 import {
   AnalysisMessage,
@@ -16,7 +16,7 @@ const ShowPathsLink = styled(VSCodeLink)`
   cursor: pointer;
 `;
 
-type Props = {
+export type CodePathsProps = {
   codeFlows: CodeFlow[];
   ruleDescription: string;
   message: AnalysisMessage;
@@ -28,7 +28,7 @@ export const CodePaths = ({
   ruleDescription,
   message,
   severity,
-}: Props) => {
+}: CodePathsProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const linkRef = useRef<HTMLAnchorElement>(null);
@@ -41,20 +41,22 @@ export const CodePaths = ({
         Show paths
       </ShowPathsLink>
       {isOpen && (
-        <Overlay
-          returnFocusRef={linkRef}
-          onEscape={closeOverlay}
-          onClickOutside={closeOverlay}
-          anchorSide="outside-top"
-        >
-          <CodePathsOverlay
-            codeFlows={codeFlows}
-            ruleDescription={ruleDescription}
-            message={message}
-            severity={severity}
-            onClose={closeOverlay}
-          />
-        </Overlay>
+        <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>
       )}
     </>
   );

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { render as reactRender, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { CodePaths, CodePathsProps } from "../CodePaths";
+
+import { createMockCodeFlows } from "../../../../vscode-tests/factories/remote-queries/shared/CodeFlow";
+import { createMockAnalysisMessage } from "../../../../vscode-tests/factories/remote-queries/shared/AnalysisMessage";
+
+describe(CodePaths.name, () => {
+  const render = (props?: CodePathsProps) =>
+    reactRender(
+      <CodePaths
+        codeFlows={createMockCodeFlows()}
+        ruleDescription="Rule description"
+        message={createMockAnalysisMessage()}
+        severity="Recommendation"
+        {...props}
+      />,
+    );
+
+  it("renders correctly when unexpanded", () => {
+    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 () => {
+    render();
+
+    await userEvent.click(screen.getByText("Show paths"));
+
+    expect(screen.getByText("Code snippet text")).toBeInTheDocument();
+    expect(screen.getByText("Rule description")).toBeInTheDocument();
+  });
+});

extensions/ql-vscode/src/vscode-tests/factories/remote-queries/shared/AnalysisMessage.ts

@@ -0,0 +1,12 @@
+import { AnalysisMessage } from "../../../../remote-queries/shared/analysis-result";
+
+export function createMockAnalysisMessage(): AnalysisMessage {
+  return {
+    tokens: [
+      {
+        t: "text",
+        text: "Token text",
+      },
+    ],
+  };
+}

extensions/ql-vscode/src/vscode-tests/factories/remote-queries/shared/CodeFlow.ts

@@ -0,0 +1,23 @@
+import { CodeFlow } from "../../../../remote-queries/shared/analysis-result";
+import { createMockAnalysisMessage } from "./AnalysisMessage";
+
+export function createMockCodeFlows(): CodeFlow[] {
+  return [
+    {
+      threadFlows: [
+        {
+          fileLink: {
+            fileLinkPrefix: "/prefix",
+            filePath: "filePath",
+          },
+          codeSnippet: {
+            startLine: 123,
+            endLine: 456,
+            text: "Code snippet text",
+          },
+          message: createMockAnalysisMessage(),
+        },
+      ],
+    },
+  ];
+}