TopNav: Dashboard settings (#52682)

* Scenes: Support new top nav

* Page: Make Page component support new and old dashboard page layouts

* Pass scrollbar props

* Fixing flex layout for dashboard

* Progress on dashboard settings working with topnav

* Updated

* Annotations working

* Starting to work fully

* Fix merge issue

* Fixed tests

* Added buttons to annotations editor

* Updating tests

* Move Page component to each page

* fixed general settings page

* Fixed versions

* Fixed annotation item page

* Variables section working

* Fixed tests

* Minor fixes to versions

* Update

* Fixing unit tests

* Adding add variable button

* Restore annotations edit form so it's the same as before

* Fixed semicolon in dashboard permissions

* Fixing unit tests

* Fixing tests

* Minor test update

* Fixing unit test

* Fixing e2e tests

* fix for e2e test

* fix a11y issues

* Changing places Settings -> General

* Trying to fix a11y

* I hope this fixes the e2e test

* Fixing merge issue

* tweak

public/app/features/dashboard/components/DashboardPermissions/AccessControlDashboardPermissions.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
 
 import { Permissions } from 'app/core/components/AccessControl';
+import { Page } from 'app/core/components/PageNew/Page';
 import { contextSrv } from 'app/core/core';
 import { AccessControlAction } from 'app/types';
 
-import { DashboardModel } from '../../state';
+import { SettingsPageProps } from '../DashboardSettings/types';
 
-interface Props {
-  dashboard: DashboardModel;
-}
-
-export const AccessControlDashboardPermissions = ({ dashboard }: Props) => {
+export const AccessControlDashboardPermissions = ({ dashboard, sectionNav }: SettingsPageProps) => {
   const canSetPermissions = contextSrv.hasPermission(AccessControlAction.DashboardsPermissionsWrite);
 
-  return <Permissions resource={'dashboards'} resourceId={dashboard.uid} canSetPermissions={canSetPermissions} />;
+  return (
+    <Page navModel={sectionNav}>
+      <Permissions resource={'dashboards'} resourceId={dashboard.uid} canSetPermissions={canSetPermissions} />
+    </Page>
+  );
 };

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

@@ -3,6 +3,7 @@ import { connect, ConnectedProps } from 'react-redux';
 
 import { Tooltip, Icon, Button } from '@grafana/ui';
 import { SlideDown } from 'app/core/components/Animations/SlideDown';
+import { Page } from 'app/core/components/PageNew/Page';
 import AddPermission from 'app/core/components/PermissionList/AddPermission';
 import PermissionList from 'app/core/components/PermissionList/PermissionList';
 import PermissionsInfo from 'app/core/components/PermissionList/PermissionsInfo';
@@ -10,13 +11,13 @@ import { StoreState } from 'app/types';
 import { DashboardAcl, PermissionLevel, NewDashboardAclItem } from 'app/types/acl';
 
 import { checkFolderPermissions } from '../../../folders/state/actions';
-import { DashboardModel } from '../../state/DashboardModel';
 import {
   getDashboardPermissions,
   addDashboardPermission,
   removeDashboardPermission,
   updateDashboardPermission,
 } from '../../state/actions';
+import { SettingsPageProps } from '../DashboardSettings/types';
 
 const mapStateToProps = (state: StoreState) => ({
   permissions: state.dashboard.permissions,
@@ -33,11 +34,7 @@ const mapDispatchToProps = {
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
 
-export interface OwnProps {
-  dashboard: DashboardModel;
-}
-
-export type Props = OwnProps & ConnectedProps<typeof connector>;
+export type Props = SettingsPageProps & ConnectedProps<typeof connector>;
 
 export interface State {
   isAdding: boolean;
@@ -91,20 +88,20 @@ export class DashboardPermissionsUnconnected extends PureComponent<Props, State>
   }
 
   render() {
-    const {
-      permissions,
-      dashboard: {
-        meta: { hasUnsavedFolderChange },
-      },
-    } = this.props;
+    const { permissions, dashboard, sectionNav } = this.props;
     const { isAdding } = this.state;
 
-    return hasUnsavedFolderChange ? (
-      <h5>You have changed a folder, please save to view permissions.</h5>
-    ) : (
-      <div>
+    if (dashboard.meta.hasUnsavedFolderChange) {
+      return (
+        <Page navModel={sectionNav}>
+          <h5>You have changed a folder, please save to view permissions.</h5>
+        </Page>
+      );
+    }
+
+    return (
+      <Page navModel={sectionNav}>
         <div className="page-action-bar">
-          <h3 className="page-sub-heading">Permissions</h3>
           <Tooltip placement="auto" content={<PermissionsInfo />}>
             <Icon className="icon--has-hover page-sub-heading-icon" name="question-circle" />
           </Tooltip>
@@ -123,7 +120,7 @@ export class DashboardPermissionsUnconnected extends PureComponent<Props, State>
           isFetching={false}
           folderInfo={this.getFolder()}
         />
-      </div>
+      </Page>
     );
   }
 }