Dashboards: Auto-generate dashboard title and description when saving as (#75246)

This commit is contained in:
Ivan Ortega Alba 2023-09-26 12:53:08 +02:00 committed by GitHub
parent 011f099360
commit 735b6493b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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 } }) => (