Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/object-metadata/components/ApolloMetadataClientProvider.tsx

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { useRecoilState } from 'recoil';
+
+import { tokenPairState } from '@/auth/states/tokenPairState';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
+
+import { ApolloMetadataClientContext } from '../context/ApolloClientMetadataContext';
+
+export const ApolloMetadataClientProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [tokenPair] = useRecoilState(tokenPairState);
+  const apolloMetadataClient = useMemo(() => {
+    if (tokenPair?.accessToken.token) {
+      return new ApolloClient({
+        uri: `${REACT_APP_SERVER_BASE_URL}/metadata`,
+        cache: new InMemoryCache(),
+        headers: {
+          Authorization: `Bearer ${tokenPair.accessToken.token}`,
+        },
+      });
+    } else {
+      return null;
+    }
+  }, [tokenPair]);
+
+  return (
+    <ApolloMetadataClientContext.Provider value={apolloMetadataClient}>
+      {children}
+    </ApolloMetadataClientContext.Provider>
+  );
+};

packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsLoadEffect.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { useRecoilState } from 'recoil';
+
+import { useFindManyObjectMetadataItems } from '@/object-metadata/hooks/useFindManyObjectMetadataItems';
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
+
+export const ObjectMetadataItemsLoadEffect = () => {
+  const { objectMetadataItems: newObjectMetadataItems } =
+    useFindManyObjectMetadataItems();
+
+  const [objectMetadataItems, setObjectMetadataItems] = useRecoilState(
+    objectMetadataItemsState,
+  );
+
+  useEffect(() => {
+    if (!isDeeplyEqual(objectMetadataItems, newObjectMetadataItems)) {
+      setObjectMetadataItems(newObjectMetadataItems);
+    }
+  }, [newObjectMetadataItems, objectMetadataItems, setObjectMetadataItems]);
+
+  return <></>;
+};

packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx

@@ -0,0 +1,33 @@
+import { useRecoilValue } from 'recoil';
+
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { ObjectMetadataItemsLoadEffect } from '@/object-metadata/components/ObjectMetadataItemsLoadEffect';
+import { ObjectMetadataItemsRelationPickerEffect } from '@/object-metadata/components/ObjectMetadataItemsRelationPickerEffect';
+import { useFindManyObjectMetadataItems } from '@/object-metadata/hooks/useFindManyObjectMetadataItems';
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
+
+export const ObjectMetadataItemsProvider = ({
+  children,
+}: React.PropsWithChildren) => {
+  useFindManyObjectMetadataItems();
+
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+
+  return (
+    <>
+      <ObjectMetadataItemsLoadEffect />
+      {objectMetadataItems.length < 1 && currentWorkspace ? (
+        <></>
+      ) : (
+        <>
+          <ObjectMetadataItemsRelationPickerEffect />
+          <RelationPickerScope relationPickerScopeId="relation-picker">
+            {children}
+          </RelationPickerScope>
+        </>
+      )}
+    </>
+  );
+};

packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsRelationPickerEffect.tsx

@@ -0,0 +1,82 @@
+import { useEffect } from 'react';
+
+import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
+import { IdentifiersMapper } from '@/object-record/relation-picker/types/IdentifiersMapper';
+import { getLogoUrlFromDomainName } from '~/utils';
+
+export const ObjectMetadataItemsRelationPickerEffect = () => {
+  const { setIdentifiersMapper, setSearchQuery } = useRelationPicker({
+    relationPickerScopeId: 'relation-picker',
+  });
+
+  const computeFilterFields = (relationPickerType: string) => {
+    if (relationPickerType === 'company') {
+      return ['name'];
+    }
+
+    if (['workspaceMember', 'person'].includes(relationPickerType)) {
+      return ['name.firstName', 'name.lastName'];
+    }
+
+    return ['name'];
+  };
+
+  const identifierMapper: IdentifiersMapper = (
+    record: any,
+    objectMetadataItemSingularName: string,
+  ) => {
+    if (!record) {
+      return;
+    }
+
+    if (objectMetadataItemSingularName === 'company') {
+      return {
+        id: record.id,
+        name: record.name,
+        avatarUrl: getLogoUrlFromDomainName(record.domainName ?? ''),
+        avatarType: 'squared',
+        record: record,
+      };
+    }
+
+    if (
+      ['workspaceMember', 'person'].includes(objectMetadataItemSingularName)
+    ) {
+      return {
+        id: record.id,
+        name:
+          (record.name?.firstName ?? '') + ' ' + (record.name?.lastName ?? ''),
+        avatarUrl: record.avatarUrl,
+        avatarType: 'rounded',
+        record: record,
+      };
+    }
+
+    if (['opportunity'].includes(objectMetadataItemSingularName)) {
+      return {
+        id: record.id,
+        name: record?.company?.name,
+        avatarUrl: record.avatarUrl,
+        avatarType: 'rounded',
+        record: record,
+      };
+    }
+
+    return {
+      id: record.id,
+      name: record.name,
+      avatarUrl: record.avatarUrl,
+      avatarType: 'rounded',
+      record,
+    };
+  };
+
+  useEffect(() => {
+    setIdentifiersMapper(() => identifierMapper);
+    setSearchQuery({
+      computeFilterFields,
+    });
+  }, [setIdentifiersMapper, setSearchQuery]);
+
+  return <></>;
+};

packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx

@@ -0,0 +1,34 @@
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import { useObjectMetadataItemForSettings } from '@/object-metadata/hooks/useObjectMetadataItemForSettings';
+import { Icon123 } from '@/ui/input/constants/icons';
+import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
+import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
+
+export const ObjectMetadataNavItems = () => {
+  const { activeObjectMetadataItems } = useObjectMetadataItemForSettings();
+  const navigate = useNavigate();
+  const { icons } = useLazyLoadIcons();
+  const currentPath = useLocation().pathname;
+
+  return (
+    <>
+      {activeObjectMetadataItems.map((objectMetadataItem) =>
+        objectMetadataItem.nameSingular === 'opportunity' ? null : (
+          <NavigationDrawerItem
+            key={objectMetadataItem.id}
+            label={objectMetadataItem.labelPlural}
+            to={`/objects/${objectMetadataItem.namePlural}`}
+            active={currentPath == `/objects/${objectMetadataItem.namePlural}`}
+            Icon={
+              objectMetadataItem.icon ? icons[objectMetadataItem.icon] : Icon123
+            }
+            onClick={() => {
+              navigate(`/objects/${objectMetadataItem.namePlural}`);
+            }}
+          />
+        ),
+      )}
+    </>
+  );
+};