fix: [AH-979]: fix not working search in upstream proxy select (#3527)

* fix: [AH-979]: fix not working search in upstream proxy select

web/src/ar/components/ReorderSelect/ReorderSelect.tsx

@@ -31,6 +31,8 @@ interface ReorderSelectProps<T> {
   className: string
   items: RorderSelectOption[]
   disabled: boolean
+  query: string
+  onChangeQuery: (val: string) => void
   selectListProps?: {
     title?: string | React.ReactNode
     withSearch?: boolean
@@ -102,6 +104,8 @@ export default function ReorderSelect<T>(props: ReorderSelectProps<T>): JSX.Elem
         options={items.filter(each => !formValue.includes(each.value))}
         onSelect={handleAddOption}
         disabled={disabled}
+        query={props.query}
+        onChangeQuery={props.onChangeQuery}
       />
       <SelectedList
         title={selectedListProps?.title}

web/src/ar/components/ReorderSelect/SelectList.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { ReactNode, useMemo, useState } from 'react'
+import React, { ReactNode } from 'react'
 import classNames from 'classnames'
 import { Menu } from '@blueprintjs/core'
 import { FontVariation } from '@harnessio/design-system'
@@ -26,6 +26,8 @@ import type { RorderSelectOption } from './types'
 import css from './ReorderSelect.module.scss'
 
 interface SelectListProps {
+  query: string
+  onChangeQuery: (val: string) => void
   options: RorderSelectOption[]
   onSelect: (option: RorderSelectOption) => void
   withSearch?: boolean
@@ -41,17 +43,8 @@ const EmptyOption: RorderSelectOption = {
 
 function SelectList(props: SelectListProps): JSX.Element {
   const { options, onSelect, withSearch, title, disabled } = props
-  const [searchTerm, setSearchTerm] = useState('')
   const { getString } = useStrings()
 
-  const filteredOptions: RorderSelectOption[] = useMemo(() => {
-    try {
-      return options.filter(each => each.label.toLowerCase().includes(searchTerm.toLowerCase()))
-    } catch {
-      return options
-    }
-  }, [options, searchTerm])
-
   const renderTitle = (): JSX.Element | ReactNode => {
     if (typeof title === 'string') {
       return (
@@ -67,10 +60,10 @@ function SelectList(props: SelectListProps): JSX.Element {
   }
 
   const renderOptions = (): JSX.Element => {
-    if (filteredOptions.length) {
+    if (options.length) {
       return (
         <>
-          {filteredOptions.map((each, index) => (
+          {options.map((each, index) => (
             <SelectListMenuItem key={`${each.value}_${index}`} option={each} onClick={onSelect} disabled={disabled} />
           ))}
         </>
@@ -88,10 +81,8 @@ function SelectList(props: SelectListProps): JSX.Element {
           autoFocus={false}
           alwaysExpanded
           placeholder={getString('search')}
-          onChange={text => {
-            setSearchTerm(text)
-          }}
-          defaultValue={searchTerm}
+          onChange={props.onChangeQuery}
+          defaultValue={props.query}
           disabled={disabled}
         />
       )}

web/src/ar/pages/repository-details/components/UpstreamProxiesSelect/index.tsx

@@ -49,6 +49,7 @@ function UpstreamProxiesSelect(props: UpstreamProxiesSelectProps): JSX.Element {
   const selectedProxies = (get(formikProps.values, name) as string[]) || []
   const [showList, setShowList] = useState(!!selectedProxies?.length)
   const spaceRef = useGetSpaceRef('')
+  const [searchTerm, setSearchTerm] = useState('')
 
   const {
     data,
@@ -62,6 +63,7 @@ function UpstreamProxiesSelect(props: UpstreamProxiesSelectProps): JSX.Element {
         size: 100,
         package_type: [packageType],
         type: RepositoryConfigType.UPSTREAM,
+        search_term: searchTerm,
         recursive: true
       },
       stringifyQueryParamsOptions: {
@@ -140,6 +142,8 @@ function UpstreamProxiesSelect(props: UpstreamProxiesSelectProps): JSX.Element {
         items={items}
         name={name}
         formikProps={formikProps}
+        onChangeQuery={setSearchTerm}
+        query={searchTerm}
         selectListProps={{
           title: getString('repositoryDetails.upstreamProxiesSelectList.selectList.Title', {
             count: data?.content?.data?.registries?.length