Add a component for filtering repositories based on their results

extensions/ql-vscode/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [UNRELEASED]
 
+- Added ability to filter repositories for a variant analysis to only those that have results [#2343](https://github.com/github/vscode-codeql/pull/2343)
 - Add new configuration option to allow downloading databases from http, non-secure servers. [#2332](https://github.com/github/vscode-codeql/pull/2332)
 
 ## 1.8.2 - 12 April 2023

extensions/ql-vscode/src/pure/variant-analysis-filter-sort.ts

@@ -3,6 +3,12 @@ import {
   RepositoryWithMetadata,
 } from "../variant-analysis/shared/repository";
 import { parseDate } from "./date";
+import { assertNever } from "./helpers-pure";
+
+export enum FilterKey {
+  All = "all",
+  WithResults = "withResults",
+}
 
 export enum SortKey {
   Name = "name",
@@ -13,6 +19,7 @@ export enum SortKey {
 
 export type RepositoriesFilterSortState = {
   searchValue: string;
+  filterKey: FilterKey;
   sortKey: SortKey;
 };
 
@@ -22,20 +29,43 @@ export type RepositoriesFilterSortStateWithIds = RepositoriesFilterSortState & {
 
 export const defaultFilterSortState: RepositoriesFilterSortState = {
   searchValue: "",
+  filterKey: FilterKey.All,
   sortKey: SortKey.Name,
 };
 
 export function matchesFilter(
-  repo: Pick<Repository, "fullName">,
+  item: FilterAndSortableResult,
   filterSortState: RepositoriesFilterSortState | undefined,
 ): boolean {
   if (!filterSortState) {
     return true;
   }
 
-  return repo.fullName
-    .toLowerCase()
-    .includes(filterSortState.searchValue.toLowerCase());
+  return (
+    matchesSearch(item.repository, filterSortState.searchValue) &&
+    matchesFilterKey(item.resultCount, filterSortState.filterKey)
+  );
+}
+
+function matchesSearch(
+  repository: SortableRepository,
+  searchValue: string,
+): boolean {
+  return repository.fullName.toLowerCase().includes(searchValue.toLowerCase());
+}
+
+function matchesFilterKey(
+  resultCount: number | undefined,
+  filterKey: FilterKey,
+): boolean {
+  switch (filterKey) {
+    case FilterKey.All:
+      return true;
+    case FilterKey.WithResults:
+      return resultCount !== undefined && resultCount > 0;
+    default:
+      assertNever(filterKey);
+  }
 }
 
 type SortableRepository = Pick<Repository, "fullName"> &
@@ -71,17 +101,22 @@ export function compareRepository(
   };
 }
 
-type SortableResult = {
+type FilterAndSortableResult = {
+  repository: SortableRepository;
+  resultCount?: number;
+};
+
+type FilterAndSortableResultWithIds = {
   repository: SortableRepository & Pick<Repository, "id">;
   resultCount?: number;
 };
 
 export function compareWithResults(
   filterSortState: RepositoriesFilterSortState | undefined,
-): (left: SortableResult, right: SortableResult) => number {
+): (left: FilterAndSortableResult, right: FilterAndSortableResult) => number {
   const fallbackSort = compareRepository(filterSortState);
 
-  return (left: SortableResult, right: SortableResult) => {
+  return (left: FilterAndSortableResult, right: FilterAndSortableResult) => {
     // Highest to lowest
     if (filterSortState?.sortKey === SortKey.ResultsCount) {
       const resultCount = (right.resultCount ?? 0) - (left.resultCount ?? 0);
@@ -95,7 +130,7 @@ export function compareWithResults(
 }
 
 export function filterAndSortRepositoriesWithResultsByName<
-  T extends SortableResult,
+  T extends FilterAndSortableResult,
 >(
   repositories: T[] | undefined,
   filterSortState: RepositoriesFilterSortState | undefined,
@@ -105,18 +140,21 @@ export function filterAndSortRepositoriesWithResultsByName<
   }
 
   return repositories
-    .filter((repo) => matchesFilter(repo.repository, filterSortState))
+    .filter((repo) => matchesFilter(repo, filterSortState))
     .sort(compareWithResults(filterSortState));
 }
 
-export function filterAndSortRepositoriesWithResults<T extends SortableResult>(
+export function filterAndSortRepositoriesWithResults<
+  T extends FilterAndSortableResultWithIds,
+>(
   repositories: T[] | undefined,
   filterSortState: RepositoriesFilterSortStateWithIds | undefined,
 ): T[] | undefined {
   if (!repositories) {
     return undefined;
   }
 
+  // If repository IDs are given, then ignore the search value and filter key
   if (
     filterSortState?.repositoryIds &&
     filterSortState.repositoryIds.length > 0

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { useState } from "react";
+
+import { ComponentMeta } from "@storybook/react";
+
+import { RepositoriesFilter as RepositoriesFilterComponent } from "../../view/variant-analysis/RepositoriesFilter";
+import { FilterKey } from "../../pure/variant-analysis-filter-sort";
+
+export default {
+  title: "Variant Analysis/Repositories Filter",
+  component: RepositoriesFilterComponent,
+  argTypes: {
+    value: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof RepositoriesFilterComponent>;
+
+export const RepositoriesFilter = () => {
+  const [value, setValue] = useState(FilterKey.All);
+
+  return <RepositoriesFilterComponent value={value} onChange={setValue} />;
+};

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { useCallback } from "react";
+import styled from "styled-components";
+import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react";
+import { Codicon } from "../common";
+import { FilterKey } from "../../pure/variant-analysis-filter-sort";
+
+const Dropdown = styled(VSCodeDropdown)`
+  width: 100%;
+`;
+
+type Props = {
+  value: FilterKey;
+  onChange: (value: FilterKey) => void;
+
+  className?: string;
+};
+
+export const RepositoriesFilter = ({ value, onChange, className }: Props) => {
+  const handleInput = useCallback(
+    (e: InputEvent) => {
+      const target = e.target as HTMLSelectElement;
+
+      onChange(target.value as FilterKey);
+    },
+    [onChange],
+  );
+
+  return (
+    <Dropdown value={value} onInput={handleInput} className={className}>
+      <Codicon name="list-filter" label="Filter..." slot="indicator" />
+      <VSCodeOption value={FilterKey.All}>All</VSCodeOption>
+      <VSCodeOption value={FilterKey.WithResults}>With results</VSCodeOption>
+    </Dropdown>
+  );
+};

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

@@ -2,11 +2,13 @@ import * as React from "react";
 import { Dispatch, SetStateAction, useCallback } from "react";
 import styled from "styled-components";
 import {
+  FilterKey,
   RepositoriesFilterSortState,
   SortKey,
 } from "../../pure/variant-analysis-filter-sort";
 import { RepositoriesSearch } from "./RepositoriesSearch";
 import { RepositoriesSort } from "./RepositoriesSort";
+import { RepositoriesFilter } from "./RepositoriesFilter";
 
 type Props = {
   value: RepositoriesFilterSortState;
@@ -25,6 +27,10 @@ const RepositoriesSearchColumn = styled(RepositoriesSearch)`
   flex: 3;
 `;
 
+const RepositoriesFilterColumn = styled(RepositoriesFilter)`
+  flex: 1;
+`;
+
 const RepositoriesSortColumn = styled(RepositoriesSort)`
   flex: 1;
 `;
@@ -40,6 +46,16 @@ export const RepositoriesSearchSortRow = ({ value, onChange }: Props) => {
     [onChange],
   );
 
+  const handleFilterKeyChange = useCallback(
+    (filterKey: FilterKey) => {
+      onChange((oldValue) => ({
+        ...oldValue,
+        filterKey,
+      }));
+    },
+    [onChange],
+  );
+
   const handleSortKeyChange = useCallback(
     (sortKey: SortKey) => {
       onChange((oldValue) => ({
@@ -56,6 +72,10 @@ export const RepositoriesSearchSortRow = ({ value, onChange }: Props) => {
         value={value.searchValue}
         onChange={handleSearchValueChange}
       />
+      <RepositoriesFilterColumn
+        value={value.filterKey}
+        onChange={handleFilterKeyChange}
+      />
       <RepositoriesSortColumn
         value={value.sortKey}
         onChange={handleSortKeyChange}

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

@@ -56,8 +56,8 @@ export const VariantAnalysisSkippedRepositoriesTab = ({
 }: VariantAnalysisSkippedRepositoriesTabProps) => {
   const repositories = useMemo(() => {
     return skippedRepositoryGroup.repositories
-      ?.filter((repo) => {
-        return matchesFilter(repo, filterSortState);
+      ?.filter((repository) => {
+        return matchesFilter({ repository }, filterSortState);
       })
       ?.sort(compareRepository(filterSortState));
   }, [filterSortState, skippedRepositoryGroup.repositories]);