TopNav: New page layouts (#51510)

* First stab at new page layouts behind feature toggle

* Simplifying PageHeader

* Progress on a new model that can more easily support new and old page layouts

* Progress

* rename folder

* Progress

* Minor change

* fixes

* Fixing tests

* Make breadcrumbs work

* Add tests for old Page component

* Adding tests for new Page component and behavior

* fixing page header test

* Fixed test

* AppChrome outside route

* Renaming folder

* Minor fix

* Updated

* Fixing StoragePage

* Fix for banners

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

public/app/features/users/UsersListPage.test.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { mockToolkitActionCreator } from 'test/core/redux/mocks';
 
-import { NavModel } from '@grafana/data';
 import { configureStore } from 'app/store/configureStore';
 import { Invitee, OrgUser } from 'app/types';
 
@@ -25,14 +24,6 @@ jest.mock('app/core/core', () => ({
 const setup = (propOverrides?: object) => {
   const store = configureStore();
   const props: Props = {
-    navModel: {
-      main: {
-        text: 'Configuration',
-      },
-      node: {
-        text: 'Users',
-      },
-    } as NavModel,
     users: [] as OrgUser[],
     invitees: [] as Invitee[],
     searchQuery: '',

public/app/features/users/UsersListPage.tsx

@@ -3,9 +3,8 @@ import { connect, ConnectedProps } from 'react-redux';
 
 import { renderMarkdown } from '@grafana/data';
 import { HorizontalGroup, Pagination, VerticalGroup } from '@grafana/ui';
-import Page from 'app/core/components/Page/Page';
+import { Page } from 'app/core/components/Page/Page';
 import { contextSrv } from 'app/core/core';
-import { getNavModel } from 'app/core/selectors/navModel';
 import { OrgUser, OrgRole, StoreState } from 'app/types';
 
 import InviteesTable from '../invites/InviteesTable';
@@ -21,7 +20,6 @@ import { getUsers, getUsersSearchQuery, getUsersSearchPage } from './state/selec
 function mapStateToProps(state: StoreState) {
   const searchQuery = getUsersSearchQuery(state.users);
   return {
-    navModel: getNavModel(state.navIndex, 'users'),
     users: getUsers(state.users),
     searchQuery: getUsersSearchQuery(state.users),
     searchPage: getUsersSearchPage(state.users),
@@ -125,11 +123,11 @@ export class UsersListPage extends PureComponent<Props, State> {
   }
 
   render() {
-    const { navModel, hasFetched } = this.props;
+    const { hasFetched } = this.props;
     const externalUserMngInfoHtml = this.externalUserMngInfoHtml;
 
     return (
-      <Page navModel={navModel}>
+      <Page navId="users">
         <Page.Contents isLoading={!hasFetched}>
           <>
             <UsersActionBar onShowInvites={this.onShowInvites} showInvites={this.state.showInvites} />