Merge pull request #1541 from github/robertbrignull/loading-component

Add loading component

Author: robertbrignull

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) => (
+      <VariantAnalysisContainer>
+        <Story />
+      </VariantAnalysisContainer>
+    )
+  ],
+  argTypes: {}
+} as ComponentMeta<typeof VariantAnalysisLoadingComponent>;
+
+const Template: ComponentStory<typeof VariantAnalysisLoadingComponent> = () => (
+  <VariantAnalysisLoadingComponent />
+);
+
+export const VariantAnalysisLoading = Template.bind({});

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 <VariantAnalysisLoading />;
+  }
+
+  return (
+    <VariantAnalysisHeader
+      variantAnalysis={variantAnalysis}
+      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')}
+      onViewLogsClick={() => console.log('View logs')}
+    />
+  );
+}
+
 export function VariantAnalysis(): JSX.Element {
   return (
     <VariantAnalysisContainer>
-      <VariantAnalysisHeader
-        variantAnalysis={variantAnalysis}
-        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')}
-        onViewLogsClick={() => console.log('View logs')}
-      />
+      {getContainerContents(variantAnalysis)}
     </VariantAnalysisContainer>
   );
 }

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 (
+    <Container>
+      <FirstRow>We are getting everything ready</FirstRow>
+      <SecondRow>Results will appear here shortly</SecondRow>
+    </Container>
+  );
+};

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(<VariantAnalysisLoading />);
+
+  it('renders loading text', async () => {
+    render();
+
+    expect(screen.getByText('We are getting everything ready')).toBeInTheDocument();
+    expect(screen.getByText('Results will appear here shortly')).toBeInTheDocument();
+  });
+});