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/views/components/ViewBar.tsx

@@ -14,6 +14,7 @@ import { ViewsHotkeyScope } from '../types/ViewsHotkeyScope';
 
 import { UpdateViewButtonGroup } from './UpdateViewButtonGroup';
 import { ViewBarDetails } from './ViewBarDetails';
+import { ViewBarEffect } from './ViewBarEffect';
 import { ViewsDropdownButton } from './ViewsDropdownButton';
 
 export type ViewBarProps = {
@@ -43,6 +44,7 @@ export const ViewBar = ({
         availableSorts={availableSorts}
         onSortAdd={upsertViewSort}
       >
+        <ViewBarEffect />
         <TopBar
           className={className}
           leftComponent={

front/src/modules/views/components/ViewBarEffect.tsx

@@ -2,16 +2,15 @@ import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useRecoilCallback } from 'recoil';
 
+import { useFindManyObjects } from '@/metadata/hooks/useFindManyObjects';
+import { PaginatedObjectTypeResults } from '@/metadata/types/PaginatedObjectTypeResults';
 import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
 import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
 import { Filter } from '@/ui/data/filter/types/Filter';
 import { Sort } from '@/ui/data/sort/types/Sort';
 import {
-  SortOrder,
-  useGetViewFieldsQuery,
   useGetViewFiltersQuery,
   useGetViewSortsQuery,
-  useGetViewsQuery,
 } from '~/generated/graphql';
 import { assertNotNull } from '~/utils/assert';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
@@ -25,6 +24,8 @@ import { savedViewFieldsScopedFamilyState } from '../states/savedViewFieldsScope
 import { savedViewFiltersScopedFamilyState } from '../states/savedViewFiltersScopedFamilyState';
 import { savedViewSortsScopedFamilyState } from '../states/savedViewSortsScopedFamilyState';
 import { viewsScopedState } from '../states/viewsScopedState';
+import { View } from '../types/View';
+import { ViewField } from '../types/ViewField';
 
 export const ViewBarEffect = () => {
   const {
@@ -45,80 +46,78 @@ export const ViewBarEffect = () => {
 
   const { viewType, viewObjectId } = useViewInternalStates(viewScopeId);
 
-  useGetViewFieldsQuery({
-    skip: !currentViewId,
-    variables: {
-      orderBy: { index: SortOrder.Asc },
-      where: {
-        viewId: { equals: currentViewId },
-      },
-    },
-    onCompleted: useRecoilCallback(({ snapshot }) => async (data) => {
-      const availableFields = snapshot
-        .getLoadable(availableFieldsScopedState({ scopeId: viewScopeId }))
-        .getValue();
+  useFindManyObjects({
+    objectNamePlural: 'viewFieldsV2',
+    filter: { viewId: { eq: currentViewId } },
+    onCompleted: useRecoilCallback(
+      ({ snapshot }) =>
+        async (data: PaginatedObjectTypeResults<ViewField>) => {
+          const availableFields = snapshot
+            .getLoadable(availableFieldsScopedState({ scopeId: viewScopeId }))
+            .getValue();
 
-      if (!availableFields || !currentViewId) {
-        return;
-      }
+          if (!availableFields || !currentViewId) {
+            return;
+          }
 
-      const savedViewFields = snapshot
-        .getLoadable(
-          savedViewFieldsScopedFamilyState({
-            scopeId: viewScopeId,
-            familyKey: currentViewId,
-          }),
-        )
-        .getValue();
+          const savedViewFields = snapshot
+            .getLoadable(
+              savedViewFieldsScopedFamilyState({
+                scopeId: viewScopeId,
+                familyKey: currentViewId,
+              }),
+            )
+            .getValue();
 
-      const queriedViewFields = data.viewFields
-        .map<ColumnDefinition<FieldMetadata> | null>((viewField) => {
-          const columnDefinition = availableFields.find(
-            ({ key }) => viewField.key === key,
-          );
+          const queriedViewFields = data.edges
+            .map<ColumnDefinition<FieldMetadata> | null>((viewField) => {
+              const columnDefinition = availableFields.find(
+                ({ key }) => viewField.node.fieldId === key,
+              );
 
-          return columnDefinition
-            ? {
-                ...columnDefinition,
-                key: viewField.key,
-                name: viewField.name,
-                index: viewField.index,
-                size: viewField.size ?? columnDefinition.size,
-                isVisible: viewField.isVisible,
-              }
-            : null;
-        })
-        .filter<ColumnDefinition<FieldMetadata>>(assertNotNull);
+              return columnDefinition
+                ? {
+                    ...columnDefinition,
+                    key: viewField.node.fieldId,
+                    name: viewField.node.fieldId,
+                    index: viewField.node.position,
+                    size: viewField.node.size ?? columnDefinition.size,
+                    isVisible: viewField.node.isVisible,
+                  }
+                : null;
+            })
+            .filter<ColumnDefinition<FieldMetadata>>(assertNotNull);
 
-      if (!isDeeplyEqual(savedViewFields, queriedViewFields)) {
-        setCurrentViewFields?.(queriedViewFields);
-        setSavedViewFields?.(queriedViewFields);
-      }
-    }),
+          if (!isDeeplyEqual(savedViewFields, queriedViewFields)) {
+            setCurrentViewFields?.(queriedViewFields);
+            setSavedViewFields?.(queriedViewFields);
+          }
+        },
+    ),
   });
 
-  useGetViewsQuery({
-    variables: {
-      where: {
-        objectId: { equals: viewObjectId },
-        type: { equals: viewType },
-      },
-    },
-    onCompleted: useRecoilCallback(({ snapshot }) => async (data) => {
-      const nextViews = data.views.map((view) => ({
-        id: view.id,
-        name: view.name,
-      }));
-      const views = snapshot
-        .getLoadable(viewsScopedState({ scopeId: viewScopeId }))
-        .getValue();
+  useFindManyObjects({
+    objectNamePlural: 'viewsV2',
+    filter: { type: { eq: viewType }, objectId: { eq: viewObjectId } },
+    onCompleted: useRecoilCallback(
+      ({ snapshot }) =>
+        async (data: PaginatedObjectTypeResults<View>) => {
+          const nextViews = data.edges.map((view) => ({
+            id: view.node.id,
+            name: view.node.name,
+            objectId: view.node.objectId,
+          }));
+          const views = snapshot
+            .getLoadable(viewsScopedState({ scopeId: viewScopeId }))
+            .getValue();
 
-      if (!isDeeplyEqual(views, nextViews)) setViews(nextViews);
+          if (!isDeeplyEqual(views, nextViews)) setViews(nextViews);
 
-      if (!nextViews.length) return;
+          if (!nextViews.length) return;
 
-      if (!currentViewId) return changeView(nextViews[0].id);
-    }),
+          if (!currentViewId) return setCurrentViewId(nextViews[0].id);
+        },
+    ),
   });
 
   useGetViewSortsQuery({

front/src/modules/views/hooks/internal/useViews.ts

@@ -17,29 +17,32 @@ export const useViews = (scopeId: string) => {
   const [updateViewMutation] = useUpdateViewMutation();
   const [deleteViewMutation] = useDeleteViewMutation();
 
-  const createView = useRecoilCallback(({ snapshot }) => async (view: View) => {
-    const viewObjectId = await snapshot
-      .getLoadable(viewObjectIdScopeState({ scopeId }))
-      .getValue();
+  const createView = useRecoilCallback(
+    ({ snapshot }) =>
+      async (view: Pick<View, 'id' | 'name'>) => {
+        const viewObjectId = await snapshot
+          .getLoadable(viewObjectIdScopeState({ scopeId }))
+          .getValue();
 
-    const viewType = await snapshot
-      .getLoadable(viewTypeScopedState({ scopeId }))
-      .getValue();
+        const viewType = await snapshot
+          .getLoadable(viewTypeScopedState({ scopeId }))
+          .getValue();
 
-    if (!viewObjectId || !viewType) {
-      return;
-    }
-    await createViewMutation({
-      variables: {
-        data: {
-          ...view,
-          objectId: viewObjectId,
-          type: viewType,
-        },
+        if (!viewObjectId || !viewType) {
+          return;
+        }
+        await createViewMutation({
+          variables: {
+            data: {
+              ...view,
+              objectId: viewObjectId,
+              type: viewType,
+            },
+          },
+          refetchQueries: [getOperationName(GET_VIEWS) ?? ''],
+        });
       },
-      refetchQueries: [getOperationName(GET_VIEWS) ?? ''],
-    });
-  });
+  );
 
   const updateView = async (view: View) => {
     await updateViewMutation({

front/src/modules/views/types/View.ts

@@ -1 +1 @@
-export type View = { id: string; name: string };
+export type View = { id: string; name: string; objectId: string };

front/src/modules/views/types/ViewField.ts

@@ -0,0 +1,9 @@
+export type ViewField = {
+  id: string;
+  objectId: string;
+  fieldId: string;
+  viewId: string;
+  position: number;
+  isVisible: boolean;
+  size: number;
+};