Get help: Make quality of life updates (#93594)

* Get help updates

* Remove beta badge

* Further cleanups

* Some updates

* Fix tests

* Prettier

* Update betterer results

* i18n

* i18n extraction

* Bettererest

.betterer.results

@@ -3049,19 +3049,12 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
     "public/app/features/dashboard/components/HelpWizard/HelpWizard.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"]
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "9"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "10"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "11"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "12"]
     ],
     "public/app/features/dashboard/components/Inspector/PanelInspector.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]

public/app/features/dashboard/components/HelpWizard/HelpWizard.test.tsx

@@ -30,6 +30,6 @@ function setup() {
 describe('SupportSnapshot', () => {
   it('Can render', async () => {
     setup();
-    expect(await screen.findByRole('button', { name: /Dashboard \([\d\.]+ KiB\)/ })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: /Download snapshot \([\d\.]+ KiB\)/ })).toBeInTheDocument();
   });
 });

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

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { useMemo, useEffect } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
-import { PanelPlugin, GrafanaTheme2, FeatureState } from '@grafana/data';
+import { PanelPlugin, GrafanaTheme2 } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import {
   Drawer,
@@ -11,17 +11,16 @@ import {
   CodeEditor,
   useStyles2,
   Field,
-  HorizontalGroup,
   InlineSwitch,
   Button,
   Spinner,
   Alert,
-  FeatureBadge,
   Select,
   ClipboardButton,
   Icon,
   Stack,
 } from '@grafana/ui';
+import { Trans } from 'app/core/internationalization';
 import { contextSrv } from 'app/core/services/context_srv';
 import { PanelModel } from 'app/features/dashboard/state';
 import { AccessControlAction } from 'app/types';
@@ -76,7 +75,6 @@ export function HelpWizard({ panel, plugin, onClose }: Props) {
       subtitle={
         <Stack direction="column" gap={1}>
           <Stack direction="row" gap={1}>
-            <FeatureBadge featureState={FeatureState.beta} />
             <a
               href="https://grafana.com/docs/grafana/latest/troubleshooting/"
               target="blank"
@@ -87,13 +85,17 @@ export function HelpWizard({ panel, plugin, onClose }: Props) {
             </a>
           </Stack>
           <span className="muted">
-            To request troubleshooting help, send a snapshot of this panel to Grafana Labs Technical Support. The
+            <Trans i18nKey="help-wizard.troubleshooting-help">
-            snapshot contains query response data and panel settings.
+              To request troubleshooting help, send a snapshot of this panel to Grafana Labs Technical Support. The
+              snapshot contains query response data and panel settings.
+            </Trans>
           </span>
           {hasSupportBundleAccess && (
             <span className="muted">
-              You can also retrieve a support bundle containing information concerning your Grafana instance and
+              <Trans i18nKey="help-wizard.support-bundle">
-              configured datasources in the <a href="/support-bundles">support bundles section</a>.
+                You can also retrieve a support bundle containing information concerning your Grafana instance and
+                configured datasources in the <a href="/support-bundles">support bundles section</a>.
+              </Trans>
             </span>
           )}
         </Stack>
@@ -150,10 +152,10 @@ export function HelpWizard({ panel, plugin, onClose }: Props) {
       {currentTab === SnapshotTab.Support && (
         <>
           <Field
-            label="Randomize data"
+            label="Obfuscate data"
             description="Modify the original data to hide sensitve information.  Note the lengths will stay the same, and duplicate values will be equal."
           >
-            <HorizontalGroup>
+            <Stack direction="row" gap={1}>
               <InlineSwitch
                 label="Labels"
                 id="randomize-labels"
@@ -175,27 +177,27 @@ export function HelpWizard({ panel, plugin, onClose }: Props) {
                 value={Boolean(randomize.values)}
                 onChange={() => service.onToggleRandomize('values')}
               />
-            </HorizontalGroup>
+            </Stack>
           </Field>
 
           <Field label="Support snapshot" description={`Panel: ${panelTitle}`}>
             <Stack>
               <Button icon="download-alt" onClick={service.onDownloadDashboard}>
-                Dashboard ({snapshotSize})
+                <Trans i18nKey="help-wizard.download-snapshot">Download snapshot</Trans> ({snapshotSize})
               </Button>
               <ClipboardButton
                 icon="github"
                 getText={service.onGetMarkdownForClipboard}
                 title="Copy a complete GitHub comment to the clipboard"
               >
-                Copy to clipboard
+                <Trans i18nKey="help-wizard.github-comment">Copy Github comment</Trans>
               </ClipboardButton>
               <Button
+                icon="eye"
                 onClick={service.onPreviewDashboard}
-                variant="secondary"
                 title="Open support snapshot dashboard in a new tab"
               >
-                Preview
+                <Trans i18nKey="help-wizard.preview-snapshot">Preview snapshot</Trans>
               </Button>
             </Stack>
           </Field>

public/locales/en-US/grafana.json

@@ -1093,6 +1093,13 @@
     },
     "title": "Shortcuts"
   },
+  "help-wizard": {
+    "download-snapshot": "Download snapshot",
+    "github-comment": "Copy Github comment",
+    "preview-snapshot": "Preview snapshot",
+    "support-bundle": "You can also retrieve a support bundle containing information concerning your Grafana instance and configured datasources in the <1>support bundles section</1>.",
+    "troubleshooting-help": "To request troubleshooting help, send a snapshot of this panel to Grafana Labs Technical Support. The snapshot contains query response data and panel settings."
+  },
   "inspector": {
     "query": {
       "collapse-all": "Collapse all",

public/locales/pseudo-LOCALE/grafana.json

@@ -1093,6 +1093,13 @@
     },
     "title": "Ŝĥőřŧčūŧş"
   },
+  "help-wizard": {
+    "download-snapshot": "Đőŵʼnľőäđ şʼnäpşĥőŧ",
+    "github-comment": "Cőpy Ğįŧĥūþ čőmmęʼnŧ",
+    "preview-snapshot": "Přęvįęŵ şʼnäpşĥőŧ",
+    "support-bundle": "Ÿőū čäʼn äľşő řęŧřįęvę ä şūppőřŧ þūʼnđľę čőʼnŧäįʼnįʼnģ įʼnƒőřmäŧįőʼn čőʼnčęřʼnįʼnģ yőūř Ğřäƒäʼnä įʼnşŧäʼnčę äʼnđ čőʼnƒįģūřęđ đäŧäşőūřčęş įʼn ŧĥę <1>şūppőřŧ þūʼnđľęş şęčŧįőʼn</1>.",
+    "troubleshooting-help": "Ŧő řęqūęşŧ ŧřőūþľęşĥőőŧįʼnģ ĥęľp, şęʼnđ ä şʼnäpşĥőŧ őƒ ŧĥįş päʼnęľ ŧő Ğřäƒäʼnä Ŀäþş Ŧęčĥʼnįčäľ Ŝūppőřŧ. Ŧĥę şʼnäpşĥőŧ čőʼnŧäįʼnş qūęřy řęşpőʼnşę đäŧä äʼnđ päʼnęľ şęŧŧįʼnģş."
+  },
   "inspector": {
     "query": {
       "collapse-all": "Cőľľäpşę äľľ",