I18n:Mark up phrases for translation on Permissions drawer (#70842)

* I18n:Mark up Permissions

* Mark up strings in Permissions file

* I18n:Mark up phrases for on Permissions drawer

* I18n:Mark up phrases for translation on Permissions page

* I18n:Mark up phrases for translation on Permissions page

* Made the changes based on suggestions received

* restore translations

* Run extract again

packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -1,3 +1,4 @@
+import { t } from 'i18next';
 import React, { ComponentProps, useCallback, useEffect, useRef, useState } from 'react';
 import { default as ReactSelect } from 'react-select';
 import { default as ReactAsyncSelect } from 'react-select/async';
@@ -124,7 +125,7 @@ export function SelectBase<T>({
   menuPlacement = 'auto',
   menuPosition,
   menuShouldPortal = true,
-  noOptionsMessage = 'No options found',
+  noOptionsMessage = t('grafana-ui.select.no-options-label', 'No options found'),
   onBlur,
   onChange,
   onCloseMenu,
@@ -137,7 +138,7 @@ export function SelectBase<T>({
   onFocus,
   openMenuOnFocus = false,
   options = [],
-  placeholder = 'Choose',
+  placeholder = t('grafana-ui.select.placeholder', 'Choose'),
   prefix,
   renderControl,
   showAllSelectedWhenOpen = true,

public/app/core/components/AccessControl/AddPermission.tsx

@@ -5,6 +5,7 @@ import { Button, Form, Select } from '@grafana/ui';
 import { CloseButton } from 'app/core/components/CloseButton/CloseButton';
 import { TeamPicker } from 'app/core/components/Select/TeamPicker';
 import { UserPicker } from 'app/core/components/Select/UserPicker';
+import { Trans, t } from 'app/core/internationalization';
 import { OrgRole } from 'app/types/acl';
 
 import { Assignments, PermissionTarget, SetPermission } from './types';
@@ -17,7 +18,13 @@ export interface Props {
   onAdd: (state: SetPermission) => void;
 }
 
-export const AddPermission = ({ title = 'Add permission for', permissions, assignments, onAdd, onCancel }: Props) => {
+export const AddPermission = ({
+  title = t('access-control.add-permission.title', 'Add permission for'),
+  permissions,
+  assignments,
+  onAdd,
+  onCancel,
+}: Props) => {
   const [target, setPermissionTarget] = useState<PermissionTarget>(PermissionTarget.None);
   const [teamId, setTeamId] = useState(0);
   const [userId, setUserId] = useState(0);
@@ -27,13 +34,16 @@ export const AddPermission = ({ title = 'Add permission for', permissions, assig
   const targetOptions = useMemo(() => {
     const options = [];
     if (assignments.users) {
-      options.push({ value: PermissionTarget.User, label: 'User' });
+      options.push({ value: PermissionTarget.User, label: t('access-control.add-permission.user-label', 'User') });
     }
     if (assignments.teams) {
-      options.push({ value: PermissionTarget.Team, label: 'Team' });
+      options.push({ value: PermissionTarget.Team, label: t('access-control.add-permission.team-label', 'Team') });
     }
     if (assignments.builtInRoles) {
-      options.push({ value: PermissionTarget.BuiltInRole, label: 'Role' });
+      options.push({
+        value: PermissionTarget.BuiltInRole,
+        label: t('access-control.add-permission.role-label', 'Role'),
+      });
     }
     return options;
   }, [assignments]);
@@ -91,7 +101,7 @@ export const AddPermission = ({ title = 'Add permission for', permissions, assig
               onChange={(v) => setPermission(v.value || '')}
             />
             <Button type="submit" disabled={!isValid()}>
-              Save
+              <Trans i18nKey="access-control.add-permissions.save">Save</Trans>
             </Button>
           </Stack>
         )}

public/app/core/components/AccessControl/PermissionList.tsx

@@ -1,5 +1,7 @@
 import React, { useMemo } from 'react';
 
+import { Trans } from 'app/core/internationalization';
+
 import { PermissionListItem } from './PermissionListItem';
 import { ResourcePermission } from './types';
 
@@ -42,7 +44,11 @@ export const PermissionList = ({ title, items, compareKey, permissionLevels, can
             <th style={{ width: '1%' }} />
             <th>{title}</th>
             <th style={{ width: '1%' }} />
-            <th style={{ width: '40%' }}>Permission</th>
+
+            <th style={{ width: '40%' }}>
+              <Trans i18nKey="access-control.permission-list.permission">Permission</Trans>
+            </th>
+
             <th style={{ width: '1%' }} />
             <th style={{ width: '1%' }} />
           </tr>

public/app/core/components/AccessControl/Permissions.tsx

@@ -7,6 +7,7 @@ import { Space } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
 import { Button, useStyles2 } from '@grafana/ui';
 import { SlideDown } from 'app/core/components/Animations/SlideDown';
+import { Trans, t } from 'app/core/internationalization';
 import { getBackendSrv } from 'app/core/services/backend_srv';
 import { DescendantCount } from 'app/features/browse-dashboards/components/BrowseActions/DescendantCount';
 
@@ -39,9 +40,9 @@ export type Props = {
 };
 
 export const Permissions = ({
-  title = 'Permissions',
-  buttonLabel = 'Add a permission',
-  emptyLabel = 'There are no permissions',
+  title = t('access-control.permissions.title', 'Permissions'),
+  buttonLabel = t('access-control.permissions.add-label', 'Add a permission'),
+  emptyLabel = t('access-control.permissions.no-permissions', 'There are no permissions'),
   resource,
   resourceId,
   canSetPermissions,
@@ -131,13 +132,19 @@ export const Permissions = ({
     [items]
   );
 
+  const titleRole = t('access-control.permissions.role', 'Role');
+  const titleUser = t('access-control.permissions.user', 'User');
+  const titleTeam = t('access-control.permissions.team', 'Team');
+
   return (
     <div>
       {canSetPermissions && (
         <>
           {config.featureToggles.nestedFolders && resource === 'folders' && (
             <>
-              This will change permissions for this folder and all its descendants. In total, this will affect:
+              <Trans i18nKey="access-control.permissions.permissions-change-warning">
+                This will change permissions for this folder and all its descendants. In total, this will affect:
+              </Trans>
               <DescendantCount
                 selectedItems={{
                   folder: { [resourceId]: true },
@@ -178,7 +185,7 @@ export const Permissions = ({
         </table>
       )}
       <PermissionList
-        title="Role"
+        title={titleRole}
         items={builtInRoles}
         compareKey={'builtInRole'}
         permissionLevels={desc.permissions}
@@ -187,7 +194,7 @@ export const Permissions = ({
         canSet={canSetPermissions}
       />
       <PermissionList
-        title="User"
+        title={titleUser}
         items={users}
         compareKey={'userLogin'}
         permissionLevels={desc.permissions}
@@ -196,7 +203,7 @@ export const Permissions = ({
         canSet={canSetPermissions}
       />
       <PermissionList
-        title="Team"
+        title={titleTeam}
         items={teams}
         compareKey={'team'}
         permissionLevels={desc.permissions}

public/app/features/browse-dashboards/components/FolderActionsButton.tsx

@@ -4,7 +4,7 @@ import { locationService, reportInteraction } from '@grafana/runtime';
 import { Button, Drawer, Dropdown, Icon, Menu, MenuItem } from '@grafana/ui';
 import { Permissions } from 'app/core/components/AccessControl';
 import { appEvents, contextSrv } from 'app/core/core';
-import { Trans, t } from 'app/core/internationalization';
+import { t, Trans } from 'app/core/internationalization';
 import { AccessControlAction, FolderDTO } from 'app/types';
 import { ShowModalReactEvent } from 'app/types/events';
 

public/locales/de-DE/grafana.json

@@ -1,5 +1,28 @@
 {
   "_comment": "Do not manually edit this file. Translations must be made in Crowdin which will sync them back into this file",
+  "access-control": {
+    "add-permission": {
+      "role-label": "",
+      "team-label": "",
+      "title": "",
+      "user-label": ""
+    },
+    "add-permissions": {
+      "save": ""
+    },
+    "permission-list": {
+      "permission": ""
+    },
+    "permissions": {
+      "add-label": "",
+      "no-permissions": "",
+      "permissions-change-warning": "",
+      "role": "",
+      "team": "",
+      "title": "",
+      "user": ""
+    }
+  },
   "browse-dashboards": {
     "action": {
       "delete-button": "",
@@ -142,6 +165,10 @@
       "error": "Fehler beim Laden der Optionen",
       "loading": "Optionen werden geladen ...",
       "no-options": "Keine Optionen gefunden"
+    },
+    "select": {
+      "no-options-label": "",
+      "placeholder": ""
     }
   },
   "library-panel": {

public/locales/en-US/grafana.json

@@ -1,5 +1,28 @@
 {
   "_comment": "Do not manually edit this file, or update these source phrases in Crowdin. The source of truth for English strings are in the code source",
+  "access-control": {
+    "add-permission": {
+      "role-label": "Role",
+      "team-label": "Team",
+      "title": "Add permission for",
+      "user-label": "User"
+    },
+    "add-permissions": {
+      "save": "Save"
+    },
+    "permission-list": {
+      "permission": "Permission"
+    },
+    "permissions": {
+      "add-label": "Add a permission",
+      "no-permissions": "There are no permissions",
+      "permissions-change-warning": "This will change permissions for this folder and all its descendants. In total, this will affect:",
+      "role": "Role",
+      "team": "Team",
+      "title": "Permissions",
+      "user": "User"
+    }
+  },
   "browse-dashboards": {
     "action": {
       "delete-button": "Delete",
@@ -142,6 +165,10 @@
       "error": "Failed to load options",
       "loading": "Loading options...",
       "no-options": "No options found"
+    },
+    "select": {
+      "no-options-label": "No options found",
+      "placeholder": "Choose"
     }
   },
   "library-panel": {

public/locales/es-ES/grafana.json

@@ -1,5 +1,28 @@
 {
   "_comment": "Do not manually edit this file, or update these source phrases in Crowdin. The source of truth for English strings are in the code source",
+  "access-control": {
+    "add-permission": {
+      "role-label": "",
+      "team-label": "",
+      "title": "",
+      "user-label": ""
+    },
+    "add-permissions": {
+      "save": ""
+    },
+    "permission-list": {
+      "permission": ""
+    },
+    "permissions": {
+      "add-label": "",
+      "no-permissions": "",
+      "permissions-change-warning": "",
+      "role": "",
+      "team": "",
+      "title": "",
+      "user": ""
+    }
+  },
   "browse-dashboards": {
     "action": {
       "delete-button": "",
@@ -142,6 +165,10 @@
       "error": "No se han podido cargar las opciones",
       "loading": "Cargando las opciones...",
       "no-options": "No se ha encontrado ninguna opción"
+    },
+    "select": {
+      "no-options-label": "",
+      "placeholder": ""
     }
   },
   "library-panel": {

public/locales/fr-FR/grafana.json

@@ -1,5 +1,28 @@
 {
   "_comment": "Do not manually edit this file. Translations must be made in Crowdin which will sync them back into this file",
+  "access-control": {
+    "add-permission": {
+      "role-label": "",
+      "team-label": "",
+      "title": "",
+      "user-label": ""
+    },
+    "add-permissions": {
+      "save": ""
+    },
+    "permission-list": {
+      "permission": ""
+    },
+    "permissions": {
+      "add-label": "",
+      "no-permissions": "",
+      "permissions-change-warning": "",
+      "role": "",
+      "team": "",
+      "title": "",
+      "user": ""
+    }
+  },
   "browse-dashboards": {
     "action": {
       "delete-button": "",
@@ -142,6 +165,10 @@
       "error": "Échec du chargement des options",
       "loading": "Chargement des options...",
       "no-options": "Aucune option trouvée"
+    },
+    "select": {
+      "no-options-label": "",
+      "placeholder": ""
     }
   },
   "library-panel": {

public/locales/pseudo-LOCALE/grafana.json

@@ -1,5 +1,28 @@
 {
   "_comment": "Đő ʼnőŧ mäʼnūäľľy ęđįŧ ŧĥįş ƒįľę, őř ūpđäŧę ŧĥęşę şőūřčę pĥřäşęş įʼn Cřőŵđįʼn. Ŧĥę şőūřčę őƒ ŧřūŧĥ ƒőř Ēʼnģľįşĥ şŧřįʼnģş äřę įʼn ŧĥę čőđę şőūřčę",
+  "access-control": {
+    "add-permission": {
+      "role-label": "Ŗőľę",
+      "team-label": "Ŧęäm",
+      "title": "Åđđ pęřmįşşįőʼn ƒőř",
+      "user-label": "Ůşęř"
+    },
+    "add-permissions": {
+      "save": "Ŝävę"
+    },
+    "permission-list": {
+      "permission": "Pęřmįşşįőʼn"
+    },
+    "permissions": {
+      "add-label": "Åđđ ä pęřmįşşįőʼn",
+      "no-permissions": "Ŧĥęřę äřę ʼnő pęřmįşşįőʼnş",
+      "permissions-change-warning": "Ŧĥįş ŵįľľ čĥäʼnģę pęřmįşşįőʼnş ƒőř ŧĥįş ƒőľđęř äʼnđ äľľ įŧş đęşčęʼnđäʼnŧş. Ĩʼn ŧőŧäľ, ŧĥįş ŵįľľ 䃃ęčŧ:",
+      "role": "Ŗőľę",
+      "team": "Ŧęäm",
+      "title": "Pęřmįşşįőʼnş",
+      "user": "Ůşęř"
+    }
+  },
   "browse-dashboards": {
     "action": {
       "delete-button": "Đęľęŧę",
@@ -142,6 +165,10 @@
       "error": "Fäįľęđ ŧő ľőäđ őpŧįőʼnş",
       "loading": "Ŀőäđįʼnģ őpŧįőʼnş...",
       "no-options": "Ńő őpŧįőʼnş ƒőūʼnđ"
+    },
+    "select": {
+      "no-options-label": "Ńő őpŧįőʼnş ƒőūʼnđ",
+      "placeholder": "Cĥőőşę"
     }
   },
   "library-panel": {

public/locales/zh-Hans/grafana.json

@@ -1,5 +1,28 @@
 {
   "_comment": "Do not manually edit this file. Translations must be made in Crowdin which will sync them back into this file",
+  "access-control": {
+    "add-permission": {
+      "role-label": "",
+      "team-label": "",
+      "title": "",
+      "user-label": ""
+    },
+    "add-permissions": {
+      "save": ""
+    },
+    "permission-list": {
+      "permission": ""
+    },
+    "permissions": {
+      "add-label": "",
+      "no-permissions": "",
+      "permissions-change-warning": "",
+      "role": "",
+      "team": "",
+      "title": "",
+      "user": ""
+    }
+  },
   "browse-dashboards": {
     "action": {
       "delete-button": "",
@@ -142,6 +165,10 @@
       "error": "加载选项失败",
       "loading": "正在加载选项...",
       "no-options": "未找到选项"
+    },
+    "select": {
+      "no-options-label": "",
+      "placeholder": ""
     }
   },
   "library-panel": {