From 14c2209b33d6c9d8178832895af4dedc1496f8d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 28 Dec 2022 19:29:42 +0100
Subject: [PATCH] TopNav: Fixes the invite user page navId / missing section
 nav and design of user list page  (#60701)

---
 public/app/features/admin/UserListPage.tsx | 26 +++++++++-------------
 public/app/features/org/UserInvitePage.tsx |  5 ++++-
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/public/app/features/admin/UserListPage.tsx b/public/app/features/admin/UserListPage.tsx
index fa1cb2ebaeb..e3bbbb65ff7 100644
--- a/public/app/features/admin/UserListPage.tsx
+++ b/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}>
-          <RadioButtonGroup options={views} onChange={setView} value={view} />
-        </Field>
+        <TabsBar className={styles.tabsMargin}>
+          <Tab label="All users" active={view === 'admin'} onChangeTab={() => setView('admin')} />
+          <Tab label="Organization users" active={view === 'org'} onChangeTab={() => setView('org')} />
+        </TabsBar>
       )}
       {view === 'admin' ? <UserListAdminPageContent /> : <UsersListPageContent />}
     </Page>
   );
 }
 
-const getStyles = (theme: GrafanaTheme2) => {
-  return {
-    container: css`
-      margin: ${theme.spacing(2, 0)};
-    `,
-  };
-};
+const getStyles = (theme: GrafanaTheme2) => ({
+  tabsMargin: css({
+    marginBottom: theme.spacing(3),
+  }),
+});
diff --git a/public/app/features/org/UserInvitePage.tsx b/public/app/features/org/UserInvitePage.tsx
index 375065a6392..74e7d1f7e02 100644
--- a/public/app/features/org/UserInvitePage.tsx
+++ b/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>