i18n: dashboard import page (#75664)

* add translation for filezone primary and secondary text

* add translation for Grafana.com field label

* update translation keys

* add translation for load button

* update required translation

* Format utils for invalid-dashboard

* add extracted translations

* add pseudo translations

* add translation for json validation

* json field label translation

* add translation for required json field

* add translation for cancel key

* add extracted translations

* Add pseudo locale translation

* Update public/app/features/manage-dashboards/utils/validation.ts

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* Update public/app/features/manage-dashboards/utils/validation.ts

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* Update public/app/features/manage-dashboards/utils/validation.ts

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* Update public/app/features/manage-dashboards/utils/validation.ts

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* Update public/app/features/manage-dashboards/DashboardImportPage.tsx

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* Update public/app/features/manage-dashboards/DashboardImportPage.tsx

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* Update public/app/features/manage-dashboards/DashboardImportPage.tsx

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* Update public/app/features/manage-dashboards/DashboardImportPage.tsx

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* Update public/app/features/manage-dashboards/DashboardImportPage.tsx

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* Update public/app/features/manage-dashboards/DashboardImportPage.tsx

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* update translations

* Update public/app/features/manage-dashboards/DashboardImportPage.tsx

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* Update public/app/features/manage-dashboards/DashboardImportPage.tsx

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* Update public/app/features/manage-dashboards/DashboardImportPage.tsx

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* update link component

* add new translations

---------

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

public/app/features/manage-dashboards/DashboardImportPage.tsx

@@ -26,6 +26,7 @@ import {
 } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
 import { Page } from 'app/core/components/Page/Page';
+import { t, Trans } from 'app/core/internationalization';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 import { StoreState } from 'app/types';
 
@@ -126,6 +127,12 @@ class UnthemedDashboardImport extends PureComponent<Props> {
   renderImportForm() {
     const styles = importStyles(this.props.theme);
 
+    const GcomDashboardsLink = () => (
+      <TextLink variant="bodySmall" href="https://grafana.com/grafana/dashboards/" external>
+        grafana.com/dashboards
+      </TextLink>
+    );
+
     return (
       <>
         <div className={styles.option}>
@@ -136,8 +143,11 @@ class UnthemedDashboardImport extends PureComponent<Props> {
             onLoad={this.onFileUpload}
           >
             <FileDropzoneDefaultChildren
-              primaryText="Upload dashboard JSON file"
-              secondaryText="Drag and drop here or click to browse"
+              primaryText={t('dashboard-import.file-dropzone.primary-text', 'Upload dashboard JSON file')}
+              secondaryText={t(
+                'dashboard-import.file-dropzone.secondary-text',
+                'Drag and drop here or click to browse'
+              )}
             />
           </FileDropzone>
         </div>
@@ -148,10 +158,9 @@ class UnthemedDashboardImport extends PureComponent<Props> {
                 label={
                   <Label className={styles.labelWithLink} htmlFor="url-input">
                     <span>
-                      Find and import dashboards for common applications at{' '}
-                      <TextLink variant="bodySmall" href="https://grafana.com/grafana/dashboards/" external>
-                        grafana.com/dashboards
-                      </TextLink>
+                      <Trans i18nKey="dashboard-import.gcom-field.label">
+                        Find and import dashboards for common applications at <GcomDashboardsLink />
+                      </Trans>
                     </span>
                   </Label>
                 }
@@ -160,13 +169,20 @@ class UnthemedDashboardImport extends PureComponent<Props> {
               >
                 <Input
                   id="url-input"
-                  placeholder="Grafana.com dashboard URL or ID"
+                  placeholder={t('dashboard-import.gcom-field.placeholder', 'Grafana.com dashboard URL or ID')}
                   type="text"
                   {...register('gcomDashboard', {
-                    required: 'A Grafana dashboard URL or ID is required',
+                    required: t(
+                      'dashboard-import.gcom-field.validation-required',
+                      'A Grafana dashboard URL or ID is required'
+                    ),
                     validate: validateGcomDashboard,
                   })}
-                  addonAfter={<Button type="submit">Load</Button>}
+                  addonAfter={
+                    <Button type="submit">
+                      <Trans i18nKey="dashboard-import.gcom-field.load-button">Load</Trans>
+                    </Button>
+                  }
                 />
               </Field>
             )}
@@ -177,13 +193,13 @@ class UnthemedDashboardImport extends PureComponent<Props> {
             {({ register, errors }) => (
               <>
                 <Field
-                  label="Import via dashboard JSON model"
+                  label={t('dashboard-import.json-field.label', 'Import via dashboard JSON model')}
                   invalid={!!errors.dashboardJson}
                   error={errors.dashboardJson && errors.dashboardJson.message}
                 >
                   <TextArea
                     {...register('dashboardJson', {
-                      required: 'Need a dashboard JSON model',
+                      required: t('dashboard-import.json-field.validation-required', 'Need a dashboard JSON model'),
                       validate: validateDashboardJson,
                     })}
                     data-testid={selectors.components.DashboardImportPage.textarea}
@@ -194,10 +210,10 @@ class UnthemedDashboardImport extends PureComponent<Props> {
                 </Field>
                 <HorizontalGroup>
                   <Button type="submit" data-testid={selectors.components.DashboardImportPage.submit}>
-                    Load
+                    <Trans i18nKey="dashboard-import.form-actions.load">Load</Trans>
                   </Button>
                   <LinkButton variant="secondary" href={`${config.appSubUrl}/dashboards`}>
-                    Cancel
+                    <Trans i18nKey="dashboard-import.form-actions.cancel">Cancel</Trans>
                   </LinkButton>
                 </HorizontalGroup>
               </>

public/app/features/manage-dashboards/utils/validation.ts

@@ -1,3 +1,5 @@
+import { t } from 'i18next';
+
 import { getBackendSrv } from '@grafana/runtime';
 
 import { validationSrv } from '../services/ValidationSrv';
@@ -7,16 +9,16 @@ export const validateDashboardJson = (json: string) => {
   try {
     dashboard = JSON.parse(json);
   } catch (error) {
-    return 'Not valid JSON';
+    return t('dashboard.validation.invalid-json', 'Not valid JSON');
   }
   if (dashboard && dashboard.hasOwnProperty('tags')) {
     if (Array.isArray(dashboard.tags)) {
       const hasInvalidTag = dashboard.tags.some((tag: string) => typeof tag !== 'string');
       if (hasInvalidTag) {
-        return 'tags expected array of strings';
+        return t('dashboard.validation.tags-expected-strings', 'tags expected array of strings');
       }
     } else {
-      return 'tags expected array';
+      return t('dashboard.validation.tags-expected-array', 'tags expected array');
     }
   }
   return true;
@@ -26,7 +28,9 @@ export const validateGcomDashboard = (gcomDashboard: string) => {
   // From DashboardImportCtrl
   const match = /(^\d+$)|dashboards\/(\d+)/.exec(gcomDashboard);
 
-  return match && (match[1] || match[2]) ? true : 'Could not find a valid Grafana.com ID';
+  return match && (match[1] || match[2])
+    ? true
+    : t('dashboard.validation.invalid-dashboard-id', 'Could not find a valid Grafana.com ID');
 };
 
 export const validateTitle = (newTitle: string, folderUid: string) => {

public/locales/de-DE/grafana.json

@@ -231,6 +231,32 @@
       "settings": "Dashboard-Einstellungen",
       "share": "Dashboard oder Panel teilen",
       "unmark-favorite": "Markierung als Favorit entfernen"
+    },
+    "validation": {
+      "invalid-dashboard-id": "",
+      "invalid-json": "",
+      "tags-expected-array": "",
+      "tags-expected-strings": ""
+    }
+  },
+  "dashboard-import": {
+    "file-dropzone": {
+      "primary-text": "",
+      "secondary-text": ""
+    },
+    "form-actions": {
+      "cancel": "",
+      "load": ""
+    },
+    "gcom-field": {
+      "label": "",
+      "load-button": "",
+      "placeholder": "",
+      "validation-required": ""
+    },
+    "json-field": {
+      "label": "",
+      "validation-required": ""
     }
   },
   "dashboard-settings": {

public/locales/en-US/grafana.json

@@ -231,6 +231,32 @@
       "settings": "Dashboard settings",
       "share": "Share dashboard",
       "unmark-favorite": "Unmark as favorite"
+    },
+    "validation": {
+      "invalid-dashboard-id": "Could not find a valid Grafana.com ID",
+      "invalid-json": "Not valid JSON",
+      "tags-expected-array": "tags expected array",
+      "tags-expected-strings": "tags expected array of strings"
+    }
+  },
+  "dashboard-import": {
+    "file-dropzone": {
+      "primary-text": "Upload dashboard JSON file",
+      "secondary-text": "Drag and drop here or click to browse"
+    },
+    "form-actions": {
+      "cancel": "Cancel",
+      "load": "Load"
+    },
+    "gcom-field": {
+      "label": "Find and import dashboards for common applications at <1></1>",
+      "load-button": "Load",
+      "placeholder": "Grafana.com dashboard URL or ID",
+      "validation-required": "A Grafana dashboard URL or ID is required"
+    },
+    "json-field": {
+      "label": "Import via dashboard JSON model",
+      "validation-required": "Need a dashboard JSON model"
     }
   },
   "dashboard-settings": {

public/locales/es-ES/grafana.json

@@ -236,6 +236,32 @@
       "settings": "Ajustes del panel de control",
       "share": "Compartir panel o panel de control",
       "unmark-favorite": "Deshacer marca como favorito"
+    },
+    "validation": {
+      "invalid-dashboard-id": "",
+      "invalid-json": "",
+      "tags-expected-array": "",
+      "tags-expected-strings": ""
+    }
+  },
+  "dashboard-import": {
+    "file-dropzone": {
+      "primary-text": "",
+      "secondary-text": ""
+    },
+    "form-actions": {
+      "cancel": "",
+      "load": ""
+    },
+    "gcom-field": {
+      "label": "",
+      "load-button": "",
+      "placeholder": "",
+      "validation-required": ""
+    },
+    "json-field": {
+      "label": "",
+      "validation-required": ""
     }
   },
   "dashboard-settings": {

public/locales/fr-FR/grafana.json

@@ -236,6 +236,32 @@
       "settings": "Paramètres du tableau de bord",
       "share": "Partager le tableau de bord ou le panneau",
       "unmark-favorite": "Supprimer des favoris"
+    },
+    "validation": {
+      "invalid-dashboard-id": "",
+      "invalid-json": "",
+      "tags-expected-array": "",
+      "tags-expected-strings": ""
+    }
+  },
+  "dashboard-import": {
+    "file-dropzone": {
+      "primary-text": "",
+      "secondary-text": ""
+    },
+    "form-actions": {
+      "cancel": "",
+      "load": ""
+    },
+    "gcom-field": {
+      "label": "",
+      "load-button": "",
+      "placeholder": "",
+      "validation-required": ""
+    },
+    "json-field": {
+      "label": "",
+      "validation-required": ""
     }
   },
   "dashboard-settings": {

public/locales/pseudo-LOCALE/grafana.json

@@ -231,6 +231,32 @@
       "settings": "Đäşĥþőäřđ şęŧŧįʼnģş",
       "share": "Ŝĥäřę đäşĥþőäřđ",
       "unmark-favorite": "Ůʼnmäřĸ äş ƒävőřįŧę"
+    },
+    "validation": {
+      "invalid-dashboard-id": "Cőūľđ ʼnőŧ ƒįʼnđ ä väľįđ Ğřäƒäʼnä.čőm ĨĐ",
+      "invalid-json": "Ńőŧ väľįđ ĴŜØŃ",
+      "tags-expected-array": "ŧäģş ęχpęčŧęđ äřřäy",
+      "tags-expected-strings": "ŧäģş ęχpęčŧęđ äřřäy őƒ şŧřįʼnģş"
+    }
+  },
+  "dashboard-import": {
+    "file-dropzone": {
+      "primary-text": "Ůpľőäđ đäşĥþőäřđ ĴŜØŃ ƒįľę",
+      "secondary-text": "Đřäģ äʼnđ đřőp ĥęřę őř čľįčĸ ŧő þřőŵşę"
+    },
+    "form-actions": {
+      "cancel": "Cäʼnčęľ",
+      "load": "Ŀőäđ"
+    },
+    "gcom-field": {
+      "label": "Fįʼnđ äʼnđ įmpőřŧ đäşĥþőäřđş ƒőř čőmmőʼn äppľįčäŧįőʼnş äŧ <1></1>",
+      "load-button": "Ŀőäđ",
+      "placeholder": "Ğřäƒäʼnä.čőm đäşĥþőäřđ ŮŖĿ őř ĨĐ",
+      "validation-required": "Å Ğřäƒäʼnä đäşĥþőäřđ ŮŖĿ őř ĨĐ įş řęqūįřęđ"
+    },
+    "json-field": {
+      "label": "Ĩmpőřŧ vįä đäşĥþőäřđ ĴŜØŃ mőđęľ",
+      "validation-required": "Ńęęđ ä đäşĥþőäřđ ĴŜØŃ mőđęľ"
     }
   },
   "dashboard-settings": {

public/locales/zh-Hans/grafana.json

@@ -226,6 +226,32 @@
       "settings": "仪表板设置",
       "share": "分享仪表板或面板",
       "unmark-favorite": "取消标记为收藏"
+    },
+    "validation": {
+      "invalid-dashboard-id": "",
+      "invalid-json": "",
+      "tags-expected-array": "",
+      "tags-expected-strings": ""
+    }
+  },
+  "dashboard-import": {
+    "file-dropzone": {
+      "primary-text": "",
+      "secondary-text": ""
+    },
+    "form-actions": {
+      "cancel": "",
+      "load": ""
+    },
+    "gcom-field": {
+      "label": "",
+      "load-button": "",
+      "placeholder": "",
+      "validation-required": ""
+    },
+    "json-field": {
+      "label": "",
+      "validation-required": ""
     }
   },
   "dashboard-settings": {