Implement PR feedback

Author: koesie10

extensions/ql-vscode/package.json

@@ -1188,8 +1188,8 @@
     "watch:extension": "tsc --watch",
     "watch:webpack": "gulp watchView",
     "test": "npm-run-all -p test:*",
-    "test:mocha": "mocha --exit -r ts-node/register test/pure-tests/**/*.ts",
-    "test:jest": "jest",
+    "test:unit": "mocha --exit -r ts-node/register test/pure-tests/**/*.ts",
+    "test:view": "jest",
     "preintegration": "rm -rf ./out/vscode-tests && gulp",
     "integration": "node ./out/vscode-tests/run-integration-tests.js no-workspace,minimal-workspace",
     "cli-integration": "npm run preintegration && node ./out/vscode-tests/run-integration-tests.js cli-integration",

extensions/ql-vscode/src/stories/variant-analysis/VariantAnalysisHeader.stories.tsx

@@ -17,14 +17,14 @@ export default {
     )
   ],
   argTypes: {
-    onOpenQueryClick: {
-      action: 'open-query-clicked',
+    onOpenQueryFileClick: {
+      action: 'open-query-file-clicked',
       table: {
         disable: true,
       },
     },
-    onViewQueryClick: {
-      action: 'view-query-clicked',
+    onViewQueryTextClick: {
+      action: 'view-query-text-clicked',
       table: {
         disable: true,
       },
@@ -58,17 +58,17 @@ export const InProgress = Template.bind({});
 InProgress.args = {
   queryName: 'Query name',
   queryFileName: 'example.ql',
-  status: VariantAnalysisStatus.InProgress,
+  variantAnalysisStatus: VariantAnalysisStatus.InProgress,
 };
 
 export const Succeeded = Template.bind({});
 Succeeded.args = {
   ...InProgress.args,
-  status: VariantAnalysisStatus.Succeeded,
+  variantAnalysisStatus: VariantAnalysisStatus.Succeeded,
 };
 
 export const Failed = Template.bind({});
 Failed.args = {
   ...InProgress.args,
-  status: VariantAnalysisStatus.Failed,
+  variantAnalysisStatus: VariantAnalysisStatus.Failed,
 };

extensions/ql-vscode/src/view/variant-analysis/LinkIconButton.tsx

@@ -2,7 +2,7 @@ import { VSCodeLink } from '@vscode/webview-ui-toolkit/react';
 import styled from 'styled-components';
 
 export const LinkIconButton = styled(VSCodeLink)`
-  svg {
-    margin-right: 0.3em;
+  .codicon {
+    vertical-align: text-bottom;
   }
 `;

extensions/ql-vscode/src/view/variant-analysis/VariantAnalysis.tsx

@@ -9,12 +9,12 @@ export function VariantAnalysis(): JSX.Element {
       <VariantAnalysisHeader
         queryName="Example query"
         queryFileName="example.ql"
-        status={VariantAnalysisStatus.InProgress}
-        onOpenQueryClick={() => void 0}
-        onViewQueryClick={() => void 0}
-        onStopQueryClick={() => void 0}
-        onCopyRepositoryListClick={() => void 0}
-        onExportResultsClick={() => void 0}
+        variantAnalysisStatus={VariantAnalysisStatus.InProgress}
+        onOpenQueryFileClick={() => console.log('Open query')}
+        onViewQueryTextClick={() => console.log('View query')}
+        onStopQueryClick={() => console.log('Stop query')}
+        onCopyRepositoryListClick={() => console.log('Copy repository list')}
+        onExportResultsClick={() => console.log('Export results')}
       />
     </VariantAnalysisContainer>
   );

extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisHeader.tsx

@@ -1,18 +1,17 @@
 import * as React from 'react';
+import styled from 'styled-components';
 import { VariantAnalysisStatus } from '../../remote-queries/shared/variant-analysis';
 import ViewTitle from '../remote-queries/ViewTitle';
-import { CodeSquareIcon, FileCodeIcon } from '@primer/octicons-react';
 import { LinkIconButton } from './LinkIconButton';
-import styled from 'styled-components';
-import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
+import { VariantAnalysisHeaderActions } from './VariantAnalysisHeaderActions';
 
 export type VariantAnalysisHeaderProps = {
   queryName: string;
   queryFileName: string;
-  status: VariantAnalysisStatus;
+  variantAnalysisStatus: VariantAnalysisStatus;
 
-  onOpenQueryClick: () => void;
-  onViewQueryClick: () => void;
+  onOpenQueryFileClick: () => void;
+  onViewQueryTextClick: () => void;
 
   onStopQueryClick: () => void;
 
@@ -25,67 +24,46 @@ const Container = styled.div`
   align-items: center;
 `;
 
-const TopRow = styled.div`
+const QueryDetails = styled.div`
   max-width: 100%;
 `;
 
-const TopLinkButtons = styled.div`
-  display: flex;
-  gap: 1em;
-`;
-
-const BottomButtons = styled.div`
-  margin-left: auto;
+const QueryActions = styled.div`
   display: flex;
   gap: 1em;
 `;
 
-const Button = styled(VSCodeButton)`
-  white-space: nowrap;
-`;
-
 export const VariantAnalysisHeader = ({
   queryName,
   queryFileName,
-  status,
-  onOpenQueryClick,
-  onViewQueryClick,
+  variantAnalysisStatus,
+  onOpenQueryFileClick,
+  onViewQueryTextClick,
   onStopQueryClick,
   onCopyRepositoryListClick,
   onExportResultsClick
 }: VariantAnalysisHeaderProps) => {
   return (
     <Container>
-      <TopRow>
+      <QueryDetails>
         <ViewTitle>{queryName}</ViewTitle>
-        <TopLinkButtons>
-          <LinkIconButton onClick={onOpenQueryClick}>
-            <FileCodeIcon size={16} />
+        <QueryActions>
+          <LinkIconButton onClick={onOpenQueryFileClick}>
+            <span slot="start" className="codicon codicon-file-code"></span>
             {queryFileName}
           </LinkIconButton>
-          <LinkIconButton onClick={onViewQueryClick}>
-            <CodeSquareIcon size={16} />
+          <LinkIconButton onClick={onViewQueryTextClick}>
+            <span slot="start" className="codicon codicon-code"></span>
             View query
           </LinkIconButton>
-        </TopLinkButtons>
-      </TopRow>
-      <BottomButtons>
-        {status === VariantAnalysisStatus.InProgress && (
-          <VSCodeButton appearance="secondary" onClick={onStopQueryClick}>
-            Stop query
-          </VSCodeButton>
-        )}
-        {status === VariantAnalysisStatus.Succeeded && (
-          <>
-            <Button appearance="secondary" onClick={onCopyRepositoryListClick}>
-              Copy repository list
-            </Button>
-            <Button appearance="primary" onClick={onExportResultsClick}>
-              Export results
-            </Button>
-          </>
-        )}
-      </BottomButtons>
+        </QueryActions>
+      </QueryDetails>
+      <VariantAnalysisHeaderActions
+        variantAnalysisStatus={variantAnalysisStatus}
+        onStopQueryClick={onStopQueryClick}
+        onCopyRepositoryListClick={onCopyRepositoryListClick}
+        onExportResultsClick={onExportResultsClick}
+      />
     </Container>
   );
 };

extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisHeaderActions.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
+import { VariantAnalysisStatus } from '../../remote-queries/shared/variant-analysis';
+
+export type Props = {
+  variantAnalysisStatus: VariantAnalysisStatus;
+
+  onStopQueryClick: () => void;
+
+  onCopyRepositoryListClick: () => void;
+  onExportResultsClick: () => void;
+};
+
+const Container = styled.div`
+  margin-left: auto;
+  display: flex;
+  gap: 1em;
+`;
+
+const Button = styled(VSCodeButton)`
+  white-space: nowrap;
+`;
+
+export const VariantAnalysisHeaderActions = ({
+  variantAnalysisStatus,
+  onStopQueryClick,
+  onCopyRepositoryListClick,
+  onExportResultsClick
+}: Props) => {
+  return (
+    <Container>
+      {variantAnalysisStatus === VariantAnalysisStatus.InProgress && (
+        <VSCodeButton appearance="secondary" onClick={onStopQueryClick}>
+          Stop query
+        </VSCodeButton>
+      )}
+      {variantAnalysisStatus === VariantAnalysisStatus.Succeeded && (
+        <>
+          <Button appearance="secondary" onClick={onCopyRepositoryListClick}>
+            Copy repository list
+          </Button>
+          <Button appearance="primary" onClick={onExportResultsClick}>
+            Export results
+          </Button>
+        </>
+      )}
+    </Container>
+  );
+};

extensions/ql-vscode/src/view/variant-analysis/__tests__/VariantAnalysisHeader.spec.tsx

@@ -5,15 +5,15 @@ import { VariantAnalysisStatus } from '../../../remote-queries/shared/variant-an
 import { userEvent } from '@storybook/testing-library';
 
 describe(VariantAnalysisHeader.name, () => {
-  const onOpenQueryClick = jest.fn();
-  const onViewQueryClick = jest.fn();
+  const onOpenQueryFileClick = jest.fn();
+  const onViewQueryTextClick = jest.fn();
   const onStopQueryClick = jest.fn();
   const onCopyRepositoryListClick = jest.fn();
   const onExportResultsClick = jest.fn();
 
   afterEach(() => {
-    onOpenQueryClick.mockReset();
-    onViewQueryClick.mockReset();
+    onOpenQueryFileClick.mockReset();
+    onViewQueryTextClick.mockReset();
     onStopQueryClick.mockReset();
     onCopyRepositoryListClick.mockReset();
     onExportResultsClick.mockReset();
@@ -24,9 +24,9 @@ describe(VariantAnalysisHeader.name, () => {
       <VariantAnalysisHeader
         queryName="Query name"
         queryFileName="example.ql"
-        status={VariantAnalysisStatus.InProgress}
-        onOpenQueryClick={onOpenQueryClick}
-        onViewQueryClick={onViewQueryClick}
+        variantAnalysisStatus={VariantAnalysisStatus.InProgress}
+        onOpenQueryFileClick={onOpenQueryFileClick}
+        onViewQueryTextClick={onViewQueryTextClick}
         onStopQueryClick={onStopQueryClick}
         onCopyRepositoryListClick={onCopyRepositoryListClick}
         onExportResultsClick={onExportResultsClick}
@@ -44,39 +44,39 @@ describe(VariantAnalysisHeader.name, () => {
     render();
 
     userEvent.click(screen.getByText('example.ql'));
-    expect(onOpenQueryClick).toHaveBeenCalledTimes(1);
+    expect(onOpenQueryFileClick).toHaveBeenCalledTimes(1);
   });
 
   it('renders a view query button', () => {
     render();
 
     userEvent.click(screen.getByText('View query'));
-    expect(onViewQueryClick).toHaveBeenCalledTimes(1);
+    expect(onViewQueryTextClick).toHaveBeenCalledTimes(1);
   });
 
   it('renders the stop query button when in progress', () => {
-    render({ status: VariantAnalysisStatus.InProgress });
+    render({ variantAnalysisStatus: VariantAnalysisStatus.InProgress });
 
     userEvent.click(screen.getByText('Stop query'));
     expect(onStopQueryClick).toHaveBeenCalledTimes(1);
   });
 
   it('renders the copy repository list button when succeeded', () => {
-    render({ status: VariantAnalysisStatus.Succeeded });
+    render({ variantAnalysisStatus: VariantAnalysisStatus.Succeeded });
 
     userEvent.click(screen.getByText('Copy repository list'));
     expect(onCopyRepositoryListClick).toHaveBeenCalledTimes(1);
   });
 
   it('renders the export results button when succeeded', () => {
-    render({ status: VariantAnalysisStatus.Succeeded });
+    render({ variantAnalysisStatus: VariantAnalysisStatus.Succeeded });
 
     userEvent.click(screen.getByText('Export results'));
     expect(onExportResultsClick).toHaveBeenCalledTimes(1);
   });
 
   it('does not render any buttons when failed', () => {
-    const { container } = render({ status: VariantAnalysisStatus.Failed });
+    const { container } = render({ variantAnalysisStatus: VariantAnalysisStatus.Failed });
 
     expect(container.querySelectorAll('vscode-button').length).toEqual(0);
   });