Implements client and backend both cases.

Author: avocawo

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,21 @@ 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)
+
+  // [BACKEND-SIDE] If there is no tags but preSelectedTags, we need to show the preSelectedTags
+  // const { searchTag, handleSearchChange, filteredTags } = useBackendTagsSearch(
+  //   [],
+  //   ['sanity-windows', 'eightfivetwoold', 'qa-automation', 'sanity']
+  // )
+
+  // [CLIENT-SIDE] If there is no tags but preSelectedTags, we need to show the preSelectedTags
+  // const { searchTag, handleSearchChange, filteredTags } = useClientTagsSearch(
+  //   [],
+  //   ['sanity-windows', 'eightfivetwoold', 'qa-automation', 'sanity']
+  // )
+
   const [matchedDelegates, setMatchedDelegates] = useState(0)
   const {
     register,
@@ -182,11 +197,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 +217,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,74 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+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 => {
+        const newFiltered = [...defaultTo(selectedTags, []), ...resolvedTags]
+
+        if (isEqual(prev, newFiltered)) {
+          return prev
+        }
+
+        return newFiltered
+      })
+    })
+  }, [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
+  }
+}