IFrame widget improvements (#15483)

changes - - make iframe side panel to match others -- ie use SidePanelHeader for title - make url optional in configuration to match that of the other widgets (allow partial saves) - render No data status when error or no url - split widget sizes into two -- graph widget sizes and widget sizes (graph widgets are a subset of chart widgets)
2025-11-03 23:00:06 +05:30
parent 902eb2c5d2
commit 5bc876e4b4
23 changed files with 222 additions and 258 deletions
@@ -5,7 +5,7 @@ import { CommandMenuCalendarEventPage } from '@/command-menu/pages/calendar-even
 import { CommandMenuMessageThreadPage } from '@/command-menu/pages/message-thread/components/CommandMenuMessageThreadPage';
 import { CommandMenuPageLayoutGraphFilter } from '@/command-menu/pages/page-layout/components/CommandMenuPageLayoutGraphFilter';
 import { CommandMenuPageLayoutGraphTypeSelect } from '@/command-menu/pages/page-layout/components/CommandMenuPageLayoutGraphTypeSelect';
-import { CommandMenuPageLayoutIframeConfig } from '@/command-menu/pages/page-layout/components/CommandMenuPageLayoutIframeConfig';
+import { CommandMenuPageLayoutIframeSettings } from '@/command-menu/pages/page-layout/components/CommandMenuPageLayoutIframeSettings';
 import { CommandMenuPageLayoutWidgetTypeSelect } from '@/command-menu/pages/page-layout/components/CommandMenuPageLayoutWidgetTypeSelect';
 import { CommandMenuPageLayoutTabSettings } from '@/command-menu/pages/page-layout/components/CommandMenuPageLayoutTabSettings';
 import { CommandMenuMergeRecordPage } from '@/command-menu/pages/record-page/components/CommandMenuMergeRecordPage';
@@ -55,8 +55,8 @@ export const COMMAND_MENU_PAGES_CONFIG = new Map<
    <CommandMenuPageLayoutGraphFilter />,
  ],
  [
-    CommandMenuPages.PageLayoutIframeConfig,
-    <CommandMenuPageLayoutIframeConfig />,
+    CommandMenuPages.PageLayoutIframeSettings,
+    <CommandMenuPageLayoutIframeSettings />,
  ],
  [
    CommandMenuPages.PageLayoutTabSettings,
@@ -52,7 +52,7 @@ export const useCommandMenuCloseAnimationCompleteCleanup = () => {
        const isPageLayoutEditingPage =
          currentPage === CommandMenuPages.PageLayoutWidgetTypeSelect ||
          currentPage === CommandMenuPages.PageLayoutGraphTypeSelect ||
-          currentPage === CommandMenuPages.PageLayoutIframeConfig ||
+          currentPage === CommandMenuPages.PageLayoutIframeSettings ||
          currentPage === CommandMenuPages.PageLayoutTabSettings;

        if (isPageLayoutEditingPage) {
@@ -1,152 +0,0 @@
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
-import { FormTextFieldInput } from '@/object-record/record-field/ui/form-types/components/FormTextFieldInput';
-import { useCreatePageLayoutIframeWidget } from '@/page-layout/hooks/useCreatePageLayoutIframeWidget';
-import { useUpdatePageLayoutWidget } from '@/page-layout/hooks/useUpdatePageLayoutWidget';
-import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
-import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
-import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
-import styled from '@emotion/styled';
-import { t } from '@lingui/core/macro';
-import { isString } from '@sniptt/guards';
-import { useState } from 'react';
-import { isValidUrl } from 'twenty-shared/utils';
-import { Button } from 'twenty-ui/input';
-
-const StyledContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: ${({ theme }) => theme.spacing(2)};
-  gap: ${({ theme }) => theme.spacing(3)};
-`;
-
-const StyledSectionTitle = styled.div`
-  color: ${({ theme }) => theme.font.color.tertiary};
-  font-size: ${({ theme }) => theme.font.size.sm};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  padding-left: ${({ theme }) => theme.spacing(1)};
-`;
-
-const StyledButtonContainer = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  margin-top: ${({ theme }) => theme.spacing(2)};
-`;
-
-export const CommandMenuPageLayoutIframeConfig = () => {
-  const { closeCommandMenu } = useCommandMenu();
-
-  const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
-
-  const { createPageLayoutIframeWidget } =
-    useCreatePageLayoutIframeWidget(pageLayoutId);
-
-  const { updatePageLayoutWidget } = useUpdatePageLayoutWidget(pageLayoutId);
-
-  const [pageLayoutEditingWidgetId, setPageLayoutEditingWidgetId] =
-    useRecoilComponentState(
-      pageLayoutEditingWidgetIdComponentState,
-      pageLayoutId,
-    );
-  const pageLayoutDraft = useRecoilComponentValue(
-    pageLayoutDraftComponentState,
-    pageLayoutId,
-  );
-
-  const allWidgets = pageLayoutDraft.tabs.flatMap((tab) => tab.widgets);
-
-  const editingWidget = allWidgets.find(
-    (w) => w.id === pageLayoutEditingWidgetId,
-  );
-  const isEditMode = !!editingWidget;
-
-  const [title, setTitle] = useState(editingWidget?.title || '');
-
-  const configUrl =
-    editingWidget?.configuration && 'url' in editingWidget.configuration
-      ? editingWidget.configuration.url
-      : undefined;
-
-  const [url, setUrl] = useState(isString(configUrl) ? configUrl : '');
-
-  const [urlError, setUrlError] = useState('');
-
-  const validateUrl = (urlString: string): boolean => {
-    const trimmedUrl = urlString.trim();
-
-    if (!isValidUrl(trimmedUrl)) {
-      setUrlError('Please enter a valid URL');
-      return false;
-    }
-
-    setUrlError('');
-    return true;
-  };
-
-  const handleUrlChange = (value: string) => {
-    setUrl(value);
-    validateUrl(value);
-  };
-
-  const handleSubmit = () => {
-    if (!title.trim()) {
-      return;
-    }
-
-    if (!validateUrl(url)) {
-      return;
-    }
-
-    if (isEditMode && pageLayoutEditingWidgetId !== null) {
-      updatePageLayoutWidget(pageLayoutEditingWidgetId, {
-        title: title.trim(),
-        configuration: {
-          ...editingWidget?.configuration,
-          url: url.trim(),
-        },
-      });
-
-      setPageLayoutEditingWidgetId(null);
-    } else {
-      createPageLayoutIframeWidget(title.trim(), url.trim());
-    }
-
-    closeCommandMenu();
-  };
-
-  const isFormValid = title.trim() && url.trim() && !urlError;
-
-  return (
-    <StyledContainer>
-      <StyledSectionTitle>
-        {isEditMode ? t`Edit iFrame Widget` : t`Configure iFrame Widget`}
-      </StyledSectionTitle>
-
-      <FormTextFieldInput
-        label={t`Widget Title`}
-        placeholder={t`e.g., Analytics Dashboard`}
-        defaultValue={title}
-        onChange={setTitle}
-      />
-
-      <FormTextFieldInput
-        label="URL to Embed"
-        placeholder="https://example.com/embed"
-        defaultValue={url}
-        onChange={handleUrlChange}
-        error={urlError}
-      />
-
-      <StyledButtonContainer>
-        <Button
-          title={isEditMode ? 'Save Changes' : 'Create Widget'}
-          onClick={handleSubmit}
-          disabled={!isFormValid}
-          variant="primary"
-          size="small"
-        />
-      </StyledButtonContainer>
-    </StyledContainer>
-  );
-};
@@ -0,0 +1,103 @@
+import { SidePanelHeader } from '@/command-menu/components/SidePanelHeader';
+import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord';
+import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
+import { FormTextFieldInput } from '@/object-record/record-field/ui/form-types/components/FormTextFieldInput';
+import { useUpdatePageLayoutWidget } from '@/page-layout/hooks/useUpdatePageLayoutWidget';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
+import { isNonEmptyString, isString } from '@sniptt/guards';
+import { useState } from 'react';
+import { isDefined, isValidUrl } from 'twenty-shared/utils';
+import { IconFrame } from 'twenty-ui/display';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+export const CommandMenuPageLayoutIframeSettings = () => {
+  const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
+
+  const theme = useTheme();
+
+  const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId);
+
+  const { updatePageLayoutWidget } = useUpdatePageLayoutWidget(pageLayoutId);
+
+  if (!isDefined(widgetInEditMode)) {
+    throw new Error('Widget ID must be present while editing the widget');
+  }
+
+  const configUrl =
+    widgetInEditMode.configuration && 'url' in widgetInEditMode.configuration
+      ? widgetInEditMode.configuration.url
+      : null;
+
+  const [url, setUrl] = useState<string | null>(
+    isString(configUrl) ? configUrl : null,
+  );
+  const [urlError, setUrlError] = useState('');
+
+  const validateUrl = (urlString: string): boolean => {
+    const trimmedUrl = urlString.trim();
+
+    if (!isNonEmptyString(trimmedUrl)) {
+      setUrlError('');
+      return true;
+    }
+
+    if (!isValidUrl(trimmedUrl)) {
+      setUrlError(t`Please enter a valid URL`);
+      return false;
+    }
+
+    setUrlError('');
+    return true;
+  };
+
+  const handleUrlChange = (value: string) => {
+    setUrl(value);
+
+    if (validateUrl(value)) {
+      const trimmedValue = value.trim();
+      updatePageLayoutWidget(widgetInEditMode.id, {
+        configuration: {
+          ...widgetInEditMode.configuration,
+          url: trimmedValue || null,
+        },
+      });
+    }
+  };
+
+  return (
+    <>
+      <SidePanelHeader
+        Icon={IconFrame}
+        iconColor={theme.font.color.tertiary}
+        initialTitle={widgetInEditMode.title}
+        headerType={t`iFrame Widget`}
+        onTitleChange={(newTitle) => {
+          if (!isNonEmptyString(newTitle)) {
+            return;
+          }
+
+          updatePageLayoutWidget(widgetInEditMode.id, {
+            title: newTitle,
+          });
+        }}
+      />
+      <StyledContainer>
+        <FormTextFieldInput
+          label={t`URL to Embed`}
+          placeholder="https://example.com/embed"
+          defaultValue={url}
+          onChange={handleUrlChange}
+          error={urlError}
+        />
+      </StyledContainer>
+    </>
+  );
+};
@@ -6,6 +6,7 @@ import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pa
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { useCompanyDefaultChartConfig } from '@/page-layout/hooks/useCompanyDefaultChartConfig';
 import { useCreatePageLayoutGraphWidget } from '@/page-layout/hooks/useCreatePageLayoutGraphWidget';
+import { useCreatePageLayoutIframeWidget } from '@/page-layout/hooks/useCreatePageLayoutIframeWidget';
 import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
@@ -24,6 +25,9 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
  const { createPageLayoutGraphWidget } =
    useCreatePageLayoutGraphWidget(pageLayoutId);

+  const { createPageLayoutIframeWidget } =
+    useCreatePageLayoutIframeWidget(pageLayoutId);
+
  const [pageLayoutEditingWidgetId, setPageLayoutEditingWidgetId] =
    useRecoilComponentState(
      pageLayoutEditingWidgetIdComponentState,
@@ -46,9 +50,15 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
    });
  };

