fix: dashboard toolbar layout fixes

public/app/features/dashboard-scene/scene/DashboardControls.tsx

@@ -17,7 +17,7 @@ import {
   SceneObjectUrlValues,
   CancelActivationHandler,
 } from '@grafana/scenes';
-import { Box, Button, useStyles2 } from '@grafana/ui';
+import { Box, Button, Stack, useStyles2 } from '@grafana/ui';
 import { playlistSrv } from 'app/features/playlist/PlaylistSrv';
 
 import { PanelEditControls } from '../panel-edit/PanelEditControls';
@@ -38,6 +38,7 @@ export interface DashboardControlsState extends SceneObjectState {
   refreshPicker: SceneRefreshPicker;
   hideTimeControls?: boolean;
   hideVariableControls?: boolean;
+  hideAnnotationControls?: boolean;
   hideLinksControls?: boolean;
   // Hides the dashboard-controls dropdown menu
   hideDashboardControls?: boolean;
@@ -51,7 +52,13 @@ export class DashboardControls extends SceneObjectBase<DashboardControlsState> {
   });
 
   protected _urlSync = new SceneObjectUrlSyncConfig(this, {
-    keys: ['_dash.hideTimePicker', '_dash.hideVariables', '_dash.hideLinks', '_dash.hideDashboardControls'],
+    keys: [
+      '_dash.hideTimePicker',
+      '_dash.hideVariables',
+      '_dash.hideAnnotations',
+      '_dash.hideLinks',
+      '_dash.hideDashboardControls',
+    ],
   });
 
   /**
@@ -63,7 +70,8 @@ export class DashboardControls extends SceneObjectBase<DashboardControlsState> {
   }
 
   updateFromUrl(values: SceneObjectUrlValues) {
-    const { hideTimeControls, hideVariableControls, hideLinksControls, hideDashboardControls } = this.state;
+    const { hideTimeControls, hideVariableControls, hideLinksControls, hideDashboardControls, hideAnnotationControls } =
+      this.state;
     const isEnabledViaUrl = (key: string) => values[key] === 'true' || values[key] === '';
 
     // Only allow hiding, never "unhiding" from url
@@ -77,6 +85,10 @@ export class DashboardControls extends SceneObjectBase<DashboardControlsState> {
       this.setState({ hideVariableControls: true });
     }
 
+    if (!hideAnnotationControls && isEnabledViaUrl('_dash.hideAnnotations')) {
+      this.setState({ hideAnnotationControls: true });
+    }
+
     if (!hideLinksControls && isEnabledViaUrl('_dash.hideLinks')) {
       this.setState({ hideLinksControls: true });
     }
@@ -126,11 +138,12 @@ export class DashboardControls extends SceneObjectBase<DashboardControlsState> {
     const hasAnnotations = sceneGraph.getDataLayers(this).some((d) => d.state.isEnabled && !d.state.isHidden);
     const hasLinks = getDashboardSceneFor(this).state.links?.length > 0;
     const hideLinks = this.state.hideLinksControls || !hasLinks;
-    const hideVariables = this.state.hideVariableControls || (!hasAnnotations && !hasVariables);
+    const hideVariables = this.state.hideVariableControls || !hasVariables;
+    const hideAnnotationControls = this.state.hideAnnotationControls || !hasAnnotations;
     const hideTimePicker = this.state.hideTimeControls;
     const hideDashboardControls = this.state.hideDashboardControls || !hasDashboardControls(dashboard);
 
-    return !(hideVariables && hideLinks && hideTimePicker && hideDashboardControls);
+    return !(hideVariables && hideLinks && hideTimePicker && hideDashboardControls && hideAnnotationControls);
   }
 }
 
@@ -140,6 +153,7 @@ function DashboardControlsRenderer({ model }: SceneComponentProps<DashboardContr
     timePicker,
     hideTimeControls,
     hideVariableControls,
+    hideAnnotationControls,
     hideLinksControls,
     hideDashboardControls,
   } = model.useState();
@@ -159,27 +173,32 @@ function DashboardControlsRenderer({ model }: SceneComponentProps<DashboardContr
       data-testid={selectors.pages.Dashboard.Controls}
       className={cx(styles.controls, editPanel && styles.controlsPanelEdit)}
     >
+      {/* Right controls */}
       <div className={cx(styles.rightControls, editPanel && styles.rightControlsWrap)}>
+        {/* Time controls */}
         {!hideTimeControls && (
-          <div className={styles.fixedControls}>
+          <Stack gap={1} justifyContent={'flex-end'}>
             <timePicker.Component model={timePicker} />
             <refreshPicker.Component model={refreshPicker} />
-          </div>
+          </Stack>
         )}
