From 86ae30f198b63e3d838be3fcfae028141f5ab052 Mon Sep 17 00:00:00 2001
From: Antoine THEBAUD <antoine.thebaud@amadeus.com>
Date: Tue, 30 Dec 2025 17:08:20 +0100
Subject: [PATCH] [ENHANCEMENT] Make panel `display` attribute optional

Signed-off-by: Antoine THEBAUD <antoine.thebaud@amadeus.com>
---
 dashboards/src/components/Panel/Panel.tsx     |  4 ++--
 .../src/components/Panel/PanelHeader.tsx      |  2 +-
 .../PanelDrawer/PanelEditorForm.tsx           | 19 +++++++++++++++++--
 .../components/PanelDrawer/usePanelEditor.tsx | 13 ++++++++-----
 4 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/dashboards/src/components/Panel/Panel.tsx b/dashboards/src/components/Panel/Panel.tsx
index 43bbe0b..236b844 100644
--- a/dashboards/src/components/Panel/Panel.tsx
+++ b/dashboards/src/components/Panel/Panel.tsx
@@ -225,8 +225,8 @@ export const Panel = memo(function Panel(props: PanelProps) {
         <PanelHeader
           extra={panelOptions?.extra?.({ panelDefinition: definition, panelGroupItemId })}
           id={headerId}
-          title={definition.spec.display.name}
-          description={definition.spec.display.description}
+          title={definition.spec.display?.name}
+          description={definition.spec.display?.description}
           queryResults={queryResults}
           readHandlers={readHandlers}
           editHandlers={editHandlers}
diff --git a/dashboards/src/components/Panel/PanelHeader.tsx b/dashboards/src/components/Panel/PanelHeader.tsx
index eaae46c..af4cc76 100644
--- a/dashboards/src/components/Panel/PanelHeader.tsx
+++ b/dashboards/src/components/Panel/PanelHeader.tsx
@@ -24,7 +24,7 @@ type OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';
 
 export interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {
   id: string;
-  title: string;
+  title?: string;
   description?: string;
   links?: Link[];
   extra?: ReactNode;
diff --git a/dashboards/src/components/PanelDrawer/PanelEditorForm.tsx b/dashboards/src/components/PanelDrawer/PanelEditorForm.tsx
index 8e55691..f194f6b 100644
--- a/dashboards/src/components/PanelDrawer/PanelEditorForm.tsx
+++ b/dashboards/src/components/PanelDrawer/PanelEditorForm.tsx
@@ -87,7 +87,23 @@ export function PanelEditorForm(props: PanelEditorFormProps): ReactElement {
   // - update action: ask for discard approval if changed
   // - read action: don´t ask for discard approval
   function handleCancel(): void {
-    if (JSON.stringify(initialValues) !== JSON.stringify(form.getValues())) {
+    const currentValues = form.getValues();
+
+    // Normalize display: if both name and description are undefined, set display to undefined
+    const normalizeDisplay = (values: PanelEditorValues): PanelEditorValues => {
+      if (
+        values.panelDefinition.spec.display?.name === undefined &&
+        values.panelDefinition.spec.display?.description === undefined
+      ) {
+        values.panelDefinition.spec.display = undefined;
+      }
+      return values;
+    };
+
+    const normalizedInitial = normalizeDisplay(JSON.parse(JSON.stringify(initialValues)));
+    const normalizedCurrent = normalizeDisplay(JSON.parse(JSON.stringify(currentValues)));
+
+    if (JSON.stringify(normalizedInitial) !== JSON.stringify(normalizedCurrent)) {
       setDiscardDialogOpened(true);
     } else {
       onClose();
@@ -145,7 +161,6 @@ export function PanelEditorForm(props: PanelEditorFormProps): ReactElement {
                 render={({ field, fieldState }) => (
                   <TextField
                     {...field}
-                    required
                     fullWidth
                     label="Name"
                     error={!!fieldState.error}
diff --git a/dashboards/src/components/PanelDrawer/usePanelEditor.tsx b/dashboards/src/components/PanelDrawer/usePanelEditor.tsx
index d249785..21419ab 100644
--- a/dashboards/src/components/PanelDrawer/usePanelEditor.tsx
+++ b/dashboards/src/components/PanelDrawer/usePanelEditor.tsx
@@ -32,8 +32,10 @@ export const usePanelEditor: (panelDefinition: PanelDefinition) => UsePanelEdito
   panelDefinition: PanelDefinition
 ) => {
   const { display, plugin: pluginDefinition, queries: initialQueries, links: initialLinks } = panelDefinition.spec;
-  const [name, setName] = useState(display.name);
-  const [description, setDescription] = useState(display.description);
+  // Provide default display object if undefined
+  const displayData = display ?? { name: undefined, description: undefined };
+  const [name, setName] = useState(displayData.name);
+  const [description, setDescription] = useState(displayData.description);
   const [links, setLinks] = useState(initialLinks);
   const [plugin, setPlugin] = useState(pluginDefinition);
 
@@ -61,8 +63,9 @@ export const usePanelEditor: (panelDefinition: PanelDefinition) => UsePanelEdito
   const setPanelDefinition = useCallback(
     (panelDefinition: PanelDefinition) => {
       const { display, plugin, queries, links } = panelDefinition.spec;
-      setName(display.name);
-      setDescription(display.description);
+      const displayData = display ?? { name: undefined, description: undefined };
+      setName(displayData.name);
+      setDescription(displayData.description);
       setLinks(links);
       setPlugin(plugin);
       setQueries(queries);
@@ -75,7 +78,7 @@ export const usePanelEditor: (panelDefinition: PanelDefinition) => UsePanelEdito
       panelDefinition: {
         kind: 'Panel',
         spec: {
-          display: { name, description },
+          display: name !== undefined || description !== undefined ? { name, description } : undefined,
           plugin,
           queries: currentQueries,
           links,