-  const handleNavigateToIframeConfig = () => {
+  const handleNavigateToIframeSettings = () => {
+    if (!isDefined(pageLayoutEditingWidgetId)) {
+      const newWidget = createPageLayoutIframeWidget('Untitled iFrame', null);
+
+      setPageLayoutEditingWidgetId(newWidget.id);
+    }
+
    navigatePageLayoutCommandMenu({
-      commandMenuPage: CommandMenuPages.PageLayoutIframeConfig,
+      commandMenuPage: CommandMenuPages.PageLayoutIframeSettings,
    });
  };

@@ -68,15 +78,13 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
        </SelectableListItem>
        <SelectableListItem
          itemId="iframe"
-          onEnter={() => {
-            handleNavigateToIframeConfig();
-          }}
+          onEnter={handleNavigateToIframeSettings}
        >
          <CommandMenuItem
            Icon={IconFrame}
-            label="iFrame"
+            label={t`iFrame`}
            id="iframe"
-            onClick={handleNavigateToIframeConfig}
+            onClick={handleNavigateToIframeSettings}
          />
        </SelectableListItem>
      </CommandGroup>
@@ -3,6 +3,6 @@ import { type CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 export type PageLayoutCommandMenuPage =
  | CommandMenuPages.PageLayoutWidgetTypeSelect
  | CommandMenuPages.PageLayoutGraphTypeSelect
-  | CommandMenuPages.PageLayoutIframeConfig
+  | CommandMenuPages.PageLayoutIframeSettings
  | CommandMenuPages.PageLayoutGraphFilter
  | CommandMenuPages.PageLayoutTabSettings;
@@ -14,7 +14,7 @@ export const getPageLayoutIcon = (page: PageLayoutCommandMenuPage) => {
      return IconAppWindow;
    case CommandMenuPages.PageLayoutGraphTypeSelect:
      return IconChartPie;
-    case CommandMenuPages.PageLayoutIframeConfig:
+    case CommandMenuPages.PageLayoutIframeSettings:
      return IconFrame;
    case CommandMenuPages.PageLayoutGraphFilter:
      return IconFilter;
@@ -9,8 +9,8 @@ export const getPageLayoutPageTitle = (page: PageLayoutCommandMenuPage) => {
      return t`Add Widget`;
    case CommandMenuPages.PageLayoutGraphTypeSelect:
      return t`Select Graph Type`;
-    case CommandMenuPages.PageLayoutIframeConfig:
-      return t`Configure iFrame`;
+    case CommandMenuPages.PageLayoutIframeSettings:
+      return t`iFrame Settings`;
    case CommandMenuPages.PageLayoutGraphFilter:
      return t`Configure filters`;
    case CommandMenuPages.PageLayoutTabSettings:
@@ -18,6 +18,6 @@ export enum CommandMenuPages {
  PageLayoutWidgetTypeSelect = 'page-layout-widget-type-select',
  PageLayoutGraphTypeSelect = 'page-layout-graph-type-select',
  PageLayoutGraphFilter = 'page-layout-graph-filter',
-  PageLayoutIframeConfig = 'page-layout-iframe-config',
+  PageLayoutIframeSettings = 'page-layout-iframe-settings',
  PageLayoutTabSettings = 'page-layout-tab-settings',
 }