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
2024-11-25 10:20:29 -06:00 · 2023-11-10 02:46:32 -06:00 · 2023-11-10 02:46:32 -06:00 · 95f5bab39b
commit 95f5bab39b
parent c55d3f5f5d
8 changed files with 106 additions and 8 deletions
--- a/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
+++ b/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>
--- a/public/app/features/query/components/QueryEditorRow.tsx
+++ b/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}
+        />
      </>
    );
  };
--- a/public/locales/de-DE/grafana.json
+++ b/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",
--- a/public/locales/en-US/grafana.json
+++ b/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",
--- a/public/locales/es-ES/grafana.json
+++ b/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",
--- a/public/locales/fr-FR/grafana.json
+++ b/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",
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/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": "Đřäģ äŉđ đřőp ŧő řęőřđęř",
+      "duplicate-query": "Đūpľįčäŧę qūęřy",
+      "expand-row": "Ēχpäŉđ qūęřy řőŵ",
+      "remove-query": "Ŗęmővę qūęřy",
+      "toggle-edit-mode": "Ŧőģģľę ŧęχŧ ęđįŧ mőđę"
+    },
+    "query-editor-not-exported": "Đäŧä şőūřčę pľūģįŉ đőęş ŉőŧ ęχpőřŧ äŉy Qūęřy Ēđįŧőř čőmpőŉęŉŧ"
+  },
  "refresh-picker": {
    "aria-label": {
      "choose-interval": "Åūŧő řęƒřęşĥ ŧūřŉęđ őƒƒ. Cĥőőşę řęƒřęşĥ ŧįmę įŉŧęřväľ",
--- a/public/locales/zh-Hans/grafana.json
+++ b/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": "自动刷新已关闭。选择刷新时间间隔",