Add sorting to variant analysis repositories

This adds sorting to the variant analysis repositories on the outcome
panels. The sort state is shared between all panels, so unlike the
design this doesn't disable the sort when you are on e.g. the no access
panel.

Author: koesie10

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

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+
+import { ComponentMeta } from '@storybook/react';
+
+import { RepositoriesSearchSortRow as RepositoriesSearchSortRowComponent } from '../../view/variant-analysis/RepositoriesSearchSortRow';
+import { defaultFilterSortState } from '../../view/variant-analysis/filterSort';
+
+export default {
+  title: 'Variant Analysis/Repositories Search and Sort Row',
+  component: RepositoriesSearchSortRowComponent,
+  argTypes: {
+    value: {
+      control: {
+        disable: true,
+      },
+    },
+  }
+} as ComponentMeta<typeof RepositoriesSearchSortRowComponent>;
+
+export const RepositoriesSearchSortRow = () => {
+  const [value, setValue] = useState(defaultFilterSortState);
+
+  return (
+    <RepositoriesSearchSortRowComponent value={value} onChange={setValue} />
+  );
+};

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

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+
+import { ComponentMeta } from '@storybook/react';
+
+import { RepositoriesSort as RepositoriesSortComponent } from '../../view/variant-analysis/RepositoriesSort';
+import { SortKey } from '../../view/variant-analysis/filterSort';
+
+export default {
+  title: 'Variant Analysis/Repositories Sort',
+  component: RepositoriesSortComponent,
+  argTypes: {
+    value: {
+      control: {
+        disable: true,
+      },
+    },
+  }
+} as ComponentMeta<typeof RepositoriesSortComponent>;
+
+export const RepositoriesSort = () => {
+  const [value, setValue] = useState(SortKey.Name);
+
+  return (
+    <RepositoriesSortComponent value={value} onChange={setValue} />
+  );
+};

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

@@ -11,9 +11,11 @@ const TextField = styled(VSCodeTextField)`
 type Props = {
   value: string;
   onChange: (value: string) => void;
+
+  className?: string;
 }
 
-export const RepositoriesSearch = ({ value, onChange }: Props) => {
+export const RepositoriesSearch = ({ value, onChange, className }: Props) => {
   const handleInput = useCallback((e: InputEvent) => {
     const target = e.target as HTMLInputElement;
 
@@ -25,6 +27,7 @@ export const RepositoriesSearch = ({ value, onChange }: Props) => {
       placeholder='Filter by repository owner/name'
       value={value}
       onInput={handleInput}
+      className={className}
     >
       <Codicon name="search" label="Search..." slot="start" />
     </TextField>

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Dispatch, SetStateAction, useCallback } from 'react';
+import styled from 'styled-components';
+import { RepositoriesFilterSortState, SortKey } from './filterSort';
+import { RepositoriesSearch } from './RepositoriesSearch';
+import { RepositoriesSort } from './RepositoriesSort';
+
+type Props = {
+  value: RepositoriesFilterSortState;
+  onChange: Dispatch<SetStateAction<RepositoriesFilterSortState>>;
+}
+
+const Container = styled.div`
+  display: flex;
+  gap: 1em;
+
+  width: 100%;
+`;
+
+const RepositoriesSearchColumn = styled(RepositoriesSearch)`
+  flex: 3;
+`;
+
+const RepositoriesSortColumn = styled(RepositoriesSort)`
+  flex: 1;
+`;
+
+export const RepositoriesSearchSortRow = ({ value, onChange }: Props) => {
+  const handleSearchValueChange = useCallback((searchValue: string) => {
+    onChange(oldValue => ({
+      ...oldValue,
+      searchValue,
+    }));
+  }, [onChange]);
+
+  const handleSortKeyChange = useCallback((sortKey: SortKey) => {
+    onChange(oldValue => ({
+      ...oldValue,
+      sortKey,
+    }));
+  }, [onChange]);
+
+  return (
+    <Container>
+      <RepositoriesSearchColumn value={value.searchValue} onChange={handleSearchValueChange} />
+      <RepositoriesSortColumn value={value.sortKey} onChange={handleSortKeyChange} />
+    </Container>
+  );
+};

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+import styled from 'styled-components';
+import { VSCodeDropdown, VSCodeOption } from '@vscode/webview-ui-toolkit/react';
+import { SortKey } from './filterSort';
+import { Codicon } from '../common';
+
+const Dropdown = styled(VSCodeDropdown)`
+  width: 100%;
+`;
+
+type Props = {
+  value: SortKey;
+  onChange: (value: SortKey) => void;
+
+  className?: string;
+}
+
+export const RepositoriesSort = ({ value, onChange, className }: Props) => {
+  const handleInput = useCallback((e: InputEvent) => {
+    const target = e.target as HTMLSelectElement;
+
+    onChange(target.value as SortKey);
+  }, [onChange]);
+
+  return (
+    <Dropdown
+      value={value}
+      onInput={handleInput}
+      className={className}
+    >
+      <Codicon name="sort-precedence" label="Sort..." slot="indicator" />
+      <VSCodeOption value={SortKey.Name}>Name</VSCodeOption>
+      <VSCodeOption value={SortKey.ResultsCount}>Results</VSCodeOption>
+      <VSCodeOption value={SortKey.Stars}>Stars</VSCodeOption>
+      <VSCodeOption value={SortKey.LastUpdated}>Last commit</VSCodeOption>
+    </Dropdown>
+  );
+};

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

@@ -7,7 +7,7 @@ import {
   VariantAnalysisScannedRepositoryResult,
   VariantAnalysisScannedRepositoryState
 } from '../../remote-queries/shared/variant-analysis';
-import { matchesSearchValue } from './filterSort';
+import { compareWithResults, matchesFilter, RepositoriesFilterSortState } from './filterSort';
 
 const Container = styled.div`
   display: flex;
