Extract re-usable SearchBox component (#3507)

extensions/ql-vscode/src/stories/common/SearchBox.stories.tsx

@@ -0,0 +1,29 @@
+import { useState } from "react";
+
+import type { Meta } from "@storybook/react";
+
+import { SearchBox as SearchBoxComponent } from "../../view/common/SearchBox";
+
+export default {
+  title: "Search Box",
+  component: SearchBoxComponent,
+  argTypes: {
+    value: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+} as Meta<typeof SearchBoxComponent>;
+
+export const SearchBox = () => {
+  const [value, setValue] = useState("");
+
+  return (
+    <SearchBoxComponent
+      value={value}
+      placeholder="Filter by x/y/z..."
+      onChange={setValue}
+    />
+  );
+};

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

@@ -1,23 +0,0 @@
-import { useState } from "react";
-
-import type { Meta } from "@storybook/react";
-
-import { RepositoriesSearch as RepositoriesSearchComponent } from "../../view/variant-analysis/RepositoriesSearch";
-
-export default {
-  title: "Variant Analysis/Repositories Search",
-  component: RepositoriesSearchComponent,
-  argTypes: {
-    value: {
-      control: {
-        disable: true,
-      },
-    },
-  },
-} as Meta<typeof RepositoriesSearchComponent>;
-
-export const RepositoriesSearch = () => {
-  const [value, setValue] = useState("");
-
-  return <RepositoriesSearchComponent value={value} onChange={setValue} />;
-};

extensions/ql-vscode/src/view/common/SearchBox.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import { styled } from "styled-components";
 import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
-import { Codicon } from "../common";
+import { Codicon } from "./icon";
 
 const TextField = styled(VSCodeTextField)`
   width: 100%;
@@ -9,12 +9,18 @@ const TextField = styled(VSCodeTextField)`
 
 type Props = {
   value: string;
+  placeholder: string;
   onChange: (value: string) => void;
 
   className?: string;
 };
 
-export const RepositoriesSearch = ({ value, onChange, className }: Props) => {
+export const SearchBox = ({
+  value,
+  placeholder,
+  onChange,
+  className,
+}: Props) => {
   const handleInput = useCallback(
     (e: InputEvent) => {
       const target = e.target as HTMLInputElement;
@@ -26,7 +32,7 @@ export const RepositoriesSearch = ({ value, onChange, className }: Props) => {
 
   return (
     <TextField
-      placeholder="Filter by repository owner/name"
+      placeholder={placeholder}
       value={value}
       onInput={handleInput}
       className={className}

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

@@ -6,7 +6,7 @@ import type {
   RepositoriesFilterSortState,
   SortKey,
 } from "../../variant-analysis/shared/variant-analysis-filter-sort";
-import { RepositoriesSearch } from "./RepositoriesSearch";
+import { SearchBox } from "../common/SearchBox";
 import { RepositoriesSort } from "./RepositoriesSort";
 import { RepositoriesFilter } from "./RepositoriesFilter";
 import { RepositoriesResultFormat } from "./RepositoriesResultFormat";
@@ -29,7 +29,7 @@ const Container = styled.div`
   margin-bottom: 1em;
 `;
 
-const RepositoriesSearchColumn = styled(RepositoriesSearch)`
+const RepositoriesSearchColumn = styled(SearchBox)`
   flex: 3;
 `;
 
@@ -99,6 +99,7 @@ export const RepositoriesSearchSortRow = ({
     <Container>
       <RepositoriesSearchColumn
         value={filterSortValue.searchValue}
+        placeholder="Filter by repository owner/name"
         onChange={handleSearchValueChange}
       />
       <RepositoriesFilterColumn