TopNav: Fixes the invite user page navId / missing section nav and design of user list page (#60701)

public/app/features/admin/UserListPage.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React, { useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { RadioButtonGroup, Field, useStyles2 } from '@grafana/ui';
+import { useStyles2, TabsBar, Tab } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
 
 import { Page } from '../../core/components/Page/Page';
@@ -11,11 +11,6 @@ import { UsersListPageContent } from '../users/UsersListPage';
 
 import { UserListAdminPageContent } from './UserListAdminPage';
 
-const views = [
-  { value: 'admin', label: 'All organisations' },
-  { value: 'org', label: 'This organisation' },
-];
-
 export default function UserListPage() {
   const hasAccessToAdminUsers = contextSrv.hasAccess(AccessControlAction.UsersRead, contextSrv.isGrafanaAdmin);
   const hasAccessToOrgUsers = contextSrv.hasPermission(AccessControlAction.OrgUsersRead);
@@ -34,19 +29,18 @@ export default function UserListPage() {
   return (
     <Page navId={'global-users'}>
       {showToggle && (
-        <Field label={'Display list of users for'} className={styles.container}>
+        <TabsBar className={styles.tabsMargin}>
-          <RadioButtonGroup options={views} onChange={setView} value={view} />
+          <Tab label="All users" active={view === 'admin'} onChangeTab={() => setView('admin')} />
-        </Field>
+          <Tab label="Organization users" active={view === 'org'} onChangeTab={() => setView('org')} />
+        </TabsBar>
       )}
       {view === 'admin' ? <UserListAdminPageContent /> : <UsersListPageContent />}
     </Page>
   );
 }
 
-const getStyles = (theme: GrafanaTheme2) => {
+const getStyles = (theme: GrafanaTheme2) => ({
-  return {
+  tabsMargin: css({
-    container: css`
+    marginBottom: theme.spacing(3),
-      margin: ${theme.spacing(2, 0)};
+  }),
-    `,
+});
-  };
-};

public/app/features/org/UserInvitePage.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { config } from '@grafana/runtime';
 import { Page } from 'app/core/components/Page/Page';
 import { contextSrv } from 'app/core/core';
 
@@ -13,8 +14,10 @@ export function UserInvitePage() {
     </>
   );
 
+  const navId = config.featureToggles.topnav ? 'global-users' : 'users';
+
   return (
-    <Page navId="users" pageNav={{ text: 'Invite user' }} subTitle={subTitle}>
+    <Page navId={navId} pageNav={{ text: 'Invite user' }} subTitle={subTitle}>
       <Page.Contents>
         <Page.OldNavOnly>
           <h3 className="page-sub-heading">Invite user</h3>