Move auth to ms2

src/management-system-v2/app/(dashboard)/iam/error.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { Result } from 'antd';
+
+const Error = () => <Result status="error" title="Something went wrong" />;
+
+export default Error;

src/management-system-v2/app/(dashboard)/iam/loading.tsx

@@ -0,0 +1,19 @@
+import Content from '@/components/content';
+import { Space, Spin } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons';
+
+const Loading = () => {
+  return (
+    <Content>
+      <Space
+        direction="vertical"
+        size="large"
+        style={{ display: 'flex', textAlign: 'center', marginTop: '2rem' }}
+      >
+        <Spin indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />} />
+      </Space>
+    </Content>
+  );
+};
+
+export default Loading;

src/management-system-v2/app/(dashboard)/iam/roles/[roleId]/page.tsx

@@ -1,11 +1,70 @@
-import Auth from '@/components/auth';
-import RolePage from './role-page';
+import Auth, { getCurrentUser } from '@/components/auth';
+import Content from '@/components/content';
+import { getRoleById } from '@/lib/data/legacy/iam/roles';
+import { Button, Card, Result, Space, Tabs } from 'antd';
+import { LeftOutlined } from '@ant-design/icons';
+import Link from 'next/link';
+import { ComponentProps } from 'react';
+import RoleGeneralData from './roleGeneralData';
+import RolePermissions from './rolePermissions';
+import RoleMembers from './role-members';
+
+type Items = ComponentProps<typeof Tabs>['items'];
+
+const Page = async ({ params: { roleId } }: { params: { roleId: string } }) => {
+  const { ability } = await getCurrentUser();
+  const role = getRoleById(roleId, ability);
+
+  const items: Items = role
+    ? [
+        {
+          key: 'generalData',
+          label: 'General Data',
+          children: <RoleGeneralData role={role} />,
+        },
+        { key: 'permissions', label: 'Permissions', children: <RolePermissions role={role} /> },
+        {
+          key: 'members',
+          label: 'Manage Members',
+          children: <RoleMembers role={role} />,
+        },
+      ]
+    : [];
+
+  if (!role)
+    return (
+      <Content>
+        <Result status="404" title="Role not found" />
+      </Content>
+    );
+
+  return (
+    <Content
+      title={
+        <Space>
+          <Link href="/iam/roles">
+            <Button icon={<LeftOutlined />} type="text">
+              Roles
+            </Button>
+          </Link>
+          {role?.name}
+        </Space>
+      }
+    >
+      <div style={{ maxWidth: '800px', margin: 'auto' }}>
+        <Card>
+          <Tabs items={items} />
+        </Card>
+      </div>
+    </Content>
+  );
+};
 
 export default Auth(
   {
     action: ['view', 'manage'],
     resource: 'Role',
     fallbackRedirect: '/',
   },
-  RolePage,
+  Page,
 );

src/management-system-v2/app/(dashboard)/iam/roles/[roleId]/role-members.tsx

@@ -2,44 +2,42 @@
 
 import { FC, useMemo, useState } from 'react';
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
-import {
-  ApiData,
-  useDeleteAsset,
-  useGetAsset,
-  useInvalidateAsset,
-  usePostAsset,
-} from '@/lib/fetch-data';
+import { ApiData, useGetAsset } from '@/lib/fetch-data';
 import UserList, { UserListProps } from '@/components/user-list';
 import { Button, Modal, Tooltip } from 'antd';
 import ConfirmationButton from '@/components/confirmation-button';
+import { addRoleMappings, deleteRoleMappings } from '@/lib/data/role-mappings';
+import { useRouter } from 'next/navigation';
 
 type Role = ApiData<'/roles', 'get'>[number];
