From f3fc48d31d9831b82f26c9ad18b6fa4d82de3f23 Mon Sep 17 00:00:00 2001
From: Charis Kyriakou <charisk@users.noreply.github.com>
Date: Mon, 25 Mar 2024 08:00:04 +0000
Subject: [PATCH] Extract re-usable SearchBox component

---
 .../src/stories/common/SearchBox.stories.tsx  | 29 +++++++++++++++++++
 .../RepositoriesSearch.stories.tsx            | 23 ---------------
 .../SearchBox.tsx}                            | 12 ++++++--
 .../RepositoriesSearchSortRow.tsx             |  5 ++--
 4 files changed, 41 insertions(+), 28 deletions(-)
 create mode 100644 extensions/ql-vscode/src/stories/common/SearchBox.stories.tsx
 delete mode 100644 extensions/ql-vscode/src/stories/variant-analysis/RepositoriesSearch.stories.tsx
 rename extensions/ql-vscode/src/view/{variant-analysis/RepositoriesSearch.tsx => common/SearchBox.tsx} (80%)

diff --git a/extensions/ql-vscode/src/stories/common/SearchBox.stories.tsx b/extensions/ql-vscode/src/stories/common/SearchBox.stories.tsx
new file mode 100644
index 00000000000..efb13b1fd23
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/extensions/ql-vscode/src/stories/variant-analysis/RepositoriesSearch.stories.tsx b/extensions/ql-vscode/src/stories/variant-analysis/RepositoriesSearch.stories.tsx
deleted file mode 100644
index c139e4e3255..00000000000
--- a/extensions/ql-vscode/src/stories/variant-analysis/RepositoriesSearch.stories.tsx
+++ /dev/null
@@ -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} />;
-};
diff --git a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesSearch.tsx b/extensions/ql-vscode/src/view/common/SearchBox.tsx
similarity index 80%
rename from extensions/ql-vscode/src/view/variant-analysis/RepositoriesSearch.tsx
rename to extensions/ql-vscode/src/view/common/SearchBox.tsx
index bf0b894047f..464d303fa7e 100644
--- a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesSearch.tsx
+++ b/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}
diff --git a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesSearchSortRow.tsx b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesSearchSortRow.tsx
index 648fe43536b..fe0d0a9e074 100644
--- a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesSearchSortRow.tsx
+++ b/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