Wire fields widget to backend + basic edition (#17965)

Closes twentyhq/core-team-issues#2215
Closes twentyhq/core-team-issues#2216
Closes twentyhq/core-team-issues#2218

## Fields widget edition demo


https://github.com/user-attachments/assets/08626d70-8fcb-4ae2-9222-10ef57e75f90

## Dashboards still work


https://github.com/user-attachments/assets/aa9a9c45-a0a2-481e-b132-bc52254778da

Author: Devessier

packages/twenty-front/src/generated-metadata/graphql.ts

@@ -1,18 +1,14 @@
 import { Action } from '@/action-menu/actions/components/Action';
-import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
 import { useRecordPageLayoutIdFromRecordStoreOrThrow } from '@/page-layout/hooks/useRecordPageLayoutIdFromRecordStoreOrThrow';
 import { useResetDraftPageLayoutToPersistedPageLayout } from '@/page-layout/hooks/useResetDraftPageLayoutToPersistedPageLayout';
 import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
 
 export const CancelRecordPageLayoutSingleRecordAction = () => {
-  const recordId = useSelectedRecordIdOrThrow();
-
   const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
 
   const { pageLayoutId } = useRecordPageLayoutIdFromRecordStoreOrThrow({
-    id: recordId,
     targetObjectNameSingular: objectMetadataItem.nameSingular,
   });
 

packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/record-page-layout-actions/components/CancelRecordPageLayoutSingleRecordAction.tsx

@@ -1,17 +1,13 @@
 import { Action } from '@/action-menu/actions/components/Action';
-import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow';
 import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
 import { useRecordPageLayoutIdFromRecordStoreOrThrow } from '@/page-layout/hooks/useRecordPageLayoutIdFromRecordStoreOrThrow';
 import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
 import { useResetLocationHash } from 'twenty-ui/utilities';
 
 export const EditRecordPageLayoutSingleRecordAction = () => {
-  const recordId = useSelectedRecordIdOrThrow();
-
   const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
 
   const { pageLayoutId } = useRecordPageLayoutIdFromRecordStoreOrThrow({
-    id: recordId,
     targetObjectNameSingular: objectMetadataItem.nameSingular,
   });
 

packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/record-page-layout-actions/components/EditRecordPageLayoutSingleRecordAction.tsx

@@ -1,22 +1,22 @@
 import { Action } from '@/action-menu/actions/components/Action';
-import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
 import { useRecordPageLayoutIdFromRecordStoreOrThrow } from '@/page-layout/hooks/useRecordPageLayoutIdFromRecordStoreOrThrow';
+import { useSaveFieldsWidgetGroups } from '@/page-layout/hooks/useSaveFieldsWidgetGroups';
 import { useSavePageLayout } from '@/page-layout/hooks/useSavePageLayout';
 import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
 
 export const SaveRecordPageLayoutSingleRecordAction = () => {
-  const recordId = useSelectedRecordIdOrThrow();
-
   const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
 
   const { pageLayoutId } = useRecordPageLayoutIdFromRecordStoreOrThrow({
-    id: recordId,
     targetObjectNameSingular: objectMetadataItem.nameSingular,
   });
 
   const { savePageLayout } = useSavePageLayout(pageLayoutId);
+  const { saveFieldsWidgetGroups } = useSaveFieldsWidgetGroups({
+    pageLayoutId,
+  });
 
   const { setIsPageLayoutInEditMode } =
     useSetIsPageLayoutInEditMode(pageLayoutId);
@@ -27,6 +27,8 @@ export const SaveRecordPageLayoutSingleRecordAction = () => {
     const result = await savePageLayout();
 
     if (result.status === 'successful') {
+      await saveFieldsWidgetGroups();
+
       closeCommandMenu();
       setIsPageLayoutInEditMode(false);
     }

packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/record-page-layout-actions/components/SaveRecordPageLayoutSingleRecordAction.tsx

@@ -3,6 +3,7 @@ import { useRecoilCallback } from 'recoil';
 import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
 import { contextStoreIsPageInEditModeComponentState } from '@/context-store/states/contextStoreIsPageInEditModeComponentState';
 import { currentPageLayoutIdState } from '@/page-layout/states/currentPageLayoutIdState';
+import { hasInitializedFieldsWidgetGroupsDraftComponentState } from '@/page-layout/states/hasInitializedFieldsWidgetGroupsDraftComponentState';
 import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState';
 import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
@@ -69,6 +70,13 @@ export const useExecuteTasksOnAnyLocationChange = () => {
             false,
           );
 
+          set(
+            hasInitializedFieldsWidgetGroupsDraftComponentState.atomFamily({
+              instanceId: pageLayoutId,
+            }),
+            {},
+          );
+
           set(currentPageLayoutIdState, null);
         }
 

packages/twenty-front/src/modules/app/hooks/useExecuteTasksOnAnyLocationChange.ts

@@ -3,12 +3,15 @@ import { SidePanelSubPageNavigationHeader } from '@/command-menu/pages/common/co
 import { usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord';
 import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
 import { useTemporaryFieldsConfiguration } from '@/page-layout/hooks/useTemporaryFieldsConfiguration';
-import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration';
 import { FieldsConfigurationEditor } from '@/page-layout/widgets/fields/components/FieldsConfigurationEditor';
+import { FieldsWidgetGroupsDraftInitializationEffect } from '@/page-layout/widgets/fields/components/FieldsWidgetGroupsDraftInitializationEffect';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
-import { useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
+import {
+  type FieldsConfiguration,
+  WidgetConfigurationType,
+} from '~/generated-metadata/graphql';
 
 const StyledOuterContainer = styled.div`
   display: flex;
@@ -28,25 +31,23 @@ const StyledContainer = styled.div`
 export const CommandMenuPageLayoutFieldsLayout = () => {
   const { goBackFromCommandMenu } = useCommandMenuHistory();
 
-  const { pageLayoutId, objectNameSingular } =
+  const { pageLayoutId } =
     usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord();
 
   const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId);
-  const defaultFieldsConfiguration =
-    useTemporaryFieldsConfiguration(objectNameSingular);
-  const [fieldsConfiguration, setFieldsConfiguration] =
-    useState<FieldsConfiguration>(defaultFieldsConfiguration);
+  const temporaryFieldsConfiguration = useTemporaryFieldsConfiguration();
 
   if (!isDefined(widgetInEditMode)) {
     return null;
   }
 
-  const handleConfigurationChange = (
-    updatedConfiguration: FieldsConfiguration,
-  ) => {
-    // TODO: replace with a call to updatePageLayoutWidget
-    setFieldsConfiguration(updatedConfiguration);
-  };
+  const widgetConfiguration = widgetInEditMode.configuration;
+
+  const fieldsConfiguration: FieldsConfiguration =
+    isDefined(widgetConfiguration) &&
+    widgetConfiguration.configurationType === WidgetConfigurationType.FIELDS
+      ? (widgetConfiguration as FieldsConfiguration)
+      : temporaryFieldsConfiguration;
 
   return (
     <StyledOuterContainer>
@@ -55,9 +56,14 @@ export const CommandMenuPageLayoutFieldsLayout = () => {
         onBackClick={goBackFromCommandMenu}
       />
       <StyledContainer>
+        <FieldsWidgetGroupsDraftInitializationEffect
+          viewId={fieldsConfiguration.viewId ?? null}
+          pageLayoutId={pageLayoutId}
+          widgetId={widgetInEditMode.id}
+        />
         <FieldsConfigurationEditor
-          configuration={fieldsConfiguration}
-          onChange={handleConfigurationChange}
+          pageLayoutId={pageLayoutId}
+          widgetId={widgetInEditMode.id}
         />
       </StyledContainer>
     </StyledOuterContainer>

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutFieldsLayout.tsx

@@ -6,12 +6,13 @@ import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layo
 import { usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord';
 import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
-import { useTemporaryFieldsConfiguration } from '@/page-layout/hooks/useTemporaryFieldsConfiguration';
+import { useFieldsWidgetGroups } from '@/page-layout/widgets/fields/hooks/useFieldsWidgetGroups';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
 import { IconLayoutSidebarRight } from 'twenty-ui/display';
+import { type FieldsConfiguration } from '~/generated-metadata/graphql';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -33,15 +34,22 @@ export const CommandMenuPageLayoutFieldsSettings = () => {
     usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord();
 
   const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId);
-  const fieldsConfiguration =
-    useTemporaryFieldsConfiguration(objectNameSingular);
+
+  const fieldsConfiguration = widgetInEditMode?.configuration as
+    | FieldsConfiguration
+    | undefined;
+
+  const { groups } = useFieldsWidgetGroups({
+    viewId: fieldsConfiguration?.viewId ?? null,
+    objectNameSingular,
+  });
 
   if (!isDefined(widgetInEditMode)) {
     return null;
   }
 
-  const totalFieldsCount = fieldsConfiguration.sections.reduce(
-    (count, section) => count + section.fields.length,
+  const totalFieldsCount = groups.reduce(
+    (count, group) => count + group.fields.length,
     0,
   );
 

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutFieldsSettings.tsx

@@ -5,7 +5,6 @@ import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/
 import { getDateGranularityLabel } from '@/command-menu/pages/page-layout/utils/getDateGranularityLabel';
 import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
 import { type FieldConfiguration } from '@/page-layout/types/FieldConfiguration';
-import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
@@ -17,7 +16,10 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useR
 import { ObjectRecordGroupByDateGranularity } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import { MenuItemSelect } from 'twenty-ui/navigation';
-import { type WidgetConfiguration } from '~/generated-metadata/graphql';
+import {
+  type FieldsConfiguration,
+  type WidgetConfiguration,
+} from '~/generated-metadata/graphql';
 
 type ChartDateGranularitySelectionDropdownContentProps = {
   axis?: 'primary' | 'secondary';

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartDateGranularitySelectionDropdownContent.tsx

@@ -32,10 +32,7 @@ export const usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord =
       throw new Error('Only one record should be selected');
     }
 
-    const recordId: string = targetedRecordsRule.selectedRecordIds[0];
-
     const { pageLayoutId } = useRecordPageLayoutIdFromRecordStoreOrThrow({
-      id: recordId,
       targetObjectNameSingular: objectMetadataItem.nameSingular,
     });
 

packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord.ts

@@ -1,13 +1,9 @@
 import { type ChartWidget } from '@/command-menu/pages/page-layout/types/ChartWidget';
 import { isWidgetConfigurationOfTypeGraph } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfTypeGraph';
 import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
-import { type WidgetConfiguration } from '~/generated-metadata/graphql';
 
 export const isChartWidget = (
   pageLayoutWidget: PageLayoutWidget,
 ): pageLayoutWidget is ChartWidget => {
-  return isWidgetConfigurationOfTypeGraph(
-    // TODO: Remove this cast when we FieldsConfiguration and FieldConfiguration are in the backend
-    pageLayoutWidget.configuration as WidgetConfiguration,
-  );
+  return isWidgetConfigurationOfTypeGraph(pageLayoutWidget.configuration);
 };