i18n: Mark up GeneralSettings for translations (#75827)

* add preliminary i18n * translate delete btn * update keys for i18n * update locales * add translation * update locales * update translation * add new translation * add new translation keys * add new translation * update keys * update key structure * translate auto-refresh * add new translations for label and description * Update public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.tsx Co-authored-by: Ashley Harrison <ashharrison90@gmail.com> * Update public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx Co-authored-by: Ashley Harrison <ashharrison90@gmail.com> * Update public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx Co-authored-by: Ashley Harrison <ashharrison90@gmail.com> * Update public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx Co-authored-by: Ashley Harrison <ashharrison90@gmail.com> * Update public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx Co-authored-by: Ashley Harrison <ashharrison90@gmail.com> * Update public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx Co-authored-by: Ashley Harrison <ashharrison90@gmail.com> * Update public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx Co-authored-by: Ashley Harrison <ashharrison90@gmail.com> * Update public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx Co-authored-by: Ashley Harrison <ashharrison90@gmail.com> * Update public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardButton.tsx Co-authored-by: Ashley Harrison <ashharrison90@gmail.com> * Update public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx Co-authored-by: Ashley Harrison <ashharrison90@gmail.com> * update internationalization key * Update public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx Co-authored-by: Ashley Harrison <ashharrison90@gmail.com> * Update public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx Co-authored-by: Ashley Harrison <ashharrison90@gmail.com> * Update public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx Co-authored-by: Ashley Harrison <ashharrison90@gmail.com> * Update public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx Co-authored-by: Ashley Harrison <ashharrison90@gmail.com> * update internationalization key * Update public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx Co-authored-by: Ashley Harrison <ashharrison90@gmail.com> * update label * fix style --------- Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>
2024-11-25 18:30:41 -06:00 · 2023-10-03 13:15:11 +01:00 · 2023-10-03 13:15:11 +01:00 · 3c7c608b5b
commit 3c7c608b5b
parent 18b237879d
10 changed files with 197 additions and 19 deletions
--- a/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.tsx
@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';

 import { Input, defaultIntervals, Field } from '@grafana/ui';
+import { t } from 'app/core/internationalization';

 import { getTimeSrv } from '../../services/TimeSrv';

@ -58,8 +59,11 @@ export const AutoRefreshIntervals = ({

  return (
    <Field
-      label="Auto refresh"
-      description="Define the auto refresh intervals that should be available in the auto refresh list."
+      label={t('dashboard-settings.general.auto-refresh-label', 'Auto refresh')}
+      description={t(
+        'dashboard-settings.general.auto-refresh-description',
+        'Define the auto refresh intervals that should be available in the auto refresh list.'
+      )}
      error={invalidIntervalsMessage}
      invalid={!!invalidIntervalsMessage}
    >
--- a/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx
@ -16,6 +16,7 @@ import {
 import { Box } from '@grafana/ui/src/unstable';
 import { Page } from 'app/core/components/Page/Page';
 import { FolderPicker } from 'app/core/components/Select/FolderPicker';
+import { t, Trans } from 'app/core/internationalization';
 import { updateTimeZoneDashboard, updateWeekStartDashboard } from 'app/features/dashboard/state/actions';

 import { DeleteDashboardButton } from '../DeleteDashboard/DeleteDashboardButton';
@ -124,7 +125,10 @@ export function GeneralSettingsUnconnected({
          <Field
            label={
              <HorizontalGroup justify="space-between">
-                <Label htmlFor="title-input">Title</Label>
+                <Label htmlFor="title-input">
+                  <Trans i18nKey="dashboard-settings.general.title-label">Title</Trans>
+                </Label>
+
                {config.featureToggles.dashgpt && (
                  <GenAIDashTitleButton onGenerate={onTitleChange} dashboard={dashboard} />
                )}
@ -141,7 +145,10 @@ export function GeneralSettingsUnconnected({
          <Field
            label={
              <HorizontalGroup justify="space-between">
-                <Label htmlFor="description-input">Description</Label>
+                <Label htmlFor="description-input">
+                  {t('dashboard-settings.general.description-label', 'Description')}
+                </Label>
+
                {config.featureToggles.dashgpt && (
                  <GenAIDashDescriptionButton onGenerate={onDescriptionChange} dashboard={dashboard} />
                )}
@ -155,11 +162,11 @@ export function GeneralSettingsUnconnected({
              onChange={(e: ChangeEvent<HTMLTextAreaElement>) => onDescriptionChange(e.target.value)}
            />
          </Field>
-          <Field label="Tags">
+          <Field label={t('dashboard-settings.general.tags-label', 'Tags')}>
            <TagsInput id="tags-input" tags={dashboard.tags} onChange={onTagsChange} width={40} />
          </Field>

-          <Field label="Folder">
+          <Field label={t('dashboard-settings.general.folder-label', 'Folder')}>
            <FolderPicker
              value={dashboard.meta.folderUid}
              onChange={onFolderChange}
@ -173,8 +180,11 @@ export function GeneralSettingsUnconnected({
          </Field>

          <Field
-            label="Editable"
-            description="Set to read-only to disable all editing. Reload the dashboard for changes to take effect"
+            label={t('dashboard-settings.general.editable-label', 'Editable')}
+            description={t(
+              'dashboard-settings.general.editable-description',
+              'Set to read-only to disable all editing. Reload the dashboard for changes to take effect'
+            )}
          >
            <RadioButtonGroup value={dashboard.editable} options={editableOptions} onChange={onEditableChange} />
          </Field>
@ -196,10 +206,13 @@ export function GeneralSettingsUnconnected({
        />

        {/* @todo: Update "Graph tooltip" description to remove prompt about reloading when resolving #46581 */}
-        <CollapsableSection label="Panel options" isOpen={true}>
+        <CollapsableSection label={t('dashboard-settings.general.panel-options-label', 'Panel options')} isOpen={true}>
          <Field
-            label="Graph tooltip"
-            description="Controls tooltip and hover highlight behavior across different panels. Reload the dashboard for changes to take effect"
+            label={t('dashboard-settings.general.panel-options-graph-tooltip-label', 'Graph tooltip')}
+            description={t(
+              'dashboard-settings.general.panel-options-graph-tooltip-description',
+              'Controls tooltip and hover highlight behavior across different panels. Reload the dashboard for changes to take effect'
+            )}
          >
            <RadioButtonGroup
              onChange={onTooltipChange}
--- a/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
@ -4,6 +4,7 @@ import React, { PureComponent } from 'react';
 import { rangeUtil, TimeZone } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { CollapsableSection, Field, Input, Switch, TimeZonePicker, WeekStartPicker } from '@grafana/ui';
+import { t } from 'app/core/internationalization';

 import { AutoRefreshIntervals } from './AutoRefreshIntervals';

@ -66,8 +67,11 @@ export class TimePickerSettings extends PureComponent<Props, State> {

  render() {
    return (
-      <CollapsableSection label="Time options" isOpen={true}>
-        <Field label="Time zone" data-testid={selectors.components.TimeZonePicker.containerV2}>
+      <CollapsableSection label={t('dashboard-settings.time-picker.time-options-label', 'Time options')} isOpen={true}>
+        <Field
+          label={t('dashboard-settings.time-picker.time-zone-label', 'Time zone')}
+          data-testid={selectors.components.TimeZonePicker.containerV2}
+        >
          <TimeZonePicker
            inputId="time-options-input"
            includeInternal={true}
@ -76,7 +80,10 @@ export class TimePickerSettings extends PureComponent<Props, State> {
            width={40}
          />
        </Field>
-        <Field label="Week start" data-testid={selectors.components.WeekStartPicker.containerV2}>
+        <Field
+          label={t('dashboard-settings.time-picker.week-start-label', 'Week start')}
+          data-testid={selectors.components.WeekStartPicker.containerV2}
+        >
          <WeekStartPicker
            inputId="week-start-input"
            width={40}
@ -88,7 +95,13 @@ export class TimePickerSettings extends PureComponent<Props, State> {
          refreshIntervals={this.props.refreshIntervals}
          onRefreshIntervalChange={this.props.onRefreshIntervalChange}
        />
-        <Field label="Now delay" description="Exclude recent data that may be incomplete.">
+        <Field
+          label={t('dashboard-settings.time-picker.now-delay-label', 'Now delay')}
+          description={t(
+            'dashboard-settings.time-picker.now-delay-description',
+            'Exclude recent data that may be incomplete.'
+          )}
+        >
          <Input
            id="now-delay-input"
            invalid={!this.state.isNowDelayValid}
@ -97,7 +110,7 @@ export class TimePickerSettings extends PureComponent<Props, State> {
            defaultValue={this.props.nowDelay}
          />
        </Field>
-        <Field label="Hide time picker">
+        <Field label={t('dashboard-settings.time-picker.hide-time-picker', 'Hide time picker')}>
          <Switch
            id="hide-time-picker-toggle"
            value={!!this.props.timePickerHidden}
@ -105,8 +118,11 @@ export class TimePickerSettings extends PureComponent<Props, State> {
          />
        </Field>
        <Field
-          label="Refresh live dashboards"
-          description="Continuously re-draw panels where the time range references 'now'"
+          label={t('dashboard-settings.time-picker.refresh-live-dashboards-label', 'Refresh live dashboards')}
+          description={t(
+            'dashboard-settings.time-picker.refresh-live-dashboards-description',
+            "Continuously re-draw panels where the time range references 'now'"
+          )}
        >
          <Switch id="refresh-live-dashboards-toggle" value={!!this.props.liveNow} onChange={this.onLiveNowChange} />
        </Field>
--- a/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardButton.tsx
+++ b/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardButton.tsx
@ -1,6 +1,7 @@
 import React from 'react';

 import { Button, ModalsController } from '@grafana/ui';
+import { Trans } from 'app/core/internationalization';

 import { DashboardModel } from '../../state';

@ -23,7 +24,7 @@ export const DeleteDashboardButton = ({ dashboard }: Props) => (
        }}
        aria-label="Dashboard settings page delete dashboard button"
      >
-        Delete Dashboard
+        <Trans i18nKey="dashboard-settings.dashboard-delete-button">Delete Dashboard</Trans>
      </Button>
    )}
  </ModalsController>
--- a/public/locales/de-DE/grafana.json
+++ b/public/locales/de-DE/grafana.json
@ -260,9 +260,33 @@
    }
  },
  "dashboard-settings": {
+    "dashboard-delete-button": "",
+    "general": {
+      "auto-refresh-description": "",
+      "auto-refresh-label": "",
+      "description-label": "",
+      "editable-description": "",
+      "editable-label": "",
+      "folder-label": "",
+      "panel-options-graph-tooltip-description": "",
+      "panel-options-graph-tooltip-label": "",
+      "panel-options-label": "",
+      "tags-label": "",
+      "title-label": ""
+    },
    "json-editor": {
      "save-button": "",
      "subtitle": ""
+    },
+    "time-picker": {
+      "hide-time-picker": "",
+      "now-delay-description": "",
+      "now-delay-label": "",
+      "refresh-live-dashboards-description": "",
+      "refresh-live-dashboards-label": "",
+      "time-options-label": "",
+      "time-zone-label": "",
+      "week-start-label": ""
    }
  },
  "data-source-picker": {
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@ -260,9 +260,33 @@
    }
  },
  "dashboard-settings": {
+    "dashboard-delete-button": "Delete Dashboard",
+    "general": {
+      "auto-refresh-description": "Define the auto refresh intervals that should be available in the auto refresh list.",
+      "auto-refresh-label": "Auto refresh",
+      "description-label": "Description",
+      "editable-description": "Set to read-only to disable all editing. Reload the dashboard for changes to take effect",
+      "editable-label": "Editable",
+      "folder-label": "Folder",
+      "panel-options-graph-tooltip-description": "Controls tooltip and hover highlight behavior across different panels. Reload the dashboard for changes to take effect",
+      "panel-options-graph-tooltip-label": "Graph tooltip",
+      "panel-options-label": "Panel options",
+      "tags-label": "Tags",
+      "title-label": "Title"
+    },
    "json-editor": {
      "save-button": "Save changes",
      "subtitle": "The JSON model below is the data structure that defines the dashboard. This includes dashboard settings, panel settings, layout, queries, and so on."
+    },
+    "time-picker": {
+      "hide-time-picker": "Hide time picker",
+      "now-delay-description": "Exclude recent data that may be incomplete.",
+      "now-delay-label": "Now delay",
+      "refresh-live-dashboards-description": "Continuously re-draw panels where the time range references 'now'",
+      "refresh-live-dashboards-label": "Refresh live dashboards",
+      "time-options-label": "Time options",
+      "time-zone-label": "Time zone",
+      "week-start-label": "Week start"
    }
  },
  "data-source-picker": {
--- a/public/locales/es-ES/grafana.json
+++ b/public/locales/es-ES/grafana.json
@ -265,9 +265,33 @@
    }
  },
  "dashboard-settings": {
+    "dashboard-delete-button": "",
+    "general": {
+      "auto-refresh-description": "",
+      "auto-refresh-label": "",
+      "description-label": "",
+      "editable-description": "",
+      "editable-label": "",
+      "folder-label": "",
+      "panel-options-graph-tooltip-description": "",
+      "panel-options-graph-tooltip-label": "",
+      "panel-options-label": "",
+      "tags-label": "",
+      "title-label": ""
+    },
    "json-editor": {
      "save-button": "",
      "subtitle": ""
+    },
+    "time-picker": {
+      "hide-time-picker": "",
+      "now-delay-description": "",
+      "now-delay-label": "",
+      "refresh-live-dashboards-description": "",
+      "refresh-live-dashboards-label": "",
+      "time-options-label": "",
+      "time-zone-label": "",
+      "week-start-label": ""
    }
  },
  "data-source-picker": {
--- a/public/locales/fr-FR/grafana.json
+++ b/public/locales/fr-FR/grafana.json
@ -265,9 +265,33 @@
    }
  },
  "dashboard-settings": {
+    "dashboard-delete-button": "",
+    "general": {
+      "auto-refresh-description": "",
+      "auto-refresh-label": "",
+      "description-label": "",
+      "editable-description": "",
+      "editable-label": "",
+      "folder-label": "",
+      "panel-options-graph-tooltip-description": "",
+      "panel-options-graph-tooltip-label": "",
+      "panel-options-label": "",
+      "tags-label": "",
+      "title-label": ""
+    },
    "json-editor": {
      "save-button": "",
      "subtitle": ""
+    },
+    "time-picker": {
+      "hide-time-picker": "",
+      "now-delay-description": "",
+      "now-delay-label": "",
+      "refresh-live-dashboards-description": "",
+      "refresh-live-dashboards-label": "",
+      "time-options-label": "",
+      "time-zone-label": "",
+      "week-start-label": ""
    }
  },
  "data-source-picker": {
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@ -260,9 +260,33 @@
    }
  },
  "dashboard-settings": {
+    "dashboard-delete-button": "Đęľęŧę Đäşĥþőäřđ",
+    "general": {
+      "auto-refresh-description": "Đęƒįŉę ŧĥę äūŧő řęƒřęşĥ įŉŧęřväľş ŧĥäŧ şĥőūľđ þę äväįľäþľę įŉ ŧĥę äūŧő řęƒřęşĥ ľįşŧ.",
+      "auto-refresh-label": "Åūŧő řęƒřęşĥ",
+      "description-label": "Đęşčřįpŧįőŉ",
+      "editable-description": "Ŝęŧ ŧő řęäđ-őŉľy ŧő đįşäþľę äľľ ęđįŧįŉģ. Ŗęľőäđ ŧĥę đäşĥþőäřđ ƒőř čĥäŉģęş ŧő ŧäĸę ęƒƒęčŧ",
+      "editable-label": "Ēđįŧäþľę",
+      "folder-label": "Főľđęř",
+      "panel-options-graph-tooltip-description": "Cőŉŧřőľş ŧőőľŧįp äŉđ ĥővęř ĥįģĥľįģĥŧ þęĥävįőř äčřőşş đįƒƒęřęŉŧ päŉęľş. Ŗęľőäđ ŧĥę đäşĥþőäřđ ƒőř čĥäŉģęş ŧő ŧäĸę ęƒƒęčŧ",
+      "panel-options-graph-tooltip-label": "Ğřäpĥ ŧőőľŧįp",
+      "panel-options-label": "Päŉęľ őpŧįőŉş",
+      "tags-label": "Ŧäģş",
+      "title-label": "Ŧįŧľę"
+    },
    "json-editor": {
      "save-button": "Ŝävę čĥäŉģęş",
      "subtitle": "Ŧĥę ĴŜØŃ mőđęľ þęľőŵ įş ŧĥę đäŧä şŧřūčŧūřę ŧĥäŧ đęƒįŉęş ŧĥę đäşĥþőäřđ. Ŧĥįş įŉčľūđęş đäşĥþőäřđ şęŧŧįŉģş, päŉęľ şęŧŧįŉģş, ľäyőūŧ, qūęřįęş, äŉđ şő őŉ."
+    },
+    "time-picker": {
+      "hide-time-picker": "Ħįđę ŧįmę pįčĸęř",
+      "now-delay-description": "Ēχčľūđę řęčęŉŧ đäŧä ŧĥäŧ mäy þę įŉčőmpľęŧę.",
+      "now-delay-label": "Ńőŵ đęľäy",
+      "refresh-live-dashboards-description": "Cőŉŧįŉūőūşľy řę-đřäŵ päŉęľş ŵĥęřę ŧĥę ŧįmę řäŉģę řęƒęřęŉčęş 'ŉőŵ'",
+      "refresh-live-dashboards-label": "Ŗęƒřęşĥ ľįvę đäşĥþőäřđş",
+      "time-options-label": "Ŧįmę őpŧįőŉş",
+      "time-zone-label": "Ŧįmę žőŉę",
+      "week-start-label": "Ŵęęĸ şŧäřŧ"
    }
  },
  "data-source-picker": {
--- a/public/locales/zh-Hans/grafana.json
+++ b/public/locales/zh-Hans/grafana.json
@ -255,9 +255,33 @@
    }
  },
  "dashboard-settings": {
+    "dashboard-delete-button": "",
+    "general": {
+      "auto-refresh-description": "",
+      "auto-refresh-label": "",
+      "description-label": "",
+      "editable-description": "",
+      "editable-label": "",
+      "folder-label": "",
+      "panel-options-graph-tooltip-description": "",
+      "panel-options-graph-tooltip-label": "",
+      "panel-options-label": "",
+      "tags-label": "",
+      "title-label": ""
+    },
    "json-editor": {
      "save-button": "",
      "subtitle": ""
+    },
+    "time-picker": {
+      "hide-time-picker": "",
+      "now-delay-description": "",
+      "now-delay-label": "",
+      "refresh-live-dashboards-description": "",
+      "refresh-live-dashboards-label": "",
+      "time-options-label": "",
+      "time-zone-label": "",
+      "week-start-label": ""
    }
  },
  "data-source-picker": {