Dashboards: Wrap links and data layer controls in divs to make them behave like variables (#113927)

Wrap links and data layer controls in divs to make them float together with variables

public/app/features/dashboard-scene/panel-edit/PanelEditControls.tsx

@@ -1,6 +1,9 @@
+import { css } from '@emotion/css';
+
+import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { t } from '@grafana/i18n';
-import { InlineSwitch } from '@grafana/ui';
+import { InlineSwitch, useStyles2 } from '@grafana/ui';
 
 import { PanelEditor } from './PanelEditor';
 
@@ -10,9 +13,10 @@ export interface Props {
 
 export function PanelEditControls({ panelEditor }: Props) {
   const { tableView, dataPane } = panelEditor.useState();
+  const styles = useStyles2(getStyles);
 
   return (
-    <>
+    <div className={styles.container}>
       {dataPane && (
         <InlineSwitch
           label={t('dashboard-scene.panel-edit-controls.table-view-label-table-view', 'Table view')}
@@ -27,6 +31,18 @@ export function PanelEditControls({ panelEditor }: Props) {
           data-testid={selectors.components.PanelEditor.toggleTableView}
         />
       )}
-    </>
+    </div>
   );
 }
+
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    container: css({
+      display: 'inline-flex',
+      alignItems: 'center',
+      verticalAlign: 'middle',
+      marginBottom: theme.spacing(1),
+      marginRight: theme.spacing(1),
+    }),
+  };
+}

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

@@ -15,7 +15,7 @@ import {
   SceneObjectUrlValues,
   CancelActivationHandler,
 } from '@grafana/scenes';
-import { Box, Stack, useStyles2 } from '@grafana/ui';
+import { Box, useStyles2 } from '@grafana/ui';
 
 import { PanelEditControls } from '../panel-edit/PanelEditControls';
 import { getDashboardSceneFor } from '../utils/utils';
@@ -163,12 +163,15 @@ function DashboardControlsRenderer({ model }: SceneComponentProps<DashboardContr
       data-testid={selectors.pages.Dashboard.Controls}
       className={cx(styles.controls, editPanel && styles.controlsPanelEdit)}
     >
-      {!hideTimeControls && (
+      <div className={cx(styles.rightControls, editPanel && styles.rightControlsWrap)}>
-        <div className={cx(styles.timeControls, editPanel && styles.timeControlsWrap)}>
+        {!hideTimeControls && (
-          <timePicker.Component model={timePicker} />
+          <div className={styles.timeControls}>
-          <refreshPicker.Component model={refreshPicker} />
+            <timePicker.Component model={timePicker} />
-        </div>
+            <refreshPicker.Component model={refreshPicker} />
-      )}
+          </div>
+        )}
+        {!hideDashboardControls && model.hasDashboardControls() && <DashboardControlsButton dashboard={dashboard} />}
+      </div>
       {!hideVariableControls && (
         <>
           <VariableControls dashboard={dashboard} />
@@ -177,11 +180,6 @@ function DashboardControlsRenderer({ model }: SceneComponentProps<DashboardContr
       )}
       {!hideLinksControls && !editPanel && <DashboardLinksControls links={links} dashboard={dashboard} />}
       {editPanel && <PanelEditControls panelEditor={editPanel} />}
-      {!hideDashboardControls && model.hasDashboardControls() && (
-        <Stack>
-          <DashboardControlsButton dashboard={dashboard} />
-        </Stack>
-      )}
       {showDebugger && <SceneDebugger scene={model} key={'scene-debugger'} />}
     </div>
   );
@@ -230,14 +228,20 @@ function getStyles(theme: GrafanaTheme2) {
       background: 'unset',
       position: 'unset',
     }),
-    timeControls: css({
+    rightControls: css({
       display: 'flex',
       justifyContent: 'flex-end',
       gap: theme.spacing(1),
       marginBottom: theme.spacing(1),
       float: 'right',
+      alignItems: 'center',
     }),
-    timeControlsWrap: css({
+    timeControls: css({
+      display: 'flex',
+      justifyContent: 'flex-end',
+      gap: theme.spacing(1),
+    }),
+    rightControlsWrap: css({
       flexWrap: 'wrap',
       marginLeft: 'auto',
     }),

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

@@ -1,4 +1,8 @@
+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';
@@ -12,12 +16,15 @@ 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) => (
-          <DataLayerControl layer={layer} key={layer.state.key} />
+          <div key={layer.state.key} className={styles.container}>
+            <DataLayerControl layer={layer} />
+          </div>
         ))}
       </>
     );
@@ -25,3 +32,13 @@ 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

@@ -1,7 +1,10 @@
+import { css } from '@emotion/css';
+
+import { GrafanaTheme2 } from '@grafana/data';
 import { sanitizeUrl } from '@grafana/data/internal';
 import { selectors } from '@grafana/e2e-selectors';
 import { DashboardLink } from '@grafana/schema';
-import { MenuItem, Tooltip } from '@grafana/ui';
+import { MenuItem, Tooltip, useStyles2 } from '@grafana/ui';
 import {
   DashboardLinkButton,
   DashboardLinksDashboard,
@@ -19,6 +22,7 @@ export interface Props {
 
 export function DashboardLinkRenderer({ link, dashboardUID, inMenu }: Props) {
   const linkInfo = getLinkSrv().getAnchorInfo(link);
+  const styles = useStyles2(getStyles);
 
   if (link.type === 'dashboards') {
     return <DashboardLinksDashboard link={link} linkInfo={linkInfo} dashboardUID={dashboardUID} />;
@@ -47,8 +51,20 @@ export function DashboardLinkRenderer({ link, dashboardUID, inMenu }: Props) {
   );
 
   return (
-    <div data-testid={selectors.components.DashboardLinks.container}>
+    <div className={styles.linkContainer} data-testid={selectors.components.DashboardLinks.container}>
       {link.tooltip ? <Tooltip content={linkInfo.tooltip}>{linkElement}</Tooltip> : linkElement}
     </div>
   );
 }
+
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    linkContainer: css({
+      display: 'inline-flex',
+      alignItems: 'center',
+      verticalAlign: 'middle',
+      marginBottom: theme.spacing(1),
+      marginRight: theme.spacing(1),
+    }),
+  };
+}

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

@@ -74,20 +74,22 @@ export const DashboardLinksDashboard = ({ link, linkInfo, dashboardUID }: Props)
 
   if (link.asDropdown) {
     return (
-      <Dropdown overlay={<DashboardLinksMenu link={link} dashboardUID={dashboardUID} />}>
+      <div className={styles.linkContainer}>
-        <DashboardLinkButton
+        <Dropdown overlay={<DashboardLinksMenu link={link} dashboardUID={dashboardUID} />}>
-          data-placement="bottom"
+          <DashboardLinkButton
-          data-toggle="dropdown"
+            data-placement="bottom"
-          aria-controls="dropdown-list"
+            data-toggle="dropdown"
-          aria-haspopup="menu"
+            aria-controls="dropdown-list"
-          fill="outline"
+            aria-haspopup="menu"
-          variant="secondary"
+            fill="outline"
-          data-testid={selectors.components.DashboardLinks.dropDown}
+            variant="secondary"
-        >
+            data-testid={selectors.components.DashboardLinks.dropDown}
-          <Icon aria-hidden name="bars" className={styles.iconMargin} />
+          >
-          <span>{title}</span>
+            <Icon aria-hidden name="bars" className={styles.iconMargin} />
-        </DashboardLinkButton>
+            <span>{title}</span>
-      </Dropdown>
+          </DashboardLinkButton>
+        </Dropdown>
+      </div>
     );
   }
 
@@ -96,18 +98,19 @@ export const DashboardLinksDashboard = ({ link, linkInfo, dashboardUID }: Props)
       {resolvedLinks.length > 0 &&
         resolvedLinks.map((resolvedLink, index) => {
           return (
-            <DashboardLinkButton
+            <div key={`dashlinks-list-item-${resolvedLink.uid}-${index}`} className={styles.linkContainer}>
-              key={`dashlinks-list-item-${resolvedLink.uid}-${index}`}
+              <DashboardLinkButton
-              icon="apps"
+                icon="apps"
-              variant="secondary"
+                variant="secondary"
-              fill="outline"
+                fill="outline"
-              href={resolvedLink.url}
+                href={resolvedLink.url}
-              target={link.targetBlank ? '_blank' : undefined}
+                target={link.targetBlank ? '_blank' : undefined}
-              rel="noreferrer"
+                rel="noreferrer"
-              data-testid={selectors.components.DashboardLinks.link}
+                data-testid={selectors.components.DashboardLinks.link}
-            >
+              >
-              {resolvedLink.title}
+                {resolvedLink.title}
-            </DashboardLinkButton>
+              </DashboardLinkButton>
+            </div>
           );
         })}
     </>
@@ -174,6 +177,13 @@ function getStyles(theme: GrafanaTheme2) {
       paddingLeft: theme.spacing(1),
       paddingRight: theme.spacing(1),
     }),
+    linkContainer: css({
+      display: 'inline-flex',
+      alignItems: 'center',
+      verticalAlign: 'middle',
+      marginBottom: theme.spacing(1),
+      marginRight: theme.spacing(1),
+    }),
   };
 }