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>

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}
     />
   );

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>

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

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)}

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),
               })}
             />

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,7 +17,7 @@ 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: [
@@ -24,7 +25,7 @@ export function buildNavModel(folder: FolderDTO, parents = folder.parents): NavM
         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`,
       });
     }

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",

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",

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",

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",

public/locales/pseudo-LOCALE/grafana.json

@@ -25,8 +25,19 @@
   },
   "browse-dashboards": {
     "action": {
+      "cancel-button": "Cäʼnčęľ",
       "delete-button": "Đęľęŧę",
-      "move-button": "Mővę"
+      "delete-modal-text": "Ŧĥįş äčŧįőʼn ŵįľľ đęľęŧę ŧĥę ƒőľľőŵįʼnģ čőʼnŧęʼnŧ:",
+      "delete-modal-title": "Đęľęŧę",
+      "deleting": "Đęľęŧįʼnģ...",
+      "manage-permissions-button": "Mäʼnäģę pęřmįşşįőʼnş",
+      "move-button": "Mővę",
+      "move-modal-alert": "Mővįʼnģ ŧĥįş įŧęm mäy čĥäʼnģę įŧş pęřmįşşįőʼnş.",
+      "move-modal-field-label": "Főľđęř ʼnämę",
+      "move-modal-text": "Ŧĥįş äčŧįőʼn ŵįľľ mővę ŧĥę ƒőľľőŵįʼnģ čőʼnŧęʼnŧ:",
+      "move-modal-title": "Mővę",
+      "moving": "Mővįʼnģ...",
+      "new-folder-name-required-phrase": "Főľđęř ʼnämę įş řęqūįřęđ."
     },
     "dashboards-tree": {
       "name-column": "Ńämę",
@@ -38,6 +49,13 @@
       "manage-permissions": "Mäʼnäģę pęřmįşşįőʼnş",
       "move": "Mővę"
     },
+    "manage-folder-nav": {
+      "alert-rules": "Åľęřŧ řūľęş",
+      "dashboards": "Đäşĥþőäřđş",
+      "panels": "Päʼnęľş",
+      "permissions": "Pęřmįşşįőʼnş",
+      "settings": "Ŝęŧŧįʼnģş"
+    },
     "new-folder-form": {
       "cancel-label": "Cäʼnčęľ",
       "create-label": "Cřęäŧę",
@@ -630,16 +648,6 @@
     },
     "title": "Přęƒęřęʼnčęş"
   },
-  "state": {
-    "nav-model": {
-      "dashboards": "Đäşĥþőäřđş",
-      "panels": "Päʼnęľş"
-    },
-    "nav-models": {
-      "alert-rules": "Åľęřŧ řūľęş",
-      "manage-folder-subtitle": "Mäʼnäģę ƒőľđęř đäşĥþőäřđş äʼnđ pęřmįşşįőʼnş"
-    }
-  },
   "tag-filter": {
     "loading": "Ŀőäđįʼnģ...",
     "no-tags": "Ńő ŧäģş ƒőūʼnđ",

public/locales/zh-Hans/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": "首选项"
   },
-  "state": {
-    "nav-model": {
-      "dashboards": "",
-      "panels": ""
-    },
-    "nav-models": {
-      "alert-rules": "",
-      "manage-folder-subtitle": ""
-    }
-  },
   "tag-filter": {
     "loading": "加载中...",
     "no-tags": "未找到标签",