diff --git a/extensions/ql-vscode/src/stories/variant-analysis/VariantAnalysisLoading.stories.tsx b/extensions/ql-vscode/src/stories/variant-analysis/VariantAnalysisLoading.stories.tsx
new file mode 100644
index 00000000000..987129be8b3
--- /dev/null
+++ b/extensions/ql-vscode/src/stories/variant-analysis/VariantAnalysisLoading.stories.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { VariantAnalysisContainer } from '../../view/variant-analysis/VariantAnalysisContainer';
+import { VariantAnalysisLoading as VariantAnalysisLoadingComponent } from '../../view/variant-analysis/VariantAnalysisLoading';
+
+export default {
+ title: 'Variant Analysis/Variant Analysis Loading',
+ component: VariantAnalysisLoadingComponent,
+ decorators: [
+ (Story) => (
+
+
+
+ )
+ ],
+ argTypes: {}
+} as ComponentMeta;
+
+const Template: ComponentStory = () => (
+
+);
+
+export const VariantAnalysisLoading = Template.bind({});
diff --git a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysis.tsx b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysis.tsx
index 80c5e973c05..db20787c7a0 100644
--- a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysis.tsx
+++ b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysis.tsx
@@ -8,6 +8,7 @@ import {
} from '../../remote-queries/shared/variant-analysis';
import { VariantAnalysisContainer } from './VariantAnalysisContainer';
import { VariantAnalysisHeader } from './VariantAnalysisHeader';
+import { VariantAnalysisLoading } from './VariantAnalysisLoading';
const variantAnalysis: VariantAnalysisDomainModel = {
id: 1,
@@ -19,6 +20,7 @@ const variantAnalysis: VariantAnalysisDomainModel = {
},
databases: {},
status: VariantAnalysisStatus.InProgress,
+ actionsWorkflowRunId: 123,
scannedRepos: [
{
repository: {
@@ -103,18 +105,28 @@ const variantAnalysis: VariantAnalysisDomainModel = {
]
};
+function getContainerContents(variantAnalysis: VariantAnalysisDomainModel) {
+ if (variantAnalysis.actionsWorkflowRunId === undefined) {
+ return ;
+ }
+
+ return (
+ 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')}
+ onViewLogsClick={() => console.log('View logs')}
+ />
+ );
+}
+
export function VariantAnalysis(): JSX.Element {
return (
- 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')}
- onViewLogsClick={() => console.log('View logs')}
- />
+ {getContainerContents(variantAnalysis)}
);
}
diff --git a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisLoading.tsx b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisLoading.tsx
new file mode 100644
index 00000000000..df240f1c387
--- /dev/null
+++ b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisLoading.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1em;
+ padding: 1em;
+`;
+
+const FirstRow = styled.div`
+ font-size: x-large;
+ font-weight: 600;
+`;
+
+const SecondRow = styled.div`
+ color: var(--vscode-descriptionForeground);
+`;
+
+export const VariantAnalysisLoading = () => {
+ return (
+
+ We are getting everything ready
+ Results will appear here shortly
+
+ );
+};
diff --git a/extensions/ql-vscode/src/view/variant-analysis/__tests__/VariantAnalysisLoading.spec.tsx b/extensions/ql-vscode/src/view/variant-analysis/__tests__/VariantAnalysisLoading.spec.tsx
new file mode 100644
index 00000000000..0eca8836f33
--- /dev/null
+++ b/extensions/ql-vscode/src/view/variant-analysis/__tests__/VariantAnalysisLoading.spec.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { render as reactRender, screen } from '@testing-library/react';
+import { VariantAnalysisLoading } from '../VariantAnalysisLoading';
+
+describe(VariantAnalysisLoading.name, () => {
+ const render = () =>
+ reactRender();
+
+ it('renders loading text', async () => {
+ render();
+
+ expect(screen.getByText('We are getting everything ready')).toBeInTheDocument();
+ expect(screen.getByText('Results will appear here shortly')).toBeInTheDocument();
+ });
+});