Connect the graph title editor (#15039)

closes https://github.com/twentyhq/core-team-issues/issues/1608

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

@@ -2,11 +2,13 @@ import { SidePanelHeader } from '@/command-menu/components/SidePanelHeader';
 import { ChartSettings } from '@/command-menu/pages/page-layout/components/ChartSettings';
 import { GRAPH_TYPE_INFORMATION } from '@/command-menu/pages/page-layout/constants/GraphTypeInformation';
 import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useUpdatePageLayoutWidget } from '@/page-layout/hooks/useUpdatePageLayoutWidget';
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
 import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useTheme } from '@emotion/react';
 import { t } from '@lingui/core/macro';
+import { isNonEmptyString } from '@sniptt/guards';
 import { isDefined } from 'twenty-shared/utils';
 
 export const CommandMenuPageLayoutGraphTypeSelect = () => {
@@ -22,14 +24,26 @@ export const CommandMenuPageLayoutGraphTypeSelect = () => {
     pageLayoutId,
   );
 
+  const { updatePageLayoutWidget } = useUpdatePageLayoutWidget(pageLayoutId);
+
+  if (!isDefined(pageLayoutEditingWidgetId)) {
+    throw new Error('Widget ID must be present while editing the widget');
+  }
+
   const widgetInEditMode = draftPageLayout.tabs
     .flatMap((tab) => tab.widgets)
     .find((widget) => widget.id === pageLayoutEditingWidgetId);
 
+  if (!isDefined(widgetInEditMode)) {
+    throw new Error(
+      `Widget with ID ${pageLayoutEditingWidgetId} not found in page layout`,
+    );
+  }
+
   const theme = useTheme();
 
   if (
-    !isDefined(widgetInEditMode?.configuration) ||
+    !isDefined(widgetInEditMode.configuration) ||
     !('graphType' in widgetInEditMode.configuration)
   ) {
     return null;
@@ -43,9 +57,15 @@ export const CommandMenuPageLayoutGraphTypeSelect = () => {
       <SidePanelHeader
         Icon={GRAPH_TYPE_INFORMATION[currentGraphType].icon}
         iconColor={theme.font.color.tertiary}
-        initialTitle={t`Chart`}
+        initialTitle={widgetInEditMode.title}
         headerType={t`${graphTypeLabel} Chart`}
-        onTitleChange={() => {}}
+        onTitleChange={(newTitle) => {
+          if (isNonEmptyString(newTitle)) {
+            updatePageLayoutWidget(widgetInEditMode.id, {
+              title: newTitle,
+            });
+          }
+        }}
       />
 
       <ChartSettings widget={widgetInEditMode} />