[DOP-21974] add search to ManagedSelect

Zabilsya · Zabilsya · commit 6b6c3368e174 · 2025-01-10T16:20:03.000+06:00
diff --git a/src/app/styles/antd.less b/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;
diff --git a/src/features/connection/ConnectionList/index.tsx b/src/features/connection/ConnectionList/index.tsx
@@ -13,6 +13,7 @@ export const ConnectionList = memo(({ group, onUpdateRowClick, onDeleteRowClick
       queryKey={[ConnectionQueryKey.GET_CONNECTIONS, group.data.id]}
       queryFunction={(params) => connectionService.getConnections({ ...params, group_id: group.data.id })}
       columns={CONNECTION_LIST_COLUMNS}
+      isHiddenRowActions={!hasAccessByUserRole(UserRole.Developer, group.role)}
       isRenderUpdateRowAction={() => hasAccessByUserRole(UserRole.Developer, group.role)}
       isRenderDeleteRowAction={() => hasAccessByUserRole(UserRole.Maintainer, group.role)}
       onUpdateRowClick={onUpdateRowClick}
diff --git a/src/features/group/AddGroupUser/index.tsx b/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>
 
diff --git a/src/features/group/GroupUserList/index.tsx b/src/features/group/GroupUserList/index.tsx
@@ -21,6 +21,7 @@ export const GroupUserList = memo(({ group, onUpdateRowClick, onDeleteRowClick }
       queryKey={[GroupQueryKey.GET_GROUP_USERS, group.data.id]}
       queryFunction={handleGetGroupUsers}
       columns={GROUP_USER_LIST_COLUMNS}
+      isHiddenRowActions={!hasAccessByUserRole(UserRole.Owner, group.role)}
       isRenderUpdateRowAction={isRenderRowAction}
       isRenderDeleteRowAction={isRenderRowAction}
       onUpdateRowClick={onUpdateRowClick}
diff --git a/src/features/group/SelectGroup/index.tsx b/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"
     />
   );
diff --git a/src/features/group/UpdateGroup/index.tsx b/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
         />
diff --git a/src/features/queue/QueueList/index.tsx b/src/features/queue/QueueList/index.tsx
@@ -13,6 +13,7 @@ export const QueueList = memo(({ group, onUpdateRowClick, onDeleteRowClick }: Qu
       queryKey={[QueueQueryKey.GET_QUEUES, group.data.id]}
       queryFunction={(params) => queueService.getQueues({ ...params, group_id: group.data.id })}
       columns={QUEUE_LIST_COLUMNS}
+      isHiddenRowActions={!hasAccessByUserRole(UserRole.Maintainer, group.role)}
       isRenderUpdateRowAction={() => hasAccessByUserRole(UserRole.Maintainer, group.role)}
       isRenderDeleteRowAction={() => hasAccessByUserRole(UserRole.Maintainer, group.role)}
       onUpdateRowClick={onUpdateRowClick}
diff --git a/src/features/transfer/MutateTransferForm/components/SourceParams/SourceParams.tsx b/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>
diff --git a/src/features/transfer/MutateTransferForm/components/TargetParams/TargetParams.tsx b/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>
diff --git a/src/features/transfer/MutateTransferForm/index.tsx b/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>
diff --git a/src/features/transfer/TransferList/index.tsx b/src/features/transfer/TransferList/index.tsx
@@ -13,6 +13,7 @@ export const TransferList = memo(({ group, onUpdateRowClick, onDeleteRowClick }:
       queryKey={[TransferQueryKey.GET_TRANSFERS, group.data.id]}
       queryFunction={(params) => transferService.getTransfers({ ...params, group_id: group.data.id })}
       columns={TRANSFER_LIST_COLUMNS}
+      isHiddenRowActions={!hasAccessByUserRole(UserRole.Developer, group.role)}
       isRenderUpdateRowAction={() => hasAccessByUserRole(UserRole.Developer, group.role)}
       isRenderDeleteRowAction={() => hasAccessByUserRole(UserRole.Maintainer, group.role)}
       onUpdateRowClick={onUpdateRowClick}
diff --git a/src/shared/hooks/index.ts b/src/shared/hooks/index.ts
@@ -1 +1,2 @@
 export * from './useModalState';
+export * from './useDebouncedState';
diff --git a/src/shared/hooks/useDebouncedState/index.ts b/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 };
+}
diff --git a/src/shared/types/api.ts b/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 {}
diff --git a/src/shared/ui/ManagedSelect/ManagedSelect.tsx b/src/shared/ui/ManagedSelect/ManagedSelect.tsx
@@ -1,47 +1,75 @@
-import React, { UIEventHandler, useMemo } from 'react';
+import React, { useState } from 'react';
 import { Select, Spin } from 'antd';
-import { useInfiniteRequest } from '@shared/config';
 import { DefaultOptionType } from 'antd/lib/select';
 
-import { PAGE_DEFAULT, PAGE_SIZE_DEFAULT } from './constants';
-import { prepareOptionsForSelect } from './utils';
 import { ManagedSelectProps } from './types';
+import { useGetList, useGetSelectedItem, useHandleSelectEvents, usePrepareOptions, useSearch } from './hooks';
 
 /** Select component for infinite pagination of data in a dropdown */
 export const ManagedSelect = <T, V extends DefaultOptionType['value']>({
   queryFunction,
   queryKey,
+  detailQueryFunction,
+  detailQueryKey,
   renderOptionValue,
   renderOptionLabel,
+  value,
+  onBlur,
+  onSelect,
+  onSearch,
   ...props
 }: ManagedSelectProps<T, V>) => {
-  const { data, fetchNextPage, hasNextPage, isLoading } = useInfiniteRequest<T>({
+  const [touched, setTouched] = useState(false);
+
+  const { searchValue, setSearchValue, handleSearch } = useSearch({ onSearch });
+
+  const { data, hasNextPage, fetchNextPage, isLoading, isFetching } = useGetList({
     queryKey,
-    queryFn: ({ pageParam }) => queryFunction(pageParam),
-    initialPageParam: { page: PAGE_DEFAULT, page_size: PAGE_SIZE_DEFAULT },
+    queryFunction,
+    touched,
+    searchValue,
   });
 
-  const options = useMemo(() => {
-    return prepareOptionsForSelect({
-      data: data?.items,
-      renderValue: renderOptionValue,
-      renderLabel: renderOptionLabel,
-    });
-  }, [data, renderOptionValue, renderOptionLabel]);
-
-  const handlePopupScroll: UIEventHandler<HTMLDivElement> = (event) => {
-    const target = event.currentTarget;
-    if (hasNextPage && target.scrollTop + target.offsetHeight === target.scrollHeight) {
-      fetchNextPage();
-    }
-  };
+  const { data: selectedItem } = useGetSelectedItem({
+    detailQueryKey,
+    detailQueryFunction,
+    // 'as' is needed to pass an existing initial value to the useGetSelectedItem.
+    // It will always be of type V, since useGetSelectedItem checks for this
+    value: value as V,
+  });
+
+  const { handleSelect, handleBlur, handleOpenDropdown, handlePopupScroll } = useHandleSelectEvents({
+    onBlur,
+    onSelect,
+    setTouched,
+    setSearchValue,
+    hasNextPage,
+    fetchNextPage,
+  });
+
+  const options = usePrepareOptions({
+    dataList: data,
+    searchValue,
+    selectedItem,
+    renderOptionValue,
+    renderOptionLabel,
+  });
 
   return (
     <Select
-      {...props}
-      options={options}
-      notFoundContent={isLoading ? <Spin size="small" /> : null}
+      // Do not transform value to option if there are not any options
+      value={options.length ? value : undefined}
+      showSearch
+      onDropdownVisibleChange={handleOpenDropdown}
+      onSelect={handleSelect}
+      onSearch={handleSearch}
+      filterOption={false}
+      // render notFoundContent when first request data is in progress
+      options={isLoading ? [] : options}
+      notFoundContent={isFetching ? <Spin size="small" /> : undefined}
       onPopupScroll={handlePopupScroll}
+      onBlur={handleBlur}
+      {...props}
     />
   );
 };
diff --git a/src/shared/ui/ManagedSelect/constants.ts b/src/shared/ui/ManagedSelect/constants.ts
@@ -1,2 +1,7 @@
 export const PAGE_DEFAULT = 1;
 export const PAGE_SIZE_DEFAULT = 50;
+export const SEARCH_VALUE_DEFAULT = '';
+// Debounced time for changing search value in Select
+export const SEARCH_VALUE_CHANGE_DELAY = 500;
+// Minimum delay to show loader when requesting 1st page of options
+export const REQUEST_FIRST_PAGE_DELAY = 300;
diff --git a/src/shared/ui/ManagedSelect/hooks/index.ts b/src/shared/ui/ManagedSelect/hooks/index.ts
@@ -0,0 +1,5 @@
+export * from './useGetList';
+export * from './useGetSelectedItem';
+export * from './useSearch';
+export * from './useHandleSelectEvents';
+export * from './usePrepareOptions';
diff --git a/src/shared/ui/ManagedSelect/hooks/useGetList/index.ts b/src/shared/ui/ManagedSelect/hooks/useGetList/index.ts
@@ -0,0 +1,2 @@
+export * from './useGetList';
+export * from './types';
diff --git a/src/shared/ui/ManagedSelect/hooks/useGetList/types.ts b/src/shared/ui/ManagedSelect/hooks/useGetList/types.ts
@@ -0,0 +1,18 @@
+import { PaginationRequest, PaginationResponse } from '@shared/types';
+import { QueryKey } from '@tanstack/react-query';
+
+/**
+ * Interface as Props for hook "useGetList"
+ *
+ * @template T - Data object type for select options.
+ */
+export interface UseGetListProps<T> {
+  /** Select was in focus one time at least */
+  touched: boolean;
+  /** Query keys for requests cache of entity list data */
+  queryKey: QueryKey;
+  /** Function for request entity list data */
+  queryFunction: (params: PaginationRequest) => Promise<PaginationResponse<T>>;
+  /** Search input value in select */
+  searchValue: string;
+}
diff --git a/src/shared/ui/ManagedSelect/hooks/useGetList/useGetList.ts b/src/shared/ui/ManagedSelect/hooks/useGetList/useGetList.ts
@@ -0,0 +1,23 @@
+import { useInfiniteRequest } from '@shared/config';
+
+import { PAGE_DEFAULT, PAGE_SIZE_DEFAULT, REQUEST_FIRST_PAGE_DELAY } from '../../constants';
+
+import { UseGetListProps } from './types';
+
+/** Hook for getting option list data for Select */
+export const useGetList = <T>({ queryKey, queryFunction, searchValue, touched }: UseGetListProps<T>) => {
+  return useInfiniteRequest<T>({
+    queryKey: [...queryKey, searchValue],
+    queryFn: async ({ pageParam }) => {
+      const response = await queryFunction({ ...pageParam, search_query: searchValue });
+      // Wait minimum delay to show loader when requesting 1st page
+      if (pageParam.page === PAGE_DEFAULT) {
+        await new Promise((resolve) => setTimeout(resolve, REQUEST_FIRST_PAGE_DELAY));
+      }
+      return response;
+    },
+    initialPageParam: { page: PAGE_DEFAULT, page_size: PAGE_SIZE_DEFAULT },
+    // Show first page of options when user touches select
+    enabled: touched,
+  });
+};
diff --git a/src/shared/ui/ManagedSelect/hooks/useGetSelectedItem/index.ts b/src/shared/ui/ManagedSelect/hooks/useGetSelectedItem/index.ts
@@ -0,0 +1,2 @@
+export * from './useGetSelectedItem';
+export * from './types';
diff --git a/src/shared/ui/ManagedSelect/hooks/useGetSelectedItem/types.ts b/src/shared/ui/ManagedSelect/hooks/useGetSelectedItem/types.ts
@@ -0,0 +1,17 @@
+import { QueryKey } from '@tanstack/react-query';
+import { DefaultOptionType } from 'antd/lib/select';
+
+/**
+ * Interface as Props for hook "useGetSelectedItem"
+ *
+ * @template T - Data object type for select options
+ * @template V - Value type for select options
+ */
+export interface UseGetSelectedItemProps<T, V extends DefaultOptionType['value']> {
+  /** Query keys for requests cache of entity's detail data */
+  detailQueryKey: QueryKey;
+  /** Function for request detail entity data */
+  detailQueryFunction: (value: V) => Promise<T>;
+  /** Value of Select */
+  value: V;
+}
diff --git a/src/shared/ui/ManagedSelect/hooks/useGetSelectedItem/useGetSelectedItem.ts b/src/shared/ui/ManagedSelect/hooks/useGetSelectedItem/useGetSelectedItem.ts
@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import { DefaultOptionType } from 'antd/lib/select';
+
+import { UseGetSelectedItemProps } from './types';
+
+/** Hook for getting selected option data for Select */
+export const useGetSelectedItem = <T, V extends DefaultOptionType['value']>({
+  detailQueryKey,
+  detailQueryFunction,
+  value,
+}: UseGetSelectedItemProps<T, V>) => {
+  return useQuery<T>({
+    queryKey: [...detailQueryKey, value],
+    queryFn: () => detailQueryFunction(value),
+    enabled: !!value,
+  });
+};
diff --git a/src/shared/ui/ManagedSelect/hooks/useHandleSelectEvents/index.ts b/src/shared/ui/ManagedSelect/hooks/useHandleSelectEvents/index.ts
@@ -0,0 +1,2 @@
+export * from './useHandleSelectEvents';
+export * from './types';
diff --git a/src/shared/ui/ManagedSelect/hooks/useHandleSelectEvents/types.ts b/src/shared/ui/ManagedSelect/hooks/useHandleSelectEvents/types.ts
@@ -0,0 +1,17 @@
+import { SelectProps } from 'antd';
+import { DefaultOptionType } from 'antd/lib/select';
+
+import { OptionItem } from '../../types';
+
+/** Interface as Props for hook "useHandleSelectEvents" */
+export interface UseHandleSelectEventsProps<T, V extends DefaultOptionType['value']>
+  extends Pick<SelectProps<V, OptionItem<T>>, 'onSelect' | 'onBlur'> {
+  /** Flag that shows if there is next page in infinite request of options in Select */
+  hasNextPage: boolean;
+  /** Callback for changing requesting next page of options in Select */
+  fetchNextPage: () => void;
+  /** Callback for changing search input value in Select */
+  setSearchValue: (value: string) => void;
+  /** Callback for changing touched state for Select */
+  setTouched: (value: boolean) => void;
+}
diff --git a/src/shared/ui/ManagedSelect/hooks/useHandleSelectEvents/useHandleSelectEvents.ts b/src/shared/ui/ManagedSelect/hooks/useHandleSelectEvents/useHandleSelectEvents.ts
diff --git a/src/shared/ui/ManagedSelect/hooks/usePrepareOptions/index.ts b/src/shared/ui/ManagedSelect/hooks/usePrepareOptions/index.ts
diff --git a/src/shared/ui/ManagedSelect/hooks/usePrepareOptions/types.ts b/src/shared/ui/ManagedSelect/hooks/usePrepareOptions/types.ts
diff --git a/src/shared/ui/ManagedSelect/hooks/usePrepareOptions/usePrepareOptions.ts b/src/shared/ui/ManagedSelect/hooks/usePrepareOptions/usePrepareOptions.ts
diff --git a/src/shared/ui/ManagedSelect/hooks/useSearch/index.ts b/src/shared/ui/ManagedSelect/hooks/useSearch/index.ts
diff --git a/src/shared/ui/ManagedSelect/hooks/useSearch/types.ts b/src/shared/ui/ManagedSelect/hooks/useSearch/types.ts
diff --git a/src/shared/ui/ManagedSelect/hooks/useSearch/useSearch.ts b/src/shared/ui/ManagedSelect/hooks/useSearch/useSearch.ts
diff --git a/src/shared/ui/ManagedSelect/types.ts b/src/shared/ui/ManagedSelect/types.ts

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,8 @@`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`.ant-avatar,`
`30`		`-.ant-modal-close-x {`
	`30`	`+.ant-modal-close-x,`
	`31`	`+.ant-select-item-empty {`
`31`	`32`	`display: flex;`
`32`	`33`	`justify-content: center;`
`33`	`34`	`align-items: center;`