i18n: Markup CorrelationsPage for translations (#74892)

* i18n: Translations under features/correlations

* more changes

* add links

* add changes

* changes

* changes

public/app/features/correlations/CorrelationsFeatureToggle.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
 
 import { Page } from 'app/core/components/Page/Page';
+import { Trans } from 'app/core/internationalization';
 
 export default function FeatureTogglePage() {
   return (
     <Page navId="correlations">
       <Page.Contents>
-        <h1>Correlations are disabled</h1>
+        <h1>
-        To enable Correlations, add it in the Grafana config:
+          <Trans i18nKey="correlations.page-heading">Correlations are disabled</Trans>
+        </h1>
+        <Trans i18nKey="correlations.page-content">To enable Correlations, add it in the Grafana config:</Trans>
         <div>
           <pre>
             {`[feature_toggles]

public/app/features/correlations/CorrelationsPage.tsx

@@ -21,6 +21,7 @@ import {
 import { Page } from 'app/core/components/Page/Page';
 import { contextSrv } from 'app/core/core';
 import { useNavModel } from 'app/core/hooks/useNavModel';
+import { Trans, t } from 'app/core/internationalization';
 import { AccessControlAction } from 'app/types';
 
 import { AddCorrelationForm } from './Forms/AddCorrelationForm';
@@ -100,7 +101,7 @@ export default function CorrelationsPage() {
       return (
         !provisioned && (
           <DeleteButton
-            aria-label="delete correlation"
+            aria-label={t('correlations.list.delete', 'delete correlation')}
             onConfirm={() =>
               handleDelete({ sourceUID, uid }, page.current > 1 && index === 0 && data?.correlations.length === 1)
             }
@@ -123,17 +124,17 @@ export default function CorrelationsPage() {
       },
       {
         id: 'source',
-        header: 'Source',
+        header: t('correlations.list.source', 'Source'),
         cell: DataSourceCell,
         sortType: sortDatasource,
       },
       {
         id: 'target',
-        header: 'Target',
+        header: t('correlations.list.target', 'Target'),
         cell: DataSourceCell,
         sortType: sortDatasource,
       },
-      { id: 'label', header: 'Label', sortType: 'alphanumeric' },
+      { id: 'label', header: t('correlations.list.label', 'Label'), sortType: 'alphanumeric' },
       {
         id: 'actions',
         cell: RowActions,
@@ -148,7 +149,7 @@ export default function CorrelationsPage() {
   const showEmptyListCTA = data?.correlations.length === 0 && !isAdding && !get.error;
   const addButton = canWriteCorrelations && data?.correlations?.length !== 0 && data !== undefined && !isAdding && (
     <Button icon="plus" onClick={() => setIsAdding(true)}>
-      Add new
+      <Trans i18nKey="correlations.add-new">Add new</Trans>
     </Button>
   );
 
@@ -157,10 +158,17 @@ export default function CorrelationsPage() {
       navModel={navModel}
       subTitle={
         <>
+          <Trans i18nKey="correlations.sub-title">
             Define how data living in different data sources relates to each other. Read more in the{' '}
-          <a href="https://grafana.com/docs/grafana/next/administration/correlations/" target="_blank" rel="noreferrer">
+            <a
-            documentation <Icon name="external-link-alt" />
+              href="https://grafana.com/docs/grafana/next/administration/correlations/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              documentation
+              <Icon name="external-link-alt" />
             </a>
+          </Trans>
         </>
       }
       actions={addButton}
@@ -169,7 +177,7 @@ export default function CorrelationsPage() {
         <div>
           {!data && get.loading && (
             <div className={loaderWrapper}>
-              <LoadingPlaceholder text="loading..." />
+              <LoadingPlaceholder text={t('correlations.list.loading', 'loading...')} />
             </div>
           )}
 
@@ -180,9 +188,16 @@ export default function CorrelationsPage() {
           {
             // This error is not actionable, it'd be nice to have a recovery button
             get.error && (
-              <Alert severity="error" title="Error fetching correlation data" topSpacing={2}>
+              <Alert
+                severity="error"
+                title={t('correlations.alert.title', 'Error fetching correlation data')}
+                topSpacing={2}
+              >
                 {(isFetchError(get.error) && get.error.data?.message) ||
-                  'An unknown error occurred while fetching correlation data. Please try again.'}
+                  t(
+                    'correlations.alert.error-message',
+                    'An unknown error occurred while fetching correlation data. Please try again.'
+                  )}
               </Alert>
             )
           }
@@ -279,7 +294,7 @@ const InfoCell = memo(
     const readOnly = props.row.original.provisioned;
 
     if (readOnly) {
-      return <Badge text="Read only" color="purple" className={noWrap} />;
+      return <Badge text={t('correlations.list.read-only', 'Read only')} color="purple" className={noWrap} />;
     } else {
       return null;
     }

public/locales/de-DE/grafana.json

@@ -126,6 +126,24 @@
       "placeholder": ""
     }
   },
+  "correlations": {
+    "add-new": "",
+    "alert": {
+      "error-message": "",
+      "title": ""
+    },
+    "list": {
+      "delete": "",
+      "label": "",
+      "loading": "",
+      "read-only": "",
+      "source": "",
+      "target": ""
+    },
+    "page-content": "",
+    "page-heading": "",
+    "sub-title": ""
+  },
   "dashboard": {
     "add-menu": {
       "import": "Aus Bibliothek importieren",

public/locales/en-US/grafana.json

@@ -126,6 +126,24 @@
       "placeholder": "Search all"
     }
   },
+  "correlations": {
+    "add-new": "Add new",
+    "alert": {
+      "error-message": "An unknown error occurred while fetching correlation data. Please try again.",
+      "title": "Error fetching correlation data"
+    },
+    "list": {
+      "delete": "delete correlation",
+      "label": "Label",
+      "loading": "loading...",
+      "read-only": "Read only",
+      "source": "Source",
+      "target": "Target"
+    },
+    "page-content": "To enable Correlations, add it in the Grafana config:",
+    "page-heading": "Correlations are disabled",
+    "sub-title": "Define how data living in different data sources relates to each other. Read more in the <2>documentation<1></1></2>"
+  },
   "dashboard": {
     "add-menu": {
       "import": "Import from library",

public/locales/es-ES/grafana.json

@@ -131,6 +131,24 @@
       "placeholder": ""
     }
   },
+  "correlations": {
+    "add-new": "",
+    "alert": {
+      "error-message": "",
+      "title": ""
+    },
+    "list": {
+      "delete": "",
+      "label": "",
+      "loading": "",
+      "read-only": "",
+      "source": "",
+      "target": ""
+    },
+    "page-content": "",
+    "page-heading": "",
+    "sub-title": ""
+  },
   "dashboard": {
     "add-menu": {
       "import": "Importar de la biblioteca",

public/locales/fr-FR/grafana.json

@@ -131,6 +131,24 @@
       "placeholder": ""
     }
   },
+  "correlations": {
+    "add-new": "",
+    "alert": {
+      "error-message": "",
+      "title": ""
+    },
+    "list": {
+      "delete": "",
+      "label": "",
+      "loading": "",
+      "read-only": "",
+      "source": "",
+      "target": ""
+    },
+    "page-content": "",
+    "page-heading": "",
+    "sub-title": ""
+  },
   "dashboard": {
     "add-menu": {
       "import": "Importer depuis la bibliothèque",

public/locales/pseudo-LOCALE/grafana.json

@@ -126,6 +126,24 @@
       "placeholder": "Ŝęäřčĥ äľľ"
     }
   },
+  "correlations": {
+    "add-new": "Åđđ ʼnęŵ",
+    "alert": {
+      "error-message": "Åʼn ūʼnĸʼnőŵʼn ęřřőř őččūřřęđ ŵĥįľę ƒęŧčĥįʼnģ čőřřęľäŧįőʼn đäŧä. Pľęäşę ŧřy äģäįʼn.",
+      "title": "Ēřřőř ƒęŧčĥįʼnģ čőřřęľäŧįőʼn đäŧä"
+    },
+    "list": {
+      "delete": "đęľęŧę čőřřęľäŧįőʼn",
+      "label": "Ŀäþęľ",
+      "loading": "ľőäđįʼnģ...",
+      "read-only": "Ŗęäđ őʼnľy",
+      "source": "Ŝőūřčę",
+      "target": "Ŧäřģęŧ"
+    },
+    "page-content": "Ŧő ęʼnäþľę Cőřřęľäŧįőʼnş, äđđ įŧ įʼn ŧĥę Ğřäƒäʼnä čőʼnƒįģ:",
+    "page-heading": "Cőřřęľäŧįőʼnş äřę đįşäþľęđ",
+    "sub-title": "Đęƒįʼnę ĥőŵ đäŧä ľįvįʼnģ įʼn đįƒƒęřęʼnŧ đäŧä şőūřčęş řęľäŧęş ŧő ęäčĥ őŧĥęř. Ŗęäđ mőřę įʼn ŧĥę <2>đőčūmęʼnŧäŧįőʼn<1></1></2>"
+  },
   "dashboard": {
     "add-menu": {
       "import": "Ĩmpőřŧ ƒřőm ľįþřäřy",

public/locales/zh-Hans/grafana.json

@@ -121,6 +121,24 @@
       "placeholder": ""
     }
   },
+  "correlations": {
+    "add-new": "",
+    "alert": {
+      "error-message": "",
+      "title": ""
+    },
+    "list": {
+      "delete": "",
+      "label": "",
+      "loading": "",
+      "read-only": "",
+      "source": "",
+      "target": ""
+    },
+    "page-content": "",
+    "page-heading": "",
+    "sub-title": ""
+  },
   "dashboard": {
     "add-menu": {
       "import": "从库导入",