Introduce a RelationPicker component with a RelationPickerScope (#2617)

Refactor mainIdentifier into scope componetn

front/src/modules/ui/input/components/internal/relation-picker/RelationPicker.tsx

@@ -0,0 +1,84 @@
+import { useEffect } from 'react';
+import { useQuery } from '@apollo/client';
+
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
+import { IconUserCircle } from '@/ui/display/icon';
+import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
+import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
+import { useRelationField } from '@/ui/object/field/meta-types/hooks/useRelationField';
+import { FieldDefinition } from '@/ui/object/field/types/FieldDefinition';
+import { FieldRelationMetadata } from '@/ui/object/field/types/FieldMetadata';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+
+export type RelationPickerProps = {
+  recordId: string;
+  onSubmit: (newUser: EntityForSelect | null) => void;
+  onCancel?: () => void;
+  width?: number;
+  initialSearchFilter?: string | null;
+  fieldDefinition: FieldDefinition<FieldRelationMetadata>;
+};
+
+export const RelationPicker = ({
+  recordId,
+  onSubmit,
+  onCancel,
+  width,
+  initialSearchFilter,
+  fieldDefinition,
+}: RelationPickerProps) => {
+  const [relationPickerSearchFilter, setRelationPickerSearchFilter] =
+    useRecoilScopedState(relationPickerSearchFilterScopedState);
+
+  useEffect(() => {
+    setRelationPickerSearchFilter(initialSearchFilter ?? '');
+  }, [initialSearchFilter, setRelationPickerSearchFilter]);
+
+  const { findManyQuery } = useObjectMetadataItem({
+    objectNameSingular: fieldDefinition.metadata.objectMetadataNameSingular,
+  });
+
+  const useFindManyQuery = (options: any) => useQuery(findManyQuery, options);
+
+  const { identifiersMapper, searchQuery } = useRelationField();
+
+  const workspaceMembers = useFilteredSearchEntityQuery({
+    queryHook: useFindManyQuery,
+    filters: [
+      {
+        fieldNames:
+          searchQuery?.filterFields?.(
+            fieldDefinition.metadata.objectMetadataNameSingular,
+          ) ?? [],
+        filter: relationPickerSearchFilter,
+      },
+    ],
+    orderByField: 'createdAt',
+    mappingFunction: (record: any) =>
+      identifiersMapper?.(
+        record,
+        fieldDefinition.metadata.objectMetadataNameSingular,
+      ),
+    selectedIds: recordId ? [recordId] : [],
+    objectNamePlural: fieldDefinition.metadata.objectMetadataNamePlural,
+  });
+
+  const handleEntitySelected = async (selectedUser: any | null | undefined) => {
+    onSubmit(selectedUser ?? null);
+  };
+
+  return (
+    <SingleEntitySelect
+      EmptyIcon={IconUserCircle}
+      emptyLabel="No Owner"
+      entitiesToSelect={workspaceMembers.entitiesToSelect}
+      loading={workspaceMembers.loading}
+      onCancel={onCancel}
+      onEntitySelected={handleEntitySelected}
+      selectedEntity={workspaceMembers.selectedEntities[0]}
+      width={width}
+    />
+  );
+};

front/src/modules/ui/input/components/internal/relation-picker/hooks/internal/useRelationPickerScopedStates.ts

@@ -0,0 +1,28 @@
+import { getRelationPickerScopedStates } from '@/ui/input/components/internal/relation-picker/utils/getRelationPickerScopedStates';
+import { RecordTableScopeInternalContext } from '@/ui/object/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+
+export const useRelationPickerScopedStates = (args?: {
+  relationPickerScopedId?: string;
+}) => {
+  const { relationPickerScopedId } = args ?? {};
+
+  const scopeId = useAvailableScopeIdOrThrow(
+    RecordTableScopeInternalContext,
+    relationPickerScopedId,
+  );
+
+  const { identifiersMapperState } = getRelationPickerScopedStates({
+    relationPickerScopeId: scopeId,
+  });
+
+  const { searchQueryState } = getRelationPickerScopedStates({
+    relationPickerScopeId: scopeId,
+  });
+
+  return {
+    scopeId,
+    identifiersMapperState,
+    searchQueryState,
+  };
+};

front/src/modules/ui/input/components/internal/relation-picker/hooks/useRelationPicker.ts

@@ -0,0 +1,35 @@
+import { useRecoilState } from 'recoil';
+
+import { useRelationPickerScopedStates } from '@/ui/input/components/internal/relation-picker/hooks/internal/useRelationPickerScopedStates';
+import { RelationPickerScopeInternalContext } from '@/ui/input/components/internal/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+
+type useRelationPickeProps = {
+  relationPickerScopeId?: string;
+};
+
+export const useRelationPicker = (props?: useRelationPickeProps) => {
+  const scopeId = useAvailableScopeIdOrThrow(
+    RelationPickerScopeInternalContext,
+    props?.relationPickerScopeId,
+  );
+
+  const { identifiersMapperState, searchQueryState } =
+    useRelationPickerScopedStates({
+      relationPickerScopedId: scopeId,
+    });
+
+  const [identifiersMapper, setIdentifiersMapper] = useRecoilState(
+    identifiersMapperState,
+  );
+
+  const [searchQuery, setSearchQuery] = useRecoilState(searchQueryState);
+
+  return {
+    scopeId,
+    identifiersMapper,
+    setIdentifiersMapper,
+    searchQuery,
+    setSearchQuery,
+  };
+};

front/src/modules/ui/input/components/internal/relation-picker/scopes/RelationPickerScope.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+import { RelationPickerScopeInternalContext } from '@/ui/input/components/internal/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
+
+type RelationPickerScopeProps = {
+  children: ReactNode;
+  relationPickerScopeId: string;
+};
+
+export const RelationPickerScope = ({
+  children,
+  relationPickerScopeId,
+}: RelationPickerScopeProps) => {
+  return (
+    <RelationPickerScopeInternalContext.Provider
+      value={{ scopeId: relationPickerScopeId }}
+    >
+      {children}
+    </RelationPickerScopeInternalContext.Provider>
+  );
+};

front/src/modules/ui/input/components/internal/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext.ts

@@ -0,0 +1,7 @@
+import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
+import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
+
+type RelationPickerScopeInternalContextProps = ScopedStateKey;
+
+export const RelationPickerScopeInternalContext =
+  createScopeInternalContext<RelationPickerScopeInternalContextProps>();

front/src/modules/ui/input/components/internal/relation-picker/states/identifiersMapperScopedState.ts

@@ -0,0 +1,8 @@
+import { IdentifiersMapper } from '@/ui/input/components/internal/relation-picker/types/IdentifiersMapper';
+import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+
+export const identifiersMapperScopedState =
+  createScopedState<IdentifiersMapper | null>({
+    key: 'identifiersMapperScopedState',
+    defaultValue: null,
+  });

front/src/modules/ui/input/components/internal/relation-picker/states/searchQueryScopedState.ts

@@ -0,0 +1,7 @@
+import { SearchQuery } from '@/ui/input/components/internal/relation-picker/types/SearchQuery';
+import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+
+export const searchQueryScopedState = createScopedState<SearchQuery | null>({
+  key: 'searchQueryScopedState',
+  defaultValue: null,
+});

front/src/modules/ui/input/components/internal/relation-picker/types/IdentifiersMapper.tsx

@@ -0,0 +1,14 @@
+import { AvatarType } from '@/users/components/Avatar';
+
+type RecordMappedToIdentifiers = {
+  id: string;
+  name: string;
+  avatarUrl?: string;
+  avatarType: AvatarType;
+  record: any;
+};
+
+export type IdentifiersMapper = (
+  record: any,
+  relationPickerType: string,
+) => RecordMappedToIdentifiers | undefined;

front/src/modules/ui/input/components/internal/relation-picker/types/SearchQuery.tsx

@@ -0,0 +1,3 @@
+export type SearchQuery = {
+  filterFields: (relationPickerType: string) => string[];
+};

front/src/modules/ui/input/components/internal/relation-picker/utils/getRelationPickerScopedStates.ts

@@ -0,0 +1,24 @@
+import { identifiersMapperScopedState } from '@/ui/input/components/internal/relation-picker/states/identifiersMapperScopedState';
+import { searchQueryScopedState } from '@/ui/input/components/internal/relation-picker/states/searchQueryScopedState';
+import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
+
+export const getRelationPickerScopedStates = ({
+  relationPickerScopeId,
+}: {
+  relationPickerScopeId: string;
+}) => {
+  const identifiersMapperState = getScopedState(
+    identifiersMapperScopedState,
+    relationPickerScopeId,
+  );
+
+  const searchQueryState = getScopedState(
+    searchQueryScopedState,
+    relationPickerScopeId,
+  );
+
+  return {
+    identifiersMapperState,
+    searchQueryState,
+  };
+};