Feat/metadata with datatable v2 (#2110)

* Reworked metadata creation

* Wip

* Fix from PR

* Removed consolelog

* Post merge

* Fixed seeds

* Wip

* Added dynamic routing

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/metadata/components/MetadataObjectNavItems.tsx

@@ -0,0 +1,29 @@
+import { IconBuildingSkyscraper } from '@/ui/display/icon';
+import NavItem from '@/ui/navigation/navbar/components/NavItem';
+import { useGetClientConfigQuery } from '~/generated/graphql';
+import { capitalize } from '~/utils/string/capitalize';
+
+import { useFindManyMetadataObjects } from '../hooks/useFindManyMetadataObjects';
+
+export const MetadataObjectNavItems = () => {
+  const { data } = useGetClientConfigQuery();
+
+  const { metadataObjects } = useFindManyMetadataObjects();
+
+  const isFlexibleBackendEnabled = data?.clientConfig?.flexibleBackendEnabled;
+
+  if (!isFlexibleBackendEnabled) return <></>;
+
+  return (
+    <>
+      {metadataObjects.map((metadataObject) => (
+        <NavItem
+          key={metadataObject.id}
+          label={capitalize(metadataObject.namePlural)}
+          to={`/objects/${metadataObject.namePlural}`}
+          Icon={IconBuildingSkyscraper}
+        />
+      ))}
+    </>
+  );
+};

front/src/modules/metadata/components/ObjectDataTableEffect.tsx

@@ -12,25 +12,24 @@ import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilSco
 
 import { useFindManyObjects } from '../hooks/useFindManyObjects';
 import { useSetObjectDataTableData } from '../hooks/useSetDataTableData';
+import { MetadataObjectIdentifier } from '../types/MetadataObjectIdentifier';
+
+export type ObjectDataTableEffectProps = MetadataObjectIdentifier;
 
 export const ObjectDataTableEffect = ({
-  objectNameSingular,
   objectNamePlural,
-}: {
-  objectNamePlural: string;
-  objectNameSingular: string;
-}) => {
+}: ObjectDataTableEffectProps) => {
   const setDataTableData = useSetObjectDataTableData();
 
   const { objects } = useFindManyObjects({
-    objectNamePlural: objectNamePlural,
+    objectNamePlural,
   });
 
   useEffect(() => {
     const entities = objects ?? [];
 
     setDataTableData(entities);
-  }, [objects, objectNameSingular, setDataTableData]);
+  }, [objects, setDataTableData]);
 
   const [searchParams] = useSearchParams();
   const tableRecoilScopeId = useRecoilScopeId(TableRecoilScopeContext);

front/src/modules/metadata/components/ObjectTable.tsx

@@ -1,27 +1,43 @@
 import { suppliersAvailableColumnDefinitions } from '@/companies/constants/companiesAvailableColumnDefinitions';
-import { useSpreadsheetCompanyImport } from '@/companies/hooks/useSpreadsheetCompanyImport';
 import { DataTable } from '@/ui/data/data-table/components/DataTable';
 import { TableContext } from '@/ui/data/data-table/contexts/TableContext';
 import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { ViewBarContext } from '@/ui/data/view-bar/contexts/ViewBarContext';
 import { useTableViews } from '@/views/hooks/useTableViews';
 
+import { useUpdateOneObject } from '../hooks/useUpdateOneObject';
+import { MetadataObjectIdentifier } from '../types/MetadataObjectIdentifier';
+
 import { ObjectDataTableEffect } from './ObjectDataTableEffect';
 
-export const ObjectTable = ({
-  objectNamePlural,
-  objectNameSingular,
-}: {
-  objectNameSingular: string;
-  objectNamePlural: string;
-}) => {
+export type ObjectTableProps = MetadataObjectIdentifier;
+
+export const ObjectTable = ({ objectNamePlural }: ObjectTableProps) => {
   const { createView, deleteView, submitCurrentView, updateView } =
     useTableViews({
       objectId: 'company',
       columnDefinitions: suppliersAvailableColumnDefinitions,
     });
 
-  const { openCompanySpreadsheetImport } = useSpreadsheetCompanyImport();
+  const { updateOneObject } = useUpdateOneObject({
+    objectNamePlural,
+  });
+
+  const updateEntity = ({
+    variables,
+  }: {
+    variables: {
+      where: { id: string };
+      data: {
+        [fieldName: string]: any;
+      };
+    };
+  }) => {
+    updateOneObject?.({
+      idToUpdate: variables.where.id,
+      input: variables.data,
+    });
+  };
 
   return (
     <TableContext.Provider
@@ -31,26 +47,18 @@ export const ObjectTable = ({
         },
       }}
     >
-      <ObjectDataTableEffect
-        objectNamePlural={objectNamePlural}
-        objectNameSingular={objectNameSingular}
-      />
+      <ObjectDataTableEffect objectNamePlural={objectNamePlural} />
       <ViewBarContext.Provider
         value={{
-          defaultViewName: '???',
+          defaultViewName: `All ${objectNamePlural}`,
           onCurrentViewSubmit: submitCurrentView,
           onViewCreate: createView,
           onViewEdit: updateView,
           onViewRemove: deleteView,
-          onImport: openCompanySpreadsheetImport,
           ViewBarRecoilScopeContext: TableRecoilScopeContext,
         }}
       >
-        <DataTable
-          updateEntityMutation={() => {
-            //
-          }}
-        />
+        <DataTable updateEntityMutation={updateEntity} />
       </ViewBarContext.Provider>
     </TableContext.Provider>
   );