Update a few more pages to use navId instead of navModel from store (#55342)

public/app/core/components/ErrorPage/ErrorPage.tsx

@@ -1,92 +1,71 @@
-import React, { PureComponent } from 'react';
-import { connect, MapStateToProps } from 'react-redux';
+import React from 'react';
 
-import { NavModel } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import { Icon } from '@grafana/ui';
-import { getNavModel } from 'app/core/selectors/navModel';
-import { StoreState } from 'app/types';
 
 import { Page } from '../Page/Page';
 
-interface ConnectedProps {
-  navModel: NavModel;
-}
-
-interface OwnProps {}
-
-type Props = ConnectedProps;
-
-export class ErrorPage extends PureComponent<Props> {
-  render() {
-    const { navModel } = this.props;
-    return (
-      <Page navModel={navModel}>
-        <Page.Contents>
-          <div className="page-container page-body">
-            <div className="panel-container error-container">
-              <div className="error-column graph-box">
-                <div className="error-row">
-                  <div className="error-column error-space-between graph-percentage">
-                    <p>100%</p>
-                    <p>80%</p>
-                    <p>60%</p>
-                    <p>40%</p>
-                    <p>20%</p>
-                    <p>0%</p>
-                  </div>
-                  <div className="error-column image-box">
-                    <img src="public/img/graph404.svg" width="100%" alt="graph" />
-                    <div className="error-row error-space-between">
-                      <p className="graph-text">Then</p>
-                      <p className="graph-text">Now</p>
-                    </div>
+export function ErrorPage() {
+  return (
+    <Page navId="not-found">
+      <Page.Contents>
+        <div className="page-container page-body">
+          <div className="panel-container error-container">
+            <div className="error-column graph-box">
+              <div className="error-row">
+                <div className="error-column error-space-between graph-percentage">
+                  <p>100%</p>
+                  <p>80%</p>
+                  <p>60%</p>
+                  <p>40%</p>
+                  <p>20%</p>
+                  <p>0%</p>
+                </div>
+                <div className="error-column image-box">
+                  <img src="public/img/graph404.svg" width="100%" alt="graph" />
+                  <div className="error-row error-space-between">
+                    <p className="graph-text">Then</p>
+                    <p className="graph-text">Now</p>
                   </div>
                 </div>
               </div>
-              <div className="error-column info-box">
-                <div className="error-row current-box">
-                  <p className="current-text">current</p>
-                </div>
-                <div className="error-row" style={{ flex: 1 }}>
-                  <Icon name="minus-circle" className="error-minus" />
-                  <div className="error-column error-space-between error-full-width">
-                    <div className="error-row error-space-between">
-                      <p>Chances you are on the page you are looking for.</p>
-                      <p className="left-margin">0%</p>
-                    </div>
-                    <div>
-                      <h3>Sorry for the inconvenience</h3>
-                      <p>
-                        Please go back to your{' '}
-                        <a href={config.appSubUrl} className="error-link">
-                          home dashboard
-                        </a>{' '}
-                        and try again.
-                      </p>
-                      <p>
-                        If the error persists, seek help on the{' '}
-                        <a href="https://community.grafana.com" target="_blank" rel="noreferrer" className="error-link">
-                          community site
-                        </a>
-                        .
-                      </p>
-                    </div>
+            </div>
+            <div className="error-column info-box">
+              <div className="error-row current-box">
+                <p className="current-text">current</p>
+              </div>
+              <div className="error-row" style={{ flex: 1 }}>
+                <Icon name="minus-circle" className="error-minus" />
+                <div className="error-column error-space-between error-full-width">
+                  <div className="error-row error-space-between">
+                    <p>Chances you are on the page you are looking for.</p>
+                    <p className="left-margin">0%</p>
+                  </div>
+                  <div>
+                    <h3>Sorry for the inconvenience</h3>
+                    <p>
+                      Please go back to your{' '}
+                      <a href={config.appSubUrl} className="error-link">
+                        home dashboard
+                      </a>{' '}
+                      and try again.
+                    </p>
+                    <p>
+                      If the error persists, seek help on the{' '}
+                      <a href="https://community.grafana.com" target="_blank" rel="noreferrer" className="error-link">
+                        community site
+                      </a>
+                      .
+                    </p>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </Page.Contents>
-      </Page>
-    );
-  }
+        </div>
+      </Page.Contents>
+    </Page>
+  );
 }
 
-const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (state) => {
-  return {
-    navModel: getNavModel(state.navIndex, 'not-found'),
-  };
-};
-
-export default connect(mapStateToProps)(ErrorPage);
+export default ErrorPage;

public/app/features/admin/AdminSettings.tsx

@@ -1,27 +1,19 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { useAsync } from 'react-use';
 
-import { NavModel } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
 import { Page } from 'app/core/components/Page/Page';
-import { getNavModel } from 'app/core/selectors/navModel';
-import { StoreState } from 'app/types';
 
 type Settings = { [key: string]: { [key: string]: string } };
 
-interface Props {
-  navModel: NavModel;
-}
-
-function AdminSettings({ navModel }: Props) {
+function AdminSettings() {
   const { loading, value: settings } = useAsync(
     () => getBackendSrv().get('/api/admin/settings') as Promise<Settings>,
     []
   );
 
   return (
-    <Page navModel={navModel}>
+    <Page navId="server-settings">
       <Page.Contents isLoading={loading}>
         <div className="grafana-info-box span8" style={{ margin: '20px 0 25px 0' }}>
           These system settings are defined in grafana.ini or custom.ini (or overridden in ENV variables). To change
@@ -53,8 +45,4 @@ function AdminSettings({ navModel }: Props) {
   );
 }
 
-const mapStateToProps = (state: StoreState) => ({
-  navModel: getNavModel(state.navIndex, 'server-settings'),
-});
-
-export default connect(mapStateToProps)(AdminSettings);
+export default AdminSettings;

public/app/features/alerting/EditNotificationChannelPage.tsx

@@ -1,13 +1,11 @@
 import React, { PureComponent } from 'react';
 import { MapDispatchToProps, MapStateToProps } from 'react-redux';
 
-import { NavModel } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import { Form, Spinner } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { connectWithCleanUp } from 'app/core/components/connectWithCleanUp';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
-import { getNavModel } from 'app/core/selectors/navModel';
 import { NotificationChannelType, NotificationChannelDTO, StoreState } from 'app/types';
 
 import { NotificationChannelForm } from './components/NotificationChannelForm';
@@ -18,7 +16,6 @@ import { mapChannelsToSelectableValue, transformSubmitData, transformTestData }
 interface OwnProps extends GrafanaRouteComponentProps<{ id: string }> {}
 
 interface ConnectedProps {
-  navModel: NavModel;
   notificationChannel: any;
   notificationChannelTypes: NotificationChannelType[];
 }
@@ -70,10 +67,10 @@ export class EditNotificationChannelPage extends PureComponent<Props> {
   };
 
   render() {
-    const { navModel, notificationChannel, notificationChannelTypes } = this.props;
+    const { notificationChannel, notificationChannelTypes } = this.props;
 
     return (
-      <Page navModel={navModel}>
+      <Page navId="channels">
         <Page.Contents>
           <h2 className="page-sub-heading">Edit notification channel</h2>
           {notificationChannel && notificationChannel.id > 0 ? (
@@ -119,7 +116,6 @@ export class EditNotificationChannelPage extends PureComponent<Props> {
 
 const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (state) => {
   return {
-    navModel: getNavModel(state.navIndex, 'channels'),
     notificationChannel: state.notificationChannel.notificationChannel,
     notificationChannelTypes: state.notificationChannel.notificationChannelTypes,
   };