Fix/metadata object and settings post merge (#2269)

* WIP

* WIP2

* Seed views standard objects

* Migrate views to the new data model

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

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

@@ -1,10 +1,4 @@
 import { useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { useRecoilCallback } from 'recoil';
-
-import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
-import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
-import { currentViewIdScopedState } from '@/views/states/currentViewIdScopedState';
 
 import { useFindManyObjects } from '../hooks/useFindManyObjects';
 import { useSetObjectDataTableData } from '../hooks/useSetDataTableData';
@@ -15,6 +9,7 @@ export type ObjectDataTableEffectProps = Pick<
   'objectNamePlural'
 >;
 
+// TODO: merge in a single effect component
 export const ObjectDataTableEffect = ({
   objectNamePlural,
 }: ObjectDataTableEffectProps) => {
@@ -32,32 +27,5 @@ export const ObjectDataTableEffect = ({
     }
   }, [objects, setDataTableData, loading]);
 
-  const [searchParams] = useSearchParams();
-  const tableRecoilScopeId = useRecoilScopeId(TableRecoilScopeContext);
-  const handleViewSelect = useRecoilCallback(
-    ({ set, snapshot }) =>
-      (viewId: string) => {
-        const currentView = snapshot
-          .getLoadable(
-            currentViewIdScopedState({ scopeId: tableRecoilScopeId }),
-          )
-          .getValue();
-
-        if (currentView === viewId) {
-          return;
-        }
-
-        set(currentViewIdScopedState({ scopeId: tableRecoilScopeId }), viewId);
-      },
-    [tableRecoilScopeId],
-  );
-
-  useEffect(() => {
-    const viewId = searchParams.get('view');
-    if (viewId) {
-      handleViewSelect(viewId);
-    }
-  }, [handleViewSelect, searchParams, objectNamePlural]);
-
   return <></>;
 };

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

@@ -1,10 +1,29 @@
+import styled from '@emotion/styled';
+import { useRecoilCallback } from 'recoil';
+
 import { DataTable } from '@/ui/data/data-table/components/DataTable';
 import { TableContext } from '@/ui/data/data-table/contexts/TableContext';
+import { TableOptionsDropdown } from '@/ui/data/data-table/options/components/TableOptionsDropdown';
+import { tableColumnsScopedState } from '@/ui/data/data-table/states/tableColumnsScopedState';
+import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
+import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
+import { ViewBar } from '@/views/components/ViewBar';
+import { useViewFields } from '@/views/hooks/internal/useViewFields';
+import { useView } from '@/views/hooks/useView';
+import { ViewScope } from '@/views/scopes/ViewScope';
 
 import { useUpdateOneObject } from '../hooks/useUpdateOneObject';
 import { MetadataObjectIdentifier } from '../types/MetadataObjectIdentifier';
 
 import { ObjectDataTableEffect } from './ObjectDataTableEffect';
+import { ObjectTableEffect } from './ObjectTableEffect';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
+`;
 
 export type ObjectTableProps = Pick<
   MetadataObjectIdentifier,
@@ -16,6 +35,11 @@ export const ObjectTable = ({ objectNamePlural }: ObjectTableProps) => {
     objectNamePlural,
   });
 
+  const viewScopeId = objectNamePlural ?? '';
+
+  const { persistViewFields } = useViewFields(viewScopeId);
+  const { setCurrentViewFields } = useView({ viewScopeId: viewScopeId });
+
   const updateEntity = ({
     variables,
   }: {
@@ -32,17 +56,38 @@ export const ObjectTable = ({ objectNamePlural }: ObjectTableProps) => {
     });
   };
 
+  const updateTableColumns = useRecoilCallback(
+    ({ set, snapshot }) =>
+      (viewFields: ColumnDefinition<FieldMetadata>[]) => {
+        set(tableColumnsScopedState(viewScopeId), viewFields);
+      },
+  );
+
   return (
-    <TableContext.Provider
-      value={{
-        onColumnsChange: () => {
-          //
-        },
+    <ViewScope
+      viewScopeId={viewScopeId}
+      onViewFieldsChange={(viewFields) => {
+        // updateTableColumns(viewFields);
       }}
     >
-      <ObjectDataTableEffect objectNamePlural={objectNamePlural} />
-
-      <DataTable updateEntityMutation={updateEntity} />
-    </TableContext.Provider>
+      <StyledContainer>
+        <TableContext.Provider
+          value={{
+            onColumnsChange: (columns) => {
+              // setCurrentViewFields?.(columns);
+              // persistViewFields(columns);
+            },
+          }}
+        >
+          <ViewBar
+            optionsDropdownButton={<TableOptionsDropdown />}
+            optionsDropdownScopeId="table-dropdown-option"
+          />
+          <ObjectTableEffect />
+          <ObjectDataTableEffect objectNamePlural={objectNamePlural} />
+          <DataTable updateEntityMutation={updateEntity} />
+        </TableContext.Provider>
+      </StyledContainer>
+    </ViewScope>
   );
 };

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

@@ -0,0 +1,86 @@
+import { useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+
+import { availableTableColumnsScopedState } from '@/ui/data/data-table/states/availableTableColumnsScopedState';
+import { useView } from '@/views/hooks/useView';
+import { ViewType } from '~/generated/graphql';
+
+import { useMetadataObjectInContext } from '../hooks/useMetadataObjectInContext';
+
+export const ObjectTableEffect = () => {
+  console.log('ObjectTableEffect');
+
+  const {
+    setAvailableSorts,
+    setAvailableFilters,
+    setAvailableFields,
+    setViewType,
+    setViewObjectId,
+  } = useView();
+
+  // const [, setTableColumns] = useRecoilScopedState(
+  //   tableColumnsScopedState,
+  //   TableRecoilScopeContext,
+  // );
+
+  // const [, setTableSorts] = useRecoilScopedState(
+  //   tableSortsScopedState,
+  //   TableRecoilScopeContext,
+  // );
+
+  // const [, setTableFilters] = useRecoilScopedState(
+  //   tableFiltersScopedState,
+  //   TableRecoilScopeContext,
+  // );
+
+  const { columnDefinitions, objectNamePlural } = useMetadataObjectInContext();
+
+  const setAvailableTableColumns = useSetRecoilState(
+    availableTableColumnsScopedState(objectNamePlural ?? ''),
+  );
+
+  useEffect(() => {
+    setAvailableSorts?.([]); // TODO: extract from metadata fields
+    setAvailableFilters?.([]); // TODO: extract from metadata fields
+    setAvailableFields?.(columnDefinitions);
+    setViewObjectId?.(objectNamePlural);
+    setViewType?.(ViewType.Table);
+
+    setAvailableTableColumns(columnDefinitions);
+  }, [
+    setAvailableFields,
+    setAvailableFilters,
+    setAvailableSorts,
+    setAvailableTableColumns,
+    setViewObjectId,
+    setViewType,
+    columnDefinitions,
+    objectNamePlural,
+  ]);
+
+  // useEffect(() => {
+  //   if (currentViewFields) {
+  //     setTableColumns([...currentViewFields].sort((a, b) => a.index - b.index));
+  //   }
+  // }, [currentViewFields, setTableColumns]);
+
+  // useEffect(() => {
+  //   if (currentViewSorts) {
+  //     setTableSorts(currentViewSorts);
+  //   }
+  // }, [currentViewFields, currentViewSorts, setTableColumns, setTableSorts]);
+
+  // useEffect(() => {
+  //   if (currentViewFilters) {
+  //     setTableFilters(currentViewFilters);
+  //   }
+  // }, [
+  //   currentViewFields,
+  //   currentViewFilters,
+  //   setTableColumns,
+  //   setTableFilters,
+  //   setTableSorts,
+  // ]);
+
+  return <></>;
+};

front/src/modules/metadata/hooks/useFindManyMetadataObjects.ts

@@ -38,6 +38,10 @@ export const useFindManyMetadataObjects = () => {
           },
         );
       },
+      onCompleted: (data) => {
+        // eslint-disable-next-line no-console
+        //console.log('useFindManyMetadataObjects data : ', data);
+      },
     },
   );
 

front/src/modules/metadata/hooks/useFindManyObjects.ts

@@ -15,7 +15,14 @@ export const useFindManyObjects = <
   ObjectType extends { id: string } & Record<string, any>,
 >({
   objectNamePlural,
-}: Pick<MetadataObjectIdentifier, 'objectNamePlural'>) => {
+  filter,
+  orderBy,
+  onCompleted,
+}: Pick<MetadataObjectIdentifier, 'objectNamePlural'> & {
+  filter?: any;
+  orderBy?: any;
+  onCompleted?: (data: any) => void;
+}) => {
   const { foundMetadataObject, objectNotFoundInMetadata, findManyQuery } =
     useFindOneMetadataObject({
       objectNamePlural,
@@ -27,6 +34,12 @@ export const useFindManyObjects = <
     findManyQuery,
     {
       skip: !foundMetadataObject,
+      variables: {
+        filter: filter ?? {},
+        orderBy: orderBy ?? {},
+      },
+      onCompleted: (data) =>
+        objectNamePlural && onCompleted?.(data[objectNamePlural]),
       onError: (error) => {
         // eslint-disable-next-line no-console
         console.error(

front/src/modules/metadata/types/PaginatedObjectType.ts

@@ -1,8 +1,5 @@
+import { PaginatedObjectTypeResults } from './PaginatedObjectTypeResults';
+
 export type PaginatedObjectType<ObjectType extends { id: string }> = {
-  [objectNamePlural: string]: {
-    edges: {
-      node: ObjectType;
-      cursor: string;
-    }[];
-  };
+  [objectNamePlural: string]: PaginatedObjectTypeResults<ObjectType>;
 };

front/src/modules/metadata/types/PaginatedObjectTypeResults.ts

@@ -0,0 +1,6 @@
+export type PaginatedObjectTypeResults<ObjectType extends { id: string }> = {
+  edges: {
+    node: ObjectType;
+    cursor: string;
+  }[];
+};

front/src/modules/metadata/utils/generateFindManyCustomObjectsQuery.ts

@@ -1,5 +1,7 @@
 import { gql } from '@apollo/client';
 
+import { capitalize } from '~/utils/string/capitalize';
+
 import { MetadataObject } from '../types/MetadataObject';
 
 import { mapFieldMetadataToGraphQLQuery } from './mapFieldMetadataToGraphQLQuery';
@@ -12,8 +14,10 @@ export const generateFindManyCustomObjectsQuery = ({
   _fromCursor?: string;
 }) => {
   return gql`
-    query FindMany${metadataObject.namePlural} {
-      ${metadataObject.namePlural}{
+    query FindMany${metadataObject.namePlural}($filter: ${capitalize(
+    metadataObject.nameSingular,
+  )}FilterInput, $orderBy: ${capitalize(metadataObject.nameSingular)}OrderBy) {
+      ${metadataObject.namePlural}(filter: $filter, orderBy: $orderBy){
         edges {
           node {
             id