Add ManagedGroups section to user page

src/app/(pages)/users/[user]/components/ManagedGroups/Table.tsx

@@ -0,0 +1,25 @@
+import Link from "@/components/Link";
+import { ManagedGroup } from "@/models/groups";
+
+type ManagedGroupsTableProps = {
+  managedGroups: ManagedGroup[];
+};
+
+export default function ManagedGroupsTable(
+  props: Readonly<ManagedGroupsTableProps>
+) {
+  const { managedGroups } = props;
+  return (
+    <table className="w-full table-auto rounded-lg">
+      <tbody>
+        {managedGroups.map(group => (
+          <tr key={group.id} className="tbl-tr">
+            <td className="tbl-td">
+              <Link href={`/groups/${group.id}`}>{group.name}</Link>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

src/app/(pages)/users/[user]/components/ManagedGroups/index.tsx

@@ -0,0 +1,23 @@
+import { User } from "@/models/scim";
+import { fetchManagedGroups } from "@/services/groups";
+import ManagedGroupsTable from "./Table";
+import { Section } from "@/components/Layout";
+
+type ManagedGroupsProps = {
+  user: User;
+};
+
+export default async function ManagedGroups(
+  props: Readonly<ManagedGroupsProps>
+) {
+  const { user } = props;
+  const { managedGroups } = await fetchManagedGroups(user.id);
+  if (managedGroups.length === 0) {
+    return null;
+  }
+  return (
+    <Section title="Managed Groups">
+      <ManagedGroupsTable managedGroups={managedGroups} />
+    </Section>
+  );
+}

src/app/(pages)/users/[user]/page.tsx

@@ -9,6 +9,7 @@ import { Groups } from "./components/Groups";
 import { LinkedAccounts } from "./components/LinkedAccounts";
 import SSHKeys from "./components/SSHKeys";
 import Attributes from "./components/Attributes";
+import ManagedGroups from "./components/ManagedGroups";
 
 type UserPageProps = {
   params: { user: string };
@@ -32,6 +33,7 @@ export default async function UserPage(props: Readonly<UserPageProps>) {
         <UserInfo user={user} isMe={isMe} />
         <Groups user={user} isAdmin={isAdmin} />
         <GroupRequests user={user} isMe={isMe} />
+        <ManagedGroups user={user} />
         <LinkedAccounts user={user} />
         <Certificates user={user} />
         <SSHKeys user={user} />

src/models/groups.ts

@@ -26,3 +26,19 @@ export interface GroupsSearchResponse {
   startIndex: number;
   Resources: Group[];
 }
+
+export interface ManagedGroup {
+  id: string;
+  name: string;
+  description?: string;
+  parent?: string;
+}
+
+export type UnmanagedGroup = ManagedGroup;
+
+export type ManagedGroupResponse = {
+  id: string;
+  username: string;
+  managedGroups: ManagedGroup[];
+  unmanagedGroups: ManagedGroup[];
+};

src/services/groups/index.ts

@@ -1,5 +1,9 @@
 "use server";
-import { Group, GroupsSearchResponse } from "@/models/groups";
+import {
+  Group,
+  GroupsSearchResponse,
+  ManagedGroupResponse,
+} from "@/models/groups";
 import { authFetch, getItem } from "@/utils/fetch";
 import getConfig from "@/utils/config";
 import { Paginated } from "@/models/pagination";
@@ -249,3 +253,8 @@ export const revokeGroupManager = async (groupId: string, userId: string) => {
     });
   }
 };
+
+export async function fetchManagedGroups(userId: string) {
+  const url = `${BASE_URL}/iam/account/${userId}/managed-groups`;
+  return getItem<ManagedGroupResponse>(url);
+}