ShareModal: shareView query param fix (#92020)

public/app/features/dashboard-scene/scene/DashboardScene.tsx

@@ -125,6 +125,8 @@ export interface DashboardSceneState extends SceneObjectState {
   isEmpty?: boolean;
   /** Kiosk mode */
   kioskMode?: KioskMode;
+  /** Share view */
+  shareView?: string;
 }
 
 export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
@@ -312,6 +314,7 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
         editview: null,
         inspect: null,
         inspectTab: null,
+        shareView: null,
       })
     );
 
@@ -412,7 +415,7 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
         uid: this.state.uid,
         slug: meta.slug,
         currentQueryParams: location.search,
-        updateQuery: { viewPanel: null, inspect: null, editview: null, editPanel: null, tab: null },
+        updateQuery: { viewPanel: null, inspect: null, editview: null, editPanel: null, tab: null, shareView: null },
         isHomeDashboard: !meta.url && !meta.slug && !meta.isNew,
       }),
     };

public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts

@@ -16,6 +16,7 @@ import { KioskMode } from 'app/types';
 import { PanelInspectDrawer } from '../inspect/PanelInspectDrawer';
 import { buildPanelEditScene } from '../panel-edit/PanelEditor';
 import { createDashboardEditViewFor } from '../settings/utils';
+import { ShareModal } from '../sharing/ShareModal';
 import { findVizPanelByKey, getDashboardSceneFor, getLibraryPanel, isPanelClone } from '../utils/utils';
 
 import { DashboardScene, DashboardSceneState } from './DashboardScene';
@@ -29,7 +30,7 @@ export class DashboardSceneUrlSync implements SceneObjectUrlSyncHandler {
   constructor(private _scene: DashboardScene) {}
 
   getKeys(): string[] {
-    return ['inspect', 'viewPanel', 'editPanel', 'editview', 'autofitpanels', 'kiosk'];
+    return ['inspect', 'viewPanel', 'editPanel', 'editview', 'autofitpanels', 'kiosk', 'shareView'];
   }
 
   getUrlState(): SceneObjectUrlValues {
@@ -41,11 +42,12 @@ export class DashboardSceneUrlSync implements SceneObjectUrlSyncHandler {
       editview: state.editview?.getUrlKey(),
       editPanel: state.editPanel?.getUrlKey() || undefined,
       kiosk: state.kioskMode === KioskMode.Full ? '' : state.kioskMode === KioskMode.TV ? 'tv' : undefined,
+      shareView: state.shareView,
     };
   }
 
   updateFromUrl(values: SceneObjectUrlValues): void {
-    const { inspectPanelKey, viewPanelScene, isEditing, editPanel } = this._scene.state;
+    const { inspectPanelKey, viewPanelScene, isEditing, editPanel, shareView } = this._scene.state;
     const update: Partial<DashboardSceneState> = {};
 
     if (typeof values.editview === 'string' && this._scene.canEditDashboard()) {
@@ -153,6 +155,16 @@ export class DashboardSceneUrlSync implements SceneObjectUrlSyncHandler {
       update.editPanel = undefined;
     }
 
+    if (typeof values.shareView === 'string') {
+      update.shareView = values.shareView;
+      update.overlay = new ShareModal({
+        activeTab: values.shareView,
+      });
+    } else if (shareView && values.shareView === null) {
+      update.overlay = undefined;
+      update.shareView = undefined;
+    }
+
     if (this._scene.state.body instanceof SceneGridLayout) {
       const UNSAFE_fitPanels = typeof values.autofitpanels === 'string';
 

public/app/features/dashboard-scene/scene/NavToolbarActions.tsx

@@ -27,7 +27,6 @@ import { playlistSrv } from 'app/features/playlist/PlaylistSrv';
 import { PanelEditor, buildPanelEditScene } from '../panel-edit/PanelEditor';
 import ExportButton from '../sharing/ExportButton/ExportButton';
 import ShareButton from '../sharing/ShareButton/ShareButton';
-import { ShareModal } from '../sharing/ShareModal';
 import { DashboardInteractions } from '../utils/interactions';
 import { DynamicDashNavButtonModel, dynamicDashNavActions } from '../utils/registerDynamicDashNavAction';
 
@@ -314,7 +313,7 @@ export function ToolbarActions({ dashboard }: Props) {
         fill="outline"
         onClick={() => {
           DashboardInteractions.toolbarShareClick();
-          dashboard.showModal(new ShareModal({}));
+          locationService.partial({ shareView: 'link' });
         }}
         data-testid={selectors.components.NavToolbar.shareDashboard}
       >

public/app/features/dashboard-scene/sharing/ShareModal.tsx

@@ -1,7 +1,7 @@
 import { ComponentProps } from 'react';
 
-import { config } from '@grafana/runtime';
-import { SceneComponentProps, SceneObjectBase, SceneObjectState, VizPanel, SceneObjectRef } from '@grafana/scenes';
+import { config, locationService } from '@grafana/runtime';
+import { SceneComponentProps, SceneObjectBase, SceneObjectRef, SceneObjectState, VizPanel } from '@grafana/scenes';
 import { Modal, ModalTabsHeader, TabContent } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
 import { t } from 'app/core/internationalization';
@@ -45,10 +45,10 @@ export class ShareModal extends SceneObjectBase<ShareModalState> implements Moda
       ...state,
     });
 
-    this.addActivationHandler(() => this.buildTabs());
+    this.addActivationHandler(() => this.buildTabs(state.activeTab));
   }
 
-  private buildTabs() {
+  private buildTabs(activeTab?: string) {
     const { panelRef } = this.state;
     const modalRef = this.getRef();
 
@@ -82,12 +82,13 @@ export class ShareModal extends SceneObjectBase<ShareModalState> implements Moda
       }
     }
 
-    this.setState({ tabs });
+    const at = tabs.find((t) => t.tabId === activeTab);
+
+    this.setState({ activeTab: at?.tabId ?? tabs[0].tabId, tabs });
   }
 
   onDismiss = () => {
-    const dashboard = getDashboardSceneFor(this);
-    dashboard.closeModal();
+    locationService.partial({ shareView: null });
   };
 
   onChangeTab: ComponentProps<typeof ModalTabsHeader>['onChangeTab'] = (tab) => {

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -482,7 +482,9 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
           />
 
           {inspectPanel && <PanelInspector dashboard={dashboard} panel={inspectPanel} />}
-          {queryParams.shareView && <ShareModal dashboard={dashboard} onDismiss={this.onCloseShareModal} />}
+          {queryParams.shareView && (
+            <ShareModal dashboard={dashboard} onDismiss={this.onCloseShareModal} activeTab={queryParams.shareView} />
+          )}
         </Page>
         {editPanel && (
           <PanelEditor