i18n: Mark up OpenLibraryPanelModal for translations (#75619)

* draft markup

* locale addition

* revision on the code

* second revision

* final changes after review

* body layout

* body layout

* add missed text

public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx

@@ -5,6 +5,7 @@ import React, { MouseEvent, useCallback, useEffect, useMemo, useState } from 're
 import { GrafanaTheme2, SelectableValue, urlUtil } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
 import { AsyncSelect, Button, Modal, useStyles2 } from '@grafana/ui';
+import { t, Trans } from 'app/core/internationalization';
 
 import { DashboardSearchItem } from '../../../search/types';
 import { getConnectedDashboards, getLibraryPanelConnectedDashboards } from '../../state/api';
@@ -38,19 +39,27 @@ export function OpenLibraryPanelModal({ libraryPanel, onDismiss }: OpenLibraryPa
   };
 
   return (
-    <Modal title="View panel in dashboard" onDismiss={onDismiss} onClickBackdrop={onDismiss} isOpen>
+    <Modal
+      title={t('library-panels.modal.title', 'View panel in dashboard')}
+      onDismiss={onDismiss}
+      onClickBackdrop={onDismiss}
+      isOpen
+    >
       <div className={styles.container}>
         {connected === 0 ? (
-          <span>Panel is not linked to a dashboard. Add the panel to a dashboard and retry.</span>
+          <span>
+            <Trans i18nKey={'library-panels.modal.panel-not-linked'}>
+              Panel is not linked to a dashboard. Add the panel to a dashboard and retry.
+            </Trans>
+          </span>
         ) : null}
         {connected > 0 ? (
           <>
             <p>
-              This panel is being used in{' '}
-              <strong>
-                {connected} {connected > 1 ? 'dashboards' : 'dashboard'}
-              </strong>
-              .Please choose which dashboard to view the panel in:
+              <Trans i18nKey="library-panels.modal.body" count={connected}>
+                This panel is being used in {{ count: connected }} dashboard. Please choose which dashboard to view the
+                panel in:
+              </Trans>
             </p>
             <AsyncSelect
               isClearable
@@ -58,18 +67,20 @@ export function OpenLibraryPanelModal({ libraryPanel, onDismiss }: OpenLibraryPa
               defaultOptions={true}
               loadOptions={debouncedLoadOptions}
               onChange={setOption}
-              placeholder="Start typing to search for dashboard"
-              noOptionsMessage="No dashboards found"
+              placeholder={t('library-panels.modal.select-placeholder', 'Start typing to search for dashboard')}
+              noOptionsMessage={t('library-panels.modal.select-no-options-message', 'No dashboards found')}
             />
           </>
         ) : null}
       </div>
       <Modal.ButtonRow>
         <Button variant="secondary" onClick={onDismiss} fill="outline">
-          Cancel
+          <Trans i18nKey={'library-panels.modal.button-cancel'}>Cancel</Trans>
         </Button>
         <Button onClick={onViewPanel} disabled={!Boolean(option)}>
-          {option ? `View panel in ${option?.label}...` : 'View panel in dashboard...'}
+          {option
+            ? t('library-panels.modal.button-view-panel1', 'View panel in {{label}}...', { label: option?.label })
+            : t('library-panels.modal.button-view-panel2', 'View panel in dashboard...')}
         </Button>
       </Modal.ButtonRow>
     </Modal>

public/locales/de-DE/grafana.json

@@ -364,6 +364,17 @@
     }
   },
   "library-panels": {
+    "modal": {
+      "body__one": "",
+      "body__other": "",
+      "button-cancel": "",
+      "button-view-panel1": "",
+      "button-view-panel2": "",
+      "panel-not-linked": "",
+      "select-no-options-message": "",
+      "select-placeholder": "",
+      "title": ""
+    },
     "save": {
       "error": "Fehler beim Speichern des Bibliotheks-Panels: „{{errorMsg}}“",
       "success": "Bibliotheks-Panel wurde gespeichert"

public/locales/en-US/grafana.json

@@ -364,6 +364,17 @@
     }
   },
   "library-panels": {
+    "modal": {
+      "body__one": "This panel is being used in {{count}} dashboard. Please choose which dashboard to view the panel in:",
+      "body__other": "This panel is being used in {{count}} dashboards. Please choose which dashboard to view the panel in:",
+      "button-cancel": "<0>Cancel</0>",
+      "button-view-panel1": "View panel in {{label}}...",
+      "button-view-panel2": "View panel in dashboard...",
+      "panel-not-linked": "Panel is not linked to a dashboard. Add the panel to a dashboard and retry.",
+      "select-no-options-message": "No dashboards found",
+      "select-placeholder": "Start typing to search for dashboard",
+      "title": "View panel in dashboard"
+    },
     "save": {
       "error": "Error saving library panel: \"{{errorMsg}}\"",
       "success": "Library panel saved"

public/locales/es-ES/grafana.json

@@ -369,6 +369,18 @@
     }
   },
   "library-panels": {
+    "modal": {
+      "body__one": "",
+      "body__many": "",
+      "body__other": "",
+      "button-cancel": "",
+      "button-view-panel1": "",
+      "button-view-panel2": "",
+      "panel-not-linked": "",
+      "select-no-options-message": "",
+      "select-placeholder": "",
+      "title": ""
+    },
     "save": {
       "error": "Error al guardar el panel de la librería: «{{errorMsg}}»",
       "success": "Panel de librería guardado"

public/locales/fr-FR/grafana.json

@@ -369,6 +369,18 @@
     }
   },
   "library-panels": {
+    "modal": {
+      "body__one": "",
+      "body__many": "",
+      "body__other": "",
+      "button-cancel": "",
+      "button-view-panel1": "",
+      "button-view-panel2": "",
+      "panel-not-linked": "",
+      "select-no-options-message": "",
+      "select-placeholder": "",
+      "title": ""
+    },
     "save": {
       "error": "Erreur lors de l'enregistrement du panneau de bibliothèque\u00a0: \"{{errorMsg}}\"",
       "success": "Panneau de bibliothèque enregistré"

public/locales/pseudo-LOCALE/grafana.json

@@ -364,6 +364,17 @@
     }
   },
   "library-panels": {
+    "modal": {
+      "body__one": "Ŧĥįş päʼnęľ įş þęįʼnģ ūşęđ įʼn {{count}} đäşĥþőäřđ. Pľęäşę čĥőőşę ŵĥįčĥ đäşĥþőäřđ ŧő vįęŵ ŧĥę päʼnęľ įʼn:",
+      "body__other": "Ŧĥįş päʼnęľ įş þęįʼnģ ūşęđ įʼn {{count}} đäşĥþőäřđş. Pľęäşę čĥőőşę ŵĥįčĥ đäşĥþőäřđ ŧő vįęŵ ŧĥę päʼnęľ įʼn:",
+      "button-cancel": "<0>Cäʼnčęľ</0>",
+      "button-view-panel1": "Vįęŵ päʼnęľ įʼn {{label}}...",
+      "button-view-panel2": "Vįęŵ päʼnęľ įʼn đäşĥþőäřđ...",
+      "panel-not-linked": "Päʼnęľ įş ʼnőŧ ľįʼnĸęđ ŧő ä đäşĥþőäřđ. Åđđ ŧĥę päʼnęľ ŧő ä đäşĥþőäřđ äʼnđ řęŧřy.",
+      "select-no-options-message": "Ńő đäşĥþőäřđş ƒőūʼnđ",
+      "select-placeholder": "Ŝŧäřŧ ŧypįʼnģ ŧő şęäřčĥ ƒőř đäşĥþőäřđ",
+      "title": "Vįęŵ päʼnęľ įʼn đäşĥþőäřđ"
+    },
     "save": {
       "error": "Ēřřőř şävįʼnģ ľįþřäřy päʼnęľ: \"{{errorMsg}}\"",
       "success": "Ŀįþřäřy päʼnęľ şävęđ"

public/locales/zh-Hans/grafana.json

@@ -359,6 +359,16 @@
     }
   },
   "library-panels": {
+    "modal": {
+      "body__other": "",
+      "button-cancel": "",
+      "button-view-panel1": "",
+      "button-view-panel2": "",
+      "panel-not-linked": "",
+      "select-no-options-message": "",
+      "select-placeholder": "",
+      "title": ""
+    },
     "save": {
       "error": "保存库面板时出错：\"{{errorMsg}}\"",
       "success": "库面板已保存"