refactor(ui): Extract InputSearch component

packages/ui/src/components/bundle-assets/bundle-assets.jsx

@@ -15,6 +15,7 @@ import config from '../../config.json';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../../ui/icon';
+import { InputSearch } from '../../ui/input-search';
 import { FileName } from '../../ui/file-name';
 import { HoverCard } from '../../ui/hover-card';
 import { Tag } from '../../ui/tag';
@@ -25,7 +26,6 @@ import { AssetInfo } from '../asset-info';
 import { AssetNotPredictive } from '../asset-not-predictive';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
-import { MetricsTableSearch } from '../metrics-table-search';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import css from './bundle-assets.module.css';
@@ -235,11 +235,11 @@ export const BundleAssets = (props) => {
           )}
         >
           <FlexStack space="xxsmall">
-            <MetricsTableSearch
+            <InputSearch
               className={css.toolbarSearch}
               placeholder="Search by name"
-              search={search}
-              updateSearch={updateSearch}
+              defaultValue={search}
+              onChange={updateSearch}
             />
             <Filters
               className={css.toolbarFilters}

packages/ui/src/components/bundle-modules/bundle-modules.tsx

@@ -7,13 +7,13 @@ import config from '../../config.json';
 import I18N from '../../i18n';
 import { ComponentLink } from '../component-link';
 import { FlexStack } from '../../layout/flex-stack';
+import { InputSearch } from '../../ui/input-search';
 import { EmptySet } from '../../ui/empty-set';
 import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
 import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
 import { MetricsTable } from '../metrics-table';
-import { MetricsTableSearch } from '../metrics-table-search';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import { ModuleInfo } from '../module-info';
@@ -159,11 +159,11 @@ export const BundleModules = (props: BundleModulesProps) => {
           )}
         >
           <FlexStack space="xxsmall">
-            <MetricsTableSearch
+            <InputSearch
               className={css.toolbarSearch}
-              search={search}
-              updateSearch={updateSearch}
               placeholder={I18N_MODULES.SEARCH}
+              defaultValue={search}
+              onChange={updateSearch}
             />
             <Filters
               className={css.tableDropdown}

packages/ui/src/components/bundle-packages/bundle-packages.jsx

@@ -6,13 +6,13 @@ import { COMPONENT, PACKAGE_FILTERS, PACKAGES_SEPARATOR, SECTIONS } from '@bundl
 import config from '../../config.json';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
+import { InputSearch } from '../../ui/input-search';
 import { EmptySet } from '../../ui/empty-set';
 import { Filters } from '../../ui/filters';
 import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
-import { MetricsTableSearch } from '../metrics-table-search';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import { PackageInfo } from '../package-info';
@@ -194,11 +194,11 @@ export const BundlePackages = (props) => {
           )}
         >
           <FlexStack space="xxsmall">
-            <MetricsTableSearch
+            <InputSearch
               className={css.toolbarSearch}
               placeholder="Search by name"
-              search={search}
-              updateSearch={updateSearch}
+              defaultValue={search}
+              onChange={updateSearch}
             />
             <Filters
               filters={dropdownFilters}

packages/ui/src/components/index.js

@@ -15,7 +15,6 @@ export { Metric } from './metric';
 export { MetricRunInfo, MetricRunInfoProps } from './metric-run-info';
 export { MetricsTable } from './metrics-table';
 export { MetricsTableOptions } from './metrics-table-options';
-export { MetricsTableSearch } from './metrics-table-search';
 export { MetricsTableTitle } from './metrics-table-title';
 export { ModuleInfo } from './module-info';
 export { RunInfo, RunInfoProps } from './run-info';

packages/ui/src/ui/index.js

@@ -8,6 +8,7 @@ export { HorizontalBarChart } from './horizontal-bar-chart';
 export { HoverCard } from './hover-card';
 export { Icon } from './icon';
 export { Input } from './input';
+export { InputSearch } from './input-search';
 export { Loader } from './loader';
 export { Skeleton } from './skeleton';
 export { Table } from './table';

packages/ui/src/ui/input-search/index.ts

@@ -0,0 +1 @@
+export * from './input-search';

packages/ui/src/ui/input-search/input-search.stories.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+
+import { getWrapperDecorator } from '../../stories';
+import { InputSearch } from '.';
+
+export default {
+  title: 'UI/InputSearch',
+  component: InputSearch,
+  decorators: [getWrapperDecorator()],
+};
+
+const InputSearchWithState = () => {
+  const [search, updateSearch] = useState('');
+
+  return (
+    <div>
+      <pre>{JSON.stringify({ search }, null, 2)}</pre>
+      <br />
+      <InputSearch placeholder="Search by name" defaultValue={search} onChange={updateSearch} />
+    </div>
+  );
+};
+
+export const Default = () => <InputSearchWithState />;

packages/ui/src/ui/input-search/input-search.tsx

@@ -0,0 +1,82 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import cx from 'classnames';
+import debounce from 'lodash/debounce';
+import noop from 'lodash/noop';
+
+import { Icon } from '../icon';
+import { Input } from '../input';
+
+import css from './input-search.module.css';
+
+interface InputSearchProps {
+  placeholder?: string;
+  defaultValue?: string;
+  onChange?: (newValue: string) => void;
+  debounceWait?: number;
+}
+
+export const InputSearch = (
+  props: InputSearchProps & Omit<React.ComponentProps<'div'>, 'onChange'>,
+) => {
+  const {
+    className = '',
+    placeholder = 'Search',
+    defaultValue = '',
+    onChange = noop,
+    debounceWait = 500,
+  } = props;
+  const rootClassname = cx(css.root, className);
+
+  const [value, setValue] = useState(defaultValue);
+
+  // Update local state when default value changes
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  const debouncedUpdateSearch = useCallback(debounce(onChange, debounceWait), [onChange]);
+
+  const changeValue = useCallback(
+    (newValue: string) => {
+      if (newValue !== value) {
+        debouncedUpdateSearch(newValue);
+        setValue(newValue);
+      }
+    },
+    [setValue, value],
+  );
+
+  const inputOnChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      changeValue(event.target.value);
+    },
+    [changeValue],
+  );
+
+  const clearButtonOnClick = useCallback(() => {
+    changeValue('');
+  }, [changeValue]);
+
+  return (
+    <div className={rootClassname}>
+      <Input
+        className={css.input}
+        placeholder={placeholder}
+        onChange={inputOnChange}
+        value={value}
+        size="small"
+        autoComplete="off"
+      />
+      {value && (
+        <button
+          className={css.cancelButton}
+          type="button"
+          onClick={clearButtonOnClick}
+          aria-label="Clear search"
+        >
+          <Icon className={css.cancelButtonIcon} glyph={Icon.ICONS.CANCEL} />
+        </button>
+      )}
+    </div>
+  );
+};