Add comments and simplify some JSX

Use `ActionMenu.Anchor` instead of `ActionMenu.Button`.

The theming styles are not correct. Will work on that next.

Author: aeisenberg

extensions/ql-vscode/src/authentication.ts

@@ -35,7 +35,15 @@ export class Credentials {
     return c;
   }
 
-  static async initializeOverride(overrideToken: string) {
+  /**
+   * Initializes an instance of credentials with an octokit instance using
+   * a token from the user's GitHub account. This method is meant to be
+   * used non-interactive environments such as tests.
+   *
+   * @param overrideToken The GitHub token to use for authentication.
+   * @returns An instance of credentials.
+   */
+  static async initializeWithToken(overrideToken: string) {
     const c = new Credentials();
     c.octokit = await c.createOctokit(false, overrideToken);
     return c;

extensions/ql-vscode/src/remote-queries/remote-queries-interface.ts

@@ -307,7 +307,7 @@ export class RemoteQueriesInterfaceManager {
       resultCount: analysisResult.resultCount,
       downloadLink: analysisResult.downloadLink,
       fileSize: this.formatFileSize(analysisResult.fileSizeInBytes),
-      starCount: analysisResult.starCount,
+      starCount: analysisResult.starCount
     }));
   }
 }

extensions/ql-vscode/src/remote-queries/remote-queries-manager.ts

@@ -181,7 +181,12 @@ export class RemoteQueriesManager extends DisposableObject {
       results => this.interfaceManager.setAnalysisResults(results, queryResult.queryId));
   }
 
