Reset Fields widget implementation (#19283)

## Context This PR implements the first steps for overridable entities resets. <img width="1277" height="568" alt="Screenshot 2026-04-02 at 18 58 04" src="https://github.com/user-attachments/assets/4c7f93b1-c453-4905-a919-cd6af11e0e16" />
2026-04-07 11:34:44 +02:00
parent 23874848a4
commit a2188cb0eb
11 changed files with 528 additions and 0 deletions
@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client';
+
+import { PAGE_LAYOUT_WIDGET_FRAGMENT } from '@/page-layout/graphql/fragments/pageLayoutWidgetFragment';
+
+export const RESET_PAGE_LAYOUT_WIDGET_TO_DEFAULT = gql`
+  ${PAGE_LAYOUT_WIDGET_FRAGMENT}
+  mutation ResetPageLayoutWidgetToDefault($id: String!) {
+    resetPageLayoutWidgetToDefault(id: $id) {
+      ...PageLayoutWidgetFragment
+    }
+  }
+`;
@@ -0,0 +1,135 @@
+import { useInvalidateMetadataStore } from '@/metadata-store/hooks/useInvalidateMetadataStore';
+import { useMetadataErrorHandler } from '@/metadata-error-handler/hooks/useMetadataErrorHandler';
+import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
+import { fieldsWidgetEditorModeDraftComponentState } from '@/page-layout/states/fieldsWidgetEditorModeDraftComponentState';
+import { fieldsWidgetEditorModePersistedComponentState } from '@/page-layout/states/fieldsWidgetEditorModePersistedComponentState';
+import { fieldsWidgetGroupsDraftComponentState } from '@/page-layout/states/fieldsWidgetGroupsDraftComponentState';
+import { fieldsWidgetGroupsPersistedComponentState } from '@/page-layout/states/fieldsWidgetGroupsPersistedComponentState';
+import { fieldsWidgetUngroupedFieldsDraftComponentState } from '@/page-layout/states/fieldsWidgetUngroupedFieldsDraftComponentState';
+import { fieldsWidgetUngroupedFieldsPersistedComponentState } from '@/page-layout/states/fieldsWidgetUngroupedFieldsPersistedComponentState';
+import { hasInitializedFieldsWidgetGroupsDraftComponentState } from '@/page-layout/states/hasInitializedFieldsWidgetGroupsDraftComponentState';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
+import { useMutation } from '@apollo/client/react';
+import { CombinedGraphQLErrors } from '@apollo/client/errors';
+import { t } from '@lingui/core/macro';
+import { useStore } from 'jotai';
+import { useCallback } from 'react';
+import { CrudOperationType } from 'twenty-shared/types';
+import { ResetPageLayoutWidgetToDefaultDocument } from '~/generated-metadata/graphql';
+
+export const useResetPageLayoutWidgetToDefault = (
+  pageLayoutIdFromProps?: string,
+) => {
+  const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
+    PageLayoutComponentInstanceContext,
+    pageLayoutIdFromProps,
+  );
+
+  const [resetMutation] = useMutation(ResetPageLayoutWidgetToDefaultDocument);
+
+  const { handleMetadataError } = useMetadataErrorHandler();
+  const { enqueueErrorSnackBar } = useSnackBar();
+  const { closeSidePanelMenu } = useSidePanelMenu();
+  const { invalidateMetadataStore } = useInvalidateMetadataStore();
+
+  const store = useStore();
+
+  const hasInitializedState = useAtomComponentStateCallbackState(
+    hasInitializedFieldsWidgetGroupsDraftComponentState,
+    pageLayoutId,
+  );
+
+  const groupsDraftState = useAtomComponentStateCallbackState(
+    fieldsWidgetGroupsDraftComponentState,
+    pageLayoutId,
+  );
+
+  const groupsPersistedState = useAtomComponentStateCallbackState(
+    fieldsWidgetGroupsPersistedComponentState,
+    pageLayoutId,
+  );
+
+  const ungroupedDraftState = useAtomComponentStateCallbackState(
+    fieldsWidgetUngroupedFieldsDraftComponentState,
+    pageLayoutId,
+  );
+
+  const ungroupedPersistedState = useAtomComponentStateCallbackState(
+    fieldsWidgetUngroupedFieldsPersistedComponentState,
+    pageLayoutId,
+  );
+
+  const editorModeDraftState = useAtomComponentStateCallbackState(
+    fieldsWidgetEditorModeDraftComponentState,
+    pageLayoutId,
+  );
+
+  const editorModePersistedState = useAtomComponentStateCallbackState(
+    fieldsWidgetEditorModePersistedComponentState,
+    pageLayoutId,
+  );
+
+  const clearWidgetDraftState = useCallback(
+    (widgetId: string) => {
+      const removeWidgetEntry = <T>(prev: Record<string, T>) => {
+        const { [widgetId]: _, ...rest } = prev;
+
+        return rest;
+      };
+
+      store.set(hasInitializedState, removeWidgetEntry);
+      store.set(groupsDraftState, removeWidgetEntry);
+      store.set(groupsPersistedState, removeWidgetEntry);
+      store.set(ungroupedDraftState, removeWidgetEntry);
+      store.set(ungroupedPersistedState, removeWidgetEntry);
+      store.set(editorModeDraftState, removeWidgetEntry);
+      store.set(editorModePersistedState, removeWidgetEntry);
+    },
+    [
+      store,
+      hasInitializedState,
+      groupsDraftState,
+      groupsPersistedState,
+      ungroupedDraftState,
+      ungroupedPersistedState,
+      editorModeDraftState,
+      editorModePersistedState,
+    ],
+  );
+
+  const resetPageLayoutWidgetToDefault = useCallback(
+    async (widgetId: string) => {
+      try {
+        await resetMutation({
+          variables: { id: widgetId },
+        });
+
+        closeSidePanelMenu();
+        clearWidgetDraftState(widgetId);
+        invalidateMetadataStore();
+      } catch (error) {
+        if (CombinedGraphQLErrors.is(error)) {
+          handleMetadataError(error, {
+            primaryMetadataName: 'pageLayoutWidget',
+            operationType: CrudOperationType.UPDATE,
+          });
+        } else {
+          enqueueErrorSnackBar({ message: t`An error occurred.` });
+        }
+      }
+    },
+    [
+      resetMutation,
+      closeSidePanelMenu,
+      clearWidgetDraftState,
+      invalidateMetadataStore,
+      handleMetadataError,
+      enqueueErrorSnackBar,
+    ],
+  );
+
+  return { resetPageLayoutWidgetToDefault };
+};
@@ -1,6 +1,7 @@
 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { CommandMenuItemToggle } from '@/command-menu/components/CommandMenuItemToggle';
 import { useDeletePageLayoutWidget } from '@/page-layout/hooks/useDeletePageLayoutWidget';
