Add Manage and Placement sections in widget side panel page for record page layouts (#19310)

https://github.com/user-attachments/assets/f6120c2e-95e7-4b9b-abb5-69a10c3f2f3b
2026-04-07 16:21:35 +02:00
parent e048d03872
commit 1f3965e5f8
60 changed files with 3364 additions and 235 deletions
@@ -0,0 +1,130 @@
+import { useCallback } from 'react';
+
+import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
+import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
+import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
+import { useIsDashboardPageLayout } from '@/side-panel/pages/page-layout/hooks/useIsDashboardPageLayout';
+import { useNavigatePageLayoutSidePanel } from '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel';
+import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
+import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
+import { t } from '@lingui/core/macro';
+import { SidePanelPages } from 'twenty-shared/types';
+import { WidgetType } from '~/generated-metadata/graphql';
+
+export const useOpenWidgetSettingsInSidePanel = (
+  pageLayoutIdFromProps?: string,
+) => {
+  const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
+    PageLayoutComponentInstanceContext,
+    pageLayoutIdFromProps,
+  );
+
+  const isDashboardPageLayout = useIsDashboardPageLayout();
+
+  const setPageLayoutEditingWidgetId = useSetAtomComponentState(
+    pageLayoutEditingWidgetIdComponentState,
+    pageLayoutId,
+  );
+
+  const { navigatePageLayoutSidePanel } = useNavigatePageLayoutSidePanel();
+  const { closeSidePanelMenu } = useSidePanelMenu();
+  const setSidePanelPage = useSetAtomState(sidePanelPageState);
+
+  const openWidgetSettingsInSidePanel = useCallback(
+    ({
+      widgetId,
+      widgetType,
+    }: {
+      widgetId: string;
+      widgetType: WidgetType;
+    }) => {
+      if (widgetType === WidgetType.IFRAME) {
+        if (!isDashboardPageLayout) {
+          return;
+        }
+
+        navigatePageLayoutSidePanel({
+          sidePanelPage: SidePanelPages.DashboardIframeSettings,
+          pageTitle: t`Edit iFrame`,
+          resetNavigationStack: true,
+        });
+        setPageLayoutEditingWidgetId(widgetId);
+        return;
+      }
+
+      if (widgetType === WidgetType.GRAPH) {
+        if (!isDashboardPageLayout) {
+          return;
+        }
+
+        navigatePageLayoutSidePanel({
+          sidePanelPage: SidePanelPages.DashboardChartSettings,
+          pageTitle: t`Edit Graph`,
+          resetNavigationStack: true,
+        });
+        setPageLayoutEditingWidgetId(widgetId);
+        return;
+      }
+
+      if (widgetType === WidgetType.FIELDS) {
+        if (!isDashboardPageLayout) {
+          navigatePageLayoutSidePanel({
+            sidePanelPage: SidePanelPages.RecordPageFieldsSettings,
+            pageTitle: t`Edit Fields`,
+            resetNavigationStack: true,
+          });
+          setPageLayoutEditingWidgetId(widgetId);
+        }
+        return;
+      }
+
+      if (widgetType === WidgetType.FIELD) {
+        if (!isDashboardPageLayout) {
+          navigatePageLayoutSidePanel({
+            sidePanelPage: SidePanelPages.RecordPageFieldSettings,
+            pageTitle: t`Field widget`,
+            resetNavigationStack: true,
+          });
+          setPageLayoutEditingWidgetId(widgetId);
+        }
+        return;
+      }
+
+      if (widgetType === WidgetType.RECORD_TABLE) {
+        if (!isDashboardPageLayout) {
+          return;
+        }
+
+        navigatePageLayoutSidePanel({
+          sidePanelPage: SidePanelPages.DashboardRecordTableSettings,
+          pageTitle: t`Edit Record Table`,
+          resetNavigationStack: true,
+        });
+        setPageLayoutEditingWidgetId(widgetId);
+        return;
+      }
+
+      if (widgetType === WidgetType.STANDALONE_RICH_TEXT) {
+        setPageLayoutEditingWidgetId(widgetId);
+        closeSidePanelMenu();
+        return;
+      }
+
+      setSidePanelPage(SidePanelPages.CommandMenuDisplay);
+      closeSidePanelMenu();
+    },
+    [
+      isDashboardPageLayout,
+      setPageLayoutEditingWidgetId,
+      navigatePageLayoutSidePanel,
+      closeSidePanelMenu,
+      setSidePanelPage,
+    ],
+  );
+
+  return {
+    openWidgetSettingsInSidePanel,
+  };
+};