SingleTopNav: Move scopes selector to second bar (#94186)

move scopes selector to second bar

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({
           </ToolbarButton>
         )}
         <Breadcrumbs breadcrumbs={breadcrumbs} className={styles.breadcrumbsWrapper} />
-        <ScopesSelector />
       </Stack>
 
       <Stack gap={0.5} alignItems="center">

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 <ToolbarButtonRow alignment="right">{actionElements}</ToolbarButtonRow>;
+  return (
+    <Stack flex={1} minWidth={0} justifyContent={showScopesSelector ? 'space-between' : 'flex-end'}>
+      {showScopesSelector && <ScopesSelector />}
+      <ToolbarButtonRow alignment="right">{actionElements}</ToolbarButtonRow>
+    </Stack>
+  );
 }
 
 function addDynamicActions(

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<ScopesSelectorSceneStat
 }
 
 export function ScopesSelectorSceneRenderer({ model }: SceneComponentProps<ScopesSelectorScene>) {
-  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<Scope
   );
 }
 
-const getStyles = (theme: GrafanaTheme2) => {
+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,