[DOP-21974] add search to ManagedSelect

Author: Zabilsya

src/app/styles/antd.less

@@ -27,7 +27,8 @@
 }
 
 .ant-avatar,
-.ant-modal-close-x {
+.ant-modal-close-x,
+.ant-select-item-empty {
   display: flex;
   justify-content: center;
   align-items: center;

src/features/group/AddGroupUser/index.tsx

@@ -23,8 +23,10 @@ export const AddGroupUser = ({ groupId, onSuccess, onCancel }: AddGroupUserProps
           size="large"
           queryKey={[UserQueryKey.GET_USERS]}
           queryFunction={userService.getUsers}
-          renderOptionValue={(user) => user.id}
           renderOptionLabel={(user) => user.username}
+          renderOptionValue={(user) => user.id}
+          detailQueryKey={[UserQueryKey.GET_USER]}
+          detailQueryFunction={(value) => userService.getUser({ id: value })}
         />
       </Form.Item>
 

src/features/group/SelectGroup/index.tsx

@@ -17,6 +17,8 @@ export const SelectGroup = () => {
       onSelect={handleSelectGroup}
       renderOptionLabel={(group) => group.data.name}
       renderOptionValue={(group) => group.data.id}
+      detailQueryKey={[GroupQueryKey.GET_GROUP]}
+      detailQueryFunction={(value) => groupService.getGroup({ id: value })}
       placeholder="Select group"
     />
   );

src/features/group/UpdateGroup/index.tsx

@@ -49,6 +49,8 @@ export const UpdateGroup = ({ group }: UpdateGroupProps) => {
           queryFunction={userService.getUsers}
           renderOptionValue={(user) => user.id}
           renderOptionLabel={(user) => user.username}
+          detailQueryKey={[UserQueryKey.GET_USER]}
+          detailQueryFunction={(value) => userService.getUser({ id: value })}
           //TODO: [DOP-20030] Need to delete prop "disabled" when the backend leaves the user with access to the group, even after changing the owner
           disabled
         />

src/features/transfer/MutateTransferForm/components/SourceParams/SourceParams.tsx

@@ -25,6 +25,8 @@ export const SourceParams = ({ groupId, initialSourceConnectionType }: SourcePar
           renderOptionValue={(connection) => connection.id}
           renderOptionLabel={(connection) => connection.name}
           onSelect={handleSelectConnection}
+          detailQueryKey={[ConnectionQueryKey.GET_CONNECTION]}
+          detailQueryFunction={(value) => connectionService.getConnection({ id: value })}
           placeholder="Select source connection"
         />
       </Form.Item>

src/features/transfer/MutateTransferForm/components/TargetParams/TargetParams.tsx

@@ -25,6 +25,8 @@ export const TargetParams = ({ groupId, initialTargetConnectionType }: TargetPar
           renderOptionValue={(connection) => connection.id}
           renderOptionLabel={(connection) => connection.name}
           onSelect={handleSelectConnection}
+          detailQueryKey={[ConnectionQueryKey.GET_CONNECTION]}
+          detailQueryFunction={(value) => connectionService.getConnection({ id: value })}
           placeholder="Select target connection"
         />
       </Form.Item>

src/features/transfer/MutateTransferForm/index.tsx

@@ -30,6 +30,8 @@ export const MutateTransferForm = ({
           queryFunction={(params) => queueService.getQueues({ group_id: group.id, ...params })}
           renderOptionValue={(queue) => queue.id}
           renderOptionLabel={(queue) => queue.name}
+          detailQueryKey={[QueueQueryKey.GET_QUEUE]}
+          detailQueryFunction={(value) => queueService.getQueue({ id: value })}
           placeholder="Select queue"
         />
       </Form.Item>

src/shared/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useModalState';
+export * from './useDebouncedState';

src/shared/hooks/useDebouncedState/index.ts

@@ -0,0 +1,32 @@
+import { SetStateAction, useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * Hook for handling debounced state
+ *
+ * @param initialValue - initial state
+ * @param delay - state change timeout
+ */
+export function useDebouncedState<T>(initialValue: T, delay: number) {
+  const [value, setValue] = useState(initialValue);
+  const timeoutRef = useRef<number | null>(null);
+
+  const clearTimeout = () => window.clearTimeout(timeoutRef.current!);
+  useEffect(() => clearTimeout, []);
+
+  const setDebouncedValue = useCallback(
+    (newValue: SetStateAction<T>) => {
+      clearTimeout();
+      timeoutRef.current = window.setTimeout(() => {
+        setValue(newValue);
+      }, delay);
+    },
+    [delay],
+  );
+
+  const setValueImmediately = (newValue: T) => {
+    clearTimeout();
+    setValue(newValue);
+  };
+
+  return { value, setValue: setValueImmediately, setDebouncedValue };
+}

src/shared/types/api.ts

@@ -19,4 +19,8 @@ export interface PageParams {
   page: number;
 }
 
-export interface PaginationRequest extends PageParams {}
+export interface SearchParams {
+  search_query?: string;
+}
+
+export interface PaginationRequest extends PageParams, SearchParams {}