Alerting: Fix dashboard nav drawers disappearing (#82890)

Add DashNav modal renderer to handle modals rendered from Toolbar buttons

public/app/features/alerting/unified/integration/AlertRulesToolbarButton.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { useToggle } from 'react-use';
 
 import { ToolbarButton } from '@grafana/ui';
 
 import { t } from '../../../../core/internationalization';
+import { useDashNavModalController } from '../../../dashboard/components/DashNav/DashNav';
 import { alertRuleApi } from '../api/alertRuleApi';
 import { GRAFANA_RULES_SOURCE_NAME } from '../utils/datasource';
 
@@ -14,7 +14,7 @@ interface AlertRulesToolbarButtonProps {
 }
 
 export default function AlertRulesToolbarButton({ dashboardUid }: AlertRulesToolbarButtonProps) {
-  const [showDrawer, toggleShowDrawer] = useToggle(false);
+  const { showModal, hideModal } = useDashNavModalController();
 
   const { data: namespaces = [] } = alertRuleApi.endpoints.prometheusRuleNamespaces.useQuery({
     ruleSourceName: GRAFANA_RULES_SOURCE_NAME,
@@ -26,14 +26,11 @@ export default function AlertRulesToolbarButton({ dashboardUid }: AlertRulesTool
   }
 
   return (
-    <>
-      <ToolbarButton
-        tooltip={t('dashboard.toolbar.alert-rules', 'Alert rules')}
-        icon="bell"
-        onClick={toggleShowDrawer}
-        key="button-alerting"
-      />
-      {showDrawer && <AlertRulesDrawer dashboardUid={dashboardUid} onClose={toggleShowDrawer} />}
-    </>
+    <ToolbarButton
+      tooltip={t('dashboard.toolbar.alert-rules', 'Alert rules')}
+      icon="bell"
+      onClick={() => showModal(<AlertRulesDrawer dashboardUid={dashboardUid} onClose={hideModal} />)}
+      key="button-alerting"
+    />
   );
 }

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

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import React, { ReactNode } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { useLocation } from 'react-router-dom';
+import { createStateContext } from 'react-use';
 
 import { textUtil } from '@grafana/data';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
@@ -48,6 +49,25 @@ const mapDispatchToProps = {
   updateTimeZoneForSession,
 };
 
+const [useDashNavModelContext, DashNavModalContextProvider] = createStateContext<{ component: React.ReactNode }>({
+  component: null,
+});
+
+export function useDashNavModalController() {
+  const [_, setContextState] = useDashNavModelContext();
+
+  return {
+    showModal: (component: React.ReactNode) => setContextState({ component }),
+    hideModal: () => setContextState({ component: null }),
+  };
+}
+
+function DashNavModalRoot() {
+  const [contextState] = useDashNavModelContext();
+
+  return <>{contextState.component}</>;
+}
+
 const connector = connect(null, mapDispatchToProps);
 
 const selectors = e2eSelectors.pages.Dashboard.DashNav;
@@ -341,11 +361,12 @@ export const DashNav = React.memo<Props>((props) => {
   return (
     <AppChromeUpdate
       actions={
-        <>
+        <DashNavModalContextProvider>
           {renderLeftActions()}
           <NavToolbarSeparator leftActionsSeparator />
           <ToolbarButtonRow alignment="right">{renderRightActions()}</ToolbarButtonRow>
-        </>
+          <DashNavModalRoot />
+        </DashNavModalContextProvider>
       }
     />
   );