-  private mapQueryResult(executionEndTime: number, resultIndex: RemoteQueryResultIndex, queryId: string): RemoteQueryResult {
+  private mapQueryResult(
+    executionEndTime: number,
+    resultIndex: RemoteQueryResultIndex,
+    queryId: string,
+    stargazers: Record<string, number>
+  ): RemoteQueryResult {
     const analysisSummaries = resultIndex.successes.map(item => ({
       nwo: item.nwo,
       databaseSha: item.sha || 'HEAD',
@@ -192,6 +197,7 @@ export class RemoteQueriesManager extends DisposableObject {
         urlPath: `${resultIndex.artifactsUrlPath}/${item.artifactId}`,
         innerFilePath: item.sarifFileSize ? 'results.sarif' : 'results.bqrs',
         queryId,
+        starCount: stargazers[item.nwo]
       } as DownloadLink
     }));
     const analysisFailures = resultIndex.failures.map(item => ({
@@ -278,9 +284,8 @@ export class RemoteQueriesManager extends DisposableObject {
       queryItem.completed = true;
       queryItem.status = QueryStatus.Completed;
       queryItem.failureReason = undefined;
-      const queryResult = this.mapQueryResult(executionEndTime, resultIndex, queryItem.queryId);
-
-      await this.addStargazers(resultIndex, credentials, queryResult);
+      const stargazers = await this.getStargazersCount(resultIndex, credentials);
+      const queryResult = this.mapQueryResult(executionEndTime, resultIndex, queryItem.queryId, stargazers);
 
       await this.storeJsonFile(queryItem, 'query-result.json', queryResult);
 
@@ -304,10 +309,9 @@ export class RemoteQueriesManager extends DisposableObject {
     }
   }
 
-  private async addStargazers(resultIndex: RemoteQueryResultIndex, credentials: Credentials, queryResult: RemoteQueryResult) {
+  private async getStargazersCount(resultIndex: RemoteQueryResultIndex, credentials: Credentials) {
     const nwos = resultIndex.successes.map(s => s.nwo);
-    const stargazers = await getStargazers(credentials, nwos);
-    queryResult.analysisSummaries.forEach(analysis => analysis.starCount = stargazers[analysis.nwo]);
+    return await getStargazers(credentials, nwos);
   }
 
   // Pulled from the analysis results manager, so that we can get access to

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

@@ -128,7 +128,8 @@ const Failures = (queryResult: RemoteQueryResult) => {
 const SummaryTitleWithResults = ({
   queryResult,
   analysesResults,
-  sort, setSort
+  sort,
+  setSort
 }: {
   queryResult: RemoteQueryResult,
   analysesResults: AnalysisResults[],
@@ -145,7 +146,6 @@ const SummaryTitleWithResults = ({
           text="Download all"
           onClick={() => downloadAllAnalysesResults(queryResult)} />
       }
-
       <SortRepoFilter
         sort={sort}
         setSort={setSort}

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

@@ -1,9 +1,15 @@
 import * as React from 'react';
 import { FilterIcon } from '@primer/octicons-react';
-import { ActionList, ActionMenu } from '@primer/react';
+import { ActionList, ActionMenu, IconButton } from '@primer/react';
+import styled from 'styled-components';
+
+const SortWrapper = styled.span`
+  flex-grow: 2;
+  text-align: right;
+  margin-right: 0;
+`;
 
 export type Sort = 'name' | 'stars' | 'results';
-type SortBy = { name: string, sort: Sort }[];
 type Props = {
   sort: Sort;
   setSort: (sort: Sort) => void;
@@ -15,13 +21,13 @@ type Sortable = {
   resultCount?: number;
 };
 
-const sortBy: SortBy = [
+const sortBy = [
   { name: 'Sort by Name', sort: 'name' },
   { name: 'Sort by Results', sort: 'results' },
   { name: 'Sort by Stars', sort: 'stars' },
 ];
 
-export function sorter(sort: Sort) {
+export function sorter(sort: Sort): (left: Sortable, right: Sortable) => number {
   // stars and results are highest to lowest
   // name is alphabetical
   return (left: Sortable, right: Sortable) => {
@@ -43,25 +49,29 @@ export function sorter(sort: Sort) {
   };
 }
 
+// FIXME These styles are not correct. Need to figure out
+// why the theme is not being applied to the ActionMenu
 const SortRepoFilter = ({ sort, setSort }: Props) => {
-  return <span className="vscode-codeql__analysis-sorter">
+  return <SortWrapper>
     <ActionMenu>
-      <ActionMenu.Button
-        className="vscode-codeql__analysis-sort-dropdown"
-        aria-label="Sort results"
-        leadingIcon={FilterIcon}
-        trailingIcon="" />
-      <ActionMenu.Overlay width="medium">
+      <ActionMenu.Anchor>
+        <IconButton icon={FilterIcon} variant="invisible" aria-label="Sort results" />
+      </ActionMenu.Anchor>
+
+      <ActionMenu.Overlay width="small" anchorSide="outside-bottom">
         <ActionList selectionVariant="single">
           {sortBy.map((type, index) => (
-            <ActionList.Item key={index} selected={type.sort === sort} onSelect={() => setSort(type.sort)}>
+            <ActionList.Item
+              key={index}
+              selected={type.sort === sort} onSelect={() => setSort(type.sort as Sort)}
+            >
               {type.name}
             </ActionList.Item>
           ))}
         </ActionList>
       </ActionMenu.Overlay>
     </ActionMenu>
-  </span>;
+  </SortWrapper>;
 
 };
 

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

@@ -1,27 +1,33 @@
 import * as React from 'react';
 import { StarIcon } from '@primer/octicons-react';
+import styled from 'styled-components';
+
+const Star = styled.span`
+  flex-grow: 2;
+  text-align: right;
+  margin-right: 0;
+`;
+
+const Count = styled.span`
+  text-align: left;
+  width: 2em;
+  margin-left: 0.5em;
+`;
 
 type Props = { starCount?: number };
 
 const StarCount = ({ starCount }: Props) => (
   Number.isFinite(starCount) ? (
     <>
-      <span className="vscode-codeql__analysis-star">
+      <Star>
         <StarIcon size={16} />
-      </span>
-      <span className='vscode-codeql__analysis-count'>
+      </Star>
+      <Count>
         {displayStars(starCount!)}
-      </span>
+      </Count>
     </>
   ) : (
-    <>
-      <span className="vscode-codeql__analysis-star">
-        {/* empty */}
-      </span>
-      <span className='vscode-codeql__analysis-count'>
-        {/* empty */}
-      </span>
-    </>
+    <></>
   )
 );
 

extensions/ql-vscode/src/remote-queries/view/remoteQueries.css

@@ -30,19 +30,6 @@
   padding-right: 0.1em;
 }
 
-.vscode-codeql__analysis-sorter,
-.vscode-codeql__analysis-star {
-  flex-grow: 2;
-  text-align: right;
-  margin-right: 0;
-}
-
-.vscode-codeql__analysis-count {
-  text-align: left;
-  width: 2em;
-  margin-left: 0.5em;
-}
-
 .vscode-codeql__expand-button {
   background: none;
   color: var(--vscode-textLink-foreground);
@@ -52,13 +39,6 @@
   font-size: x-small;
 }
 
-button.vscode-codeql__analysis-sort-dropdown {
-  display: inline-grid;
-  background-color: var(--vscode-editor-background);
-  border: none;
-  padding: 0.5em;
-}
-
 .vscode-codeql__analysis-failure {
   margin: 0;
   font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,

extensions/ql-vscode/src/vscode-tests/no-workspace/remote-queries/gh-actions-api-client.test.ts

@@ -2,7 +2,7 @@ import { fail } from 'assert';
 import { expect } from 'chai';
 import * as sinon from 'sinon';
 import { Credentials } from '../../../authentication';
-import { cancelRemoteQuery, getStargazers } from '../../../remote-queries/gh-actions-api-client';
+import { cancelRemoteQuery, getStargazers as getStargazersCount } from '../../../remote-queries/gh-actions-api-client';
 import { RemoteQuery } from '../../../remote-queries/remote-query';
 
 describe('gh-actions-api-client mock responses', () => {
@@ -55,13 +55,13 @@ describe('gh-actions-api-client mock responses', () => {
 describe('gh-actions-api-client real responses', function() {
   this.timeout(10000);
 
-  it('should get the stargazers for projects', async () => {
+  it('should get the stargazers for repos', async () => {
     if (skip()) {
       return;
     }
 
-    const credentials = await Credentials.initializeOverride(process.env.VSCODE_CODEQL_GITHUB_TOKEN!);
-    const stargazers = await getStargazers(credentials, [
+    const credentials = await Credentials.initializeWithToken(process.env.VSCODE_CODEQL_GITHUB_TOKEN!);
+    const stargazers = await getStargazersCount(credentials, [
       'github/codeql',
       'github/vscode-codeql',
       'rails/rails',