Internationalization: Mark up phrases for translation on Dashboards page (#70361)

* Internationalization:Mark up phrases for translation on Dashboards page

* Internationalization: Mark up phrases for translation on Dashboards page

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

@@ -5,6 +5,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
 import { Button, useStyles2 } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
+import { Trans } from 'app/core/internationalization';
 import { useSearchStateManager } from 'app/features/search/state/SearchStateManager';
 import { useDispatch, useSelector } from 'app/types';
 import { ShowModalReactEvent } from 'app/types/events';
@@ -130,10 +131,11 @@ export function BrowseActions() {
   return (
     <div className={styles.row} data-testid="manage-actions">
       <Button onClick={showMoveModal} variant="secondary">
-        Move
+        <Trans i18nKey="browse-dashboards.action.move-button">Move</Trans>
       </Button>
+
       <Button onClick={showDeleteModal} variant="destructive">
-        Delete
+        <Trans i18nKey="browse-dashboards.action.delete-button">Delete</Trans>
       </Button>
     </div>
   );

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

@@ -7,6 +7,7 @@ import InfiniteLoader from 'react-window-infinite-loader';
 import { GrafanaTheme2, isTruthy } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { useStyles2 } from '@grafana/ui';
+import { t, Trans } from 'app/core/internationalization';
 import { DashboardViewItem } from 'app/features/search/types';
 
 import {
@@ -76,21 +77,25 @@ export function DashboardsTree({
     const nameColumn: DashboardsTreeColumn = {
       id: 'name',
       width: 3,
-      Header: <span style={{ paddingLeft: 24 }}>Name</span>,
+      Header: (
+        <span style={{ paddingLeft: 24 }}>
+          <Trans i18nKey="browse-dashboards.dashboards-tree.name-column">Name</Trans>
+        </span>
+      ),
       Cell: (props: DashboardsTreeCellProps) => <NameCell {...props} onFolderClick={onFolderClick} />,
     };
 
     const typeColumn: DashboardsTreeColumn = {
       id: 'type',
       width: 1,
-      Header: 'Type',
+      Header: t('browse-dashboards.dashboards-tree.type-column', 'Type'),
       Cell: TypeCell,
     };
 
     const tagsColumns: DashboardsTreeColumn = {
       id: 'tags',
       width: 2,
-      Header: 'Tags',
+      Header: t('browse-dashboards.dashboards-tree.tags-column', 'Tags'),
       Cell: TagsCell,
     };
     const columns = [canSelect && checkboxColumn, nameColumn, typeColumn, tagsColumns].filter(isTruthy);

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

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 
 import { Button, Card, Spinner } from '@grafana/ui';
+import { Trans } from 'app/core/internationalization';
 import { useKeyNavigationListener } from 'app/features/search/hooks/useSearchKeyboardSelection';
 import { SearchResultsProps, SearchResultsTable } from 'app/features/search/page/components/SearchResultsTable';
 import { useSearchStateManager } from 'app/features/search/state/SearchStateManager';
@@ -72,10 +73,12 @@ export function SearchView({ width, height, canSelect }: SearchViewProps) {
     return (
       <div style={{ width }}>
         <Card>
-          <Card.Heading>No results found for your query.</Card.Heading>
+          <Card.Heading>
+            <Trans i18nKey="browse-dashboards.no-results.text">No results found for your query.</Trans>
+          </Card.Heading>
           <Card.Actions>
             <Button variant="secondary" onClick={stateManager.onClearSearchAndFilters}>
-              Clear search and filters
+              <Trans i18nKey="browse-dashboards.no-results.clear">Clear search and filters</Trans>
             </Button>
           </Card.Actions>
         </Card>

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

@@ -6,6 +6,7 @@ import { CellProps } from 'react-table';
 import { GrafanaTheme2 } from '@grafana/data';
 import { Icon, useStyles2 } from '@grafana/ui';
 import { Span } from '@grafana/ui/src/unstable';
+import { Trans } from 'app/core/internationalization';
 import { getIconForKind } from 'app/features/search/service/utils';
 
 import { DashboardsTreeItem } from '../types';
@@ -20,7 +21,7 @@ export function TypeCell({ row: { original: data } }: CellProps<DashboardsTreeIt
         <div className={styles.container}>
           <Icon name={iconName} />
           <Span variant="body" color="secondary" truncate>
-            Dashboard
+            <Trans i18nKey="browse-dashboards.type-cell.dashboard">Dashboard</Trans>
           </Span>
         </div>
       );
@@ -29,7 +30,7 @@ export function TypeCell({ row: { original: data } }: CellProps<DashboardsTreeIt
         <div className={styles.container}>
           <Icon name={iconName} />
           <Span variant="body" color="secondary" truncate>
-            Folder
+            <Trans i18nKey="browse-dashboards.type-cell.folder">Folder</Trans>
           </Span>
         </div>
       );
@@ -38,7 +39,7 @@ export function TypeCell({ row: { original: data } }: CellProps<DashboardsTreeIt
         <div className={styles.container}>
           <Icon name={iconName} />
           <Span variant="body" color="secondary" truncate>
-            Panel
+            <Trans i18nKey="browse-dashboards.type-cell.panel">Panel</Trans>
           </Span>
         </div>
       );

public/app/features/search/page/components/SearchView.tsx

@@ -8,6 +8,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import { useStyles2, Spinner, Button } from '@grafana/ui';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
+import { Trans } from 'app/core/internationalization';
 import { FolderDTO } from 'app/types';
 
 import { getGrafanaSearcher } from '../../service';
@@ -75,10 +76,12 @@ export const SearchView = ({ showManage, folderDTO, hidePseudoFolders, keyboardE
 
       return (
         <div className={styles.noResults}>
-          <div>No results found for your query.</div>
+          <div>
+            <Trans i18nKey="search-view.no-results.text">No results found for your query.</Trans>
+          </div>
           <br />
           <Button variant="secondary" onClick={stateManager.onClearSearchAndFilters}>
-            Clear search and filters
+            <Trans i18nKey="search-view.no-results.clear">Clear search and filters</Trans>
           </Button>
         </div>
       );

public/locales/de-DE/grafana.json

@@ -1,5 +1,25 @@
 {
   "_comment": "Do not manually edit this file. Translations must be made in Crowdin which will sync them back into this file",
+  "browse-dashboards": {
+    "action": {
+      "delete-button": "",
+      "move-button": ""
+    },
+    "dashboards-tree": {
+      "name-column": "",
+      "tags-column": "",
+      "type-column": ""
+    },
+    "no-results": {
+      "clear": "",
+      "text": ""
+    },
+    "type-cell": {
+      "dashboard": "",
+      "folder": "",
+      "panel": ""
+    }
+  },
   "clipboard-button": {
     "inline-toast": {
       "success": "Kopiert"
@@ -434,6 +454,12 @@
       "placeholder": "Nach Dashboards suchen"
     }
   },
+  "search-view": {
+    "no-results": {
+      "clear": "",
+      "text": ""
+    }
+  },
   "share-modal": {
     "dashboard": {
       "title": "Teilen"

public/locales/en-US/grafana.json

@@ -1,5 +1,25 @@
 {
   "_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",
+  "browse-dashboards": {
+    "action": {
+      "delete-button": "Delete",
+      "move-button": "Move"
+    },
+    "dashboards-tree": {
+      "name-column": "Name",
+      "tags-column": "Tags",
+      "type-column": "Type"
+    },
+    "no-results": {
+      "clear": "Clear search and filters",
+      "text": "No results found for your query."
+    },
+    "type-cell": {
+      "dashboard": "Dashboard",
+      "folder": "Folder",
+      "panel": "Panel"
+    }
+  },
   "clipboard-button": {
     "inline-toast": {
       "success": "Copied"
@@ -434,6 +454,12 @@
       "placeholder": "Search for dashboards and folders"
     }
   },
+  "search-view": {
+    "no-results": {
+      "clear": "Clear search and filters",
+      "text": "No results found for your query."
+    }
+  },
   "share-modal": {
     "dashboard": {
       "title": "Share"

public/locales/es-ES/grafana.json

@@ -1,5 +1,25 @@
 {
   "_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",
+  "browse-dashboards": {
+    "action": {
+      "delete-button": "",
+      "move-button": ""
+    },
+    "dashboards-tree": {
+      "name-column": "",
+      "tags-column": "",
+      "type-column": ""
+    },
+    "no-results": {
+      "clear": "",
+      "text": ""
+    },
+    "type-cell": {
+      "dashboard": "",
+      "folder": "",
+      "panel": ""
+    }
+  },
   "clipboard-button": {
     "inline-toast": {
       "success": "Copiado"
@@ -434,6 +454,12 @@
       "placeholder": "Buscar paneles de control"
     }
   },
+  "search-view": {
+    "no-results": {
+      "clear": "",
+      "text": ""
+    }
+  },
   "share-modal": {
     "dashboard": {
       "title": "Compartir"

public/locales/fr-FR/grafana.json

@@ -1,5 +1,25 @@
 {
   "_comment": "Do not manually edit this file. Translations must be made in Crowdin which will sync them back into this file",
+  "browse-dashboards": {
+    "action": {
+      "delete-button": "",
+      "move-button": ""
+    },
+    "dashboards-tree": {
+      "name-column": "",
+      "tags-column": "",
+      "type-column": ""
+    },
+    "no-results": {
+      "clear": "",
+      "text": ""
+    },
+    "type-cell": {
+      "dashboard": "",
+      "folder": "",
+      "panel": ""
+    }
+  },
   "clipboard-button": {
     "inline-toast": {
       "success": "Copié"
@@ -434,6 +454,12 @@
       "placeholder": "Rechercher des tableaux de bord"
     }
   },
+  "search-view": {
+    "no-results": {
+      "clear": "",
+      "text": ""
+    }
+  },
   "share-modal": {
     "dashboard": {
       "title": "Partager"

public/locales/pseudo-LOCALE/grafana.json

@@ -1,5 +1,25 @@
 {
   "_comment": "Đő ʼnőŧ mäʼnūäľľy ęđįŧ ŧĥįş ƒįľę, őř ūpđäŧę ŧĥęşę şőūřčę pĥřäşęş įʼn Cřőŵđįʼn. Ŧĥę şőūřčę őƒ ŧřūŧĥ ƒőř Ēʼnģľįşĥ şŧřįʼnģş äřę įʼn ŧĥę čőđę şőūřčę",
+  "browse-dashboards": {
+    "action": {
+      "delete-button": "Đęľęŧę",
+      "move-button": "Mővę"
+    },
+    "dashboards-tree": {
+      "name-column": "Ńämę",
+      "tags-column": "Ŧäģş",
+      "type-column": "Ŧypę"
+    },
+    "no-results": {
+      "clear": "Cľęäř şęäřčĥ äʼnđ ƒįľŧęřş",
+      "text": "Ńő řęşūľŧş ƒőūʼnđ ƒőř yőūř qūęřy."
+    },
+    "type-cell": {
+      "dashboard": "Đäşĥþőäřđ",
+      "folder": "Főľđęř",
+      "panel": "Päʼnęľ"
+    }
+  },
   "clipboard-button": {
     "inline-toast": {
       "success": "Cőpįęđ"
@@ -434,6 +454,12 @@
       "placeholder": "Ŝęäřčĥ ƒőř đäşĥþőäřđş äʼnđ ƒőľđęřş"
     }
   },
+  "search-view": {
+    "no-results": {
+      "clear": "Cľęäř şęäřčĥ äʼnđ ƒįľŧęřş",
+      "text": "Ńő řęşūľŧş ƒőūʼnđ ƒőř yőūř qūęřy."
+    }
+  },
   "share-modal": {
     "dashboard": {
       "title": "Ŝĥäřę"

public/locales/zh-Hans/grafana.json

@@ -1,5 +1,25 @@
 {
   "_comment": "Do not manually edit this file. Translations must be made in Crowdin which will sync them back into this file",
+  "browse-dashboards": {
+    "action": {
+      "delete-button": "",
+      "move-button": ""
+    },
+    "dashboards-tree": {
+      "name-column": "",
+      "tags-column": "",
+      "type-column": ""
+    },
+    "no-results": {
+      "clear": "",
+      "text": ""
+    },
+    "type-cell": {
+      "dashboard": "",
+      "folder": "",
+      "panel": ""
+    }
+  },
   "clipboard-button": {
     "inline-toast": {
       "success": "已复制"
@@ -434,6 +454,12 @@
       "placeholder": "搜索仪表板"
     }
   },
+  "search-view": {
+    "no-results": {
+      "clear": "",
+      "text": ""
+    }
+  },
   "share-modal": {
     "dashboard": {
       "title": "分享"