i18n: Translates the Share Panel modal (#53297)

public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx

@@ -1,18 +1,13 @@
+import { t, Trans } from '@lingui/macro';
 import React, { FormEvent, PureComponent } from 'react';
 
-import { SelectableValue } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime/src';
-import { ClipboardButton, Field, Modal, RadioButtonGroup, Switch, TextArea } from '@grafana/ui';
+import { ClipboardButton, Field, Modal, Switch, TextArea } from '@grafana/ui';
 
+import { ThemePicker } from './ThemePicker';
 import { ShareModalTabProps } from './types';
 import { buildIframeHtml } from './utils';
 
-const themeOptions: Array<SelectableValue<string>> = [
-  { label: 'Current', value: 'current' },
-  { label: 'Dark', value: 'dark' },
-  { label: 'Light', value: 'light' },
-];
-
 interface Props extends ShareModalTabProps {}
 
 interface State {
@@ -69,12 +64,21 @@ export class ShareEmbed extends PureComponent<Props, State> {
     const { useCurrentTimeRange, selectedTheme, iframeHtml } = this.state;
     const isRelativeTime = this.props.dashboard ? this.props.dashboard.time.to === 'now' : false;
 
+    const timeRangeDescription = isRelativeTime
+      ? t({
+          id: 'share-modal.embed.time-range-description',
+          message: 'Transforms the current relative time range to an absolute time range',
+        })
+      : '';
+
     return (
       <>
-        <p className="share-modal-info-text">Generate HTML for embedding an iframe with this panel.</p>
+        <p className="share-modal-info-text">
+          <Trans id="share-modal.embed.info">Generate HTML for embedding an iframe with this panel.</Trans>
+        </p>
         <Field
-          label="Current time range"
-          description={isRelativeTime ? 'Transforms the current relative time range to an absolute time range' : ''}
+          label={t({ id: 'share-modal.embed.time-range', message: 'Current time range' })}
+          description={timeRangeDescription}
         >
           <Switch
             id="share-current-time-range"
@@ -82,13 +86,15 @@ export class ShareEmbed extends PureComponent<Props, State> {
             onChange={this.onUseCurrentTimeRangeChange}
           />
         </Field>
-        <Field label="Theme">
-          <RadioButtonGroup options={themeOptions} value={selectedTheme} onChange={this.onThemeChange} />
-        </Field>
+        <ThemePicker selectedTheme={selectedTheme} onChange={this.onThemeChange} />
         <Field
-          label="Embed HTML"
-          description="The HTML code below can be pasted and included in another web page. Unless anonymous access is enabled,
-                the user viewing that page need to be signed into Grafana for the graph to load."
+          label={t({ id: 'share-modal.embed.html', message: 'Embed HTML' })}
+          description={
+            <Trans id="share-modal.embed.html-description">
+              The HTML code below can be pasted and included in another web page. Unless anonymous access is enabled,
+              the user viewing that page need to be signed into Grafana for the graph to load.
+            </Trans>
+          }
         >
           <TextArea
             data-testid="share-embed-html"
@@ -100,7 +106,7 @@ export class ShareEmbed extends PureComponent<Props, State> {
         </Field>
         <Modal.ButtonRow>
           <ClipboardButton icon="copy" variant="primary" getText={this.getIframeHtml}>
-            Copy to clipboard
+            <Trans id="share-modal.embed.copy">Copy to clipboard</Trans>
           </ClipboardButton>
         </Modal.ButtonRow>
       </>

public/app/features/dashboard/components/ShareModal/ShareLibraryPanel.tsx

@@ -1,3 +1,4 @@
+import { Trans } from '@lingui/macro';
 import React, { useEffect } from 'react';
 
 import { reportInteraction } from '@grafana/runtime/src';
@@ -20,7 +21,9 @@ export const ShareLibraryPanel = ({ panel, initialFolderId, onDismiss }: Props)
 
   return (
     <>
-      <p className="share-modal-info-text">Create library panel.</p>
+      <p className="share-modal-info-text">
+        <Trans id="share-modal.library.info">Create library panel.</Trans>
+      </p>
       <AddLibraryPanelContents panel={panel} initialFolderId={initialFolderId} onDismiss={onDismiss!} />
     </>
   );

public/app/features/dashboard/components/ShareModal/ShareLink.tsx

@@ -1,12 +1,12 @@
 import { Trans, t } from '@lingui/macro';
 import React, { PureComponent } from 'react';
 
-import { SelectableValue } from '@grafana/data';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
 import { reportInteraction } from '@grafana/runtime/src';
-import { Alert, ClipboardButton, Field, FieldSet, Icon, Input, RadioButtonGroup, Switch } from '@grafana/ui';
+import { Alert, ClipboardButton, Field, FieldSet, Icon, Input, Switch } from '@grafana/ui';
 import config from 'app/core/config';
 
+import { ThemePicker } from './ThemePicker';
 import { ShareModalTabProps } from './types';
 import { buildImageUrl, buildShareUrl } from './utils';
 
@@ -101,30 +101,6 @@ export class ShareLink extends PureComponent<Props, State> {
       message: `Link URL`,
     });
 
-    const themeOptions: Array<SelectableValue<string>> = [
-      {
-        label: t({
-          id: 'share-modal.link.theme-current',
-          message: `Current`,
-        }),
-        value: 'current',
-      },
-      {
-        label: t({
-          id: 'share-modal.link.theme-dark',
-          message: `Dark`,
-        }),
-        value: 'dark',
-      },
-      {
-        label: t({
-          id: 'share-modal.link.theme-light',
-          message: `Light`,
-        }),
-        value: 'light',
-      },
-    ];
-
     return (
       <>
         <p className="share-modal-info-text">
@@ -140,14 +116,7 @@ export class ShareLink extends PureComponent<Props, State> {
               onChange={this.onUseCurrentTimeRangeChange}
             />
           </Field>
-          <Field
-            label={t({
-              id: 'share-modal.link.theme',
-              message: `Theme`,
-            })}
-          >
-            <RadioButtonGroup options={themeOptions} value={selectedTheme} onChange={this.onThemeChange} />
-          </Field>
+          <ThemePicker selectedTheme={selectedTheme} onChange={this.onThemeChange} />
           <Field label={shortenURLTranslation}>
             <Switch id="share-shorten-url" value={useShortUrl} onChange={this.onUrlShorten} />
           </Field>

public/app/features/dashboard/components/ShareModal/ShareModal.tsx

@@ -1,3 +1,4 @@
+import { t } from '@lingui/macro';
 import React from 'react';
 
 import { reportInteraction } from '@grafana/runtime/src';
@@ -37,21 +38,26 @@ function getInitialState(props: Props): State {
 function getTabs(props: Props) {
   const { panel } = props;
 
-  const tabs: ShareModalTabModel[] = [{ label: 'Link', value: 'link', component: ShareLink }];
+  const linkLabel = t({ id: 'share-modal.tab-title.link', message: 'Link' });
+  const tabs: ShareModalTabModel[] = [{ label: linkLabel, value: 'link', component: ShareLink }];
 
   if (contextSrv.isSignedIn) {
-    tabs.push({ label: 'Snapshot', value: 'snapshot', component: ShareSnapshot });
+    const snapshotLabel = t({ id: 'share-modal.tab-title.snapshot', message: 'Snapshot' });
+    tabs.push({ label: snapshotLabel, value: 'snapshot', component: ShareSnapshot });
   }
 
   if (panel) {
-    tabs.push({ label: 'Embed', value: 'embed', component: ShareEmbed });
+    const embedLabel = t({ id: 'share-modal.tab-title.embed', message: 'Embed' });
+    tabs.push({ label: embedLabel, value: 'embed', component: ShareEmbed });
 
     if (!isPanelModelLibraryPanel(panel)) {
-      tabs.push({ label: 'Library panel', value: 'library_panel', component: ShareLibraryPanel });
+      const libraryPanelLabel = t({ id: 'share-modal.tab-title.library-panel', message: 'Library panel' });
+      tabs.push({ label: libraryPanelLabel, value: 'library_panel', component: ShareLibraryPanel });
     }
     tabs.push(...customPanelTabs);
   } else {
-    tabs.push({ label: 'Export', value: 'export', component: ShareExport });
+    const exportLabel = t({ id: 'share-modal.tab-title.export', message: 'Export' });
+    tabs.push({ label: exportLabel, value: 'export', component: ShareExport });
     tabs.push(...customDashboardTabs);
   }
 
@@ -100,7 +106,15 @@ export class ShareModal extends React.Component<Props, State> {
   renderTitle() {
     const { panel } = this.props;
     const { activeTab } = this.state;
-    const title = panel ? 'Share Panel' : 'Share';
+    const title = panel
+      ? t({
+          id: 'share-modal.panel.title',
+          message: 'Share Panel',
+        })
+      : t({
+          id: 'share-modal.dashboard.title',
+          message: 'Share',
+        });
     const tabs = this.getTabs();
 
     return (

public/app/features/dashboard/components/ShareModal/ThemePicker.tsx

@@ -0,0 +1,47 @@
+import { t } from '@lingui/macro';
+import React from 'react';
+
+import { SelectableValue } from '@grafana/data';
+import { RadioButtonGroup, Field } from '@grafana/ui';
+
+interface Props {
+  selectedTheme: string;
+  onChange: (value: string) => void;
+}
+
+export const ThemePicker = ({ selectedTheme = 'current', onChange }: Props) => {
+  const themeOptions: Array<SelectableValue<string>> = [
+    {
+      label: t({
+        id: 'share-modal.theme-picker.current',
+        message: `Current`,
+      }),
+      value: 'current',
+    },
+    {
+      label: t({
+        id: 'share-modal.theme-picker.dark',
+        message: `Dark`,
+      }),
+      value: 'dark',
+    },
+    {
+      label: t({
+        id: 'share-modal.theme-picker.light',
+        message: `Light`,
+      }),
+      value: 'light',
+    },
+  ];
+
+  return (
+    <Field
+      label={t({
+        id: 'share-modal.theme-picker.field-name',
+        message: `Theme`,
+      })}
+    >
+      <RadioButtonGroup options={themeOptions} value={selectedTheme} onChange={onChange} />
+    </Field>
+  );
+};