diff --git a/src/frontend/src/pages/core/UserDetail.tsx b/src/frontend/src/pages/core/UserDetail.tsx
index 469a5f8861..5fa15234de 100644
--- a/src/frontend/src/pages/core/UserDetail.tsx
+++ b/src/frontend/src/pages/core/UserDetail.tsx
@@ -1,5 +1,5 @@
import { t } from '@lingui/core/macro';
-import { Badge, Grid, Skeleton, Stack } from '@mantine/core';
+import { Badge, Group, Skeleton, Stack } from '@mantine/core';
import { IconInfoCircle } from '@tabler/icons-react';
import { type ReactNode, useMemo } from 'react';
import { useParams } from 'react-router-dom';
@@ -34,6 +34,8 @@ export default function UserDetail() {
pk: id
});
+ const userGroups: any[] = useMemo(() => instance?.groups ?? [], [instance]);
+
const detailsPanel = useMemo(() => {
if (instanceQuery.isFetching) {
return ;
@@ -73,6 +75,44 @@ export default function UserDetail() {
];
const tr: DetailsField[] = [
+ {
+ type: 'boolean',
+ name: 'is_active',
+ label: t`Active`,
+ icon: 'info'
+ },
+ {
+ type: 'boolean',
+ name: 'is_staff',
+ label: t`Staff`,
+ icon: 'info'
+ },
+ {
+ type: 'boolean',
+ name: 'is_superuser',
+ label: t`Superuser`,
+ icon: 'info'
+ },
+ {
+ type: 'text',
+ name: 'groups',
+ label: t`Groups`,
+ icon: 'group',
+ copy: false,
+ hidden: !userGroups,
+ value_formatter: () => {
+ return (
+
+ {userGroups?.map((group) => (
+ {group.name}
+ ))}
+
+ );
+ }
+ }
+ ];
+
+ const br: DetailsField[] = [
{
type: 'text',
name: 'displayname',
@@ -88,12 +128,7 @@ export default function UserDetail() {
icon: 'info',
hidden: !instance.position
},
- {
- type: 'boolean',
- name: 'is_active',
- label: t`Active`,
- icon: 'info'
- },
+
{
type: 'text',
name: 'contact',
@@ -127,19 +162,24 @@ export default function UserDetail() {
}
];
+ const hasProfile =
+ instance.displayname ||
+ instance.position ||
+ instance.contact ||
+ instance.organisation ||
+ instance.status ||
+ instance.location;
+
return (
-
-
-
-
-
- {settings.isSet('DISPLAY_PROFILE_INFO') && (
-
+
+
+ {hasProfile && settings.isSet('DISPLAY_PROFILE_INFO') && (
+
)}
);
- }, [instance, instanceQuery]);
+ }, [instance, userGroups, instanceQuery]);
const userPanels: PanelType[] = useMemo(() => {
return [