+import { useResetPageLayoutWidgetToDefault } from '@/page-layout/hooks/useResetPageLayoutWidgetToDefault';
 import { useFieldsWidgetGroups } from '@/page-layout/widgets/fields/hooks/useFieldsWidgetGroups';
 import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
 import { SidePanelList } from '@/side-panel/components/SidePanelList';
@@ -11,6 +12,8 @@ import { usePageLayoutIdFromContextStore } from '@/side-panel/pages/page-layout/
 import { useUpdateCurrentWidgetConfig } from '@/side-panel/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
 import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
 import { SidePanelSubPages } from '@/side-panel/types/SidePanelSubPages';
+import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
+import { useModal } from '@/ui/layout/modal/hooks/useModal';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
@@ -18,10 +21,13 @@ import { isDefined } from 'twenty-shared/utils';
 import {
  IconChevronDown,
  IconLayoutSidebarRight,
+  IconRefreshDot,
  IconTrash,
 } from 'twenty-ui/display';
 import { type FieldsConfiguration } from '~/generated-metadata/graphql';

+const RESET_WIDGET_TO_DEFAULT_MODAL_ID = 'reset-widget-to-default-modal';
+
 const StyledContainer = styled.div`
  display: flex;
  flex-direction: column;
@@ -46,6 +52,11 @@ export const SidePanelPageLayoutFieldsSettings = () => {

  const { deletePageLayoutWidget } = useDeletePageLayoutWidget(pageLayoutId);

+  const { resetPageLayoutWidgetToDefault } =
+    useResetPageLayoutWidgetToDefault(pageLayoutId);
+
+  const { openModal } = useModal();
+
  const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId);

  const fieldsConfiguration = widgetInEditMode?.configuration as
@@ -82,6 +93,14 @@ export const SidePanelPageLayoutFieldsSettings = () => {
    });
  };

+  const handleResetToDefault = () => {
+    openModal(RESET_WIDGET_TO_DEFAULT_MODAL_ID);
+  };
+
+  const handleConfirmReset = () => {
+    resetPageLayoutWidgetToDefault(widgetInEditMode.id);
+  };
+
  const handleDelete = () => {
    deletePageLayoutWidget(widgetInEditMode.id);
  };
@@ -96,6 +115,7 @@ export const SidePanelPageLayoutFieldsSettings = () => {
    'move-to-tab',
    'add-widget-above',
    'add-widget-below',
+    'reset-to-default',
    'delete',
  ];

@@ -136,6 +156,17 @@ export const SidePanelPageLayoutFieldsSettings = () => {
            />
          </SidePanelGroup>
          <SidePanelGroup heading={t`Manage`}>
+            <SelectableListItem
+              itemId="reset-to-default"
+              onEnter={handleResetToDefault}
+            >
+              <CommandMenuItem
+                id="reset-to-default"
+                Icon={IconRefreshDot}
+                label={t`Reset to default`}
+                onClick={handleResetToDefault}
+              />
+            </SelectableListItem>
            <SelectableListItem itemId="delete" onEnter={handleDelete}>
              <CommandMenuItem
                id="delete"
@@ -148,6 +179,14 @@ export const SidePanelPageLayoutFieldsSettings = () => {
        </SidePanelList>
      </StyledSidePanelContainer>
      <WidgetSettingsFooter pageLayoutId={pageLayoutId} />
+      <ConfirmationModal
+        modalInstanceId={RESET_WIDGET_TO_DEFAULT_MODAL_ID}
+        title={t`Reset to default`}
+        subtitle={t`This will cancel all modifications done on the widget. This action cannot be undone.`}
+        onConfirmClick={handleConfirmReset}
+        confirmButtonText={t`Reset`}
+        confirmButtonAccent="danger"
+      />
    </StyledContainer>
  );
 };