🪟 🎉 Add SearchInput component (#6239)

Co-authored-by: Vladimir <dizel852@gmail.com>

airbyte-webapp/src/components/source/SelectConnector/ConnectorGrid.tsx

@@ -2,7 +2,7 @@ import { useMemo, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
 import { Box } from "components/ui/Box";
-import { Input } from "components/ui/Input";
+import { SearchInput } from "components/ui/SearchInput";
 import { Text } from "components/ui/Text";
 
 import { ConnectorDefinition } from "core/domain/connector";
@@ -38,12 +38,7 @@ export const ConnectorGrid = <T extends ConnectorDefinition>({
   return (
     <>
       <Box pb="xl">
-        <Input
-          placeholder="Search"
-          value={searchTerm}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value || "")}
-          light
-        />
+        <SearchInput value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
       </Box>
       {filteredDefinitions.length === 0 && (
         <div className={styles.connectorGrid__noMatches}>

airbyte-webapp/src/components/ui/Icon/Icon.tsx

@@ -9,6 +9,7 @@ import { ReactComponent as CrossIcon } from "./icons/crossIcon.svg";
 import { ReactComponent as DocsIcon } from "./icons/docsIcon.svg";
 import { ReactComponent as GAIcon } from "./icons/gAIcon.svg";
 import { ReactComponent as InfoIcon } from "./icons/infoIcon.svg";
+import { ReactComponent as LensIcon } from "./icons/lensIcon.svg";
 import { ReactComponent as MinusIcon } from "./icons/minusIcon.svg";
 import { ReactComponent as ModificationIcon } from "./icons/modificationIcon.svg";
 import { ReactComponent as MoonIcon } from "./icons/moonIcon.svg";
@@ -55,6 +56,7 @@ const Icons: Record<IconType, React.FC<React.SVGProps<SVGSVGElement>>> = {
   rotate: RotateIcon,
   nested: NestedIcon,
   chevronRight: ChevronRightIcon,
+  lens: LensIcon,
 };
 
 export const Icon: React.FC<IconProps> = React.memo(

airbyte-webapp/src/components/ui/Icon/types.ts

@@ -6,6 +6,7 @@ export type IconType =
   | "docs"
   | "ga"
   | "info"
+  | "lens"
   | "minus"
   | "modification"
   | "moon"

airbyte-webapp/src/components/ui/SearchInput/SearchInput.module.scss

@@ -0,0 +1,23 @@
+.searchInput {
+  display: block;
+  isolation: isolate;
+  position: relative;
+  --padding-left: 36px;
+
+  &__iconWrapper {
+    z-index: 2;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--padding-left);
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__input {
+    padding-left: var(--padding-left);
+    z-index: 1;
+  }
+}

airbyte-webapp/src/components/ui/SearchInput/SearchInput.stories.tsx

@@ -0,0 +1,10 @@
+import { StoryObj } from "@storybook/react";
+
+import { SearchInput } from "./SearchInput";
+
+export default {
+  title: "Ui/SearchInput",
+  component: SearchInput,
+} as StoryObj<typeof SearchInput>;
+
+export const Default: StoryObj<typeof SearchInput> = {};

airbyte-webapp/src/components/ui/SearchInput/SearchInput.tsx

@@ -0,0 +1,34 @@
+import { useIntl } from "react-intl";
+
+import { Input } from "components/ui/Input";
+
+import styles from "./SearchInput.module.scss";
+import { Icon } from "../Icon";
+
+interface SearchInputProps {
+  placeholder?: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const SearchInput: React.FC<SearchInputProps> = ({ value, onChange, placeholder }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    // Our <Input> component contains an <input>, but eslint is not smart enough to find it
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control
+    <label className={styles.searchInput}>
+      <div className={styles.searchInput__iconWrapper}>
+        <Icon type="lens" color="action" size="lg" />
+      </div>
+      <Input
+        type="search"
+        className={styles.searchInput__input}
+        placeholder={placeholder ?? formatMessage({ id: "form.search.placeholder" })}
+        value={value}
+        onChange={onChange}
+        light
+      />
+    </label>
+  );
+};

airbyte-webapp/src/components/ui/SearchInput/index.ts

@@ -0,0 +1 @@
+export { SearchInput } from "./SearchInput";

airbyte-webapp/src/locales/en.json

@@ -35,6 +35,7 @@
   "form.selectValue": "Select a value",
   "form.selectConnector": "Type to search for a connector",
   "form.searchName": "search by name...",
+  "form.search.placeholder": "Search",
   "form.noResult": "No result",
   "form.noConnectorFound": "No matching connector found",
   "form.connectionName": "Connection name",