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

packages/grafana-data/src/types/navModel.ts

@@ -31,6 +31,7 @@ export interface NavModelItem extends NavLinkDTO {
   highlightId?: string;
   tabSuffix?: ComponentType<{ className?: string }>;
   showIconInNavbar?: boolean;
+  hideFromBreadcrumbs?: boolean;
 }
 
 export enum NavSection {

packages/grafana-e2e-selectors/src/selectors/pages.ts

@@ -72,7 +72,7 @@ export const Pages = {
          * @deprecated use components.TimeZonePicker.containerV2 from Grafana 8.3 instead
          */
         timezone: 'Time zone picker select container',
-        title: 'Dashboard settings page title',
+        title: 'Tab General',
       },
       Annotations: {
         List: {

packages/grafana-ui/src/components/QueryEditor/Stack.tsx

@@ -10,6 +10,7 @@ interface StackProps {
   alignItems?: CSSProperties['alignItems'];
   wrap?: boolean;
   gap?: number;
+  flexGrow?: CSSProperties['flexGrow'];
 }
 
 export const Stack: React.FC<StackProps> = ({ children, ...props }) => {
@@ -25,5 +26,6 @@ const getStyles = (theme: GrafanaTheme2, props: StackProps) => ({
     flexWrap: props.wrap ?? true ? 'wrap' : undefined,
     alignItems: props.alignItems,
     gap: theme.spacing(props.gap ?? 2),
+    flexGrow: props.flexGrow,
   }),
 });

packages/grafana-ui/src/components/Tabs/VerticalTab.tsx

@@ -25,7 +25,7 @@ export const VerticalTab = React.forwardRef<HTMLAnchorElement, TabProps>(
     const linkClass = cx(tabsStyles.link, active && tabsStyles.activeStyle);
 
     return (
-      <li className={tabsStyles.item}>
+      <div className={tabsStyles.item}>
         <a
           href={href}
           className={linkClass}
@@ -38,7 +38,7 @@ export const VerticalTab = React.forwardRef<HTMLAnchorElement, TabProps>(
         >
           {content()}
         </a>
-      </li>
+      </div>
     );
   }
 );

packages/grafana-ui/src/themes/GlobalStyles/page.ts

@@ -112,5 +112,16 @@ export function getPageStyles(theme: GrafanaTheme2) {
       margin-left: ${theme.spacing(1)};
       margin-top: ${theme.spacing(0.5)};
     }
+
+    .dashboard-content {
+      display: 'flex';
+      flex-grow: 1;
+      min-height: 0;
+      flex-direction: 'column';
+    }
+
+    .dashboard-content--hidden {
+      display: none;
+    }
   `;
 }