Add stories for individual variant analysis header components

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,
+};