feat(ui): FilterGroup - add search when there are more than 10 items

relative-ci · Jan 9, 2024 · 5f40560 · 5f40560
1 parent 1ff1ee3
commit 5f40560
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 2 deletions.
diff --git a/packages/ui/src/ui/filters/filters.module.css b/packages/ui/src/ui/filters/filters.module.css
@@ -116,6 +116,19 @@
   text-transform: lowercase;
 }
 
+.filterGroupSearchWrapper {
+  padding-bottom: var(--space-xxxsmall);
+  margin-bottom: var(--space-xxxsmall);
+  border-bottom: 1px solid var(--color-outline);
+}
+
+.filterGroupSearchNotFound {
+  padding: var(--space-xxxsmall);
+  text-align: center;
+  font-size: var(--size-small);
+  color: var(--color-text-light);
+}
+
 .filterGroupItems {
   max-height: calc(10 * (var(--space-small) + 2 * var(--space-xxxsmall)));
   overflow: auto;

diff --git a/packages/ui/src/ui/filters/filters.tsx b/packages/ui/src/ui/filters/filters.tsx
@@ -1,9 +1,11 @@
-import React, { useCallback } from 'react';
+import React, { ChangeEvent, useCallback, useMemo, useState } from 'react';
 import cx from 'classnames';
 
 import type { FilterFieldsData, FilterGroupFieldData } from '../../types';
 import { FlexStack } from '../../layout/flex-stack';
 import { Dropdown } from '../dropdown';
+import { Icon } from '../icon';
+import { InputSearch } from '../input-search';
 import * as I18N from './filters.i18n';
 import { getGroupFiltersLabelSuffix, LABELS } from './filters.utils';
 import css from './filters.module.css';
@@ -75,6 +77,8 @@ const FilterGroup = (props: FilterGroupProps) => {
     toggleFilters,
   } = props;
 
+  const [search, setSearch] = useState('');
+
   const { label: groupLabel, children: groupItems } = data;
 
   const areAllGroupItemsChecked = groupItems
@@ -108,6 +112,14 @@ const FilterGroup = (props: FilterGroupProps) => {
       });
     };
 
+  const filteredGroupItems = useMemo(() => {
+    if (!search) {
+      return groupItems;
+    }
+
+    return groupItems.filter((item) => item.label.match(new RegExp(`${search}`, 'i')));
+  }, [search, groupItems]);
+
   return (
     <Dropdown
       className={className}
@@ -118,8 +130,22 @@ const FilterGroup = (props: FilterGroupProps) => {
       {({ MenuItem, menuItemClassName }) => {
         return (
           <>
+            {groupItems.length > 10 && (
+              <div className={css.filterGroupSearchWrapper}>
+                <InputSearch
+                  defaultValue={search}
+                  onChange={setSearch}
+                  placeholder="Chunk name"
+                  debounceWait={0}
+                  size="small"
+                />
+              </div>
+            )}
             <div className={css.filterGroupItems}>
-              {groupItems.map(({ key: itemKey, ...itemData }) => {
+              {filteredGroupItems.length === 0 && (
+                <p className={css.filterGroupSearchNotFound}>No chunks found</p>
+              )}
+              {filteredGroupItems.map(({ key: itemKey, ...itemData }) => {
                 const id = [groupKey, itemKey].join('.');
                 const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });