Merge branch 'koesie10/variant-analysis-header' into koesie10/variant-analysis-stats

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

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { VariantAnalysisContainer } from '../../view/variant-analysis/VariantAnalysisContainer';
+import { QueryDetails as QueryDetailsComponent } from '../../view/variant-analysis/QueryDetails';
+
+export default {
+  title: 'Variant Analysis/Query Details',
+  component: QueryDetailsComponent,
+  decorators: [
+    (Story) => (
+      <VariantAnalysisContainer>
+        <Story />
+      </VariantAnalysisContainer>
+    )
+  ],
+  argTypes: {
+    onOpenQueryFileClick: {
+      action: 'open-query-file-clicked',
+      table: {
+        disable: true,
+      },
+    },
+    onViewQueryTextClick: {
+      action: 'view-query-text-clicked',
+      table: {
+        disable: true,
+      },
+    },
+  }
+} as ComponentMeta<typeof QueryDetailsComponent>;
+
+const Template: ComponentStory<typeof QueryDetailsComponent> = (args) => (
+  <QueryDetailsComponent {...args} />
+);
+
+export const QueryDetails = Template.bind({});
+QueryDetails.args = {
+  queryName: 'Query name',
+  queryFileName: 'example.ql',
+};

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

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { VariantAnalysisContainer } from '../../view/variant-analysis/VariantAnalysisContainer';
+import { VariantAnalysisStatus } from '../../remote-queries/shared/variant-analysis';
+import { VariantAnalysisActions } from '../../view/variant-analysis/VariantAnalysisActions';
+
+export default {
+  title: 'Variant Analysis/Variant Analysis Actions',
+  component: VariantAnalysisActions,
+  decorators: [
+    (Story) => (
+      <VariantAnalysisContainer>
+        <Story />
+      </VariantAnalysisContainer>
+    )
+  ],
+  argTypes: {
+    onStopQueryClick: {
+      action: 'stop-query-clicked',
+      table: {
+        disable: true,
+      },
+    },
+    onCopyRepositoryListClick: {
+      action: 'copy-repository-list-clicked',
+      table: {
+        disable: true,
+      },
+    },
+    onExportResultsClick: {
+      action: 'export-results-clicked',
+      table: {
+        disable: true,
+      },
+    },
+  }
+} as ComponentMeta<typeof VariantAnalysisActions>;
+
+const Template: ComponentStory<typeof VariantAnalysisActions> = (args) => (
+  <VariantAnalysisActions {...args} />
+);
+
+export const InProgress = Template.bind({});
+InProgress.args = {
+  variantAnalysisStatus: VariantAnalysisStatus.InProgress,
+};
+
+export const Succeeded = Template.bind({});
+Succeeded.args = {
+  ...InProgress.args,
+  variantAnalysisStatus: VariantAnalysisStatus.Succeeded,
+};
+
+export const Failed = Template.bind({});
+Failed.args = {
+  ...InProgress.args,
+  variantAnalysisStatus: VariantAnalysisStatus.Failed,
+};

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import ViewTitle from '../remote-queries/ViewTitle';
 import { LinkIconButton } from './LinkIconButton';
 