+
+        {/* Actions (edit, play, share, etc.) */}
         {config.featureToggles.dashboardNewLayouts && (
-          <div className={styles.fixedControls}>
+          <Stack gap={1} justifyContent={'flex-end'}>
             <DashboardControlActions dashboard={dashboard} />
-          </div>
+          </Stack>
         )}
-        {!hideLinksControls && !editPanel && <DashboardLinksControls links={links} dashboard={dashboard} />}
       </div>
-      {!hideVariableControls && (
-        <>
-          <VariableControls dashboard={dashboard} />
-          <DashboardDataLayerControls dashboard={dashboard} />
-        </>
-      )}
-      {!hideDashboardControls && hasDashboardControls && <DashboardControlsButton dashboard={dashboard} />}
+
+      {/* Left controls */}
+      <div className={styles.leftControls}>
+        {/* Variables */}
+        {!hideVariableControls && <VariableControls dashboard={dashboard} />}
+        {!hideAnnotationControls && <DashboardDataLayerControls dashboard={dashboard} />}
+        {!hideLinksControls && !editPanel && <DashboardLinksControls links={links} dashboard={dashboard} />}
+        {!hideDashboardControls && hasDashboardControls && <DashboardControlsButton dashboard={dashboard} />}
+      </div>
       {editPanel && <PanelEditControls panelEditor={editPanel} />}
       {showDebugger && <SceneDebugger scene={model} key={'scene-debugger'} />}
     </div>
