diff --git a/public/app/features/explore/AddToDashboard/AddToDashboardModal.test.tsx b/public/app/features/explore/AddToDashboard/AddToDashboardModal.test.tsx index 8f532383672..64adcec7e9c 100644 --- a/public/app/features/explore/AddToDashboard/AddToDashboardModal.test.tsx +++ b/public/app/features/explore/AddToDashboard/AddToDashboardModal.test.tsx @@ -95,7 +95,9 @@ describe('Add to Dashboard Modal', () => { userEvent.click(screen.getByRole('button', { name: /save and keep exploring/i })); - expect(await screen.findByRole('alert')).toHaveTextContent('name exists'); + expect(await screen.findByRole('alert')).toHaveTextContent( + 'A dashboard with the same name already exists in this folder.' + ); }); it('Correctly handles empty name API Error', async () => { @@ -108,7 +110,7 @@ describe('Add to Dashboard Modal', () => { userEvent.click(screen.getByRole('button', { name: /save and keep exploring/i })); - expect(await screen.findByRole('alert')).toHaveTextContent('empty name'); + expect(await screen.findByRole('alert')).toHaveTextContent('Dashboard name is required.'); }); it('Correctly handles name match API Error', async () => { diff --git a/public/app/features/explore/AddToDashboard/AddToDashboardModal.tsx b/public/app/features/explore/AddToDashboard/AddToDashboardModal.tsx index b358f3a8299..25dadb957cf 100644 --- a/public/app/features/explore/AddToDashboard/AddToDashboardModal.tsx +++ b/public/app/features/explore/AddToDashboard/AddToDashboardModal.tsx @@ -10,6 +10,14 @@ export interface ErrorResponse { message?: string; } +const ERRORS = { + NAME_REQUIRED: 'Dashboard name is required.', + NAME_EXISTS: 'A dashboard with the same name already exists in this folder.', + INVALID_FIELD: 'This field is invalid.', + UNKNOWN_ERROR: 'An unknown error occurred while saving the dashboard. Please try again.', + INVALID_FOLDER: 'Select a valid folder to save your dashboard in.', +}; + type FormDTO = SaveToNewDashboardDTO; interface Props { @@ -39,16 +47,18 @@ export const AddToDashboardModal = ({ onClose, queries, visualization, onSave }: if (error) { switch (error.status) { - case 'name-exists': - case 'empty-name': case 'name-match': // error.message should always be defined here - setError('dashboardName', { message: error.message ?? 'This field is invalid' }); + setError('dashboardName', { message: error.message ?? ERRORS.INVALID_FIELD }); + break; + case 'empty-name': + setError('dashboardName', { message: ERRORS.NAME_REQUIRED }); + break; + case 'name-exists': + setError('dashboardName', { message: ERRORS.NAME_EXISTS }); break; default: - setSubmissionError( - error.message ?? 'An unknown error occurred while saving the dashboard. Please try again.' - ); + setSubmissionError(error.message ?? ERRORS.UNKNOWN_ERROR); } } }; @@ -59,11 +69,11 @@ export const AddToDashboardModal = ({ onClose, queries, visualization, onSave }: -

Create a new dashboard and add a panel with explored queries.

+

Create a new dashboard and add a panel with the explored queries.

@@ -71,7 +81,10 @@ export const AddToDashboardModal = ({ onClose, queries, visualization, onSave }: id="dashboard_name" {...register('dashboardName', { shouldUnregister: true, - required: { value: true, message: 'This field is required' }, + required: { value: true, message: ERRORS.NAME_REQUIRED }, + setValueAs(value: string) { + return value.trim(); + }, })} // we set default value here instead of in useForm because this input will be unregistered when switching // to "Existing Dashboard" and default values are not populated with manually registered @@ -82,7 +95,7 @@ export const AddToDashboardModal = ({ onClose, queries, visualization, onSave }: @@ -93,7 +106,7 @@ export const AddToDashboardModal = ({ onClose, queries, visualization, onSave }: control={control} name="folderId" shouldUnregister - rules={{ required: { value: true, message: 'Select a valid folder to save your dashboard in' } }} + rules={{ required: { value: true, message: ERRORS.INVALID_FOLDER } }} /> @@ -120,7 +133,7 @@ export const AddToDashboardModal = ({ onClose, queries, visualization, onSave }: type="submit" onClick={handleSubmit(withRedirect(onSubmit, true))} variant="primary" - icon="plus" + icon="apps" disabled={isSubmitting} > Save and go to dashboard diff --git a/public/app/features/explore/AddToDashboard/index.tsx b/public/app/features/explore/AddToDashboard/index.tsx index e3b6d6430e5..9fe40e673fa 100644 --- a/public/app/features/explore/AddToDashboard/index.tsx +++ b/public/app/features/explore/AddToDashboard/index.tsx @@ -77,7 +77,7 @@ export const AddToDashboard = ({ exploreId }: Props) => { aria-label="Add to dashboard" disabled={queries.length === 0} > - Add to Dashboard + Add to dashboard {isOpen && (