Add UI for repository filter component

Author: robertbrignull

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}