root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 142 Packages Projects Releases Wiki Activity

Dashboards: Disable saving while title is validating (#111518) 

* disable saving while title is validating

* don't show loading icon in the save button while validating

* fix e2e
This commit is contained in:
Haris Rozajac 2025-09-25 12:27:35 -06:00 committed by GitHub
parent b85aa5f681
commit 56106064b1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
e2e-playwright/utils/dashboard-helpers.ts
View File

@ -21,7 +21,12 @@ export async function addDashboard(page: Page, title?: string): Promise<string>
// Click save // Click save
const saveAsButton = page.getByTestId('data-testid Save dashboard drawer button'); const saveAsButton = page.getByTestId('data-testid Save dashboard drawer button');
await saveAsButton.click(); // Ensure button is ready and click using the method that works with React
// Doing simply saveAsButton.click doesn't work, even with force: true and when button is enabled
// It stopped working when https://github.com/grafana/grafana/pull/111518 introduced proper title validation
// This should be a an ok alternative since we are checking that the button is enabled first
await expect(saveAsButton).toBeEnabled();
await saveAsButton.evaluate((btn: HTMLElement) => btn.click());
// Wait for success notification // Wait for success notification
await expect(page.getByText('Dashboard saved')).toBeVisible(); await expect(page.getByText('Dashboard saved')).toBeVisible();

13
public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx
View File

@ -43,7 +43,7 @@ export function SaveDashboardAsForm({ dashboard, changeInfo }: Props) {
}, },
}); });
const { errors, isValid } = formState; const { errors, isValid, validatingFields } = formState;
const formValues = watch(); const formValues = watch();
const { state, onSaveDashboard } = useSaveDashboard(false); const { state, onSaveDashboard } = useSaveDashboard(false);
@ -85,7 +85,16 @@ export function SaveDashboardAsForm({ dashboard, changeInfo }: Props) {
const saveButton = (overwrite: boolean) => { const saveButton = (overwrite: boolean) => {
const showSaveButton = !isValid && hasFolderChanged ? true : isValid; const showSaveButton = !isValid && hasFolderChanged ? true : isValid;
return <SaveButton isValid={showSaveButton} isLoading={state.loading} onSave={onSave} overwrite={overwrite} />; const isTitleValidating = !!validatingFields.title;
return (
<SaveButton
isValid={showSaveButton && !isTitleValidating}
isLoading={state.loading}
onSave={onSave}
overwrite={overwrite}
/>
);
}; };
function renderFooter(error?: Error) { function renderFooter(error?: Error) {
const formValuesMatchContentSent = const formValuesMatchContentSent =