Navigation: use navId and pageNav on Alerting - Contact Points page (#54451)

pkg/api/index.go

@@ -610,7 +610,7 @@ func (hs *HTTPServer) buildAlertNavLinks(c *models.ReqContext) []*dtos.NavLink {
 	if hasAccess(ac.ReqOrgAdminOrEditor, ac.EvalAny(ac.EvalPermission(ac.ActionAlertingNotificationsRead), ac.EvalPermission(ac.ActionAlertingNotificationsExternalRead))) {
 		alertChildNavs = append(alertChildNavs, &dtos.NavLink{
 			Text: "Contact points", Id: "receivers", Url: hs.Cfg.AppSubURL + "/alerting/notifications",
-			Icon: "comment-alt-share",
+			Icon: "comment-alt-share", SubTitle: "Manage the settings of your contact points",
 		})
 		alertChildNavs = append(alertChildNavs, &dtos.NavLink{Text: "Notification policies", Id: "am-routes", Url: hs.Cfg.AppSubURL + "/alerting/routes", Icon: "sitemap"})
 	}

public/app/features/alerting/routes.tsx

@@ -172,7 +172,7 @@ const unifiedRoutes: RouteDescriptor[] = [
     ),
   },
   {
-    path: '/alerting/notifications/templates/new',
+    path: '/alerting/notifications/:type/new',
     roles: evaluateAccess(
       [AccessControlAction.AlertingNotificationsWrite, AccessControlAction.AlertingNotificationsExternalWrite],
       ['Editor', 'Admin']
@@ -182,7 +182,7 @@ const unifiedRoutes: RouteDescriptor[] = [
     ),
   },
   {
-    path: '/alerting/notifications/templates/:id/edit',
+    path: '/alerting/notifications/:type/:id/edit',
     roles: evaluateAccess(
       [AccessControlAction.AlertingNotificationsWrite, AccessControlAction.AlertingNotificationsExternalWrite],
       ['Editor', 'Admin']
@@ -192,27 +192,7 @@ const unifiedRoutes: RouteDescriptor[] = [
     ),
   },
   {
-    path: '/alerting/notifications/receivers/new',
+    path: '/alerting/notifications/:type',
-    roles: evaluateAccess(
-      [AccessControlAction.AlertingNotificationsWrite, AccessControlAction.AlertingNotificationsExternalWrite],
-      ['Editor', 'Admin']
-    ),
-    component: SafeDynamicImport(
-      () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/unified/Receivers')
-    ),
-  },
-  {
-    path: '/alerting/notifications/receivers/:id/edit',
-    roles: evaluateAccess(
-      [AccessControlAction.AlertingNotificationsWrite, AccessControlAction.AlertingNotificationsExternalWrite],
-      ['Editor', 'Admin']
-    ),
-    component: SafeDynamicImport(
-      () => import(/* webpackChunkName: "NotificationsListPage" */ 'app/features/alerting/unified/Receivers')
-    ),
-  },
-  {
-    path: '/alerting/notifications/global-config',
     roles: evaluateAccess(
       [AccessControlAction.AlertingNotificationsWrite, AccessControlAction.AlertingNotificationsExternalWrite],
       ['Editor', 'Admin']

public/app/features/alerting/unified/Receivers.tsx

@@ -1,7 +1,8 @@
 import React, { FC, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
-import { Redirect, Route, RouteChildrenProps, Switch, useLocation } from 'react-router-dom';
+import { Redirect, Route, RouteChildrenProps, Switch, useLocation, useParams } from 'react-router-dom';
 
+import { NavModelItem } from '@grafana/data';
 import { Alert, LoadingPlaceholder, withErrorBoundary } from '@grafana/ui';
 
 import { AlertManagerPicker } from './components/AlertManagerPicker';
@@ -25,6 +26,9 @@ const Receivers: FC = () => {
   const [alertManagerSourceName, setAlertManagerSourceName] = useAlertManagerSourceName(alertManagers);
   const dispatch = useDispatch();
 
+  type PageType = 'receivers' | 'templates' | 'global-config';
+
+  const { id, type } = useParams<{ id?: string; type?: PageType }>();
   const location = useLocation();
   const isRoot = location.pathname.endsWith('/alerting/notifications');
 
@@ -56,9 +60,30 @@ const Receivers: FC = () => {
 
   const disableAmSelect = !isRoot;
 
+  let pageNav: NavModelItem | undefined;
+  if (type === 'receivers' || type === 'templates') {
+    const objectText = type === 'receivers' ? 'contact point' : 'message template';
+    if (id) {
+      pageNav = {
+        text: id,
+        subTitle: `Edit the settings for a specific ${objectText}`,
+      };
+    } else {
+      pageNav = {
+        text: `New ${objectText}`,
+        subTitle: `Create a new ${objectText} for your notifications`,
+      };
+    }
+  } else if (type === 'global-config') {
+    pageNav = {
+      text: 'Global config',
+      subTitle: 'Manage your global configuration',
+    };
+  }
+
   if (!alertManagerSourceName) {
     return isRoot ? (
-      <AlertingPageWrapper pageId="receivers">
+      <AlertingPageWrapper pageId="receivers" pageNav={pageNav}>
         <NoAlertManagerWarning availableAlertManagers={alertManagers} />
       </AlertingPageWrapper>
     ) : (
@@ -67,7 +92,7 @@ const Receivers: FC = () => {
   }
 
   return (
-    <AlertingPageWrapper pageId="receivers">
+    <AlertingPageWrapper pageId="receivers" pageNav={pageNav}>
       <AlertManagerPicker
         current={alertManagerSourceName}
         disabled={disableAmSelect}

public/app/features/alerting/unified/components/AlertingPageWrapper.tsx

@@ -1,23 +1,17 @@
 import React, { FC } from 'react';
-import { useSelector } from 'react-redux';
 
+import { NavModelItem } from '@grafana/data';
 import { Page } from 'app/core/components/Page/Page';
-import { getNavModel } from 'app/core/selectors/navModel';
-import { StoreState } from 'app/types/store';
 
 interface Props {
   pageId: string;
   isLoading?: boolean;
+  pageNav?: NavModelItem;
 }
 
-export const AlertingPageWrapper: FC<Props> = ({ children, pageId, isLoading }) => {
+export const AlertingPageWrapper: FC<Props> = ({ children, pageId, pageNav, isLoading }) => {
-  const navModel = getNavModel(
-    useSelector((state: StoreState) => state.navIndex),
-    pageId
-  );
-
   return (
-    <Page navModel={navModel}>
+    <Page pageNav={pageNav} navId={pageId}>
       <Page.Contents isLoading={isLoading}>{children}</Page.Contents>
     </Page>
   );

public/app/features/alerting/unified/components/receivers/GlobalConfigForm.tsx

@@ -1,10 +1,8 @@
-import { css } from '@emotion/css';
 import React, { FC } from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 import { useDispatch } from 'react-redux';
 
-import { GrafanaTheme2 } from '@grafana/data';
+import { Alert, Button, HorizontalGroup, LinkButton } from '@grafana/ui';
-import { Alert, Button, HorizontalGroup, LinkButton, useStyles2 } from '@grafana/ui';
 import { useCleanup } from 'app/core/hooks/useCleanup';
 import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
 
@@ -36,7 +34,6 @@ export const GlobalConfigForm: FC<Props> = ({ config, alertManagerSourceName })
 
   const { loading, error } = useUnifiedAlertingSelector((state) => state.saveAMConfig);
   const readOnly = isVanillaPrometheusAlertManagerDataSource(alertManagerSourceName);
-  const styles = useStyles2(getStyles);
 
   const formAPI = useForm<FormValues>({
     // making a copy here beacuse react-hook-form will mutate these, and break if the object is frozen. for real.
@@ -74,7 +71,6 @@ export const GlobalConfigForm: FC<Props> = ({ config, alertManagerSourceName })
   return (
     <FormProvider {...formAPI}>
       <form onSubmit={handleSubmit(onSubmitCallback)}>
-        <h4 className={styles.heading}>Global config</h4>
         {error && (
           <Alert severity="error" title="Error saving receiver">
             {error.message || String(error)}
@@ -116,9 +112,3 @@ export const GlobalConfigForm: FC<Props> = ({ config, alertManagerSourceName })
     </FormProvider>
   );
 };
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  heading: css`
-    margin: ${theme.spacing(4, 0)};
-  `,
-});