Show download percentage in UI

Author: robertbrignull

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

@@ -15,7 +15,7 @@ import { createMockRepositoryWithMetadata } from "../../../test/factories/remote
 
 import * as analysesResults from "../remote-queries/data/analysesResultsMessage.json";
 import * as rawResults from "../remote-queries/data/rawResults.json";
-import { RepoRow } from "../../view/variant-analysis/RepoRow";
+import { RepoRow, RepoRowProps } from "../../view/variant-analysis/RepoRow";
 
 export default {
   title: "Variant Analysis/Repo Row",
@@ -29,7 +29,7 @@ export default {
   ],
 } as ComponentMeta<typeof RepoRow>;
 
-const Template: ComponentStory<typeof RepoRow> = (args) => (
+const Template: ComponentStory<typeof RepoRow> = (args: RepoRowProps) => (
   <RepoRow {...args} />
 );
 
@@ -77,23 +77,44 @@ SucceededDownloading.args = {
   ...Pending.args,
   status: VariantAnalysisRepoStatus.Succeeded,
   resultCount: 198,
-  downloadStatus: VariantAnalysisScannedRepositoryDownloadStatus.InProgress,
+  downloadState: {
+    repositoryId: 63537249,
+    downloadStatus: VariantAnalysisScannedRepositoryDownloadStatus.InProgress,
+  },
+};
+
+export const SucceededDownloadingWithPercentage = Template.bind({});
+SucceededDownloadingWithPercentage.args = {
+  ...Pending.args,
+  status: VariantAnalysisRepoStatus.Succeeded,
+  resultCount: 198,
+  downloadState: {
+    repositoryId: 63537249,
+    downloadStatus: VariantAnalysisScannedRepositoryDownloadStatus.InProgress,
+    downloadPercentage: 42,
+  },
 };
 
 export const SucceededSuccessfulDownload = Template.bind({});
 SucceededSuccessfulDownload.args = {
   ...Pending.args,
   status: VariantAnalysisRepoStatus.Succeeded,
   resultCount: 198,
-  downloadStatus: VariantAnalysisScannedRepositoryDownloadStatus.Succeeded,
+  downloadState: {
+    repositoryId: 63537249,
+    downloadStatus: VariantAnalysisScannedRepositoryDownloadStatus.Succeeded,
+  },
 };
 
 export const SucceededFailedDownload = Template.bind({});
 SucceededFailedDownload.args = {
   ...Pending.args,
   status: VariantAnalysisRepoStatus.Succeeded,
   resultCount: 198,
-  downloadStatus: VariantAnalysisScannedRepositoryDownloadStatus.Failed,
+  downloadState: {
+    repositoryId: 63537249,
+    downloadStatus: VariantAnalysisScannedRepositoryDownloadStatus.Failed,
+  },
 };
 
 export const InterpretedResults = Template.bind({});

extensions/ql-vscode/src/view/common/icon/Codicon.tsx

@@ -17,6 +17,7 @@ export const Codicon = ({ name, label, className, slot }: Props) => (
   <CodiconIcon
     role="img"
     aria-label={label}
+    title={label}
     className={classNames("codicon", `codicon-${name}`, className)}
     slot={slot}
   />

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

@@ -6,6 +6,7 @@ import {
   isCompletedAnalysisRepoStatus,
   VariantAnalysisRepoStatus,
   VariantAnalysisScannedRepositoryDownloadStatus,
+  VariantAnalysisScannedRepositoryState,
 } from "../../remote-queries/shared/variant-analysis";
 import { formatDecimal } from "../../pure/number";
 import {
@@ -91,7 +92,7 @@ export type RepoRowProps = {
   repository: Partial<RepositoryWithMetadata> &
     Pick<RepositoryWithMetadata, "fullName">;
   status?: VariantAnalysisRepoStatus;
-  downloadStatus?: VariantAnalysisScannedRepositoryDownloadStatus;
+  downloadState?: VariantAnalysisScannedRepositoryState;
   resultCount?: number;
 
   interpretedResults?: AnalysisAlert[];
@@ -163,7 +164,7 @@ const filterRepoRowExpandedTelemetry = (v: boolean) => v;
 export const RepoRow = ({
   repository,
   status,
-  downloadStatus,
+  downloadState,
   resultCount,
   interpretedResults,
   rawResults,
@@ -185,7 +186,7 @@ export const RepoRow = ({
     if (
       resultsLoaded ||
       status !== VariantAnalysisRepoStatus.Succeeded ||
-      downloadStatus !==
+      downloadState?.downloadStatus !==
         VariantAnalysisScannedRepositoryDownloadStatus.Succeeded
     ) {
       setExpanded((oldIsExpanded) => !oldIsExpanded);
@@ -203,7 +204,7 @@ export const RepoRow = ({
     resultsLoaded,
     repository.fullName,
     status,
-    downloadStatus,
+    downloadState,
     setExpanded,
   ]);
 
@@ -234,10 +235,11 @@ export const RepoRow = ({
     [onSelectedChange, repository],
   );
 
-  const disabled = !canExpand(status, downloadStatus) || resultsLoading;
+  const disabled =
+    !canExpand(status, downloadState?.downloadStatus) || resultsLoading;
   const expandableContentLoaded = isExpandableContentLoaded(
     status,
-    downloadStatus,
+    downloadState?.downloadStatus,
     resultsLoaded,
   );
 
@@ -252,7 +254,9 @@ export const RepoRow = ({
           onChange={onChangeCheckbox}
           onClick={onClickCheckbox}
           checked={selected}
-          disabled={!repository.id || !canSelect(status, downloadStatus)}
+          disabled={
+            !repository.id || !canSelect(status, downloadState?.downloadStatus)
+          }
         />
         {isExpanded && (
           <ExpandCollapseCodicon name="chevron-down" label="Collapse" />
@@ -278,11 +282,17 @@ export const RepoRow = ({
           )}
           {!status && <WarningIcon />}
         </span>
-        {downloadStatus ===
+        {downloadState?.downloadStatus ===
           VariantAnalysisScannedRepositoryDownloadStatus.InProgress && (
-          <LoadingIcon label="Downloading" />
+          <LoadingIcon
+            label={
+              downloadState.downloadPercentage !== undefined
+                ? `Downloading: ${downloadState.downloadPercentage}%`
+                : "Downloading"
+            }
+          />
         )}
-        {downloadStatus ===
+        {downloadState?.downloadStatus ===
           VariantAnalysisScannedRepositoryDownloadStatus.Failed && (
           <WarningIcon label="Failed to download the results" />
         )}
@@ -296,7 +306,7 @@ export const RepoRow = ({
       {isExpanded && expandableContentLoaded && (
         <AnalyzedRepoItemContent
           status={status}
-          downloadStatus={downloadStatus}
+          downloadStatus={downloadState?.downloadStatus}
           interpretedResults={interpretedResults}
           rawResults={rawResults}
         />

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

@@ -89,7 +89,7 @@ export const VariantAnalysisAnalyzedRepos = ({
             key={repository.repository.id}
             repository={repository.repository}
             status={repository.analysisStatus}
-            downloadStatus={state?.downloadStatus}
+            downloadState={state}
             resultCount={repository.resultCount}
             interpretedResults={results?.interpretedResults}
             rawResults={results?.rawResults}

extensions/ql-vscode/src/view/variant-analysis/__tests__/RepoRow.spec.tsx

@@ -87,7 +87,10 @@ describe(RepoRow.name, () => {
     render({
       status: VariantAnalysisRepoStatus.Succeeded,
       resultCount: 178,
-      downloadStatus: VariantAnalysisScannedRepositoryDownloadStatus.Pending,
+      downloadState: {
+        repositoryId: 1,
+        downloadStatus: VariantAnalysisScannedRepositoryDownloadStatus.Pending,
+      },
     });
 
     expect(
@@ -101,7 +104,11 @@ describe(RepoRow.name, () => {
     render({
       status: VariantAnalysisRepoStatus.Succeeded,
       resultCount: 178,
-      downloadStatus: VariantAnalysisScannedRepositoryDownloadStatus.InProgress,
+      downloadState: {
+        repositoryId: 1,
+        downloadStatus:
+          VariantAnalysisScannedRepositoryDownloadStatus.InProgress,
+      },
     });
 
     expect(
@@ -115,7 +122,11 @@ describe(RepoRow.name, () => {
     render({
       status: VariantAnalysisRepoStatus.Succeeded,
       resultCount: 178,
-      downloadStatus: VariantAnalysisScannedRepositoryDownloadStatus.Succeeded,
+      downloadState: {
+        repositoryId: 1,
+        downloadStatus:
+          VariantAnalysisScannedRepositoryDownloadStatus.Succeeded,
+      },
     });
 
     expect(
@@ -129,7 +140,10 @@ describe(RepoRow.name, () => {
     render({
       status: VariantAnalysisRepoStatus.Succeeded,
       resultCount: 178,
-      downloadStatus: VariantAnalysisScannedRepositoryDownloadStatus.Failed,
+      downloadState: {
+        repositoryId: 1,
+        downloadStatus: VariantAnalysisScannedRepositoryDownloadStatus.Failed,
+      },
     });
 
     expect(
@@ -320,7 +334,11 @@ describe(RepoRow.name, () => {
   it("can expand the repo item when succeeded and loaded", async () => {
     render({
       status: VariantAnalysisRepoStatus.Succeeded,
-      downloadStatus: VariantAnalysisScannedRepositoryDownloadStatus.Succeeded,
+      downloadState: {
+        repositoryId: 1,
+        downloadStatus:
+          VariantAnalysisScannedRepositoryDownloadStatus.Succeeded,
+      },
       interpretedResults: [],
     });
 
@@ -340,7 +358,11 @@ describe(RepoRow.name, () => {
   it("can expand the repo item when succeeded and not loaded", async () => {
     const { rerender } = render({
       status: VariantAnalysisRepoStatus.Succeeded,
-      downloadStatus: VariantAnalysisScannedRepositoryDownloadStatus.Succeeded,
+      downloadState: {
+        repositoryId: 1,
+        downloadStatus:
+          VariantAnalysisScannedRepositoryDownloadStatus.Succeeded,
+      },
     });
 
     await userEvent.click(
@@ -411,7 +433,10 @@ describe(RepoRow.name, () => {
   it("does not allow selecting the item if the item has not been downloaded successfully", async () => {
     render({
       status: VariantAnalysisRepoStatus.Succeeded,
-      downloadStatus: VariantAnalysisScannedRepositoryDownloadStatus.Failed,
+      downloadState: {
+        repositoryId: 1,
+        downloadStatus: VariantAnalysisScannedRepositoryDownloadStatus.Failed,
+      },
     });
 
     // It seems like sometimes the first render doesn't have the checkbox disabled
@@ -424,7 +449,11 @@ describe(RepoRow.name, () => {
   it("allows selecting the item if the item has been downloaded", async () => {
     render({
       status: VariantAnalysisRepoStatus.Succeeded,
-      downloadStatus: VariantAnalysisScannedRepositoryDownloadStatus.Succeeded,
+      downloadState: {
+        repositoryId: 1,
+        downloadStatus:
+          VariantAnalysisScannedRepositoryDownloadStatus.Succeeded,
+      },
     });
 
     expect(screen.getByRole("checkbox")).toBeEnabled();