From 40c591031122be43508c19c9623e95d92006a1e3 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Mon, 20 Jan 2025 13:18:31 +1100
Subject: [PATCH] Cleanup UserManagementPanel (#8914)

- Split items using <Accordion />
---
 .../Index/Settings/AdminCenter/Index.tsx      |  2 +-
 .../AdminCenter/UserManagementPanel.tsx       | 74 +++++++++----------
 2 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx
index 2df3d795be..c8d81c1b06 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx
@@ -104,7 +104,7 @@ export default function AdminCenter() {
     return [
       {
         name: 'user',
-        label: t`Users`,
+        label: t`User Management`,
         icon: <IconUsersGroup />,
         content: <UserManagementPanel />
       },
diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/UserManagementPanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/UserManagementPanel.tsx
index 7b231af0ee..bb1bc8d59c 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/UserManagementPanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/UserManagementPanel.tsx
@@ -1,46 +1,46 @@
-import { Trans } from '@lingui/macro';
-import { Anchor, Divider, Group, Stack, Text, Title } from '@mantine/core';
-import { Link } from 'react-router-dom';
+import { t } from '@lingui/macro';
+import { Accordion } from '@mantine/core';
 
+import { StylishText } from '../../../../components/items/StylishText';
 import { GlobalSettingList } from '../../../../components/settings/SettingList';
 import { GroupTable } from '../../../../tables/settings/GroupTable';
 import { UserTable } from '../../../../tables/settings/UserTable';
 
 export default function UserManagementPanel() {
   return (
-    <Stack gap='xs'>
-      <Title order={5}>
-        <Trans>Users</Trans>
-      </Title>
-      <UserTable />
-
-      <Divider />
-
-      <Title order={5}>
-        <Trans>Groups</Trans>
-      </Title>
-      <GroupTable />
-
-      <Divider />
-
-      <Stack gap={0}>
-        <Text>
-          <Trans>Settings</Trans>
-        </Text>
-        <Group>
-          <Text c='dimmed'>
-            <Trans>
-              Select settings relevant for user lifecycle. More available in
-            </Trans>
-          </Text>
-          <Anchor component={Link} to={'/settings/system'}>
-            <Trans>System Settings</Trans>
-          </Anchor>
-        </Group>
-      </Stack>
-      <GlobalSettingList
-        keys={['LOGIN_ENABLE_REG', 'SIGNUP_GROUP', 'LOGIN_ENABLE_SSO_REG']}
-      />
-    </Stack>
+    <>
+      <Accordion multiple defaultValue={['users']}>
+        <Accordion.Item value='users' key='users'>
+          <Accordion.Control>
+            <StylishText size='lg'>{t`Users`}</StylishText>
+          </Accordion.Control>
+          <Accordion.Panel>
+            <UserTable />
+          </Accordion.Panel>
+        </Accordion.Item>
+        <Accordion.Item value='groups' key='groups'>
+          <Accordion.Control>
+            <StylishText size='lg'>{t`Groups`}</StylishText>
+          </Accordion.Control>
+          <Accordion.Panel>
+            <GroupTable />
+          </Accordion.Panel>
+        </Accordion.Item>
+        <Accordion.Item value='settings' key='settings'>
+          <Accordion.Control>
+            <StylishText size='lg'>{t`Settings`}</StylishText>
+          </Accordion.Control>
+          <Accordion.Panel>
+            <GlobalSettingList
+              keys={[
+                'LOGIN_ENABLE_REG',
+                'SIGNUP_GROUP',
+                'LOGIN_ENABLE_SSO_REG'
+              ]}
+            />
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion>
+    </>
   );
 }