[ENHANCEMENT] Make panel display attribute optional

Signed-off-by: Antoine THEBAUD <antoine.thebaud@amadeus.com>

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/PanelDrawer/PanelEditorForm.tsx

@@ -44,6 +44,9 @@ export function PanelEditorForm(props: PanelEditorFormProps): ReactElement {
   const { plugin } = panelDefinition.spec;
   const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);
 
+  // Ensure display is initialized (can be undefined)
+  const displayData = panelDefinition.spec.display ?? { name: undefined, description: undefined };
+
   const { panelEditorSchema } = useValidationSchemas();
   const form = useForm<PanelEditorValues>({
     resolver: zodResolver(panelEditorSchema),
@@ -87,7 +90,21 @@ 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) => {
+      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();
@@ -111,6 +128,10 @@ export function PanelEditorForm(props: PanelEditorFormProps): ReactElement {
   const watchedDescription = useWatch({ control: form.control, name: 'panelDefinition.spec.display.description' });
   const watchedPluginKind = useWatch({ control: form.control, name: 'panelDefinition.spec.plugin.kind' });
 
+  // Handle undefined display for rendering purposes
+  const displayName = displayData.name;
+  const displayDescription = displayData.description;
+
   const handleSubmit = useCallback(() => {
     form.handleSubmit(processForm)();
   }, [form, processForm]);
@@ -145,7 +166,6 @@ export function PanelEditorForm(props: PanelEditorFormProps): ReactElement {
                 render={({ field, fieldState }) => (
                   <TextField
                     {...field}
-                    required
                     fullWidth
                     label="Name"
                     error={!!fieldState.error}
@@ -196,7 +216,7 @@ export function PanelEditorForm(props: PanelEditorFormProps): ReactElement {
                     label="Description"
                     error={!!fieldState.error}
                     helperText={fieldState.error?.message}
-                    value={watchedDescription ?? ''}
+                    value={displayDescription ?? ''}
                     onChange={(event) => {
                       field.onChange(event);
                       setDescription(event.target.value);

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,