[v10.3.x] ShareModal: Fixes url sync issue that caused issue with save drawer (#81721)

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

(cherry picked from commit 7c2622a4f1)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

public/app/features/dashboard/components/DashNav/ShareButton.tsx

@@ -1,32 +1,13 @@
-import React, { useContext, useEffect } from 'react';
+import React from 'react';
 
-import { ModalsContext } from '@grafana/ui';
+import { locationService } from '@grafana/runtime';
-import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import { t } from 'app/core/internationalization';
 import { DashboardModel } from 'app/features/dashboard/state';
 import { DashboardInteractions } from 'app/features/dashboard-scene/utils/interactions';
 
-import { ShareModal } from '../ShareModal';
-
 import { DashNavButton } from './DashNavButton';
 
 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 (
     <DashNavButton
       tooltip={t('dashboard.toolbar.share', 'Share dashboard')}
@@ -34,10 +15,7 @@ export const ShareButton = ({ dashboard }: { dashboard: DashboardModel }) => {
       iconSize="lg"
       onClick={() => {
         DashboardInteractions.toolbarShareClick();
-        showModal(ShareModal, {
+        locationService.partial({ shareView: 'link' });
-          dashboard,
-          onDismiss: hideModal,
-        });
       }}
     />
   );

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

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

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

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

public/app/features/dashboard/containers/types.ts

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