@@ -237,13 +256,14 @@ function getStyles(theme: GrafanaTheme2) {
     controls: css({
       gap: theme.spacing(1),
       padding: theme.spacing(2, 2, 1, 2),
-      flexDirection: 'row',
+      display: 'flex',
+      flexDirection: 'row-reverse',
       flexWrap: 'nowrap',
       position: 'relative',
       width: '100%',
       marginLeft: 'auto',
       [theme.breakpoints.down('sm')]: {
-        flexDirection: 'column-reverse',
+        flexDirection: 'column',
         alignItems: 'stretch',
       },
       '&:hover .dashboard-canvas-add-button': {
@@ -260,32 +280,36 @@ function getStyles(theme: GrafanaTheme2) {
       background: 'unset',
       position: 'unset',
     }),
-    rightControls: css({
+    leftControls: css({
       display: 'flex',
       gap: theme.spacing(1),
-      float: 'right',
       alignItems: 'flex-start',
+      justifyContent: 'flex-start',
+      flex: 1,
       flexWrap: 'wrap',
       maxWidth: '100%',
       minWidth: 0,
     }),
-    fixedControls: css({
-      display: 'flex',
-      justifyContent: 'flex-end',
+    rightControls: css({
+      display: 'inline-flex',
       gap: theme.spacing(1),
-      marginBottom: theme.spacing(1),
-      order: 2,
-      marginLeft: 'auto',
+      alignItems: 'flex-start',
+      justifyContent: 'flex-end',
+      flexWrap: 'nowrap',
       flexShrink: 0,
-      alignSelf: 'flex-start',
-    }),
-    dashboardControlsButton: css({
-      order: 2,
-      marginLeft: 'auto',
+      maxWidth: '100%',
+      minWidth: 0,
+      [theme.breakpoints.down('sm')]: {
+        flexWrap: 'wrap',
+      },
     }),
     rightControlsWrap: css({
       flexWrap: 'wrap',
       marginLeft: 'auto',
     }),
+    dashboardControlsButton: css({
+      order: 2,
+      marginLeft: 'auto',
+    }),
   };
 }

public/app/features/dashboard-scene/scene/DashboardDataLayerControls.tsx

@@ -1,8 +1,4 @@
-import { css } from '@emotion/css';
-
-import { GrafanaTheme2 } from '@grafana/data';
 import { SceneDataLayerProvider, sceneGraph } from '@grafana/scenes';
-import { useStyles2 } from '@grafana/ui';
 
 import { isDashboardDataLayerSetState } from './DashboardDataLayerSet';
 import { DashboardScene } from './DashboardScene';
@@ -16,15 +12,12 @@ export function DashboardDataLayerControls({ dashboard }: { dashboard: Dashboard
   // It is possible to render the controls for the annotation data layers in separate places using the `placement` property.
   // In case it's not specified, we are rendering the controls here (default).
   const isDefaultPlacement = (layer: SceneDataLayerProvider) => layer.state.placement === undefined;
-  const styles = useStyles2(getStyles);
 
   if (isDashboardDataLayerSetState(state)) {
     return (
       <>
         {state.annotationLayers.filter(isDefaultPlacement).map((layer) => (
-          <div key={layer.state.key} className={styles.container}>
-            <DataLayerControl layer={layer} />
-          </div>
+          <DataLayerControl key={layer.state.key} layer={layer} />
         ))}
       </>
     );
@@ -32,13 +25,3 @@ export function DashboardDataLayerControls({ dashboard }: { dashboard: Dashboard
 
   return null;
 }
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  container: css({
-    display: 'inline-flex',
-    alignItems: 'center',
-    verticalAlign: 'middle',
-    marginBottom: theme.spacing(1),
-    marginRight: theme.spacing(1),
-  }),
-});

public/app/features/dashboard-scene/scene/DashboardLinkRenderer.tsx

@@ -63,8 +63,6 @@ function getStyles(theme: GrafanaTheme2) {
       display: 'inline-flex',
       alignItems: 'center',
       verticalAlign: 'middle',
-      marginBottom: theme.spacing(1),
-      marginRight: theme.spacing(1),
     }),
   };
 }

public/app/features/dashboard-scene/scene/DashboardLinksControls.tsx

@@ -1,9 +1,5 @@
-import { css } from '@emotion/css';
-
-import { GrafanaTheme2 } from '@grafana/data';
 import { sceneGraph } from '@grafana/scenes';
 import { DashboardLink } from '@grafana/schema';
-import { useStyles2 } from '@grafana/ui';
 
 import { DashboardLinkRenderer } from './DashboardLinkRenderer';
 import { DashboardScene } from './DashboardScene';
@@ -16,33 +12,18 @@ export interface Props {
 export function DashboardLinksControls({ links, dashboard }: Props) {
   sceneGraph.getTimeRange(dashboard).useState();
   const uid = dashboard.state.uid;
-  const styles = useStyles2(getStyles);
 
   if (!links || !uid) {
     return null;
   }
 
   return (
-    <div className={styles.linksContainer}>
+    <>
       {links
         .filter((link) => link.placement === undefined)
         .map((link: DashboardLink, index: number) => (
           <DashboardLinkRenderer link={link} dashboardUID={uid} key={`${link.title}-$${index}`} />
         ))}
-    </div>
+    </>
   );
 }
-
-function getStyles(theme: GrafanaTheme2) {
-  return {
-    linksContainer: css({
-      display: 'flex',
-      flexWrap: 'wrap',
-      gap: theme.spacing(1),
-      maxWidth: '100%',
-      minWidth: 0,
-      order: 1,
-      flex: '1 1 0%',
-    }),
-  };
-}

public/app/features/dashboard-scene/scene/VariableControls.tsx

@@ -19,7 +19,6 @@ import { AddVariableButton } from './VariableControlsAddButton';
 
 export function VariableControls({ dashboard }: { dashboard: DashboardScene }) {
   const { variables } = sceneGraph.getVariables(dashboard)!.useState();
-  const styles = useStyles2(getStyles);
 
   return (
     <>
@@ -28,11 +27,7 @@ export function VariableControls({ dashboard }: { dashboard: DashboardScene }) {
         .map((variable) => (
           <VariableValueSelectWrapper key={variable.state.key} variable={variable} />
         ))}
-      {config.featureToggles.dashboardNewLayouts ? (
-        <div className={styles.addButton}>
-          <AddVariableButton dashboard={dashboard} />
-        </div>
-      ) : null}
+      {config.featureToggles.dashboardNewLayouts ? <AddVariableButton dashboard={dashboard} /> : null}
     </>
   );
 }
@@ -178,8 +173,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
       borderTopLeftRadius: 'unset',
       borderBottomLeftRadius: 'unset',
     }),
-    marginBottom: theme.spacing(1),
-    marginRight: theme.spacing(1),
   }),
   verticalContainer: css({
     display: 'flex',
@@ -211,11 +204,4 @@ const getStyles = (theme: GrafanaTheme2) => ({
     display: 'flex',
     alignItems: 'center',
   }),
-  addButton: css({
-    display: 'inline-flex',
-    alignItems: 'center',
-    verticalAlign: 'middle',
-    marginBottom: theme.spacing(1),
-    marginRight: theme.spacing(1),
-  }),
 });

public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx

@@ -181,8 +181,6 @@ function getStyles(theme: GrafanaTheme2) {
       display: 'inline-flex',
       alignItems: 'center',
       verticalAlign: 'middle',
-      marginBottom: theme.spacing(1),
-      marginRight: theme.spacing(1),
     }),
   };
 }