I18n: Translate phrases for new Browse Dashboards (#70654)

* Mark strings in folder manager nav for translation * Mark strings in folder actions for translation * Mark strings in new folder modal for translation * Mark strings in delete modal for translation * Mark strings in move modal for translation * Fix interpunction in translations * Run i18n:extract * Fix Manage Permissions drawer test * Redundnt useMemo * Updated extracted translations after resolving conflicts --------- Co-authored-by: Roxana Turc <anamaria-roxana.turc@grafana.com>
grafana · Jul 14, 2023 · 4677707 · 4677707
1 parent 8cb7f37
commit 4677707
Show file tree

Hide file tree

Showing 12 changed files with 156 additions and 84 deletions.
diff --git a/public/app/features/browse-dashboards/components/BrowseActions/DeleteModal.tsx b/public/app/features/browse-dashboards/components/BrowseActions/DeleteModal.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { Space } from '@grafana/experimental';
 import { ConfirmModal } from '@grafana/ui';
 import { P } from '@grafana/ui/src/unstable';
+import { Trans, t } from 'app/core/internationalization';
 
 import { DashboardTreeSelection } from '../../types';
 
@@ -32,16 +33,24 @@ export const DeleteModal = ({ onConfirm, onDismiss, selectedItems, ...props }: P
     <ConfirmModal
       body={
         <>
-          <P>This action will delete the following content:</P>
+          <P>
+            <Trans i18nKey="browse-dashboards.action.delete-modal-text">
+              This action will delete the following content:
+            </Trans>
+          </P>
           <DescendantCount selectedItems={selectedItems} />
           <Space v={2} />
         </>
       }
       confirmationText="Delete"
-      confirmText={isDeleting ? 'Deleting...' : 'Delete'}
+      confirmText={
+        isDeleting
+          ? t('browse-dashboards.action.deleting', 'Deleting...')
+          : t('browse-dashboards.action.delete-button', 'Delete')
+      }
       onDismiss={onDismiss}
       onConfirm={onDelete}
-      title="Delete"
+      title={t('browse-dashboards.action.delete-modal-title', 'Delete')}
       {...props}
     />
   );

diff --git a/public/app/features/browse-dashboards/components/BrowseActions/MoveModal.tsx b/public/app/features/browse-dashboards/components/BrowseActions/MoveModal.tsx
@@ -7,6 +7,7 @@ import { P } from '@grafana/ui/src/unstable';
 import { NestedFolderPicker } from 'app/core/components/NestedFolderPicker/NestedFolderPicker';
 import { FolderChange, ROOT_FOLDER } from 'app/core/components/NestedFolderPicker/types';
 import { FolderPicker } from 'app/core/components/Select/FolderPicker';
+import { t, Trans } from 'app/core/internationalization';
 
 import { DashboardTreeSelection } from '../../types';
 
@@ -42,16 +43,23 @@ export const MoveModal = ({ onConfirm, onDismiss, selectedItems, ...props }: Pro
   };
 
   return (
-    <Modal title="Move" onDismiss={onDismiss} {...props}>
-      {selectedFolders.length > 0 && <Alert severity="info" title="Moving this item may change its permissions." />}
+    <Modal title={t('browse-dashboards.action.move-modal-title', 'Move')} onDismiss={onDismiss} {...props}>
+      {selectedFolders.length > 0 && (
+        <Alert
+          severity="info"
+          title={t('browse-dashboards.action.move-modal-alert', 'Moving this item may change its permissions.')}
+        />
+      )}
 
-      <P>This action will move the following content:</P>
+      <P>
+        <Trans i18nKey="browse-dashboards.action.move-modal-text">This action will move the following content:</Trans>
+      </P>
 
       <DescendantCount selectedItems={selectedItems} />
 
       <Space v={3} />
 
-      <Field label="Folder name">
+      <Field label={t('browse-dashboards.action.move-modal-field-label', 'Folder name')}>
         {config.featureToggles.nestedFolderPicker ? (
           <NestedFolderPicker value={moveTarget} onChange={handleFolderChange} />
         ) : (
@@ -61,10 +69,12 @@ export const MoveModal = ({ onConfirm, onDismiss, selectedItems, ...props }: Pro
 
       <Modal.ButtonRow>
         <Button onClick={onDismiss} variant="secondary" fill="outline">
-          Cancel
+          <Trans i18nKey="browse-dashboards.action.cancel-button">Cancel</Trans>
         </Button>
         <Button disabled={moveTarget === undefined || isMoving} onClick={onMove} variant="primary">
-          {isMoving ? 'Moving...' : 'Move'}
+          {isMoving
+            ? t('browse-dashboards.action.moving', 'Moving...')
+            : t('browse-dashboards.action.move-button', 'Move')}
         </Button>
       </Modal.ButtonRow>
     </Modal>

diff --git a/public/app/features/browse-dashboards/components/FolderActionsButton.test.tsx b/public/app/features/browse-dashboards/components/FolderActionsButton.test.tsx
@@ -94,7 +94,7 @@ describe('browse-dashboards FolderActionsButton', () => {
 
     await userEvent.click(screen.getByRole('button', { name: 'Folder actions' }));
     await userEvent.click(screen.getByRole('menuitem', { name: 'Manage permissions' }));
-    expect(screen.getByRole('dialog', { name: 'Drawer title Permissions' })).toBeInTheDocument();
+    expect(screen.getByRole('dialog', { name: 'Drawer title Manage permissions' })).toBeInTheDocument();
   });
 
   it('clicking the "Move" option opens the move modal', async () => {

diff --git a/public/app/features/browse-dashboards/components/FolderActionsButton.tsx b/public/app/features/browse-dashboards/components/FolderActionsButton.tsx
@@ -112,7 +112,7 @@ export function FolderActionsButton({ folder }: Props) {
       </Dropdown>
       {showPermissionsDrawer && (
         <Drawer
-          title="Permissions"
+          title={t('browse-dashboards.action.manage-permissions-button', 'Manage permissions')}
           subtitle={folder.title}
           scrollableContent
           onClose={() => setShowPermissionsDrawer(false)}

diff --git a/public/app/features/browse-dashboards/components/NewFolderForm.tsx b/public/app/features/browse-dashboards/components/NewFolderForm.tsx
@@ -17,6 +17,10 @@ interface FormModel {
 const initialFormModel: FormModel = { folderName: '' };
 
 export function NewFolderForm({ onCancel, onConfirm }: Props) {
+  const translatedFolderNameRequiredPhrase = t(
+    'browse-dashboards.action.new-folder-name-required-phrase',
+    'Folder name is required.'
+  );
   const validateFolderName = async (folderName: string) => {
     try {
       await validationSrv.validateNewFolderName(folderName);
@@ -44,7 +48,7 @@ export function NewFolderForm({ onCancel, onConfirm }: Props) {
             <Input
               id="folder-name-input"
               {...register('folderName', {
-                required: 'Folder name is required.',
+                required: translatedFolderNameRequiredPhrase,
                 validate: async (v) => await validateFolderName(v),
               })}
             />

diff --git a/public/app/features/folders/state/navModel.ts b/public/app/features/folders/state/navModel.ts
@@ -1,5 +1,6 @@
 import { NavModel, NavModelItem } from '@grafana/data';
 import { config } from '@grafana/runtime';
+import { getNavSubTitle } from 'app/core/components/AppChrome/MegaMenu/navBarItem-translations';
 import { t } from 'app/core/internationalization';
 import { contextSrv } from 'app/core/services/context_srv';
 import { AccessControlAction, FolderDTO } from 'app/types';
@@ -16,15 +17,15 @@ export function buildNavModel(folder: FolderDTO, parents = folder.parents): NavM
   const model: NavModelItem = {
     icon: 'folder',
     id: FOLDER_ID,
-    subTitle: t('state.nav-models.manage-folder-subtitle', 'Manage folder dashboards and permissions'),
+    subTitle: getNavSubTitle('manage-folder'),
     url: folder.url,
     text: folder.title,
     children: [
       {
         active: false,
         icon: 'apps',
         id: getDashboardsTabID(folder.uid),
-        text: t('state.nav-model.dashboards', 'Dashboards'),
+        text: t('browse-dashboards.manage-folder-nav.dashboards', 'Dashboards'),
         url: folder.url,
       },
     ],
@@ -40,7 +41,7 @@ export function buildNavModel(folder: FolderDTO, parents = folder.parents): NavM
     active: false,
     icon: 'library-panel',
     id: getLibraryPanelsTabID(folder.uid),
-    text: t('state.nav-model.panels', 'Panels'),
+    text: t('browse-dashboards.manage-folder-nav.panels', 'Panels'),
     url: `${folder.url}/library-panels`,
   });
 
@@ -49,7 +50,7 @@ export function buildNavModel(folder: FolderDTO, parents = folder.parents): NavM
       active: false,
       icon: 'bell',
       id: getAlertingTabID(folder.uid),
-      text: t('state.nav-models.alert-rules', 'Alert rules'),
+      text: t('browse-dashboards.manage-folder-nav.alert-rules', 'Alert rules'),
       url: `${folder.url}/alerting`,
     });
   }
@@ -60,7 +61,7 @@ export function buildNavModel(folder: FolderDTO, parents = folder.parents): NavM
         active: false,
         icon: 'lock',
         id: getPermissionsTabID(folder.uid),
-        text: 'Permissions',
+        text: t('browse-dashboards.manage-folder-nav.permissions', 'Permissions'),
         url: `${folder.url}/permissions`,
       });
     }
@@ -70,7 +71,7 @@ export function buildNavModel(folder: FolderDTO, parents = folder.parents): NavM
         active: false,
         icon: 'cog',
         id: getSettingsTabID(folder.uid),
-        text: 'Settings',
+        text: t('browse-dashboards.manage-folder-nav.settings', 'Settings'),
         url: `${folder.url}/settings`,
       });
     }

diff --git a/public/locales/de-DE/grafana.json b/public/locales/de-DE/grafana.json
@@ -25,8 +25,19 @@
   },
   "browse-dashboards": {
     "action": {
+      "cancel-button": "",
       "delete-button": "",
-      "move-button": ""
+      "delete-modal-text": "",
+      "delete-modal-title": "",
+      "deleting": "",
+      "manage-permissions-button": "",
+      "move-button": "",
+      "move-modal-alert": "",
+      "move-modal-field-label": "",
+      "move-modal-text": "",
+      "move-modal-title": "",
+      "moving": "",
+      "new-folder-name-required-phrase": ""
     },
     "dashboards-tree": {
       "name-column": "",
@@ -38,6 +49,13 @@
       "manage-permissions": "",
       "move": ""
     },
+    "manage-folder-nav": {
+      "alert-rules": "",
+      "dashboards": "",
+      "panels": "",
+      "permissions": "",
+      "settings": ""
+    },
     "new-folder-form": {
       "cancel-label": "",
       "create-label": "",
@@ -630,16 +648,6 @@
     },
     "title": "Einstellungen"
   },
-  "state": {
-    "nav-model": {
-      "dashboards": "",
-      "panels": ""
-    },
-    "nav-models": {
-      "alert-rules": "",
-      "manage-folder-subtitle": ""
-    }
-  },
   "tag-filter": {
     "loading": "Wird geladen ...",
     "no-tags": "Keine Tags gefunden",

diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
@@ -25,8 +25,19 @@
   },
   "browse-dashboards": {
     "action": {
+      "cancel-button": "Cancel",
       "delete-button": "Delete",
-      "move-button": "Move"
+      "delete-modal-text": "This action will delete the following content:",
+      "delete-modal-title": "Delete",
+      "deleting": "Deleting...",
+      "manage-permissions-button": "Manage permissions",
+      "move-button": "Move",
+      "move-modal-alert": "Moving this item may change its permissions.",
+      "move-modal-field-label": "Folder name",
+      "move-modal-text": "This action will move the following content:",
+      "move-modal-title": "Move",
+      "moving": "Moving...",
+      "new-folder-name-required-phrase": "Folder name is required."
     },
     "dashboards-tree": {
       "name-column": "Name",
@@ -38,6 +49,13 @@
       "manage-permissions": "Manage permissions",
       "move": "Move"
     },
+    "manage-folder-nav": {
+      "alert-rules": "Alert rules",
+      "dashboards": "Dashboards",
+      "panels": "Panels",
+      "permissions": "Permissions",
+      "settings": "Settings"
+    },
     "new-folder-form": {
       "cancel-label": "Cancel",
       "create-label": "Create",
@@ -630,16 +648,6 @@
     },
     "title": "Preferences"
   },
-  "state": {
-    "nav-model": {
-      "dashboards": "Dashboards",
-      "panels": "Panels"
-    },
-    "nav-models": {
-      "alert-rules": "Alert rules",
-      "manage-folder-subtitle": "Manage folder dashboards and permissions"
-    }
-  },
   "tag-filter": {
     "loading": "Loading...",
     "no-tags": "No tags found",

diff --git a/public/locales/es-ES/grafana.json b/public/locales/es-ES/grafana.json
@@ -25,8 +25,19 @@
   },
   "browse-dashboards": {
     "action": {
+      "cancel-button": "",
       "delete-button": "",
-      "move-button": ""
+      "delete-modal-text": "",
+      "delete-modal-title": "",
+      "deleting": "",
+      "manage-permissions-button": "",
+      "move-button": "",
+      "move-modal-alert": "",
+      "move-modal-field-label": "",
+      "move-modal-text": "",
+      "move-modal-title": "",
+      "moving": "",
+      "new-folder-name-required-phrase": ""
     },
     "dashboards-tree": {
       "name-column": "",
@@ -38,6 +49,13 @@
       "manage-permissions": "",
       "move": ""
     },
+    "manage-folder-nav": {
+      "alert-rules": "",
+      "dashboards": "",
+      "panels": "",
+      "permissions": "",
+      "settings": ""
+    },
     "new-folder-form": {
       "cancel-label": "",
       "create-label": "",
@@ -630,16 +648,6 @@
     },
     "title": "Preferencias"
   },
-  "state": {
-    "nav-model": {
-      "dashboards": "",
-      "panels": ""
-    },
-    "nav-models": {
-      "alert-rules": "",
-      "manage-folder-subtitle": ""
-    }
-  },
   "tag-filter": {
     "loading": "Cargando...",
     "no-tags": "No se ha encontrado ninguna etiqueta",

diff --git a/public/locales/fr-FR/grafana.json b/public/locales/fr-FR/grafana.json
@@ -25,8 +25,19 @@
   },
   "browse-dashboards": {
     "action": {
+      "cancel-button": "",
       "delete-button": "",
-      "move-button": ""
+      "delete-modal-text": "",
+      "delete-modal-title": "",
+      "deleting": "",
+      "manage-permissions-button": "",
+      "move-button": "",
+      "move-modal-alert": "",
+      "move-modal-field-label": "",
+      "move-modal-text": "",
+      "move-modal-title": "",
+      "moving": "",
+      "new-folder-name-required-phrase": ""
     },
     "dashboards-tree": {
       "name-column": "",
@@ -38,6 +49,13 @@
       "manage-permissions": "",
       "move": ""
     },
+    "manage-folder-nav": {
+      "alert-rules": "",
+      "dashboards": "",
+      "panels": "",
+      "permissions": "",
+      "settings": ""
+    },
     "new-folder-form": {
       "cancel-label": "",
       "create-label": "",
@@ -630,16 +648,6 @@
     },
     "title": "Préférences"
   },
-  "state": {
-    "nav-model": {
-      "dashboards": "",
-      "panels": ""
-    },
-    "nav-models": {
-      "alert-rules": "",
-      "manage-folder-subtitle": ""
-    }
-  },
   "tag-filter": {
     "loading": "Chargement en cours...",
     "no-tags": "Aucune étiquette trouvée",