Toolbar: Move ExtensionSidebar next to toolbar (#113404)

* Toolbar: Move ExtensionSidebar next to toolbar

* Toolbar: Simplify AppChrome

* simplify height calculation

* Fix scrollbar positon

* remove irrelevant comment

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

---------

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

public/app/core/components/AppChrome/AppChrome.tsx

@@ -45,8 +45,7 @@ export function AppChrome({ children }: Props) {
   );
 
   const headerLevels = useChromeHeaderLevels();
-  const headerHeight = headerLevels * getChromeHeaderLevelHeight();
-  const styles = useStyles2(getStyles, headerHeight);
+  const styles = useStyles2(getStyles, headerLevels, getChromeHeaderLevelHeight());
   const contentSizeStyles = useStyles2(getContentSizeStyles, extensionSidebarWidth);
   const dragStyles = useStyles2(getDragStyles);
 
@@ -186,13 +185,13 @@ function useResponsiveDockedMegaMenu(chrome: AppChromeService) {
   }, [isLargeScreen, chrome, dockedMenuLocalStorageState]);
 }
 
-const getStyles = (theme: GrafanaTheme2, headerHeight: number) => {
+const getStyles = (theme: GrafanaTheme2, headerLevels: number, headerHeight: number) => {
   return {
     content: css({
       label: 'page-content',
       display: 'flex',
       flexDirection: 'column',
-      paddingTop: headerHeight,
+      paddingTop: headerLevels * headerHeight,
       flexGrow: 1,
       height: 'auto',
     }),
@@ -282,7 +281,7 @@ const getStyles = (theme: GrafanaTheme2, headerHeight: number) => {
       position: 'fixed !important' as 'fixed',
       top: headerHeight,
       bottom: 0,
-      zIndex: 2,
+      zIndex: theme.zIndex.navbarFixed + 1,
       right: 0,
     }),
   };

public/app/core/components/AppChrome/TopBar/SingleTopBarActions.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Components } from '@grafana/e2e-selectors';
@@ -6,6 +6,7 @@ import { ScopesContextValue } from '@grafana/runtime';
 import { Stack, useStyles2 } from '@grafana/ui';
 import { ScopesSelector } from 'app/features/scopes/selector/ScopesSelector';
 
+import { useExtensionSidebarContext } from '../ExtensionSidebar/ExtensionSidebarProvider';
 import { NavToolbarSeparator } from '../NavToolbar/NavToolbarSeparator';
 
 import { getChromeHeaderLevelHeight } from './useChromeHeaderHeight';
@@ -17,10 +18,14 @@ export interface Props {
 }
 
 export function SingleTopBarActions({ actions, breadcrumbActions, scopes }: Props) {
-  const styles = useStyles2(getStyles);
+  const { isOpen: isExtensionSidebarOpen, extensionSidebarWidth } = useExtensionSidebarContext();
+  const styles = useStyles2(getStyles, extensionSidebarWidth);
 
   return (
-    <div data-testid={Components.NavToolbar.container} className={styles.actionsBar}>
+    <div
+      data-testid={Components.NavToolbar.container}
+      className={cx(styles.actionsBar, isExtensionSidebarOpen && styles.constrained)}
+    >
       <Stack alignItems="center" justifyContent="flex-start" flex={1} wrap="nowrap" minWidth={0}>
         {scopes?.state.enabled ? <ScopesSelector /> : undefined}
         <Stack alignItems="center" justifyContent={'flex-end'} flex={1} wrap="nowrap" minWidth={0}>
@@ -33,7 +38,7 @@ export function SingleTopBarActions({ actions, breadcrumbActions, scopes }: Prop
   );
 }
 
-const getStyles = (theme: GrafanaTheme2) => {
+const getStyles = (theme: GrafanaTheme2, extensionSidebarWidth = 0) => {
   return {
     actionsBar: css({
       alignItems: 'center',
@@ -43,5 +48,8 @@ const getStyles = (theme: GrafanaTheme2) => {
       height: getChromeHeaderLevelHeight(),
       padding: theme.spacing(0, 1, 0, 2),
     }),
+    constrained: css({
+      maxWidth: `calc(100% - ${extensionSidebarWidth}px)`,
+    }),
   };
 };