ShareModal: Fixes url sync issue that caused issue with save drawer (#81706)

* ShareModal: Fixes url sync issue that caused issue with save drawer

* Updated fix
This commit is contained in:
Torkel Ödegaard 2024-02-01 15:07:01 +01:00 committed by GitHub
parent 7f6806e220
commit 7c2622a4f1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 11 additions and 26 deletions

View File

@ -1,31 +1,13 @@
import React, { useContext, useEffect } from 'react'; import React from 'react';
import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src'; import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
import { ModalsContext, Button } from '@grafana/ui'; import { locationService } from '@grafana/runtime';
import { useQueryParams } from 'app/core/hooks/useQueryParams'; import { Button } from '@grafana/ui';
import { Trans } from 'app/core/internationalization'; import { Trans } from 'app/core/internationalization';
import { DashboardModel } from 'app/features/dashboard/state'; import { DashboardModel } from 'app/features/dashboard/state';
import { DashboardInteractions } from 'app/features/dashboard-scene/utils/interactions'; import { DashboardInteractions } from 'app/features/dashboard-scene/utils/interactions';
import { ShareModal } from '../ShareModal';
export const ShareButton = ({ dashboard }: { dashboard: DashboardModel }) => { export const ShareButton = ({ dashboard }: { dashboard: DashboardModel }) => {
const [queryParams] = useQueryParams();
const { showModal, hideModal } = useContext(ModalsContext);
useEffect(() => {
if (!!queryParams.shareView) {
showModal(ShareModal, {
dashboard,
onDismiss: hideModal,
activeTab: String(queryParams.shareView),
});
}
return () => {
hideModal();
};
}, [showModal, hideModal, dashboard, queryParams.shareView]);
return ( return (
<Button <Button
data-testid={e2eSelectors.pages.Dashboard.DashNav.shareButton} data-testid={e2eSelectors.pages.Dashboard.DashNav.shareButton}
@ -33,10 +15,7 @@ export const ShareButton = ({ dashboard }: { dashboard: DashboardModel }) => {
size="sm" size="sm"
onClick={() => { onClick={() => {
DashboardInteractions.toolbarShareClick(); DashboardInteractions.toolbarShareClick();
showModal(ShareModal, { locationService.partial({ shareView: 'link' });
dashboard,
onDismiss: hideModal,
});
}} }}
> >
<Trans i18nKey="dashboard.toolbar.share-button">Share</Trans> <Trans i18nKey="dashboard.toolbar.share-button">Share</Trans>

View File

@ -77,7 +77,6 @@ interface Props extends Themeable2 {
dashboard: DashboardModel; dashboard: DashboardModel;
panel?: PanelModel; panel?: PanelModel;
activeTab?: string; activeTab?: string;
onDismiss(): void; onDismiss(): void;
} }

View File

@ -31,6 +31,7 @@ import { DashboardPrompt } from '../components/DashboardPrompt/DashboardPrompt';
import { DashboardSettings } from '../components/DashboardSettings'; import { DashboardSettings } from '../components/DashboardSettings';
import { PanelInspector } from '../components/Inspector/PanelInspector'; import { PanelInspector } from '../components/Inspector/PanelInspector';
import { PanelEditor } from '../components/PanelEditor/PanelEditor'; import { PanelEditor } from '../components/PanelEditor/PanelEditor';
import { ShareModal } from '../components/ShareModal';
import { SubMenu } from '../components/SubMenu/SubMenu'; import { SubMenu } from '../components/SubMenu/SubMenu';
import { DashboardGrid } from '../dashgrid/DashboardGrid'; import { DashboardGrid } from '../dashgrid/DashboardGrid';
import { liveTimer } from '../dashgrid/liveTimer'; import { liveTimer } from '../dashgrid/liveTimer';
@ -287,6 +288,10 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
return inspectPanel; return inspectPanel;
} }
onCloseShareModal = () => {
locationService.partial({ shareView: null });
};
render() { render() {
const { dashboard, initError, queryParams } = this.props; const { dashboard, initError, queryParams } = this.props;
const { editPanel, viewPanel, updateScrollTop, pageNav, sectionNav } = this.state; const { editPanel, viewPanel, updateScrollTop, pageNav, sectionNav } = this.state;
@ -354,6 +359,7 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
/> />
{inspectPanel && <PanelInspector dashboard={dashboard} panel={inspectPanel} />} {inspectPanel && <PanelInspector dashboard={dashboard} panel={inspectPanel} />}
{queryParams.shareView && <ShareModal dashboard={dashboard} onDismiss={this.onCloseShareModal} />}
</Page> </Page>
{editPanel && ( {editPanel && (
<PanelEditor <PanelEditor

View File

@ -19,4 +19,5 @@ export type DashboardPageRouteSearchParams = {
refresh?: string; refresh?: string;
kiosk?: string | true; kiosk?: string | true;
scenes?: boolean; scenes?: boolean;
shareView?: string;
}; };