Dashboard: Update toolbar layout (option 2.) (#115210)

fix: dashboard toolbar layout updates

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

@@ -171,7 +171,6 @@ function DashboardControlsRenderer({ model }: SceneComponentProps<DashboardContr
             <DashboardControlActions dashboard={dashboard} />
           </div>
         )}
-        {!hideLinksControls && !editPanel && <DashboardLinksControls links={links} dashboard={dashboard} />}
       </div>
       {!hideVariableControls && (
         <>
@@ -179,6 +178,7 @@ function DashboardControlsRenderer({ model }: SceneComponentProps<DashboardContr
           <DashboardDataLayerControls dashboard={dashboard} />
         </>
       )}
+      {!hideLinksControls && !editPanel && <DashboardLinksControls links={links} dashboard={dashboard} />}
       {!hideDashboardControls && hasDashboardControls && <DashboardControlsButton dashboard={dashboard} />}
       {editPanel && <PanelEditControls panelEditor={editPanel} />}
       {showDebugger && <SceneDebugger scene={model} key={'scene-debugger'} />}

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

@@ -64,7 +64,6 @@ function getStyles(theme: GrafanaTheme2) {
       alignItems: 'center',
       verticalAlign: 'middle',
       marginBottom: theme.spacing(1),
-      marginRight: theme.spacing(1),
     }),
   };
 }

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

@@ -36,13 +36,9 @@ export function DashboardLinksControls({ links, dashboard }: Props) {
 function getStyles(theme: GrafanaTheme2) {
   return {
     linksContainer: css({
-      display: 'flex',
-      flexWrap: 'wrap',
+      display: 'inline-flex',
       gap: theme.spacing(1),
-      maxWidth: '100%',
-      minWidth: 0,
-      order: 1,
-      flex: '1 1 0%',
+      marginRight: theme.spacing(1),
     }),
   };
 }

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}
     </>
   );
 }
@@ -211,11 +206,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-scene/scene/VariableControlsAddButton.tsx

@@ -1,7 +1,9 @@
+import { css } from '@emotion/css';
 import { PointerEventHandler, useCallback } from 'react';
 
+import { GrafanaTheme2 } from '@grafana/data';
 import { Trans } from '@grafana/i18n';
-import { Button } from '@grafana/ui';
+import { Button, useStyles2 } from '@grafana/ui';
 
 import { openAddVariablePane } from '../settings/variables/VariableAddEditableElement';
 import { DashboardInteractions } from '../utils/interactions';
@@ -9,6 +11,7 @@ import { DashboardInteractions } from '../utils/interactions';
 import { DashboardScene } from './DashboardScene';
 
 export function AddVariableButton({ dashboard }: { dashboard: DashboardScene }) {
+  const styles = useStyles2(getStyles);
   const { editview, editPanel, isEditing, viewPanel } = dashboard.useState();
 
   const handlePointerDown: PointerEventHandler = useCallback(
@@ -30,10 +33,22 @@ export function AddVariableButton({ dashboard }: { dashboard: DashboardScene })
   }
 
   return (
-    <div className="dashboard-canvas-add-button">
-      <Button icon="plus" variant="primary" fill="text" onPointerDown={handlePointerDown}>
-        <Trans i18nKey="dashboard-scene.variable-controls.add-variable">Add variable</Trans>
-      </Button>
+    <div className={styles.addButton}>
+      <div className="dashboard-canvas-add-button">
+        <Button icon="plus" variant="primary" fill="text" onPointerDown={handlePointerDown}>
+          <Trans i18nKey="dashboard-scene.variable-controls.add-variable">Add variable</Trans>
+        </Button>
+      </div>
     </div>
   );
 }
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  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

@@ -182,7 +182,6 @@ function getStyles(theme: GrafanaTheme2) {
       alignItems: 'center',
       verticalAlign: 'middle',
       marginBottom: theme.spacing(1),
-      marginRight: theme.spacing(1),
     }),
   };
 }