Add variant analysis header

Author: koesie10

extensions/ql-vscode/src/remote-queries/shared/variant-analysis.ts

@@ -0,0 +1,5 @@
+export enum VariantAnalysisStatus {
+  InProgress = 'inProgress',
+  Succeeded = 'succeeded',
+  Failed = 'failed',
+}

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

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { VariantAnalysisContainer } from '../../view/variant-analysis/VariantAnalysisContainer';
+import { VariantAnalysisHeader } from '../../view/variant-analysis/VariantAnalysisHeader';
+import { VariantAnalysisStatus } from '../../remote-queries/shared/variant-analysis';
+
+export default {
+  title: 'Variant Analysis Header',
+  component: VariantAnalysisHeader,
+  decorators: [
+    (Story) => (
+      <VariantAnalysisContainer>
+        <Story />
+      </VariantAnalysisContainer>
+    )
+  ],
+  argTypes: {
+    onOpenQueryClick: {
+      action: 'open-query-clicked',
+      table: {
+        disable: true,
+      },
+    },
+    onViewQueryClick: {
+      action: 'view-query-clicked',
+      table: {
+        disable: true,
+      },
+    },
+    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 VariantAnalysisHeader>;
+
+const Template: ComponentStory<typeof VariantAnalysisHeader> = (args) => (
+  <VariantAnalysisHeader {...args} />
+);
+
+export const InProgress = Template.bind({});
+InProgress.args = {
+  queryName: 'Query name',
+  queryFileName: 'example.ql',
+  status: VariantAnalysisStatus.InProgress,
+};
+
+export const Succeeded = Template.bind({});
+Succeeded.args = {
+  ...InProgress.args,
+  status: VariantAnalysisStatus.Succeeded,
+};
+
+export const Failed = Template.bind({});
+Failed.args = {
+  ...InProgress.args,
+  status: VariantAnalysisStatus.Failed,
+};

extensions/ql-vscode/src/view/remote-queries/ViewTitle.tsx

@@ -1,9 +1,13 @@
 import styled from 'styled-components';
 
 const ViewTitle = styled.h1`
-  font-size: large;
+  font-size: 2em;
   margin-bottom: 0.5em;
   font-weight: 500;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 export default ViewTitle;

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

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+export const LinkButton = styled.button`
+  /* Remove button styling */
+  background: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+
+  text-decoration: none;
+  padding-right: 1em;
+  color: var(--vscode-textLink-foreground);
+  border: 1px solid transparent;
+
+  &:hover, &:active {
+    color: var(--vscode-textLink-activeForeground);
+    text-decoration: underline;
+  }
+
+  &:focus,
+  &:focus-visible {
+    border: 1px solid var(--vscode-focusBorder);
+  }
+`;

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

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { LinkButton } from './LinkButton';
+
+export const LinkIconButton = styled(LinkButton)`
+  svg {
+    margin-right: 0.3em;
+  }
+`;

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

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const VariantAnalysisContainer = styled.div`
+  max-width: 55em;
+`;

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

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { VariantAnalysisStatus } from '../../remote-queries/shared/variant-analysis';
+import ViewTitle from '../remote-queries/ViewTitle';
+import { CodeSquareIcon, FileCodeIcon } from '@primer/octicons-react';
+import { LinkIconButton } from './LinkIconButton';
+import styled from 'styled-components';
+import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
+
+type Props = {
+  queryName: string;
+  queryFileName: string;
+  status: VariantAnalysisStatus;
+
+  onOpenQueryClick: () => void;
+  onViewQueryClick: () => void;
+
+  onStopQueryClick: () => void;
+
+  onCopyRepositoryListClick: () => void;
+  onExportResultsClick: () => void;
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const HeaderWrapper = styled.div`
+  max-width: 100%;
+`;
+
+const ActionsWrapper = styled.div`
+  margin-left: auto;
+  display: flex;
+  gap: 1em;
+`;
+
+const Button = styled(VSCodeButton)`
+  white-space: nowrap;
+`;
+
+export const VariantAnalysisHeader = ({
+  queryName,
+  queryFileName,
+  status,
+  onOpenQueryClick,
+  onViewQueryClick,
+  onStopQueryClick,
+  onCopyRepositoryListClick,
+  onExportResultsClick
+}: Props) => {
+  return (
+    <Wrapper>
+      <HeaderWrapper>
+        <ViewTitle>{queryName}</ViewTitle>
+        <LinkIconButton onClick={onOpenQueryClick}>
+          <FileCodeIcon size={16} />
+          {queryFileName}
+        </LinkIconButton>
+        <LinkIconButton onClick={onViewQueryClick}>
+          <CodeSquareIcon size={16} />
+          View query
+        </LinkIconButton>
+      </HeaderWrapper>
+      <ActionsWrapper>
+        {status === VariantAnalysisStatus.InProgress && (
+          <VSCodeButton appearance="secondary" onClick={onStopQueryClick}>
+            Stop query
+          </VSCodeButton>
+        )}
+        {status === VariantAnalysisStatus.Succeeded && (
+          <>
+            <Button appearance="secondary" onClick={onCopyRepositoryListClick}>
+              Copy repository list
+            </Button>
+            <Button appearance="primary" onClick={onExportResultsClick}>
+              Export results
+            </Button>
+          </>
+        )}
+      </ActionsWrapper>
+    </Wrapper>
+  );
+};