Add record table widget to dashboards

.gitignore

@@ -1,6 +1,7 @@
 **/**/.env
 .DS_Store
 /.idea
+.claude/settings.json
 **/**/node_modules/
 .cache
 

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/dashboard/components/SaveDashboardSingleRecordCommand.tsx

@@ -1,6 +1,7 @@
 import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
 import { useMountedEngineCommandContext } from '@/command-menu-item/engine-command/hooks/useMountedEngineCommandContext';
 import { useSavePageLayout } from '@/page-layout/hooks/useSavePageLayout';
+import { useSavePageLayoutWidgetsData } from '@/page-layout/hooks/useSavePageLayoutWidgetsData';
 import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
 import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
 import { isDefined } from 'twenty-shared/utils';
@@ -17,6 +18,8 @@ export const SaveDashboardSingleRecordCommand = () => {
 
   const { savePageLayout } = useSavePageLayout(pageLayoutId);
 
+  const { savePageLayoutWidgetsData } = useSavePageLayoutWidgetsData();
+
   const { setIsPageLayoutInEditMode } =
     useSetIsPageLayoutInEditMode(pageLayoutId);
 
@@ -26,6 +29,7 @@ export const SaveDashboardSingleRecordCommand = () => {
     const result = await savePageLayout();
 
     if (result.status === 'successful') {
+      await savePageLayoutWidgetsData(pageLayoutId);
       closeSidePanelMenu();
       setIsPageLayoutInEditMode(false);
     }

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/record-page-layout/components/SaveRecordPageLayoutSingleRecordCommand.tsx

@@ -1,8 +1,8 @@
 import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
 import { useMountedEngineCommandContext } from '@/command-menu-item/engine-command/hooks/useMountedEngineCommandContext';
 import { useRecordPageLayoutIdFromRecordStoreOrThrow } from '@/page-layout/hooks/useRecordPageLayoutIdFromRecordStoreOrThrow';
-import { useSaveFieldsWidgetGroups } from '@/page-layout/hooks/useSaveFieldsWidgetGroups';
 import { useSavePageLayout } from '@/page-layout/hooks/useSavePageLayout';
+import { useSavePageLayoutWidgetsData } from '@/page-layout/hooks/useSavePageLayoutWidgetsData';
 import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
 import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
 import { isDefined } from 'twenty-shared/utils';
@@ -22,7 +22,7 @@ export const SaveRecordPageLayoutSingleRecordCommand = () => {
 
   const { savePageLayout } = useSavePageLayout(pageLayoutId);
 
-  const { saveFieldsWidgetGroups } = useSaveFieldsWidgetGroups();
+  const { savePageLayoutWidgetsData } = useSavePageLayoutWidgetsData();
 
   const { setIsPageLayoutInEditMode } =
     useSetIsPageLayoutInEditMode(pageLayoutId);
@@ -33,7 +33,7 @@ export const SaveRecordPageLayoutSingleRecordCommand = () => {
     const result = await savePageLayout();
 
     if (result.status === 'successful') {
-      await saveFieldsWidgetGroups(pageLayoutId);
+      await savePageLayoutWidgetsData(pageLayoutId);
 
       closeSidePanelMenu();
       setIsPageLayoutInEditMode(false);

packages/twenty-front/src/modules/command-menu-item/record/single-record/dashboard/components/SaveDashboardSingleRecordCommand.tsx

@@ -3,6 +3,7 @@ import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-re
 import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { useSavePageLayout } from '@/page-layout/hooks/useSavePageLayout';
+import { useSavePageLayoutWidgetsData } from '@/page-layout/hooks/useSavePageLayoutWidgetsData';
 import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
 import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
 
@@ -15,6 +16,8 @@ export const SaveDashboardSingleRecordCommand = () => {
 
   const { savePageLayout } = useSavePageLayout(pageLayoutId);
 
+  const { savePageLayoutWidgetsData } = useSavePageLayoutWidgetsData();
+
   const { setIsPageLayoutInEditMode } =
     useSetIsPageLayoutInEditMode(pageLayoutId);
 
@@ -24,6 +27,7 @@ export const SaveDashboardSingleRecordCommand = () => {
     const result = await savePageLayout();
 
     if (result.status === 'successful') {
+      await savePageLayoutWidgetsData(pageLayoutId);
       closeSidePanelMenu();
       setIsPageLayoutInEditMode(false);
     }

packages/twenty-front/src/modules/command-menu-item/server-items/hooks/useConvertBackendItemToCommandMenuItemConfig.tsx

@@ -84,9 +84,13 @@ export const useConvertBackendItemToCommandMenuItemConfig = () => {
         return null;
       }
 
+      const isEditModeItem =
+        item.conditionalAvailabilityExpression?.includes('isPageInEditMode') ??
+        false;
+
       const isPinned =
         item.availabilityType !== CommandMenuItemAvailabilityType.FALLBACK &&
-        !contextStoreIsPageInEditMode &&
+        (!contextStoreIsPageInEditMode || isEditModeItem) &&
         item.isPinned;
 
       const Icon = getIcon(item.icon, COMMAND_MENU_DEFAULT_ICON);

packages/twenty-front/src/modules/layout-customization/hooks/useSaveLayoutCustomization.ts

@@ -4,7 +4,7 @@ import { navigationMenuItemsDraftState } from '@/navigation-menu-item/common/sta
 import { navigationMenuItemsSelector } from '@/navigation-menu-item/common/states/navigationMenuItemsSelector';
 import { filterWorkspaceNavigationMenuItems } from '@/navigation-menu-item/common/utils/filterWorkspaceNavigationMenuItems';
 import { useSaveNavigationMenuItemsDraft } from '@/navigation-menu-item/edit/hooks/useSaveNavigationMenuItemsDraft';
-import { useSaveFieldsWidgetGroups } from '@/page-layout/hooks/useSaveFieldsWidgetGroups';
+import { useSavePageLayoutWidgetsData } from '@/page-layout/hooks/useSavePageLayoutWidgetsData';
 import { useUpdatePageLayoutWithTabsAndWidgets } from '@/page-layout/hooks/useUpdatePageLayoutWithTabsAndWidgets';
 import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
@@ -35,7 +35,7 @@ export const useSaveLayoutCustomization = () => {
   const { updatePageLayoutWithTabsAndWidgets } =
     useUpdatePageLayoutWithTabsAndWidgets();
   const { exitLayoutCustomizationMode } = useExitLayoutCustomizationMode();
-  const { saveFieldsWidgetGroups } = useSaveFieldsWidgetGroups();
+  const { savePageLayoutWidgetsData } = useSavePageLayoutWidgetsData();
 
   const featureFlags = useFeatureFlagsMap();
   const isRecordPageLayoutEditingEnabled =
@@ -143,7 +143,7 @@ export const useSaveLayoutCustomization = () => {
           }
         }
 
-        await saveFieldsWidgetGroups(pageLayoutId);
+        await savePageLayoutWidgetsData(pageLayoutId);
       }
 
       if (hasAnyFailure) {
@@ -165,7 +165,7 @@ export const useSaveLayoutCustomization = () => {
   }, [
     saveDraft,
     updatePageLayoutWithTabsAndWidgets,
-    saveFieldsWidgetGroups,
+    savePageLayoutWidgetsData,
     exitLayoutCustomizationMode,
     enqueueErrorSnackBar,
     isRecordPageLayoutEditingEnabled,

packages/twenty-front/src/modules/object-metadata/utils/filterReadableActiveObjectMetadataItems.ts

@@ -0,0 +1,21 @@
+import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
+import { type ObjectPermissions } from 'twenty-shared/types';
+import { isDefined } from 'twenty-shared/utils';
+
+export const filterReadableActiveObjectMetadataItems = (
+  objectMetadataItems: EnrichedObjectMetadataItem[],
+  objectPermissionsByObjectMetadataId: Record<
+    string,
+    ObjectPermissions & { objectMetadataId: string }
+  >,
+): EnrichedObjectMetadataItem[] =>
+  objectMetadataItems.filter((objectMetadataItem) => {
+    const objectPermissions =
+      objectPermissionsByObjectMetadataId[objectMetadataItem.id];
+
+    return (
+      isDefined(objectPermissions) &&
+      objectPermissions.canReadObjectRecords &&
+      objectMetadataItem.isActive
+    );
+  });

packages/twenty-front/src/modules/object-metadata/utils/mapObjectMetadataToGraphQLQuery.ts

@@ -65,9 +65,7 @@ export const mapObjectMetadataToGraphQLQuery = ({
       }
 
       if (!isDefined(fieldMetadata.morphRelations)) {
-        throw new Error(
-          `Field ${fieldMetadata.name} is missing, please refresh the page. If the problem persists, please contact support.`,
-        );
+        return [];
       }
 
       return fieldMetadata.morphRelations.map((morphRelation) => ({
@@ -100,9 +98,7 @@ export const mapObjectMetadataToGraphQLQuery = ({
     }
 
     if (!isDefined(fieldMetadata.morphRelations)) {
-      throw new Error(
-        `Field ${fieldMetadata.name} is missing, please refresh the page. If the problem persists, please contact support.`,
-      );
+      return [];
     }
 
     return fieldMetadata.morphRelations.map((morphRelation) => ({

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainer.tsx

@@ -1,6 +1,5 @@
-import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
-import { type RecordUpdateHookParams } from '@/object-record/record-field/ui/contexts/FieldContext';
 import { RecordIndexRemoveSortingModal } from '@/object-record/record-index/components/RecordIndexRemoveSortingModal';
+import { RecordIndexTableContainerEffect } from '@/object-record/record-index/components/RecordIndexTableContainerEffect';
 import { RECORD_INDEX_REMOVE_SORTING_MODAL_ID } from '@/object-record/record-index/constants/RecordIndexRemoveSortingModalId';
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { RecordTableWithWrappers } from '@/object-record/record-table/components/RecordTableWithWrappers';
@@ -22,23 +21,13 @@ export const RecordIndexTableContainer = ({
     RECORD_INDEX_REMOVE_SORTING_MODAL_ID,
   );
 
-  const { updateOneRecord } = useUpdateOneRecord();
-
-  const updateEntity = ({ variables }: RecordUpdateHookParams) => {
-    updateOneRecord({
-      objectNameSingular,
-      idToUpdate: variables.where.id as string,
-      updateOneRecordInput: variables.updateOneRecordInput,
-    });
-  };
-
   return (
     <>
+      <RecordIndexTableContainerEffect />
       <RecordTableWithWrappers
         recordTableId={recordTableId}
         objectNameSingular={objectNameSingular}
         viewBarId={viewBarInstanceId}
-        updateRecordMutation={updateEntity}
       />
       {isModalOpened && <RecordIndexRemoveSortingModal />}
     </>

packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexStates.ts

@@ -7,6 +7,7 @@ import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/uti
 import { isHiddenSystemField } from '@/object-metadata/utils/isHiddenSystemField';
 import { currentRecordFieldsComponentState } from '@/object-record/record-field/states/currentRecordFieldsComponentState';
 import { type FieldMetadata } from '@/object-record/record-field/ui/types/FieldMetadata';
+import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
 import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
 import { useSetRecordGroups } from '@/object-record/record-group/hooks/useSetRecordGroups';
 import { recordIndexGroupFieldMetadataItemComponentState } from '@/object-record/record-index/states/recordIndexGroupFieldMetadataComponentState';
@@ -32,6 +33,7 @@ import { type View } from '@/views/types/View';
 import { getFilterableFields } from '@/views/utils/getFilterableFields';
 import { mapViewFieldToRecordField } from '@/views/utils/mapViewFieldToRecordField';
 import { mapViewFieldsToColumnDefinitions } from '@/views/utils/mapViewFieldsToColumnDefinitions';
+import { mapViewFilterGroupsToRecordFilterGroups } from '@/views/utils/mapViewFilterGroupsToRecordFilterGroups';
 import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
 import { atom, useStore } from 'jotai';
 import { useCallback } from 'react';
@@ -132,6 +134,10 @@ export const useLoadRecordIndexStates = () => {
         allFilterableFields,
       );
 
+      const recordFilterGroups = mapViewFilterGroupsToRecordFilterGroups(
+        view.viewFilterGroups ?? [],
+      );
+
       const contextStoreFilters = mapViewFiltersToFilters(
         view.viewFilters,
         filterableFieldMetadataItems,
@@ -172,6 +178,10 @@ export const useLoadRecordIndexStates = () => {
         currentRecordFiltersComponentState.atomFamily({
           instanceId: recordIndexId,
         });
+      const currentRecordFilterGroupsAtom =
+        currentRecordFilterGroupsComponentState.atomFamily({
+          instanceId: recordIndexId,
+        });
       const currentRecordSortsAtom =
         currentRecordSortsComponentState.atomFamily({
           instanceId: recordIndexId,
@@ -237,6 +247,7 @@ export const useLoadRecordIndexStates = () => {
           batchSet(hasInitializedFieldsAtom, true);
 
           batchSet(currentRecordFiltersAtom, recordFilters);
+          batchSet(currentRecordFilterGroupsAtom, recordFilterGroups);
           batchSet(hasInitializedFiltersAtom, true);
 
           batchSet(currentRecordSortsAtom, view.viewSorts);

packages/twenty-front/src/modules/object-record/record-table-widget/components/RecordTableWidget.tsx

@@ -0,0 +1,21 @@
+import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
+import { RecordTableWidgetSetReadOnlyColumnHeadersEffect } from '@/object-record/record-table-widget/components/RecordTableWidgetSetReadOnlyColumnHeadersEffect';
+import { RecordTableWithWrappers } from '@/object-record/record-table/components/RecordTableWithWrappers';
+
+export const RecordTableWidget = () => {
+  const { objectNameSingular, recordIndexId, viewBarInstanceId } =
+    useRecordIndexContextOrThrow();
+
+  return (
+    <>
+      <RecordTableWidgetSetReadOnlyColumnHeadersEffect
+        recordTableId={recordIndexId}
+      />
+      <RecordTableWithWrappers
+        recordTableId={recordIndexId}
+        objectNameSingular={objectNameSingular}
+        viewBarId={viewBarInstanceId}
+      />
+    </>
+  );
+};

packages/twenty-front/src/modules/object-record/record-table-widget/components/RecordTableWidgetContextStoreInitEffect.tsx

@@ -0,0 +1,42 @@
+import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
+import { contextStoreCurrentViewTypeComponentState } from '@/context-store/states/contextStoreCurrentViewTypeComponentState';
+import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
+import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
+import { useEffect } from 'react';
+
+type RecordTableWidgetContextStoreInitEffectProps = {
+  objectMetadataItemId: string;
+  viewId: string;
+};
+
+export const RecordTableWidgetContextStoreInitEffect = ({
+  objectMetadataItemId,
+  viewId,
+}: RecordTableWidgetContextStoreInitEffectProps) => {
+  const setContextStoreCurrentObjectMetadataItemId = useSetAtomComponentState(
+    contextStoreCurrentObjectMetadataItemIdComponentState,
+  );
+
+  const setContextStoreCurrentViewId = useSetAtomComponentState(
+    contextStoreCurrentViewIdComponentState,
+  );
+
+  const setContextStoreCurrentViewType = useSetAtomComponentState(
+    contextStoreCurrentViewTypeComponentState,
+  );
+
+  useEffect(() => {
+    setContextStoreCurrentObjectMetadataItemId(objectMetadataItemId);
+    setContextStoreCurrentViewId(viewId);
+    setContextStoreCurrentViewType(ContextStoreViewType.Table);
+  }, [
+    objectMetadataItemId,
+    viewId,
+    setContextStoreCurrentObjectMetadataItemId,
+    setContextStoreCurrentViewId,
+    setContextStoreCurrentViewType,
+  ]);
+
+  return null;
+};