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>

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

@@ -56,10 +56,6 @@ export interface NavModel {
    *   This is the current active tab/navigation.
    */
   node: NavModelItem;
-  /**
-   *  Describes breadcrumbs that are used in places such as data source settings., folder page and plugins page.
-   */
-  breadcrumbs?: NavModelItem[];
 }
 
 export interface NavModelBreadcrumb {

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

@@ -0,0 +1,96 @@
+import { css, cx } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+
+import { useStyles2 } from '../../themes/ThemeContext';
+import { Icon } from '../Icon/Icon';
+
+import { Counter } from './Counter';
+import { TabProps } from './Tab';
+
+export const VerticalTab = React.forwardRef<HTMLAnchorElement, TabProps>(
+  ({ label, active, icon, counter, className, suffix: Suffix, onChangeTab, href, ...otherProps }, ref) => {
+    const tabsStyles = useStyles2(getTabStyles);
+    const content = () => (
+      <>
+        {icon && <Icon name={icon} />}
+        {label}
+        {typeof counter === 'number' && <Counter value={counter} />}
+        {Suffix && <Suffix className={tabsStyles.suffix} />}
+      </>
+    );
+
+    const linkClass = cx(tabsStyles.link, active && tabsStyles.activeStyle);
+
+    return (
+      <li className={tabsStyles.item}>
+        <a
+          href={href}
+          className={linkClass}
+          {...otherProps}
+          onClick={onChangeTab}
+          aria-label={otherProps['aria-label'] || selectors.components.Tab.title(label)}
+          role="tab"
+          aria-selected={active}
+          ref={ref}
+        >
+          {content()}
+        </a>
+      </li>
+    );
+  }
+);
+
+VerticalTab.displayName = 'Tab';
+
+const getTabStyles = (theme: GrafanaTheme2) => {
+  return {
+    item: css`
+      list-style: none;
+      margin-right: ${theme.spacing(2)};
+      position: relative;
+      display: block;
+      margin-bottom: 4px;
+    `,
+    link: css`
+      padding: 6px 12px;
+      display: block;
+      height: 100%;
+      cursor: pointer;
+
+      color: ${theme.colors.text.primary};
+
+      svg {
+        margin-right: ${theme.spacing(1)};
+      }
+
+      &:hover,
+      &:focus {
+        text-decoration: underline;
+      }
+    `,
+    activeStyle: css`
+      label: activeTabStyle;
+      color: ${theme.colors.text.maxContrast};
+      font-weight: 500;
+      overflow: hidden;
+
+      &::before {
+        display: block;
+        content: ' ';
+        position: absolute;
+        left: 0;
+        width: 4px;
+        bottom: 0;
+        top: 0;
+        border-radius: 2px;
+        background-image: linear-gradient(0deg, #f05a28 30%, #fbca0a 99%);
+      }
+    `,
+    suffix: css`
+      margin-left: ${theme.spacing(1)};
+    `,
+  };
+};

packages/grafana-ui/src/components/index.ts

@@ -79,6 +79,7 @@ export { TableCellDisplayMode, TableSortByFieldState } from './Table/types';
 export { TableInputCSV } from './TableInputCSV/TableInputCSV';
 export { TabsBar } from './Tabs/TabsBar';
 export { Tab } from './Tabs/Tab';
+export { VerticalTab } from './Tabs/VerticalTab';
 export { TabContent } from './Tabs/TabContent';
 export { Counter } from './Tabs/Counter';