i18n: Markup QueryEditorRow Component for translations (#76312)

* feat: added markup for query operation header

* chore: generated markup files

* feat: markup PostpreSql cheat sheet

* chore: generated markup files

* chore: removed markup from cheatsheet file

* chore: generated markup files

* chore: added i18n for Data source plugin does not export any Query Editor component

* chore: updated i18n markup files.

* fix: added prefix for for drag and drop label

public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx

@@ -4,6 +4,7 @@ import { DraggableProvided } from 'react-beautiful-dnd';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Icon, IconButton, useStyles2, Stack } from '@grafana/ui';
+import { t } from 'app/core/internationalization';
 
 export interface QueryOperationRowHeaderProps {
   actionsElement?: React.ReactNode;
@@ -41,13 +42,17 @@ export const QueryOperationRowHeader = ({
 }: QueryOperationRowHeaderProps) => {
   const styles = useStyles2(getStyles);
 
-  let tooltipMessage = isContentVisible ? 'Collapse query row' : 'Expand query row';
+  let tooltipMessage = isContentVisible
+    ? t('query-operation.header.collapse-row', 'Collapse query row')
+    : t('query-operation.header.expand-row', 'Expand query row');
   if (expanderMessages !== undefined && isContentVisible) {
     tooltipMessage = expanderMessages.close;
   } else if (expanderMessages !== undefined) {
     tooltipMessage = expanderMessages?.open;
   }
 
+  const dragAndDropLabel = t('query-operation.header.drag-and-drop', 'Drag and drop to reorder');
+
   return (
     <div className={styles.header}>
       <div className={styles.column}>
@@ -76,7 +81,7 @@ export const QueryOperationRowHeader = ({
         {actionsElement}
         {draggable && (
           <div onMouseMove={reportDragMousePosition} {...dragHandleProps}>
-            <Icon title="Drag and drop to reorder" name="draggabledots" size="lg" className={styles.dragIcon} />
+            <Icon title={dragAndDropLabel} name="draggabledots" size="lg" className={styles.dragIcon} />
           </div>
         )}
       </Stack>

public/app/features/query/components/QueryEditorRow.tsx

@@ -33,6 +33,7 @@ import {
   QueryOperationRow,
   QueryOperationRowRenderProps,
 } from 'app/core/components/QueryOperationRow/QueryOperationRow';
+import { t, Trans } from 'app/core/internationalization';
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
@@ -301,7 +302,13 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
       }
     }
 
-    return <div>Data source plugin does not export any Query Editor component</div>;
+    return (
+      <div>
+        <Trans i18nKey="query-operation.query-editor-not-exported">
+          Data source plugin does not export any Query Editor component
+        </Trans>
+      </div>
+    );
   };
 
   onToggleEditMode = (e: React.MouseEvent, props: QueryOperationRowRenderProps) => {
@@ -442,7 +449,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
       <>
         {hasEditorHelp && (
           <QueryOperationToggleAction
-            title="Show data source help"
+            title={t('query-operation.header.datasource-help', 'Show data source help')}
             icon="question-circle"
             onClick={this.onToggleHelp}
             active={showingHelp}
@@ -450,7 +457,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
         )}
         {hasTextEditMode && (
           <QueryOperationAction
-            title="Toggle text edit mode"
+            title={t('query-operation.header.toggle-edit-mode', 'Toggle text edit mode')}
             icon="pen"
             onClick={(e) => {
               this.onToggleEditMode(e, props);
@@ -458,16 +465,24 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
           />
         )}
         {this.renderExtraActions()}
-        <QueryOperationAction title="Duplicate query" icon="copy" onClick={this.onCopyQuery} />
+        <QueryOperationAction
+          title={t('query-operation.header.duplicate-query', 'Duplicate query')}
+          icon="copy"
+          onClick={this.onCopyQuery}
+        />
         {!hideDisableQuery ? (
           <QueryOperationToggleAction
-            title="Disable query"
+            title={t('query-operation.header.disable-query', 'Disable query')}
             icon={isDisabled ? 'eye-slash' : 'eye'}
             active={isDisabled}
             onClick={this.onDisableQuery}
           />
         ) : null}
-        <QueryOperationAction title="Remove query" icon="trash-alt" onClick={this.onRemoveQuery} />
+        <QueryOperationAction
+          title={t('query-operation.header.remove-query', 'Remove query')}
+          icon="trash-alt"
+          onClick={this.onRemoveQuery}
+        />
       </>
     );
   };

public/locales/de-DE/grafana.json

@@ -961,6 +961,19 @@
       "passwords-must-match": ""
     }
   },
+  "query-operation": {
+    "header": {
+      "collapse-row": "",
+      "datasource-help": "",
+      "disable-query": "",
+      "drag-and-drop": "",
+      "duplicate-query": "",
+      "expand-row": "",
+      "remove-query": "",
+      "toggle-edit-mode": ""
+    },
+    "query-editor-not-exported": ""
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "Automatische Aktualisierung ausgeschaltet. Aktualisierungszeitintervall auswählen",

public/locales/en-US/grafana.json

@@ -961,6 +961,19 @@
       "passwords-must-match": "Passwords must match"
     }
   },
