Implements both cases filtering: client and backend.

Author: avocawo

apps/design-system/src/subjects/views/delegates/delegate-selector.tsx

@@ -59,7 +59,7 @@ const DelegateSelectorDrawer = ({ open, setOpen, preSelectedTags, onSubmit, disa
         <FormSeparator className="w-full" />
         <div className="flex">
           Haven&apos;t installed a delegate yet?
-          <StyledLink className="flex flex-row items-center ml-1" variant="accent" to="#">
+          <StyledLink className="ml-1 flex flex-row items-center" variant="accent" to="#">
             Install delegate <Icon name="attachment-link" className="ml-1" size={12} />
           </StyledLink>
         </div>
@@ -68,6 +68,7 @@ const DelegateSelectorDrawer = ({ open, setOpen, preSelectedTags, onSubmit, disa
 
       <DelegateSelectorForm
         delegates={delegatesData}
+        // tagsList={[]}
         tagsList={mockTagsList}
         useTranslationStore={useTranslationStore}
         isLoading={false}
@@ -76,6 +77,7 @@ const DelegateSelectorDrawer = ({ open, setOpen, preSelectedTags, onSubmit, disa
         isDelegateSelected={isDelegateSelected}
         getMatchedDelegatesCount={getMatchedDelegatesCount}
         preSelectedTags={preSelectedTags}
+        // preSelectedTags={['sanity-windows', 'eightfivetwoold', 'qa-automation', 'sanity']}
         disableAnyDelegate={disableAnyDelegate}
       />
     </Drawer.Content>
@@ -116,7 +118,7 @@ export const DelegateSelector = () => {
         onEdit={() => setOpenA(true)}
         onClear={() => setTagsA([])}
         renderValue={tag => tag}
-        className="max-w-xs mb-8"
+        className="mb-8 max-w-xs"
       />
 
       <DelegateSelectorDrawer open={openA} setOpen={setOpenA} preSelectedTags={tagsA} onSubmit={handleSubmitA} />
@@ -130,7 +132,7 @@ export const DelegateSelector = () => {
           onEdit={() => setOpenB(true)}
           onClear={() => setTagsB([])}
           renderValue={tag => tag}
-          className="max-w-xs mb-8"
+          className="mb-8 max-w-xs"
         />
 
         <DelegateSelectorDrawer

packages/ui/src/components/multi-select/multi-select.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { ReactNode, useEffect } from 'react'
 
 import {
   Button,
@@ -49,20 +49,28 @@ export const MultiSelect = <T = unknown,>({
   error,
   label
 }: MultiSelectProps<T>) => {
-  const [optionsToDisplay, onOpen] = useSelectedFirstOptions(options, selectedItems)
+  const { showSelectedFirstOnOpen, optionsToDisplay, setOptionsToDisplay } = useSelectedFirstOptions(
+    options,
+    selectedItems
+  )
+
   const { search, handleSearchChange } = useDebounceSearch({
     handleChangeSearchValue,
     searchValue
   })
 
+  useEffect(() => {
+    setOptionsToDisplay(options)
+  }, [search, options, setOptionsToDisplay])
+
   return (
     <ControlGroup className={className}>
       {!!label && (
         <Label className="mb-2" htmlFor={''}>
           {label}
         </Label>
       )}
-      <DropdownMenu.Root onOpenChange={onOpen}>
+      <DropdownMenu.Root onOpenChange={showSelectedFirstOnOpen}>
         <DropdownMenu.Trigger className="data-[state=open]:border-cn-borders-8 border-cn-borders-2 bg-cn-background-2 flex h-9 w-full items-center justify-between rounded border px-3 transition-colors">
           {placeholder}
           <Icon name="chevron-down" className="chevron-down ml-auto" size={12} />

packages/ui/src/components/multi-select/use-selected-first-options.ts

@@ -1,16 +1,22 @@
-import { useCallback, useMemo, useState } from 'react'
+import { Dispatch, SetStateAction, useCallback, useMemo, useState } from 'react'
 
 import { MultiSelectOptionType } from '@/components'
 
+type UseSelectedFirstOptionsReturnType<TOption> = {
+  optionsToDisplay: MultiSelectOptionType<TOption>[]
+  setOptionsToDisplay: Dispatch<SetStateAction<MultiSelectOptionType<TOption>[]>>
+  showSelectedFirstOnOpen: (open: boolean) => void
+}
+
 export const useSelectedFirstOptions = <TOption>(
   options: MultiSelectOptionType<TOption>[],
   selectedItems: MultiSelectOptionType<Partial<TOption>>[]
-): readonly [MultiSelectOptionType<TOption>[], (open: boolean) => void] => {
+): UseSelectedFirstOptionsReturnType<TOption> => {
   const [isOpen, setIsOpen] = useState(false)
   const [optionsToDisplay, setOptionsToDisplay] = useState<MultiSelectOptionType<TOption>[]>(options)
   const selectedIds = useMemo(() => new Set(selectedItems.map(item => item.id)), [selectedItems])
 
-  const onOpen = useCallback(
+  const showSelectedFirstOnOpen = useCallback(
     open => {
       if (open) {
         const selectedFirst = [...options].sort((a, b) => {
@@ -30,5 +36,9 @@ export const useSelectedFirstOptions = <TOption>(
     [selectedIds, options]
   )
 
-  return [isOpen ? optionsToDisplay : options, onOpen] as const
+  return {
+    optionsToDisplay: isOpen ? optionsToDisplay : options,
+    setOptionsToDisplay,
+    showSelectedFirstOnOpen
+  }
 }

packages/ui/src/views/delegates/delegate-selector/delegate-selector-form.tsx

@@ -17,6 +17,7 @@ import {
 import { SandboxLayout, TranslationStore } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { RadioOption, RadioSelect } from '@views/components/RadioSelect'
+import { useBackendTagsSearch, useClientTagsSearch } from '@views/delegates/hooks'
 import { z } from 'zod'
 
 import { DelegateConnectivityList } from '../components/delegate-connectivity-list'
@@ -78,7 +79,9 @@ export const DelegateSelectorForm = (props: DelegateSelectorFormProps): JSX.Elem
     disableAnyDelegate
   } = props
   const { t } = useTranslationStore()
-  const [searchTag, setSearchTag] = useState('')
+  // const { searchTag, handleSearchChange, filteredTags } = useClientTagsSearch(tagsList, preSelectedTags)
+  const { searchTag, handleSearchChange, filteredTags } = useBackendTagsSearch(tagsList, preSelectedTags)
+
   const [matchedDelegates, setMatchedDelegates] = useState(0)
   const {
     register,
@@ -182,11 +185,11 @@ export const DelegateSelectorForm = (props: DelegateSelectorFormProps): JSX.Elem
                 label="Tags"
                 placeholder="Enter tags"
                 handleChange={handleTagChange}
-                options={tagsList.map(tag => {
+                options={filteredTags.map(tag => {
                   return { id: tag, label: tag }
                 })}
                 searchValue={searchTag}
-                handleChangeSearchValue={setSearchTag}
+                handleChangeSearchValue={handleSearchChange}
                 error={errors.tags?.message?.toString()}
               />
             </Fieldset>
@@ -202,7 +205,7 @@ export const DelegateSelectorForm = (props: DelegateSelectorFormProps): JSX.Elem
           </>
         )}
 
-        <div className="absolute inset-x-0 bottom-0 bg-cn-background-2 p-4 shadow-md">
+        <div className="bg-cn-background-2 absolute inset-x-0 bottom-0 p-4 shadow-md">
           <ControlGroup>
             <ButtonGroup className="flex flex-row justify-between">
               <Button type="button" variant="ghost" onClick={onBack}>

packages/ui/src/views/delegates/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './use-client-tags-search'
+export * from './use-backend-tags-search'

packages/ui/src/views/delegates/hooks/use-backend-tags-search.ts

@@ -0,0 +1,78 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { resolve } from 'path'
+
+import { defaultTo, isEqual } from 'lodash-es'
+
+const TAGS_MOCK = [
+  'myrunner',
+  'macos-arm64',
+  'west1-delegate-qa',
+  'linux-amd64',
+  'eightfivetwo',
+  'automation-eks-delegate'
+]
+
+export const useBackendTagsSearch = (tags: string[], selectedTags?: string[]) => {
+  const [searchTag, setSearchTag] = useState<string>('')
+  const [filteredTags, setFilteredTags] = useState<string[]>(() => defaultTo(selectedTags, []))
+  const latestQueryRef = useRef<string>('')
+
+  const fetchTagsFromBackend = useCallback(
+    (searchQuery: string): Promise<string[]> => {
+      return new Promise(resolve => {
+        console.log(`Fetching tags from backend... Query is ${searchQuery}`)
+        const tagsToResolve = tags.length === 0 ? TAGS_MOCK : tags
+
+        setTimeout(
+          () => {
+            if (searchQuery === '') {
+              resolve(tags)
+            } else {
+              const tagsToResolveFiltered = tagsToResolve.filter(tag =>
+                tag.toLowerCase().includes(searchQuery.toLowerCase())
+              )
+              resolve(tagsToResolveFiltered)
+            }
+          },
+          Math.floor(Math.random() * 3000)
+        )
+      })
+    },
+    [tags]
+  )
+
+  useEffect(() => {
+    const searchQuery = searchTag.trim()
+
+    if (searchQuery === latestQueryRef.current) {
+      return
+    }
+
+    latestQueryRef.current = searchQuery
+
+    fetchTagsFromBackend(searchQuery).then(resolvedTags => {
+      setFilteredTags(prev => {
+        if (searchQuery === '' && resolvedTags.length === 0 && selectedTags) {
+          return selectedTags
+        }
+
+        if (isEqual(prev, resolvedTags)) {
+          return prev
+        }
+
+        return resolvedTags
+      })
+    })
+  }, [searchTag, tags, selectedTags, fetchTagsFromBackend])
+
+  const handleSearchChange = useCallback((value: string) => {
+    setSearchTag(value)
+  }, [])
+
+  return {
+    searchTag,
+    filteredTags,
+    handleSearchChange
+  }
+}

packages/ui/src/views/delegates/hooks/use-client-tags-search.ts

@@ -0,0 +1,28 @@
+import { useMemo, useState } from 'react'
+
+import { defaultTo } from 'lodash-es'
+
+export const useClientTagsSearch = (tags: string[], selectedTags?: string[]) => {
+  const [searchTag, setSearchTag] = useState('')
+  const filteredTags = useMemo(() => {
+    if (!searchTag && tags.length === 0) {
+      return defaultTo(selectedTags, [])
+    }
+
+    if (!searchTag) return tags
+
+    const search = searchTag.toLowerCase()
+
+    return tags.filter(tag => tag.toLowerCase().includes(search))
+  }, [searchTag, tags, selectedTags])
+
+  const handleSearchChange = (value: string) => {
+    setSearchTag(value)
+  }
+
+  return {
+    searchTag,
+    handleSearchChange,
+    filteredTags
+  }
+}