public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SaveDashboardAsForm: Adjust form field spacing (#113243)

Browse Source
This commit is contained in:
Yunwen Zheng
2025-10-30 12:17:06 -04:00
committed by GitHub
parent 1613d2815c
commit 8d5e5e2ead
1 changed files with 59 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx
+59 -57
View File
@@ -147,64 +147,66 @@ export function SaveDashboardAsForm({ dashboard, changeInfo }: Props) {
return (
<form onSubmit={handleSubmit(() => onSave(false))}>
<Field
noMargin
label={<TitleFieldLabel onChange={setValue} />}
invalid={!!errors.title}
error={errors.title?.message}
>
<Input
{...register('title', {
required: t('dashboard-scene.save-dashboard-as-form.required', 'Required'),
validate: validateDashboardName,
onChange: handleTitleChange,
})}
aria-label={t(
'dashboard-scene.save-dashboard-as-form.aria-label-save-dashboard-title-field',
'Save dashboard title field'
)}
data-testid={selectors.components.Drawer.DashboardSaveDrawer.saveAsTitleInput}
/>
</Field>
<Field
noMargin
label={<DescriptionLabel onChange={setValue} />}
invalid={!!errors.description}
error={errors.description?.message}
>
<TextArea
{...register('description', { required: false })}
aria-label={t(
'dashboard-scene.save-dashboard-as-form.aria-label-save-dashboard-description-field',
'Save dashboard description field'
)}
autoFocus
/>
</Field>
<Field noMargin label={t('dashboard-scene.save-dashboard-as-form.label-folder', 'Folder')}>
<FolderPicker
onChange={async (uid: string | undefined, title: string | undefined) => {
setValue('folder', { uid, title });
const meta = await getProvisionedMeta(uid);
dashboard.setState({
meta: {
...meta,
folderUid: uid,
},
});
// Re-validate title when folder changes to check for duplicates in new folder
trigger('title');
}}
value={formValues.folder?.uid}
/>
</Field>
{!changeInfo.isNew && (
<Field noMargin label={t('dashboard-scene.save-dashboard-as-form.label-copy-tags', 'Copy tags')}>
<Switch {...register('copyTags')} />
<Stack direction="column" gap={2}>
<Field
noMargin
label={<TitleFieldLabel onChange={setValue} />}
invalid={!!errors.title}
error={errors.title?.message}
>
<Input
{...register('title', {
required: t('dashboard-scene.save-dashboard-as-form.required', 'Required'),
validate: validateDashboardName,
onChange: handleTitleChange,
})}
aria-label={t(
'dashboard-scene.save-dashboard-as-form.aria-label-save-dashboard-title-field',
'Save dashboard title field'
)}
data-testid={selectors.components.Drawer.DashboardSaveDrawer.saveAsTitleInput}
/>
</Field>
)}
<Box paddingTop={2}>{renderFooter(state.error)}</Box>
<Field
noMargin
label={<DescriptionLabel onChange={setValue} />}
invalid={!!errors.description}
error={errors.description?.message}
>
<TextArea
{...register('description', { required: false })}
aria-label={t(
'dashboard-scene.save-dashboard-as-form.aria-label-save-dashboard-description-field',
'Save dashboard description field'
)}
autoFocus
/>
</Field>
<Field noMargin label={t('dashboard-scene.save-dashboard-as-form.label-folder', 'Folder')}>
<FolderPicker
onChange={async (uid: string | undefined, title: string | undefined) => {
setValue('folder', { uid, title });
const meta = await getProvisionedMeta(uid);
dashboard.setState({
meta: {
...meta,
folderUid: uid,
},
});
// Re-validate title when folder changes to check for duplicates in new folder
trigger('title');
}}
value={formValues.folder?.uid}
/>
</Field>
{!changeInfo.isNew && (
<Field noMargin label={t('dashboard-scene.save-dashboard-as-form.label-copy-tags', 'Copy tags')}>
<Switch {...register('copyTags')} />
</Field>
)}
<Box paddingTop={2}>{renderFooter(state.error)}</Box>
</Stack>
</form>
);
}