SupportSnapshots: Rename to "Get help" (#55206)

.betterer.results

@@ -3679,6 +3679,9 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
+    "public/app/features/dashboard/components/HelpWizard/randomizer.ts:5381": [
+      [0, 0, 0, "Do not use any type assertions.", "0"]
+    ],
     "public/app/features/dashboard/components/Inspector/PanelInspectActions.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
@@ -3823,9 +3826,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
-    "public/app/features/dashboard/components/SupportSnapshot/randomizer.ts:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
     "public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]

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

@@ -6,7 +6,7 @@ import { getPanelPlugin } from 'app/features/plugins/__mocks__/pluginMocks';
 
 import { PanelModel } from '../../state/PanelModel';
 
-import { SupportSnapshot } from './SupportSnapshot';
+import { HelpWizard } from './HelpWizard';
 
 function setup() {
   const panel = new PanelModel({});
@@ -26,7 +26,7 @@ function setup() {
   });
   panel.getQueryRunner().resendLastResult();
 
-  return render(<SupportSnapshot panel={panel} onClose={() => {}} plugin={panel.plugin} />);
+  return render(<HelpWizard panel={panel} onClose={() => {}} plugin={panel.plugin} />);
 }
 describe('SupportSnapshot', () => {
   it('Can render', async () => {

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

@@ -20,6 +20,7 @@ import {
   Select,
   ClipboardButton,
   Stack,
+  Icon,
 } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
 import { PanelModel } from 'app/features/dashboard/state';
@@ -32,7 +33,7 @@ interface Props {
   onClose: () => void;
 }
 
-export function SupportSnapshot({ panel, plugin, onClose }: Props) {
+export function HelpWizard({ panel, plugin, onClose }: Props) {
   const styles = useStyles2(getStyles);
   const service = useMemo(() => new SupportSnapshotService(panel), [panel]);
 
@@ -65,25 +66,33 @@ export function SupportSnapshot({ panel, plugin, onClose }: Props) {
   }
 
   const tabs = [
-    { label: 'Support', value: SnapshotTab.Support },
+    { label: 'Snapshot', value: SnapshotTab.Support },
     { label: 'Data', value: SnapshotTab.Data },
   ];
 
   return (
     <Drawer
-      title={`Support snapshot`}
+      title={`Get help with this panel`}
       width="90%"
       onClose={onClose}
       expandable
       scrollableContent
       subtitle={
         <Stack direction="column" gap={1}>
-          <span>
+          <Stack direction="row" gap={1}>
             <FeatureBadge featureState={FeatureState.beta} />
-          </span>
+            <a
+              href="https://grafana.com/docs/grafana/latest/troubleshooting/"
+              target="blank"
+              className="external-link"
+              rel="noopener noreferrer"
+            >
+              Troubleshooting docs <Icon name="external-link-alt" />
+            </a>
+          </Stack>
           <span className="muted">
-            A support snapshot contains the query response data and raw panel settings. Include this snapshot in support
-            requests to help identify issues faster
+            To request troubleshooting help, send a snapshot of this panel to Grafana Labs Technical Support. The
+            snapshot contains query response data and panel settings.
           </span>
         </Stack>
       }

public/app/features/dashboard/components/Inspector/PanelInspector.tsx

@@ -10,8 +10,8 @@ import { getPanelStateForModel } from 'app/features/panel/state/selectors';
 import { StoreState } from 'app/types';
 
 import { GetDataOptions } from '../../../query/state/PanelQueryRunner';
+import { HelpWizard } from '../HelpWizard/HelpWizard';
 import { usePanelLatestData } from '../PanelEditor/usePanelLatestData';
-import { SupportSnapshot } from '../SupportSnapshot/SupportSnapshot';
 
 import { InspectContent } from './InspectContent';
 import { useDatasourceMetadata, useInspectTabs } from './hooks';
@@ -50,8 +50,8 @@ const PanelInspectorUnconnected = ({ panel, dashboard, plugin }: Props) => {
     return null;
   }
 
-  if (defaultTab === InspectTab.Support) {
-    return <SupportSnapshot panel={panel} plugin={plugin} onClose={onClose} />;
+  if (defaultTab === InspectTab.Help) {
+    return <HelpWizard panel={panel} plugin={plugin} onClose={onClose} />;
   }
 
   return (

public/app/features/dashboard/utils/getPanelMenu.ts

@@ -1,7 +1,7 @@
 import { t } from '@lingui/macro';
 
 import { PanelMenuItem } from '@grafana/data';
-import { AngularComponent, getDataSourceSrv, locationService } from '@grafana/runtime';
+import { AngularComponent, getDataSourceSrv, locationService, reportInteraction } from '@grafana/runtime';
 import { PanelCtrl } from 'app/angular/panel/panel_ctrl';
 import config from 'app/core/config';
 import { contextSrv } from 'app/core/services/context_srv';
@@ -63,6 +63,10 @@ export function getPanelMenu(
       inspect: panel.id,
       inspectTab: tab,
     });
+
+    reportInteraction('grafana_panel_menu_inspect', {
+      tab: tab ?? InspectTab.Data,
+    });
   };
 
   const onMore = (event: React.MouseEvent<any>) => {
@@ -172,14 +176,6 @@ export function getPanelMenu(
     onClick: (e: React.MouseEvent<any>) => onInspectPanel(InspectTab.JSON),
   });
 
-  // Only show for editors
-  if (panel.plugin && dashboard.meta.canEdit && !panel.plugin.meta.skipDataQuery) {
-    inspectMenu.push({
-      text: 'Support snapshot',
-      onClick: (e: React.MouseEvent) => onInspectPanel(InspectTab.Support),
-    });
-  }
-
   const inspectTextTranslation = t({
     id: 'panel.header-menu.inspect',
     message: `Inspect`,
@@ -195,8 +191,9 @@ export function getPanelMenu(
   });
 
   const subMenu: PanelMenuItem[] = [];
+  const canEdit = dashboard.canEditPanel(panel);
 
-  if (dashboard.canEditPanel(panel) && !(panel.isViewing || panel.isEditing)) {
+  if (canEdit && !(panel.isViewing || panel.isEditing)) {
     subMenu.push({
       text: 'Duplicate',
       onClick: onDuplicatePanel,
@@ -252,7 +249,19 @@ export function getPanelMenu(
     });
   }
 
-  if (!panel.isEditing && subMenu.length) {
+  // When editing hide most actions
+  if (panel.isEditing) {
+    subMenu.length = 0;
+  }
+
+  if (canEdit && panel.plugin && !panel.plugin.meta.skipDataQuery) {
+    subMenu.push({
+      text: 'Get help',
+      onClick: (e: React.MouseEvent) => onInspectPanel(InspectTab.Help),
+    });
+  }
+
+  if (subMenu.length) {
     const moreTextTranslation = t({
       id: 'panel.header-menu.more',
       message: `More...`,

public/app/features/inspector/InspectJSONTab.tsx

@@ -10,7 +10,7 @@ import { Button, CodeEditor, Field, Select } from '@grafana/ui';
 import { appEvents } from 'app/core/core';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 
-import { getPanelDataFrames } from '../dashboard/components/SupportSnapshot/utils';
+import { getPanelDataFrames } from '../dashboard/components/HelpWizard/utils';
 import { getPanelInspectorStyles } from '../inspector/styles';
 
 import { InspectTab } from './types';
@@ -134,9 +134,9 @@ export class InspectJSONTab extends PureComponent<Props, State> {
     }
   };
 
-  onShowSupportWizard = () => {
+  onShowHelpWizard = () => {
     const queryParms = locationService.getSearch();
-    queryParms.set('inspectTab', InspectTab.Support.toString());
+    queryParms.set('inspectTab', InspectTab.Help.toString());
     locationService.push('?' + queryParms.toString());
   };
 
@@ -169,7 +169,7 @@ export class InspectJSONTab extends PureComponent<Props, State> {
             </Button>
           )}
           {show === ShowContent.DataFrames && (
-            <Button className={styles.toolbarItem} onClick={this.onShowSupportWizard}>
+            <Button className={styles.toolbarItem} onClick={this.onShowHelpWizard}>
               Support
             </Button>
           )}

public/app/features/inspector/types.ts

@@ -6,5 +6,5 @@ export enum InspectTab {
   JSON = 'json',
   Query = 'query',
   Actions = 'actions', // ALPHA!
-  Support = 'support', // get info required for support+debugging
+  Help = 'help', // get info required for support+debugging
 }