@@ -21,14 +21,14 @@ export type VariantAnalysisAnalyzedReposProps = {
   repositoryStates?: VariantAnalysisScannedRepositoryState[];
   repositoryResults?: VariantAnalysisScannedRepositoryResult[];
 
-  searchValue?: string;
+  filterSortState?: RepositoriesFilterSortState;
 }
 
 export const VariantAnalysisAnalyzedRepos = ({
   variantAnalysis,
   repositoryStates,
   repositoryResults,
-  searchValue,
+  filterSortState,
 }: VariantAnalysisAnalyzedReposProps) => {
   const repositoryStateById = useMemo(() => {
     const map = new Map<number, VariantAnalysisScannedRepositoryState>();
@@ -47,14 +47,10 @@ export const VariantAnalysisAnalyzedRepos = ({
   }, [repositoryResults]);
 
   const repositories = useMemo(() => {
-    if (searchValue) {
-      return variantAnalysis.scannedRepos?.filter((repoTask) => {
-        return matchesSearchValue(repoTask.repository, searchValue);
-      });
-    }
-
-    return variantAnalysis.scannedRepos;
-  }, [searchValue, variantAnalysis.scannedRepos]);
+    return variantAnalysis.scannedRepos?.filter((repoTask) => {
+      return matchesFilter(repoTask.repository, filterSortState);
+    })?.sort(compareWithResults(filterSortState));
+  }, [filterSortState, variantAnalysis.scannedRepos]);
 
   return (
     <Container>

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

@@ -11,7 +11,8 @@ import {
 import { VariantAnalysisAnalyzedRepos } from './VariantAnalysisAnalyzedRepos';
 import { Alert } from '../common';
 import { VariantAnalysisSkippedRepositoriesTab } from './VariantAnalysisSkippedRepositoriesTab';
-import { RepositoriesSearch } from './RepositoriesSearch';
+import { defaultFilterSortState, RepositoriesFilterSortState } from './filterSort';
+import { RepositoriesSearchSortRow } from './RepositoriesSearchSortRow';
 
 export type VariantAnalysisOutcomePanelProps = {
   variantAnalysis: VariantAnalysis;
@@ -44,7 +45,7 @@ export const VariantAnalysisOutcomePanels = ({
   repositoryStates,
   repositoryResults,
 }: VariantAnalysisOutcomePanelProps) => {
-  const [searchValue, setSearchValue] = useState('');
+  const [filterSortState, setFilterSortState] = useState<RepositoriesFilterSortState>(defaultFilterSortState);
 
   const noCodeqlDbRepos = variantAnalysis.skippedRepos?.noCodeqlDbRepos;
   const notFoundRepos = variantAnalysis.skippedRepos?.notFoundRepos;
@@ -74,12 +75,12 @@ export const VariantAnalysisOutcomePanels = ({
     return (
       <>
         {warnings}
-        <RepositoriesSearch value={searchValue} onChange={setSearchValue} />
+        <RepositoriesSearchSortRow value={filterSortState} onChange={setFilterSortState} />
         <VariantAnalysisAnalyzedRepos
           variantAnalysis={variantAnalysis}
           repositoryStates={repositoryStates}
           repositoryResults={repositoryResults}
-          searchValue={searchValue}
+          filterSortState={filterSortState}
         />
       </>
     );
@@ -88,7 +89,7 @@ export const VariantAnalysisOutcomePanels = ({
   return (
     <>
       {warnings}
-      <RepositoriesSearch value={searchValue} onChange={setSearchValue} />
+      <RepositoriesSearchSortRow value={filterSortState} onChange={setFilterSortState} />
       <VSCodePanels>
         <Tab>
           Analyzed
@@ -111,7 +112,7 @@ export const VariantAnalysisOutcomePanels = ({
             variantAnalysis={variantAnalysis}
             repositoryStates={repositoryStates}
             repositoryResults={repositoryResults}
-            searchValue={searchValue}
+            filterSortState={filterSortState}
           />
         </VSCodePanelView>
         {notFoundRepos?.repositoryCount &&
@@ -120,7 +121,7 @@ export const VariantAnalysisOutcomePanels = ({
               alertTitle='No access'
               alertMessage='The following repositories could not be scanned because you do not have read access.'
               skippedRepositoryGroup={notFoundRepos}
-              searchValue={searchValue}
+              filterSortState={filterSortState}
             />
           </VSCodePanelView>}
         {noCodeqlDbRepos?.repositoryCount &&
@@ -129,7 +130,7 @@ export const VariantAnalysisOutcomePanels = ({
               alertTitle='No database'
               alertMessage='The following repositories could not be scanned because they do not have an available CodeQL database.'
               skippedRepositoryGroup={noCodeqlDbRepos}
-              searchValue={searchValue}
+              filterSortState={filterSortState}
             />
           </VSCodePanelView>}
       </VSCodePanels>

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

@@ -4,14 +4,14 @@ import styled from 'styled-components';
 import { VariantAnalysisSkippedRepositoryGroup } from '../../remote-queries/shared/variant-analysis';
 import { Alert } from '../common';
 import { RepoRow } from './RepoRow';
-import { matchesSearchValue } from './filterSort';
+import { compareRepository, matchesFilter, RepositoriesFilterSortState } from './filterSort';
 
 export type VariantAnalysisSkippedRepositoriesTabProps = {
   alertTitle: string,
   alertMessage: string,
   skippedRepositoryGroup: VariantAnalysisSkippedRepositoryGroup,
 
-  searchValue?: string,
+  filterSortState?: RepositoriesFilterSortState,
 };
 
 function getSkipReasonAlert(
@@ -43,17 +43,13 @@ export const VariantAnalysisSkippedRepositoriesTab = ({
   alertTitle,
   alertMessage,
   skippedRepositoryGroup,
-  searchValue,
+  filterSortState,
 }: VariantAnalysisSkippedRepositoriesTabProps) => {
   const repositories = useMemo(() => {
-    if (searchValue) {
-      return skippedRepositoryGroup.repositories?.filter((repo) => {
-        return matchesSearchValue(repo, searchValue);
-      });
-    }
-
-    return skippedRepositoryGroup.repositories;
-  }, [searchValue, skippedRepositoryGroup.repositories]);
+    return skippedRepositoryGroup.repositories?.filter((repo) => {
+      return matchesFilter(repo, filterSortState);
+    })?.sort(compareRepository(filterSortState));
+  }, [filterSortState, skippedRepositoryGroup.repositories]);
 
   return (
     <Container>