[Chore] Dashboard: Add i18n for creating a panel, row, library panel, and pasted panel (#66234)

* add translation keys for empty dashboard redesign

* run yarn i18n:extract; rephrase one trans key because of [warning] Found translation key already mapped to a map or parent of new key already mapped to a string: dashboard.toolbar.add.visualization

* reduce to 3-step locale phrase IDs

* extract phrase IDs

public/app/features/dashboard/components/AddLibraryPanelWidget/AddLibraryPanelWidget.tsx

@@ -5,6 +5,7 @@ import tinycolor from 'tinycolor2';
 import { GrafanaTheme2 } from '@grafana/data';
 import { LibraryPanel } from '@grafana/schema';
 import { IconButton, useStyles2 } from '@grafana/ui';
+import { Trans } from 'app/core/internationalization';
 
 import {
   LibraryPanelsSearch,
@@ -42,7 +43,9 @@ export const AddLibraryPanelWidget = ({ panel, dashboard }: Props) => {
     <div className={styles.wrapper}>
       <div className={cx('panel-container', styles.callToAction)}>
         <div className={cx(styles.headerRow, 'grid-drag-handle')}>
-          <span>Add panel from panel library</span>
+          <span>
+            <Trans i18nKey="library-panel.add-widget.title">Add panel from panel library</Trans>
+          </span>
           <div className="flex-grow-1" />
           <IconButton aria-label="Close 'Add Panel' widget" name="times" onClick={onCancelAddPanel} />
         </div>

public/app/features/dashboard/components/AddPanelButton/AddPanelButton.tsx

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { Dropdown, Button, useTheme2, Icon } from '@grafana/ui';
+import { Trans } from 'app/core/internationalization';
 import { DashboardModel } from 'app/features/dashboard/state';
 
 import { AddPanelMenu } from './AddPanelMenu';
@@ -30,7 +31,7 @@ export const AddPanelButton = ({ dashboard }: Props) => {
         className={cx(styles.button, styles.buttonIcon, styles.buttonText)}
         data-testid={selectors.components.PageToolbar.itemButton('Add panel button')}
       >
-        Add
+        <Trans i18nKey="dashboard.toolbar.add">Add</Trans>
         <Icon name={isMenuOpen ? 'angle-up' : 'angle-down'} size="lg" />
       </Button>
     </Dropdown>

public/app/features/dashboard/components/AddPanelButton/AddPanelMenu.tsx

@@ -3,6 +3,7 @@ import React, { useMemo } from 'react';
 import { selectors } from '@grafana/e2e-selectors';
 import { locationService, reportInteraction } from '@grafana/runtime';
 import { Menu } from '@grafana/ui';
+import { t } from 'app/core/internationalization';
 import { DashboardModel } from 'app/features/dashboard/state';
 import {
   getCopiedPanelPlugin,
@@ -23,7 +24,7 @@ export const AddPanelMenu = ({ dashboard }: Props) => {
     <Menu>
       <Menu.Item
         key="add-visualisation"
-        label="Visualization"
+        label={t('dashboard.add-menu.visualization', 'Visualization')}
         testId={selectors.components.PageToolbar.itemButton('Add new visualization menu item')}
         onClick={() => {
           reportInteraction('Create new panel');
@@ -33,7 +34,7 @@ export const AddPanelMenu = ({ dashboard }: Props) => {
       />
       <Menu.Item
         key="add-row"
-        label="Row"
+        label={t('dashboard.add-menu.row', 'Row')}
         testId={selectors.components.PageToolbar.itemButton('Add new row menu item')}
         onClick={() => {
           reportInteraction('Create new row');
@@ -42,7 +43,7 @@ export const AddPanelMenu = ({ dashboard }: Props) => {
       />
       <Menu.Item
         key="add-panel-lib"
-        label="Import from library"
+        label={t('dashboard.add-menu.import', 'Import from library')}
         testId={selectors.components.PageToolbar.itemButton('Add new panel from panel library menu item')}
         onClick={() => {
           reportInteraction('Add a panel from the panel library');
@@ -51,7 +52,7 @@ export const AddPanelMenu = ({ dashboard }: Props) => {
       />
       <Menu.Item
         key="add-panel-clipboard"
-        label="Paste panel"
+        label={t('dashboard.add-menu.paste-panel', 'Paste panel')}
         testId={selectors.components.PageToolbar.itemButton('Add new panel from clipboard menu item')}
         onClick={() => {
           reportInteraction('Paste panel from clipboard');

public/app/features/dashboard/dashgrid/DashboardEmpty.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { locationService, reportInteraction } from '@grafana/runtime';
 import { Button, useStyles2 } from '@grafana/ui';
+import { Trans } from 'app/core/internationalization';
 import { DashboardModel } from 'app/features/dashboard/state';
 import { onAddLibraryPanel, onCreateNewPanel, onCreateNewRow } from 'app/features/dashboard/utils/dashboard';
 
@@ -20,11 +21,15 @@ export const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
       <div className={cx(styles.centeredContent, styles.wrapper)}>
         <div className={cx(styles.containerBox, styles.centeredContent, styles.visualizationContainer)}>
           <h1 className={cx(styles.headerSection, styles.headerBig)}>
-            Start your new dashboard by adding a visualization
+            <Trans i18nKey="dashboard.empty.add-visualization-header">
+              Start your new dashboard by adding a visualization
+            </Trans>
           </h1>
           <div className={cx(styles.bodySection, styles.bodyBig)}>
-            Select a data source and then query and visualize your data with charts, stats and tables or create lists,
-            markdowns and other widgets.
+            <Trans i18nKey="dashboard.empty.add-visualization-body">
+              Select a data source and then query and visualize your data with charts, stats and tables or create lists,
+              markdowns and other widgets.
+            </Trans>
           </div>
           <Button
             size="lg"
@@ -37,14 +42,16 @@ export const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
             }}
             disabled={!canCreate}
           >
-            Add visualization
+            <Trans i18nKey="dashboard.empty.add-visualization-button">Add visualization</Trans>
           </Button>
         </div>
         <div className={cx(styles.centeredContent, styles.others)}>
           <div className={cx(styles.containerBox, styles.centeredContent, styles.rowContainer)}>
-            <h3 className={cx(styles.headerSection, styles.headerSmall)}>Add a row</h3>
+            <h3 className={cx(styles.headerSection, styles.headerSmall)}>
+              <Trans i18nKey="dashboard.empty.add-row-header">Add a row</Trans>
+            </h3>
             <div className={cx(styles.bodySection, styles.bodySmall)}>
-              Group your visualizations into expandable sections.
+              <Trans i18nKey="dashboard.empty.add-row-body">Group your visualizations into expandable sections.</Trans>
             </div>
             <Button
               icon="plus"
@@ -56,13 +63,17 @@ export const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
               }}
               disabled={!canCreate}
             >
-              Add row
+              <Trans i18nKey="dashboard.empty.add-row-button">Add row</Trans>
             </Button>
           </div>
           <div className={cx(styles.containerBox, styles.centeredContent, styles.libraryContainer)}>
-            <h3 className={cx(styles.headerSection, styles.headerSmall)}>Import panel</h3>
+            <h3 className={cx(styles.headerSection, styles.headerSmall)}>
+              <Trans i18nKey="dashboard.empty.add-import-header">Import panel</Trans>
+            </h3>
             <div className={cx(styles.bodySection, styles.bodySmall)}>
-              Import visualizations that are shared with other dashboards.
+              <Trans i18nKey="dashboard.empty.add-import-body">
+                Import visualizations that are shared with other dashboards.
+              </Trans>
             </div>
             <Button
               icon="plus"
@@ -74,7 +85,7 @@ export const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
               }}
               disabled={!canCreate}
             >
-              Import library panel
+              <Trans i18nKey="dashboard.empty.add-import-button">Import library panel</Trans>
             </Button>
           </div>
         </div>