diff --git a/public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx b/public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx
index ec10fcb7a58..e7c3def7054 100644
--- a/public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx
+++ b/public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx
@@ -9,7 +9,6 @@ import { useGrafana } from 'app/core/context/GrafanaContext';
import { contextSrv } from 'app/core/core';
import { t } from 'app/core/internationalization';
import { HOME_NAV_ID } from 'app/core/reducers/navModel';
-import { ScopesSelector } from 'app/features/scopes';
import { useSelector } from 'app/types';
import { Branding } from '../../Branding/Branding';
@@ -61,7 +60,6 @@ export const SingleTopBar = memo(function SingleTopBar({
)}
-
diff --git a/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx b/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx
index 4b00fa431ba..7f952fbcf93 100644
--- a/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx
+++ b/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx
@@ -12,6 +12,7 @@ import {
Dropdown,
Icon,
Menu,
+ Stack,
ToolbarButton,
ToolbarButtonRow,
useStyles2,
@@ -23,6 +24,7 @@ import { contextSrv } from 'app/core/core';
import { Trans, t } from 'app/core/internationalization';
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
import { playlistSrv } from 'app/features/playlist/PlaylistSrv';
+import { ScopesSelector } from 'app/features/scopes';
import { shareDashboardType } from '../../dashboard/components/ShareModal/utils';
import { PanelEditor, buildPanelEditScene } from '../panel-edit/PanelEditor';
@@ -67,6 +69,7 @@ export function ToolbarActions({ dashboard }: Props) {
// Means we are not in settings view, fullscreen panel or edit panel
const isShowingDashboard = !editview && !isViewingPanel && !isEditingPanel;
const isEditingAndShowingDashboard = isEditing && isShowingDashboard;
+ const showScopesSelector = config.featureToggles.singleTopNav && config.featureToggles.scopeFilters;
if (!isEditingPanel) {
// This adds the precence indicators in enterprise
@@ -590,7 +593,12 @@ export function ToolbarActions({ dashboard }: Props) {
lastGroup = action.group;
}
- return {actionElements};
+ return (
+
+ {showScopesSelector && }
+ {actionElements}
+
+ );
}
function addDynamicActions(
diff --git a/public/app/features/scopes/internal/ScopesSelectorScene.tsx b/public/app/features/scopes/internal/ScopesSelectorScene.tsx
index e9e5f0166c8..1ca1237b545 100644
--- a/public/app/features/scopes/internal/ScopesSelectorScene.tsx
+++ b/public/app/features/scopes/internal/ScopesSelectorScene.tsx
@@ -3,6 +3,7 @@ import { isEqual } from 'lodash';
import { finalize, from, Subscription } from 'rxjs';
import { GrafanaTheme2 } from '@grafana/data';
+import { config } from '@grafana/runtime';
import {
SceneComponentProps,
SceneObjectBase,
@@ -13,6 +14,7 @@ import {
SceneObjectWithUrlSync,
} from '@grafana/scenes';
import { Button, Drawer, IconButton, Spinner, useStyles2 } from '@grafana/ui';
+import { useGrafana } from 'app/core/context/GrafanaContext';
import { t, Trans } from 'app/core/internationalization';
import { ScopesDashboardsScene } from './ScopesDashboardsScene';
@@ -277,7 +279,10 @@ export class ScopesSelectorScene extends SceneObjectBase) {
- const styles = useStyles2(getStyles);
+ const { chrome } = useGrafana();
+ const state = chrome.useState();
+ const menuDockedAndOpen = !state.chromeless && state.megaMenuDocked && state.megaMenuOpen;
+ const styles = useStyles2(getStyles, menuDockedAndOpen);
const {
dashboards: dashboardsRef,
nodes,
@@ -374,13 +379,16 @@ export function ScopesSelectorSceneRenderer({ model }: SceneComponentProps {
+const getStyles = (theme: GrafanaTheme2, menuDockedAndOpen: boolean) => {
return {
container: css({
- borderLeft: `1px solid ${theme.colors.border.weak}`,
display: 'flex',
flexDirection: 'row',
- paddingLeft: theme.spacing(2),
+ paddingLeft: menuDockedAndOpen ? theme.spacing(2) : 'unset',
+ ...(!config.featureToggles.singleTopNav && {
+ paddingLeft: theme.spacing(2),
+ borderLeft: `1px solid ${theme.colors.border.weak}`,
+ }),
}),
dashboards: css({
color: theme.colors.text.secondary,