+  "query-operation": {
+    "header": {
+      "collapse-row": "Collapse query row",
+      "datasource-help": "Show data source help",
+      "disable-query": "Disable query",
+      "drag-and-drop": "Drag and drop to reorder",
+      "duplicate-query": "Duplicate query",
+      "expand-row": "Expand query row",
+      "remove-query": "Remove query",
+      "toggle-edit-mode": "Toggle text edit mode"
+    },
+    "query-editor-not-exported": "Data source plugin does not export any Query Editor component"
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "Auto refresh turned off. Choose refresh time interval",

public/locales/es-ES/grafana.json

@@ -967,6 +967,19 @@
       "passwords-must-match": ""
     }
   },
+  "query-operation": {
+    "header": {
+      "collapse-row": "",
+      "datasource-help": "",
+      "disable-query": "",
+      "drag-and-drop": "",
+      "duplicate-query": "",
+      "expand-row": "",
+      "remove-query": "",
+      "toggle-edit-mode": ""
+    },
+    "query-editor-not-exported": ""
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "Actualización automática desactivada. Elija un intervalo de tiempo de actualización",

public/locales/fr-FR/grafana.json

@@ -967,6 +967,19 @@
       "passwords-must-match": ""
     }
   },
+  "query-operation": {
+    "header": {
+      "collapse-row": "",
+      "datasource-help": "",
+      "disable-query": "",
+      "drag-and-drop": "",
+      "duplicate-query": "",
+      "expand-row": "",
+      "remove-query": "",
+      "toggle-edit-mode": ""
+    },
+    "query-editor-not-exported": ""
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "Actualisation automatique désactivée. Choisir un intervalle de temps d'actualisation",

public/locales/pseudo-LOCALE/grafana.json

@@ -961,6 +961,19 @@
       "passwords-must-match": "Päşşŵőřđş mūşŧ mäŧčĥ"
     }
   },
+  "query-operation": {
+    "header": {
+      "collapse-row": "Cőľľäpşę qūęřy řőŵ",
+      "datasource-help": "Ŝĥőŵ đäŧä şőūřčę ĥęľp",
+      "disable-query": "Đįşäþľę qūęřy",
+      "drag-and-drop": "Đřäģ äʼnđ đřőp ŧő řęőřđęř",
+      "duplicate-query": "Đūpľįčäŧę qūęřy",
+      "expand-row": "Ēχpäʼnđ qūęřy řőŵ",
+      "remove-query": "Ŗęmővę qūęřy",
+      "toggle-edit-mode": "Ŧőģģľę ŧęχŧ ęđįŧ mőđę"
+    },
+    "query-editor-not-exported": "Đäŧä şőūřčę pľūģįʼn đőęş ʼnőŧ ęχpőřŧ äʼny Qūęřy Ēđįŧőř čőmpőʼnęʼnŧ"
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "Åūŧő řęƒřęşĥ ŧūřʼnęđ őƒƒ. Cĥőőşę řęƒřęşĥ ŧįmę įʼnŧęřväľ",

public/locales/zh-Hans/grafana.json

@@ -955,6 +955,19 @@
       "passwords-must-match": ""
     }
   },
+  "query-operation": {
+    "header": {
+      "collapse-row": "",
+      "datasource-help": "",
+      "disable-query": "",
+      "drag-and-drop": "",
+      "duplicate-query": "",
+      "expand-row": "",
+      "remove-query": "",
+      "toggle-edit-mode": ""
+    },
+    "query-editor-not-exported": ""
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "自动刷新已关闭。选择刷新时间间隔",