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(); + }); +});