+type Users = ApiData<'/users', 'get'>;
 
 const AddUserModal: FC<{ role: Role; open: boolean; close: () => void }> = ({
   role,
   open,
   close,
 }) => {
-  const { data: users, isLoading: isLoadingUsers } = useGetAsset('/users', {});
-  const invalidateRole = useInvalidateAsset('/roles/{id}', { params: { path: { id: role.id } } });
-  const { mutateAsync, isLoading: isLoadingMutation } = usePostAsset('/role-mappings', {
-    onSuccess: invalidateRole,
-  });
+  const [loading, setLoading] = useState(false);
+  const { data: users, refetch: refetchUsers, isLoading: usersLoading } = useGetAsset('/users', {});
+  const router = useRouter();
 
   type AddUserParams = Parameters<NonNullable<UserListProps['selectedRowActions']>>;
   const addUsers = async (users: AddUserParams[2], clearIds?: AddUserParams[1]) => {
     if (clearIds) clearIds();
-    await mutateAsync({
-      body: users.map((user) => ({
+    setLoading(true);
+    await addRoleMappings(
+      users.map((user) => ({
         userId: user.id,
         roleId: role.id,
         email: user.email.value,
         lastName: user.lastName.value,
         firstName: user.firstName.value,
         username: user.username.value,
       })),
-      parseAs: 'text',
-    });
+    );
+    setLoading(false);
+    refetchUsers();
+    router.refresh();
   };
 
   const usersNotInRole = useMemo(() => {
@@ -60,7 +58,7 @@ const AddUserModal: FC<{ role: Role; open: boolean; close: () => void }> = ({
     >
       <UserList
         users={usersNotInRole}
-        loading={isLoadingUsers || isLoadingMutation}
+        loading={loading || usersLoading}
         columns={(clearSelected, hoveredId, selectedRowKeys) => [
           {
             dataIndex: 'id',
@@ -88,34 +86,33 @@ const AddUserModal: FC<{ role: Role; open: boolean; close: () => void }> = ({
   );
 };
 
-const RoleMembers: FC<{ role: Role; isLoadingRole?: boolean }> = ({ role, isLoadingRole }) => {
+const RoleMembers: FC<{ role: Role }> = ({ role }) => {
   const [addUserModalOpen, setAddUserModalOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
 
-  const refetchRole = useInvalidateAsset('/roles/{id}', { params: { path: { id: role.id } } });
-  const { mutateAsync: deleteUser, isLoading: isLoadingDelete } = useDeleteAsset(
-    '/role-mappings/users/{userId}/roles/{roleId}',
-    { onSuccess: refetchRole },
-  );
-
-  async function deleteMembers(userIds: string[], clearIds?: () => void) {
-    if (clearIds) clearIds();
+  async function deleteMembers(userIds: string[], clearIds: () => void) {
+    clearIds();
+    setLoading(true);
 
-    await Promise.allSettled(
-      userIds.map((userId) =>
-        deleteUser({
-          parseAs: 'text',
-          params: { path: { roleId: role.id, userId: userId } },
-        }),
-      ),
+    await deleteRoleMappings(
+      userIds.map((userId) => ({
+        roleId: role.id,
+        userId: userId,
+      })),
     );
+
+    setLoading(false);
+    router.refresh();
   }
 
   return (
     <>
       <AddUserModal role={role} open={addUserModalOpen} close={() => setAddUserModalOpen(false)} />
+
       <UserList
         users={role.members.map((member) => ({ ...member, id: member.userId }))}
-        loading={isLoadingDelete || isLoadingRole}
+        loading={loading}
         columns={(clearSelected, hoveredId, selectedRowKeys) => [
           {
             dataIndex: 'id',

src/management-system-v2/app/(dashboard)/iam/roles/[roleId]/roleGeneralData.tsx

@@ -1,25 +1,22 @@
 'use client';
 
 import { toCaslResource } from '@/lib/ability/caslAbility';
-import { useGetAsset, usePutAsset } from '@/lib/fetch-data';
-import { Alert, App, Button, DatePicker, Form, Input, Spin } from 'antd';
+import { ApiData } from '@/lib/fetch-data';
+import { Alert, App, Button, DatePicker, Form, Input } from 'antd';
 import { FC, useEffect, useState } from 'react';
 import dayjs from 'dayjs';
 import germanLocale from 'antd/es/date-picker/locale/de_DE';
 import { useAbilityStore } from '@/lib/abilityStore';
+import { updateRole } from '@/lib/data/roles';
+import { useRouter } from 'next/navigation';
 
-const RoleGeneralData: FC<{ roleId: string }> = ({ roleId }) => {
+type Role = ApiData<'/roles/{id}', 'get'>;
+
+const RoleGeneralData: FC<{ role: Role }> = ({ role: _role }) => {
   const { message } = App.useApp();
   const ability = useAbilityStore((store) => store.ability);
   const [form] = Form.useForm();
-
-  const { data, isLoading, error } = useGetAsset('/roles/{id}', {
-    params: { path: { id: roleId } },
-  });
-
-  const { mutateAsync: updateRole, isLoading: putLoading } = usePutAsset('/roles/{id}', {
-    onError: () => message.open({ type: 'error', content: 'Something went wrong' }),
-  });
+  const router = useRouter();
 
   const [submittable, setSubmittable] = useState(false);
   const values = Form.useWatch('name', form);
@@ -35,9 +32,7 @@ const RoleGeneralData: FC<{ roleId: string }> = ({ roleId }) => {
     );
   }, [form, values]);
 
-  if (isLoading || error || !data) return <Spin />;
-
-  const role = toCaslResource('Role', data);
+  const role = toCaslResource('Role', _role);
 
   async function submitChanges(values: Record<string, any>) {
     if (typeof values.expirationDayJs === 'object') {
@@ -46,15 +41,13 @@ const RoleGeneralData: FC<{ roleId: string }> = ({ roleId }) => {
     }
 
     try {
-      await updateRole({
-        params: { path: { id: roleId } },
-        body: values,
-      });
-
-      // success message has to go here, or else the mutation will stop loading when the message
-      // disappears
+      const result = await updateRole(role.id, values);
+      if (result && 'error' in result) throw new Error();
+      router.refresh();
       message.open({ type: 'success', content: 'Role updated' });
-    } catch (e) {}
+    } catch (_) {
+      message.open({ type: 'error', content: 'Something went wrong' });
+    }
   }
 
   return (
@@ -93,7 +86,7 @@ const RoleGeneralData: FC<{ roleId: string }> = ({ roleId }) => {
       </Form.Item>
 
       <Form.Item>
-        <Button type="primary" htmlType="submit" loading={putLoading} disabled={!submittable}>
+        <Button type="primary" htmlType="submit" disabled={!submittable}>
           Update Role
         </Button>
       </Form.Item>