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

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

@@ -1,31 +1,13 @@
-import React, { useContext, useEffect } from 'react';
+import React from 'react';
 
 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 { DashboardModel } from 'app/features/dashboard/state';
 import { DashboardInteractions } from 'app/features/dashboard-scene/utils/interactions';
 
-import { ShareModal } from '../ShareModal';
-
 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 (
     <Button
       data-testid={e2eSelectors.pages.Dashboard.DashNav.shareButton}
@@ -33,10 +15,7 @@ export const ShareButton = ({ dashboard }: { dashboard: DashboardModel }) => {
       size="sm"
       onClick={() => {
         DashboardInteractions.toolbarShareClick();
-        showModal(ShareModal, {
+        locationService.partial({ shareView: 'link' });
-          dashboard,
-          onDismiss: hideModal,
-        });
       }}
     >
       <Trans i18nKey="dashboard.toolbar.share-button">Share</Trans>

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';
@@ -287,6 +288,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;
@@ -354,6 +359,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;
 };