SingleTopNav: Move org switcher into Megamenu header (#94053)

move org switcher into megamenu header

public/app/core/components/AppChrome/MegaMenu/MegaMenuHeader.tsx

@@ -1,11 +1,12 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { IconButton, Stack, Text, ToolbarButton, useTheme2 } from '@grafana/ui';
+import { IconButton, Stack, ToolbarButton, useTheme2 } from '@grafana/ui';
 import { useGrafana } from 'app/core/context/GrafanaContext';
 import { t } from 'app/core/internationalization';
 
 import { Branding } from '../../Branding/Branding';
+import { OrganizationSwitcher } from '../OrganizationSwitcher/OrganizationSwitcher';
 import { TOP_BAR_LEVEL_HEIGHT } from '../types';
 
 export interface Props {
@@ -26,7 +27,7 @@ export function MegaMenuHeader({ handleMegaMenu, handleDockedMenu, onClose }: Pr
         <ToolbarButton narrow onClick={handleMegaMenu}>
           <Branding.MenuLogo className={styles.img} />
         </ToolbarButton>
-        <Text truncate>{Branding.AppTitle}</Text>
+        <OrganizationSwitcher />
       </Stack>
       <IconButton
         id="dock-menu-button"

public/app/core/components/AppChrome/OrganizationSwitcher/OrganizationSwitcher.tsx

@@ -1,13 +1,15 @@
 import { useEffect, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { locationService } from '@grafana/runtime';
-import { useTheme2 } from '@grafana/ui';
+import { config, locationService } from '@grafana/runtime';
+import { Text, useTheme2 } from '@grafana/ui';
 import { useMediaQueryChange } from 'app/core/hooks/useMediaQueryChange';
 import { contextSrv } from 'app/core/services/context_srv';
 import { getUserOrganizations, setUserOrganization } from 'app/features/org/state/actions';
 import { useDispatch, useSelector, UserOrg } from 'app/types';
 
+import { Branding } from '../../Branding/Branding';
+
 import { OrganizationPicker } from './OrganizationPicker';
 import { OrganizationSelect } from './OrganizationSelect';
 
@@ -31,17 +33,23 @@ export function OrganizationSwitcher() {
 
   const breakpoint = theme.breakpoints.values.sm;
 
-  const [isSmallScreen, setIsSmallScreen] = useState(!window.matchMedia(`(min-width: ${breakpoint}px)`).matches);
+  const [isSmallScreen, setIsSmallScreen] = useState(
+    !config.featureToggles.singleTopNav && !window.matchMedia(`(min-width: ${breakpoint}px)`).matches
+  );
 
   useMediaQueryChange({
     breakpoint,
     onChange: (e) => {
-      setIsSmallScreen(!e.matches);
+      setIsSmallScreen(!config.featureToggles.singleTopNav && !e.matches);
     },
   });
 
   if (orgs?.length <= 1) {
-    return null;
+    if (config.featureToggles.singleTopNav) {
+      return <Text truncate>{Branding.AppTitle}</Text>;
+    } else {
+      return null;
+    }
   }
 
   const Switcher = isSmallScreen ? OrganizationPicker : OrganizationSelect;

public/app/core/components/AppChrome/TopBar/SingleTopBar.tsx

@@ -16,7 +16,6 @@ import { Breadcrumbs } from '../../Breadcrumbs/Breadcrumbs';
 import { buildBreadcrumbs } from '../../Breadcrumbs/utils';
 import { enrichHelpItem } from '../MegaMenu/utils';
 import { NewsContainer } from '../News/NewsContainer';
-import { OrganizationSwitcher } from '../OrganizationSwitcher/OrganizationSwitcher';
 import { QuickAdd } from '../QuickAdd/QuickAdd';
 import { TOP_BAR_LEVEL_HEIGHT } from '../types';
 
@@ -59,7 +58,6 @@ export const SingleTopBar = memo(function SingleTopBar({
           </ToolbarButton>
         )}
         <Breadcrumbs breadcrumbs={breadcrumbs} className={styles.breadcrumbsWrapper} />
-        <OrganizationSwitcher />
         <ScopesSelector />
       </TopSearchBarSection>