From 19e77f9dd7f214cfd03b4453e0ecbfd4e1df40ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Tue, 23 Dec 2025 16:33:55 +0100
Subject: [PATCH] [DASHBOARDS] Update iFrame error message (#16777)

`Invalid URL` instead of `no data` for iFrame widgets.

<img width="1142" height="638" alt="CleanShot 2025-12-23 at 14 13 17@2x"
src="https://github.com/user-attachments/assets/22621e57-c4ba-4e1f-91d0-5c4ef435c649"
/>
---
 .../PageLayoutWidgetNoDataDisplay.tsx         | 21 +++++++++++--------
 .../widgets/graph/components/GraphWidget.tsx  |  2 +-
 .../graph/components/GraphWidgetRenderer.tsx  |  4 ++--
 .../iframe/components/IframeWidget.tsx        |  2 +-
 4 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/twenty-front/src/modules/page-layout/widgets/components/PageLayoutWidgetNoDataDisplay.tsx b/packages/twenty-front/src/modules/page-layout/widgets/components/PageLayoutWidgetNoDataDisplay.tsx
index 665885d94d..e12582d0f5 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/components/PageLayoutWidgetNoDataDisplay.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/components/PageLayoutWidgetNoDataDisplay.tsx
@@ -1,23 +1,26 @@
+import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
 import { t } from '@lingui/core/macro';
 import { AppTooltip, Status } from 'twenty-ui/display';
+import { WidgetType } from '~/generated/graphql';
 
-type PageLayoutWidgetNoDataDisplayProps = {
-  widgetId: string;
-};
+export const PageLayoutWidgetNoDataDisplay = () => {
+  const widget = useCurrentWidget();
+  const tooltipId = `widget-incomplete-tooltip-${widget.id}`;
 
-export const PageLayoutWidgetNoDataDisplay = ({
-  widgetId,
-}: PageLayoutWidgetNoDataDisplayProps) => {
-  const tooltipId = `widget-incomplete-tooltip-${widgetId}`;
+  const text = widget.type === WidgetType.IFRAME ? t`Invalid URL` : t`No Data`;
+  const tooltipContent =
+    widget.type === WidgetType.IFRAME
+      ? t`Invalid URL. Click edit to configure this widget.`
+      : t`No data available. Click edit to configure this widget.`;
 
   return (
     <>
       <div id={tooltipId}>
-        <Status color="red" text={t`No Data`} />
+        <Status color="red" text={text} />
       </div>
       <AppTooltip
         anchorSelect={`#${tooltipId}`}
-        content={t`No data available. Click edit to configure this widget.`}
+        content={tooltipContent}
         place="top"
       />
     </>
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidget.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidget.tsx
index 212a578b25..3c82de2357 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidget.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidget.tsx
@@ -40,7 +40,7 @@ export const GraphWidget = ({
   );
 
   if (!hasValidConfiguration) {
-    return <PageLayoutWidgetNoDataDisplay widgetId={widget.id} />;
+    return <PageLayoutWidgetNoDataDisplay />;
   }
 
   switch (graphType) {
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetRenderer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetRenderer.tsx
index ad8960d753..09193fb572 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetRenderer.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetRenderer.tsx
@@ -10,7 +10,7 @@ type GraphWidgetRendererProps = {
 
 export const GraphWidgetRenderer = ({ widget }: GraphWidgetRendererProps) => {
   if (!widget.configuration || !('graphType' in widget.configuration)) {
-    return <PageLayoutWidgetNoDataDisplay widgetId={widget.id} />;
+    return <PageLayoutWidgetNoDataDisplay />;
   }
 
   const graphType = widget.configuration.graphType;
@@ -19,7 +19,7 @@ export const GraphWidgetRenderer = ({ widget }: GraphWidgetRendererProps) => {
     !Object.values(GraphType).includes(graphType) ||
     !isDefined(widget.objectMetadataId)
   ) {
-    return <PageLayoutWidgetNoDataDisplay widgetId={widget.id} />;
+    return <PageLayoutWidgetNoDataDisplay />;
   }
 
   return (
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/iframe/components/IframeWidget.tsx b/packages/twenty-front/src/modules/page-layout/widgets/iframe/components/IframeWidget.tsx
index 02f55ed278..75e956e3a9 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/iframe/components/IframeWidget.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/iframe/components/IframeWidget.tsx
@@ -84,7 +84,7 @@ export const IframeWidget = ({ widget }: IframeWidgetProps) => {
     return (
       <StyledContainer $isEditMode={isPageLayoutInEditMode}>
         <StyledErrorContainer>
-          <PageLayoutWidgetNoDataDisplay widgetId={widget.id} />
+          <PageLayoutWidgetNoDataDisplay />
         </StyledErrorContainer>
       </StyledContainer>
     );