Wire fields widget to backend + basic edition

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

@@ -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/EditRecordPageLayoutSingleRecordAction.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/SaveRecordPageLayoutSingleRecordAction.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/app/hooks/useExecuteTasksOnAnyLocationChange.ts

@@ -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/command-menu/pages/page-layout/components/CommandMenuPageLayoutFieldsLayout.tsx

@@ -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/CommandMenuPageLayoutFieldsSettings.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/dropdown-content/ChartDateGranularitySelectionDropdownContent.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/hooks/usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord.ts

@@ -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/utils/isChartWidget.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);
 };

packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType.ts

@@ -1,11 +1,11 @@
 import { type FieldConfiguration } from '@/page-layout/types/FieldConfiguration';
-import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration';
 import {
   type AggregateChartConfiguration,
   type BarChartConfiguration,
   type CalendarConfiguration,
   type EmailsConfiguration,
   type FieldRichTextConfiguration,
+  type FieldsConfiguration,
   type FilesConfiguration,
   type FrontComponentConfiguration,
   type GaugeChartConfiguration,

packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isWidgetConfigurationOfTypeGraph.ts

@@ -1,8 +1,10 @@
 import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
 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 { type WidgetConfiguration } from '~/generated-metadata/graphql';
+import {
+  type FieldsConfiguration,
+  type WidgetConfiguration,
+} from '~/generated-metadata/graphql';
 
 export const isWidgetConfigurationOfTypeGraph = (
   configuration:

packages/twenty-front/src/modules/navigation/hooks/__tests__/useDefaultHomePagePath.test.ts

@@ -50,13 +50,15 @@ const renderHooks = ({
               isCompact: false,
               openRecordIn: ViewOpenRecordIn.SIDE_PANEL,
               viewFields: [],
+              viewFieldGroups: [],
               viewGroups: [],
               viewSorts: [],
+              viewFilters: [],
+              viewFilterGroups: [],
               kanbanAggregateOperation: AggregateOperations.COUNT,
               icon: '',
               kanbanAggregateOperationFieldMetadataId: '',
               position: 0,
-              viewFilters: [],
               visibility: ViewVisibility.WORKSPACE,
               createdByUserWorkspaceId: null,
               shouldHideEmptyGroups: false,

packages/twenty-front/src/modules/object-record/object-options-dropdown/hooks/useSetViewTypeFromLayoutOptionsMenu.ts

@@ -149,6 +149,9 @@ export const useSetViewTypeFromLayoutOptionsMenu = () => {
             updateCurrentViewParams.mainGroupByFieldMetadataId = null;
             return await updateCurrentView(updateCurrentViewParams);
           }
+          case ViewType.FieldsWidget: {
+            return;
+          }
           default: {
             return assertUnreachable(viewType);
           }

packages/twenty-front/src/modules/object-record/record-show/components/PageLayoutRecordPageRenderer.tsx

@@ -6,7 +6,7 @@ import { RecordShowContainerContextStoreTargetedRecordsEffect } from '@/object-r
 import { RecordShowEffect } from '@/object-record/record-show/components/RecordShowEffect';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
 import { PageLayoutRenderer } from '@/page-layout/components/PageLayoutRenderer';
-import { useRecordPageLayoutId } from '@/page-layout/hooks/useRecordPageLayoutId';
+import { usePageLayoutIdForRecord } from '@/page-layout/hooks/usePageLayoutIdForRecord';
 import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { type TargetRecordIdentifier } from '@/ui/layout/contexts/TargetRecordIdentifier';
 import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter';
@@ -50,7 +50,7 @@ export const PageLayoutRecordPageRenderer = ({
     }),
   );
 
-  const { pageLayoutId } = useRecordPageLayoutId({
+  const { pageLayoutId } = usePageLayoutIdForRecord({
     id: targetRecordIdentifier.id,
     targetObjectNameSingular: targetRecordIdentifier.targetObjectNameSingular,
   });

packages/twenty-front/src/modules/page-layout/components/utils/__tests__/getPageLayoutVerticalListViewerVariant.test.ts

@@ -0,0 +1,43 @@
+import { getPageLayoutVerticalListViewerVariant } from '@/page-layout/components/utils/getPageLayoutVerticalListViewerVariant';
+
+describe('getPageLayoutVerticalListViewerVariant', () => {
+  it('should return side-column when isInPinnedTab is true', () => {
+    expect(
+      getPageLayoutVerticalListViewerVariant({
+        isInPinnedTab: true,
+        isMobile: false,
+        isInRightDrawer: false,
+      }),
+    ).toBe('side-column');
+  });
+
+  it('should return side-column when isMobile is true', () => {
+    expect(
+      getPageLayoutVerticalListViewerVariant({
+        isInPinnedTab: false,
+        isMobile: true,
+        isInRightDrawer: false,
+      }),
+    ).toBe('side-column');
+  });
+
+  it('should return side-column when isInRightDrawer is true', () => {
+    expect(
+      getPageLayoutVerticalListViewerVariant({
+        isInPinnedTab: false,
+        isMobile: false,
+        isInRightDrawer: true,
+      }),
+    ).toBe('side-column');
+  });
+
+  it('should return default when none of the conditions are true', () => {
+    expect(
+      getPageLayoutVerticalListViewerVariant({
+        isInPinnedTab: false,
+        isMobile: false,
+        isInRightDrawer: false,
+      }),
+    ).toBe('default');
+  });
+});