[ENHANCEMENT] Make panel display attribute optional

Signed-off-by: Antoine THEBAUD <[email protected]>

Author: Antoine THEBAUD

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}

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;

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}

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,