Load views on user load and read in cache (#3552)

* WIP

* Poc

* Use cached root query + remove proloaded views state

* Fix storybook test + fix codegen

* Return default schema if token is absent, unauthenticated if token is invalid

* Use enum instead of bool

---------

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

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

@@ -1,15 +1,38 @@
 import { useLocation, useNavigate } from 'react-router-dom';
 
+import { useCachedRootQuery } from '@/apollo/hooks/useCachedRootQuery';
 import { useObjectMetadataItemForSettings } from '@/object-metadata/hooks/useObjectMetadataItemForSettings';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { QueryMethodName } from '@/object-metadata/types/QueryMethodName';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 
 export const ObjectMetadataNavItems = () => {
-  const { activeObjectMetadataItems } = useObjectMetadataItemForSettings();
+  const { activeObjectMetadataItems, findObjectMetadataItemByNamePlural } =
+    useObjectMetadataItemForSettings();
   const navigate = useNavigate();
   const { getIcon } = useIcons();
   const currentPath = useLocation().pathname;
 
+  const viewObjectMetadataItem = findObjectMetadataItemByNamePlural('views');
+
+  const { cachedRootQuery } = useCachedRootQuery({
+    objectMetadataItem: viewObjectMetadataItem,
+    queryMethodName: QueryMethodName.FindMany,
+  });
+
+  const { records } = useFindManyRecords({
+    skip: cachedRootQuery?.views,
+    objectNameSingular: CoreObjectNameSingular.View,
+    useRecordsWithoutConnection: true,
+  });
+
+  const views =
+    records.length > 0
+      ? records
+      : cachedRootQuery?.views?.edges?.map((edge: any) => edge?.node);
+
   return (
     <>
       {[
@@ -39,18 +62,28 @@ export const ObjectMetadataNavItems = () => {
               ? 1
               : -1;
           }),
-      ].map((objectMetadataItem) => (
-        <NavigationDrawerItem
-          key={objectMetadataItem.id}
-          label={objectMetadataItem.labelPlural}
-          to={`/objects/${objectMetadataItem.namePlural}`}
-          active={currentPath === `/objects/${objectMetadataItem.namePlural}`}
-          Icon={getIcon(objectMetadataItem.icon)}
-          onClick={() => {
-            navigate(`/objects/${objectMetadataItem.namePlural}`);
-          }}
-        />
-      ))}
+      ].map((objectMetadataItem) => {
+        const viewId = views?.find(
+          (view: any) => view?.objectMetadataId === objectMetadataItem.id,
+        )?.id;
+
+        const navigationPath = `/objects/${objectMetadataItem.namePlural}${
+          viewId ? `?view=${viewId}` : ''
+        }`;
+
+        return (
+          <NavigationDrawerItem
+            key={objectMetadataItem.id}
+            label={objectMetadataItem.labelPlural}
+            to={navigationPath}
+            active={currentPath === navigationPath}
+            Icon={getIcon(objectMetadataItem.icon)}
+            onClick={() => {
+              navigate(navigationPath);
+            }}
+          />
+        );
+      })}
     </>
   );
 };