Extract re-usable SearchBox component (#3507)

Author: charisk

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,20 +1,26 @@
 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%;
 `;
 
 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}

…/variant-analysis/RepositoriesSearch.tsx …/ql-vscode/src/view/common/SearchBox.tsxextensions/ql-vscode/src/view/variant-analysis/RepositoriesSearch.tsx renamed to extensions/ql-vscode/src/view/common/SearchBox.tsx extensions/ql-vscode/src/view/variant-analysis/RepositoriesSearch.tsx renamed to extensions/ql-vscode/src/view/common/SearchBox.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