-type Props = {
+export type QueryDetailsProps = {
   queryName: string;
   queryFileName: string;
 
@@ -25,7 +25,7 @@ export const QueryDetails = ({
   queryFileName,
   onOpenQueryFileClick,
   onViewQueryTextClick,
-}: Props) => {
+}: QueryDetailsProps) => {
   return (
     <Container>
       <ViewTitle>{queryName}</ViewTitle>

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

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { render as reactRender, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryDetails, QueryDetailsProps } from '../QueryDetails';
+
+describe(QueryDetails.name, () => {
+  const onOpenQueryFileClick = jest.fn();
+  const onViewQueryTextClick = jest.fn();
+  const onStopQueryClick = jest.fn();
+  const onCopyRepositoryListClick = jest.fn();
+  const onExportResultsClick = jest.fn();
+
+  afterEach(() => {
+    onOpenQueryFileClick.mockReset();
+    onViewQueryTextClick.mockReset();
+    onStopQueryClick.mockReset();
+    onCopyRepositoryListClick.mockReset();
+    onExportResultsClick.mockReset();
+  });
+
+  const render = (props: Partial<QueryDetailsProps> = {}) =>
+    reactRender(
+      <QueryDetails
+        queryName="Query name"
+        queryFileName="example.ql"
+        onOpenQueryFileClick={onOpenQueryFileClick}
+        onViewQueryTextClick={onViewQueryTextClick}
+        {...props}
+      />
+    );
+
+  it('renders correctly', () => {
+    render();
+
+    expect(screen.getByText('Query name')).toBeInTheDocument();
+  });
+
+  it('renders the query file name as a button', async () => {
+    render();
+
+    await userEvent.click(screen.getByText('example.ql'));
+    expect(onOpenQueryFileClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders a view query button', async () => {
+    render();
+
+    await userEvent.click(screen.getByText('View query'));
+    expect(onViewQueryTextClick).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -1,97 +0,0 @@
-import * as React from 'react';
-import { VariantAnalysisHeader, VariantAnalysisHeaderProps } from '../VariantAnalysisHeader';
-import { render as reactRender, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { VariantAnalysisStatus } from '../../../remote-queries/shared/variant-analysis';
-
-describe(VariantAnalysisHeader.name, () => {
-  const onOpenQueryFileClick = jest.fn();
-  const onViewQueryTextClick = jest.fn();
-  const onStopQueryClick = jest.fn();
-  const onCopyRepositoryListClick = jest.fn();
-  const onExportResultsClick = jest.fn();
-  const onViewLogsClick = jest.fn();
-
-  afterEach(() => {
-    onOpenQueryFileClick.mockReset();
-    onViewQueryTextClick.mockReset();
-    onStopQueryClick.mockReset();
-    onCopyRepositoryListClick.mockReset();
-    onExportResultsClick.mockReset();
-    onViewLogsClick.mockReset();
-  });
-
-  const render = (props: Partial<VariantAnalysisHeaderProps> = {}) =>
-    reactRender(
-      <VariantAnalysisHeader
-        queryName="Query name"
-        queryFileName="example.ql"
-        variantAnalysisStatus={VariantAnalysisStatus.InProgress}
-        totalRepositoryCount={10}
-        onOpenQueryFileClick={onOpenQueryFileClick}
-        onViewQueryTextClick={onViewQueryTextClick}
-        onStopQueryClick={onStopQueryClick}
-        onCopyRepositoryListClick={onCopyRepositoryListClick}
-        onExportResultsClick={onExportResultsClick}
-        onViewLogsClick={onViewLogsClick}
-        {...props}
-      />
-    );
-
-  it('renders correctly', () => {
-    render();
-
-    expect(screen.getByText('Query name')).toBeInTheDocument();
-  });
-
-  it('renders the query file name as a button', async () => {
-    render();
-
-    await userEvent.click(screen.getByText('example.ql'));
-    expect(onOpenQueryFileClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('renders a view query button', async () => {
-    render();
-
-    await userEvent.click(screen.getByText('View query'));
-    expect(onViewQueryTextClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('renders the stop query button when in progress', async () => {
-    render({ variantAnalysisStatus: VariantAnalysisStatus.InProgress });
-
-    await userEvent.click(screen.getByText('Stop query'));
-    expect(onStopQueryClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('renders the copy repository list button when succeeded', async () => {
-    render({ variantAnalysisStatus: VariantAnalysisStatus.Succeeded });
-
-    await userEvent.click(screen.getByText('Copy repository list'));
-    expect(onCopyRepositoryListClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('renders the export results button when succeeded', async () => {
-    render({ variantAnalysisStatus: VariantAnalysisStatus.Succeeded });
-
-    await userEvent.click(screen.getByText('Export results'));
-    expect(onExportResultsClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not render any buttons when failed', async () => {
-    const { container } = render({ variantAnalysisStatus: VariantAnalysisStatus.Failed });
-
-    expect(container.querySelectorAll('vscode-button').length).toEqual(0);
-  });
-
-  it('renders the view logs link when succeeded', async () => {
-    render({
-      variantAnalysisStatus: VariantAnalysisStatus.Succeeded,
-      completedAt: new Date()
-    });
-
-    await userEvent.click(screen.getByText('View logs'));
-    expect(onViewLogsClick).toHaveBeenCalledTimes(1);
-  });
-});