From 735b6493b1a2638f1a973cd27c622e0efe8a287a Mon Sep 17 00:00:00 2001
From: Ivan Ortega Alba <ivanortegaalba@gmail.com>
Date: Tue, 26 Sep 2023 12:53:08 +0200
Subject: [PATCH] Dashboards: Auto-generate dashboard title and description
 when saving as (#75246)

---
 .../forms/SaveDashboardAsForm.tsx             | 75 ++++++++++++++++---
 1 file changed, 64 insertions(+), 11 deletions(-)

diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
index 29f77c3dda2..834ed63d3fc 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
@@ -1,14 +1,18 @@
-import React from 'react';
+import React, { ChangeEvent } from 'react';
 
-import { Button, Input, Switch, Form, Field, InputControl, HorizontalGroup } from '@grafana/ui';
+import { config } from '@grafana/runtime';
+import { Button, Input, Switch, Form, Field, InputControl, HorizontalGroup, Label, TextArea } from '@grafana/ui';
 import { FolderPicker } from 'app/core/components/Select/FolderPicker';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 import { validationSrv } from 'app/features/manage-dashboards/services/ValidationSrv';
 
+import { GenAIDashDescriptionButton } from '../../GenAI/GenAIDashDescriptionButton';
+import { GenAIDashTitleButton } from '../../GenAI/GenAIDashTitleButton';
 import { SaveDashboardFormProps } from '../types';
 
 interface SaveDashboardAsFormDTO {
   title: string;
+  description: string;
   $folder: { uid?: string; title?: string };
   copyTags: boolean;
 }
@@ -48,6 +52,7 @@ export const SaveDashboardAsForm = ({
 }: SaveDashboardAsFormProps) => {
   const defaultValues: SaveDashboardAsFormDTO = {
     title: isNew ? dashboard.title : `${dashboard.title} Copy`,
+    description: dashboard.description,
     $folder: {
       uid: dashboard.meta.folderUid,
       title: dashboard.meta.folderTitle,
@@ -78,6 +83,7 @@ export const SaveDashboardAsForm = ({
 
         const clone = getSaveAsDashboardClone(dashboard);
         clone.title = data.title;
+        clone.description = data.description;
         if (!isNew && !data.copyTags) {
           clone.tags = [];
         }
@@ -97,15 +103,62 @@ export const SaveDashboardAsForm = ({
     >
       {({ register, control, errors, getValues }) => (
         <>
-          <Field label="Dashboard name" invalid={!!errors.title} error={errors.title?.message}>
-            <Input
-              {...register('title', {
-                validate: validateDashboardName(getValues),
-              })}
-              aria-label="Save dashboard title field"
-              autoFocus
-            />
-          </Field>
+          <InputControl
+            render={({ field: { ref, ...field } }) => (
+              <Field
+                label={
+                  <HorizontalGroup justify="space-between">
+                    <Label htmlFor="title">Title</Label>
+                    {config.featureToggles.dashgpt && isNew && (
+                      <GenAIDashTitleButton onGenerate={(title) => field.onChange(title)} dashboard={dashboard} />
+                    )}
+                  </HorizontalGroup>
+                }
+                invalid={!!errors.title}
+                error={errors.title?.message}
+              >
+                <Input
+                  {...field}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) => field.onChange(e.target.value)}
+                  aria-label="Save dashboard title field"
+                  autoFocus
+                />
+              </Field>
+            )}
+            control={control}
+            name="title"
+            rules={{
+              validate: validateDashboardName(getValues),
+            }}
+          />
+          <InputControl
+            render={({ field: { ref, ...field } }) => (
+              <Field
+                label={
+                  <HorizontalGroup justify="space-between">
+                    <Label htmlFor="description">Description</Label>
+                    {config.featureToggles.dashgpt && isNew && (
+                      <GenAIDashDescriptionButton
+                        onGenerate={(description) => field.onChange(description)}
+                        dashboard={dashboard}
+                      />
+                    )}
+                  </HorizontalGroup>
+                }
+                invalid={!!errors.description}
+                error={errors.description?.message}
+              >
+                <TextArea
+                  {...field}
+                  onChange={(e: ChangeEvent<HTMLTextAreaElement>) => field.onChange(e.target.value)}
+                  aria-label="Save dashboard description field"
+                  autoFocus
+                />
+              </Field>
+            )}
+            control={control}
+            name="description"
+          />
           <Field label="Folder">
             <InputControl
               render={({ field: { ref, ...field } }) => (