DebugSnapshot: Change to use exisiting localstorage prop and open in new tab (#54877)

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>

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

@@ -14,7 +14,7 @@ import {
   FeatureState,
   formattedValueToString,
 } from '@grafana/data';
-import { getTemplateSrv, locationService } from '@grafana/runtime';
+import { config, getTemplateSrv } from '@grafana/runtime';
 import {
   Drawer,
   Tab,
@@ -34,7 +34,7 @@ import appEvents from 'app/core/app_events';
 import { contextSrv } from 'app/core/core';
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { PanelModel } from 'app/features/dashboard/state';
-import { pendingNewDashboard } from 'app/features/dashboard/state/initDashboard';
+import { setDashboardToFetchFromLocalStorage } from 'app/features/dashboard/state/initDashboard';
 import { InspectTab } from 'app/features/inspector/types';
 
 import { Randomize } from './randomizer';
@@ -72,9 +72,10 @@ export const DebugWizard = ({ panel, plugin, onClose }: Props) => {
   const [rand, setRand] = useState<Randomize>({});
   const [_, copyToClipboard] = useCopyToClipboard();
   const info = useAsync(async () => {
-    const dash = await getDebugDashboard(panel, rand, getTimeSrv().timeRange());
-    setDashboardText(JSON.stringify(dash, null, 2));
-  }, [rand, panel, plugin, setDashboardText]);
+    const dashboard = await getDebugDashboard(panel, rand, getTimeSrv().timeRange());
+    setDashboardToFetchFromLocalStorage({ meta: {}, dashboard });
+    setDashboardText(JSON.stringify(dashboard, null, 2));
+  }, [rand, panel, plugin, setDashboardText, currentTab]);
 
   const snapshotSize = useMemo(() => {
     return formattedValueToString(getValueFormat('bytes')(snapshotText?.length ?? 0));
@@ -95,9 +96,8 @@ export const DebugWizard = ({ panel, plugin, onClose }: Props) => {
   };
 
   const doImportDashboard = () => {
-    pendingNewDashboard.dashboard = JSON.parse(snapshotText);
-    locationService.push('/dashboard/new'); // will load the above body
-    appEvents.emit(AppEvents.alertSuccess, ['Panel snapshot dashboard']);
+    setDashboardToFetchFromLocalStorage({ meta: {}, dashboard: JSON.parse(snapshotText) });
+    global.open(config.appUrl + 'dashboard/new', '_blank');
   };
 
   const doDownloadDashboard = () => {
@@ -130,7 +130,7 @@ export const DebugWizard = ({ panel, plugin, onClose }: Props) => {
   return (
     <Drawer
       title={`Debug: ${panelTitle}`}
-      width="50%"
+      width="90%"
       onClose={onClose}
       expandable
       scrollableContent
@@ -196,7 +196,7 @@ export const DebugWizard = ({ panel, plugin, onClose }: Props) => {
           </AutoSizer>
         </div>
       ) : (
-        <div>
+        <>
           {false && (
             <Field
               label="Randomize data"
@@ -237,20 +237,24 @@ export const DebugWizard = ({ panel, plugin, onClose }: Props) => {
                 <Button icon="github" onClick={doCopyMarkdown}>
                   Copy for github
                 </Button>
-              </HorizontalGroup>
-              <div>
-                <br />
                 <Button onClick={doImportDashboard} variant="secondary">
                   Preview
                 </Button>
-                &nbsp;Requires <a href="/plugins/testdata">Testdata DB</a> to be installed
-              </div>
+              </HorizontalGroup>
             </>
           </Field>
 
-          {/* TODO: can we iframe in the preview? */}
-          {false && <iframe src={`/dashboard/new?orgId=${contextSrv.user.orgId}&kiosk`} width="100%" height={300} />}
-        </div>
+          <AutoSizer disableWidth>
+            {({ height }) => (
+              <iframe
+                src={`/dashboard/new?orgId=${contextSrv.user.orgId}&kiosk`}
+                width="100%"
+                height={height - 100}
+                frameBorder="0"
+              />
+            )}
+          </AutoSizer>
+        </>
       )}
     </Drawer>
   );

public/app/features/dashboard/state/initDashboard.ts

@@ -254,15 +254,6 @@ export function initDashboard(args: InitDashboardArgs): ThunkResult<void> {
   };
 }
 
-/**
- * Global access to support importing a dashboard from elsewhere in the application.
- * Alternativly this could be in redux, but given the size (potentially LARGE) and how
- * infrequently it will be used, a simple global object seems reasonable.
- */
-export const pendingNewDashboard = {
-  dashboard: undefined,
-};
-
 export function getNewDashboardModelData(urlFolderId?: string, panelType?: string): any {
   const data = {
     meta: {
@@ -272,7 +263,7 @@ export function getNewDashboardModelData(urlFolderId?: string, panelType?: strin
       isNew: true,
       folderId: 0,
     },
-    dashboard: pendingNewDashboard.dashboard ?? {
+    dashboard: {
       title: 'New dashboard',
       panels: [
         {
@@ -283,7 +274,6 @@ export function getNewDashboardModelData(urlFolderId?: string, panelType?: strin
       ],
     },
   };
-  pendingNewDashboard.dashboard = undefined;
 
   if (urlFolderId) {
     data.meta.folderId = parseInt(urlFolderId, 10);