diff --git a/public/app/features/dashboard-scene/scene/DashboardScene.tsx b/public/app/features/dashboard-scene/scene/DashboardScene.tsx index 9de61780452..8a63083655a 100644 --- a/public/app/features/dashboard-scene/scene/DashboardScene.tsx +++ b/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 { @@ -312,6 +314,7 @@ export class DashboardScene extends SceneObjectBase { editview: null, inspect: null, inspectTab: null, + shareView: null, }) ); @@ -412,7 +415,7 @@ export class DashboardScene extends SceneObjectBase { 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, }), }; diff --git a/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts b/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts index fb891974cfe..0f0e291daf9 100644 --- a/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts +++ b/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 = {}; 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'; diff --git a/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx b/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx index 0d44671f1e6..4140343a9cc 100644 --- a/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx +++ b/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} > diff --git a/public/app/features/dashboard-scene/sharing/ShareModal.tsx b/public/app/features/dashboard-scene/sharing/ShareModal.tsx index 916eddc9dde..8a325d5d0b9 100644 --- a/public/app/features/dashboard-scene/sharing/ShareModal.tsx +++ b/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 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 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['onChangeTab'] = (tab) => { diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index 310bebf2b4b..e4f56d47b29 100644 --- a/public/app/features/dashboard/containers/DashboardPage.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.tsx @@ -482,7 +482,9 @@ export class UnthemedDashboardPage extends PureComponent { /> {inspectPanel && } - {queryParams.shareView && } + {queryParams.shareView && ( + + )} {editPanel && (