Merge pull request #1711 from github/koesie10/sort-repositories

Add sorting to variant analysis repositories

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>