Navigation: Use new page layout in Server Admin > Orgs pages (#54018)

public/app/features/admin/AdminEditOrgPage.tsx

@@ -1,17 +1,15 @@
 import { css } from '@emotion/css';
 import React, { useState, useEffect } from 'react';
-import { useSelector } from 'react-redux';
 import { useAsyncFn } from 'react-use';
 
-import { UrlQueryValue } from '@grafana/data';
+import { NavModelItem, UrlQueryValue } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
 import { Form, Field, Input, Button, Legend, Alert } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { contextSrv } from 'app/core/core';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
-import { getNavModel } from 'app/core/selectors/navModel';
 import { accessControlQueryParam } from 'app/core/utils/accessControl';
-import { StoreState, OrgUser, AccessControlAction } from 'app/types';
+import { OrgUser, AccessControlAction } from 'app/types';
 
 import UsersTable from '../users/UsersTable';
 
@@ -41,8 +39,6 @@ const removeOrgUser = async (orgUser: OrgUser, orgId: UrlQueryValue) => {
 interface Props extends GrafanaRouteComponentProps<{ id: string }> {}
 
 export default function AdminEditOrgPage({ match }: Props) {
-  const navIndex = useSelector((state: StoreState) => state.navIndex);
-  const navModel = getNavModel(navIndex, 'global-orgs');
   const orgId = parseInt(match.params.id, 10);
   const canWriteOrg = contextSrv.hasPermission(AccessControlAction.OrgsWrite);
   const canReadUsers = contextSrv.hasPermission(AccessControlAction.OrgUsersRead);
@@ -70,8 +66,12 @@ export default function AdminEditOrgPage({ match }: Props) {
     );
   };
 
+  const pageNav: NavModelItem = {
+    text: orgState?.value?.name ?? '',
+  };
+
   return (
-    <Page navModel={navModel}>
+    <Page navId="global-orgs" pageNav={pageNav} subTitle="Manage settings for this specific org.">
       <Page.Contents>
         <>
           <Legend>Edit organization</Legend>

public/app/features/admin/AdminListOrgsPage.tsx

@@ -1,14 +1,11 @@
 import React, { useEffect } from 'react';
-import { useSelector } from 'react-redux';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 
 import { getBackendSrv } from '@grafana/runtime';
 import { LinkButton } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
-import { getNavModel } from 'app/core/selectors/navModel';
 import { contextSrv } from 'app/core/services/context_srv';
 import { AccessControlAction } from 'app/types';
-import { StoreState } from 'app/types/store';
 
 import { AdminOrgsTable } from './AdminOrgsTable';
 
@@ -25,8 +22,6 @@ const getErrorMessage = (error: any) => {
 };
 
 export default function AdminListOrgsPages() {
-  const navIndex = useSelector((state: StoreState) => state.navIndex);
-  const navModel = getNavModel(navIndex, 'global-orgs');
   const [state, fetchOrgs] = useAsyncFn(async () => await getOrgs(), []);
   const canCreateOrg = contextSrv.hasPermission(AccessControlAction.OrgsCreate);
 
@@ -35,7 +30,7 @@ export default function AdminListOrgsPages() {
   }, [fetchOrgs]);
 
   return (
-    <Page navModel={navModel}>
+    <Page navId="global-orgs" subTitle="Manage and create orgs across the whole Grafana server.">
       <Page.Contents>
         <>
           <div className="page-action-bar">