Explore: minor copy changes in the Add to dashboard modal (#46154)

* Explore: minor copy changes in the Add to dashboard modal

* fix tests

* Additional copy changes & test fixes

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 () => {

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 }:
         <input type="hidden" {...register('queries')} />
         <input type="hidden" {...register('visualization')} />
 
-        <p>Create a new dashboard and add a panel with explored queries.</p>
+        <p>Create a new dashboard and add a panel with the explored queries.</p>
 
         <Field
           label="Dashboard name"
-          description="Choose the name of the new dashboard"
+          description="Choose a name for the new dashboard."
           error={errors.dashboardName?.message}
           invalid={!!errors.dashboardName}
         >
@@ -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 }:
 
         <Field
           label="Folder"
-          description="Select where the dashboard will be created"
+          description="Select where the dashboard will be created."
           error={errors.folderId?.message}
           invalid={!!errors.folderId}
         >
@@ -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 } }}
           />
         </Field>
 
@@ -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

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
       </ToolbarButton>
 
       {isOpen && (