Transition processes page to server components

src/management-system-v2/app/(dashboard)/general-settings/page.tsx

@@ -1,4 +1,4 @@
-import Auth from '@/lib/serverAuthComponents';
+import Auth from '@/components/auth';
 import GeneralSettingsPage from './general-settings-page';
 
 export default Auth(

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

@@ -1,4 +1,4 @@
-import Auth from '@/lib/serverAuthComponents';
+import Auth from '@/components/auth';
 import RolePage from './role-page';
 
 export default Auth(

src/management-system-v2/app/(dashboard)/iam/roles/header-actions.tsx

@@ -7,7 +7,7 @@ import { FC, ReactNode, useEffect, useState } from 'react';
 import dayjs from 'dayjs';
 import germanLocale from 'antd/es/date-picker/locale/de_DE';
 import { useRouter } from 'next/navigation';
-import { AuthCan } from '@/lib/clientAuthComponents';
+import { AuthCan } from '@/components/auth-can';
 
 type PostRoleKeys = 'name' | 'description' | 'expiration';
 

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

@@ -1,4 +1,4 @@
-import Auth from '@/lib/serverAuthComponents';
+import Auth from '@/components/auth';
 import RolesPage from './role-page';
 
 export default Auth(

src/management-system-v2/app/(dashboard)/iam/users/header-actions.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { AuthCan } from '@/lib/clientAuthComponents';
+import { AuthCan } from '@/components/auth-can';
 import { ApiRequestBody, usePostAsset } from '@/lib/fetch-data';
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, Form, App, Input, Modal } from 'antd';

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

@@ -1,4 +1,4 @@
-import Auth from '@/lib/serverAuthComponents';
+import Auth from '@/components/auth';
 import UsersPage from './users-page';
 
 export default Auth(

src/management-system-v2/app/(dashboard)/processes/[processId]/_page.tsx

@@ -23,7 +23,7 @@ import useModelerStateStore from '@/lib/use-modeler-state-store';
 import { createNewProcessVersion } from '@/lib/helpers/processVersioning';
 import VersionCreationButton from '@/components/version-creation-button';
 import ProcessCreationButton from '@/components/process-creation-button';
-import { AuthCan } from '@/lib/clientAuthComponents';
+import { AuthCan } from '@/components/auth-can';
 
 type ProcessProps = {
   params: { processId: string };

src/management-system-v2/app/(dashboard)/processes/[processId]/page.tsx

@@ -1,4 +1,4 @@
-import Auth from '@/lib/serverAuthComponents';
+import Auth from '@/components/auth';
 import Processes from './_page';
 
 export default Auth(

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

@@ -0,0 +1,14 @@
+import Content from '@/components/content';
+import { Skeleton, Space } from 'antd';
+
+const ProcessesSkeleton = async () => {
+  return (
+    <Content title="Processes">
+      <Space direction="vertical" size="large" style={{ display: 'flex', height: '100%' }}>
+        <Skeleton active />
+      </Space>
+    </Content>
+  );
+};
+
+export default ProcessesSkeleton;

src/management-system-v2/app/(dashboard)/processes/page.tsx

@@ -1,15 +1,19 @@
-import { FC } from 'react';
 import Processes from '@/components/processes';
 import Content from '@/components/content';
 import { Result, Space } from 'antd';
 import NotLoggedInFallback from './not-logged-in-fallback';
-import Auth from '@/lib/serverAuthComponents';
+import { getProcesses } from '@/lib/data/legacy/process';
+import Auth, { getCurrentUser } from '@/components/auth';
+
+const ProcessesPage = async () => {
+  const { ability } = await getCurrentUser();
+  const processes = await getProcesses(ability);
+  //await new Promise((resolve) => setTimeout(resolve, 10000));
 
-const ProcessesPage: FC = () => {
   return (
     <Content title="Processes">
       <Space direction="vertical" size="large" style={{ display: 'flex', height: '100%' }}>
-        <Processes />
+        <Processes processes={processes} />
       </Space>
     </Content>
   );

src/management-system-v2/app/(dashboard)/profile/page.tsx

@@ -1,4 +1,4 @@
-import Auth from '@/lib/serverAuthComponents';
+import Auth from '@/components/auth';
 import UserProfile from './user-profile';
 import Content from '@/components/content';
 

src/management-system-v2/app/(dashboard)/projects/page.tsx

@@ -3,7 +3,7 @@ import { FC } from 'react';
 import ProjectStats from './project-stats';
 import Content from '@/components/content';
 import { Space } from 'antd';
-import Auth from '@/lib/serverAuthComponents';
+import Auth from '@/components/auth';
 
 const Projects: FC = () => {
   return (

src/management-system-v2/components/app.tsx

@@ -6,7 +6,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { App as AntDesignApp } from 'antd';
 import { SessionProvider } from 'next-auth/react';
-import { FetchAbility } from '@/lib/clientAuthComponents';
+import { FetchAbility } from './auth-can';
 
 const queryClient = new QueryClient();
 

src/management-system-v2/lib/clientAuthComponents.tsx → src/management-system-v2/components/auth-can.tsx

@@ -1,14 +1,14 @@
 'use client';
 
 import { ReactElement, ReactNode, useEffect, useMemo, FC, PropsWithChildren } from 'react';
-import { useAbilityStore } from './abilityStore';
+import { useAbilityStore } from '@/lib/abilityStore';
 import { useSession } from 'next-auth/react';
 import { Route } from 'next';
-import { AbilityRule, ResourceActionType } from './ability/caslAbility';
+import { AbilityRule, ResourceActionType } from '@/lib/ability/caslAbility';
 import { PackRule } from '@casl/ability/extra';
-import { useCsrfTokenStore } from './csrfTokenStore';
+import { useCsrfTokenStore } from '@/lib/csrfTokenStore';
 import { useRouter } from 'next/navigation';
-import Ability from './ability/abilityHelper';
+import Ability from '@/lib/ability/abilityHelper';
 
 export type AuthCanProps = {
   action: ResourceActionType | ResourceActionType[];
@@ -41,6 +41,9 @@ export const FetchAbility = () => {
   return <></>;
 };
 
+// TODO: Weil client side werden evtl. sensible Daten an den Client geschickt.
+// Auf server side ändern und eigene component für client side die aber nur für
+// buttons etc. benutzt werden sollte
 export const AuthCan: FC<PropsWithChildren<AuthCanProps>> = ({
   action,
   resource,

src/management-system-v2/components/auth.tsx

@@ -0,0 +1,36 @@
+import 'server-only';
+
+import { ComponentProps, ComponentType, cache } from 'react';
+import { getServerSession } from 'next-auth/next';
+import { redirect } from 'next/navigation';
+import { nextAuthOptions } from '@/app/api/auth/[...nextauth]/route';
+import { AuthCan, AuthCanProps } from './auth-can';
+import { getAbilityForUser } from '@/lib/authorization/authorization';
+
+export const getCurrentUser = cache(async () => {
+  const session = await getServerSession(nextAuthOptions);
+  const ability = await getAbilityForUser(session?.user.id || '');
+
+  return { session, ability };
+});
+
+// HOC for server-side auth checking
+const Auth = <P extends {}>(authOptions: AuthCanProps, Component: ComponentType<P>) => {
+  async function WrappedComponent(props: ComponentProps<ComponentType<P>>) {
+    const { session } = await getCurrentUser();
+
+    if (!session && authOptions.fallbackRedirect) {
+      redirect(authOptions.fallbackRedirect);
+    }
+
+    return (
+      <AuthCan {...authOptions}>
+        <Component {...props} />
+      </AuthCan>
+    );
+  }
+
+  return WrappedComponent;
+};
+
+export default Auth;

src/management-system-v2/components/process-creation-button.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import React, { ReactNode, useState } from 'react';
-
+import React, { ReactNode, useState, useTransition } from 'react';
 import { Button } from 'antd';
 import type { ButtonProps } from 'antd';
 import ProcessModal from './process-modal';
-import { usePostAsset } from '@/lib/fetch-data';
 import { createProcess } from '@/lib/helpers/processHelpers';
+import { addProcess } from '@/lib/data/processes';
+import { useRouter } from 'next/navigation';
 
 type ProcessCreationButtonProps = ButtonProps & {
   createProcess?: (values: { name: string; description?: string }) => any;
@@ -24,17 +24,19 @@ const ProcessCreationButton: React.FC<ProcessCreationButtonProps> = ({
   ...props
 }) => {
   const [isProcessModalOpen, setIsProcessModalOpen] = useState(false);
-  const { mutateAsync: postProcess } = usePostAsset('/process');
+  const [isPending, startTransition] = useTransition();
+  const router = useRouter();
 
   const createNewProcess = async (values: { name: string; description?: string }) => {
     const { metaInfo, bpmn } = await createProcess(values);
-    try {
-      await postProcess({
-        body: { bpmn: bpmn, departments: [] },
-      });
-    } catch (err) {
-      console.log(err);
-    }
+    startTransition(async () => {
+      try {
+        await addProcess({ bpmn: bpmn, departments: [] });
+      } catch (error) {
+        console.error(error);
+      }
+      router.refresh();
+    });
   };
 
   return (

src/management-system-v2/components/process-delete-single.tsx

@@ -1,8 +1,19 @@
 import { Button, Checkbox, Modal } from 'antd';
-import React, { Dispatch, FC, Key, SetStateAction, useCallback, useState } from 'react';
+import React, {
+  Dispatch,
+  FC,
+  Key,
+  SetStateAction,
+  startTransition,
+  useCallback,
+  useState,
+  useTransition,
+} from 'react';
 import styles from './process-delete.module.scss';
 import { useUserPreferences } from '@/lib/user-preferences';
 import { useDeleteAsset, useInvalidateAsset } from '@/lib/fetch-data';
+import { deleteProcesses } from '@/lib/data/processes';
+import { useRouter } from 'next/navigation';
 
 type ProcessDeleteModalType = {
   setDeleteProcessIds: Dispatch<SetStateAction<string[]>> | Dispatch<SetStateAction<Key[]>>;
@@ -16,6 +27,8 @@ const ProcessDeleteSingleModal: FC<ProcessDeleteModalType> = ({
   setSelection,
 }) => {
   const refreshData = useInvalidateAsset('/process');
+  const [isPending, startTransition] = useTransition();
+  const router = useRouter();
 
   const [loading, setLoading] = useState(false);
 
@@ -29,18 +42,14 @@ const ProcessDeleteSingleModal: FC<ProcessDeleteModalType> = ({
     },
   });
 
-  const deleteSelectedProcesses = useCallback(() => {
-    processKeys.forEach((key: React.Key) => {
-      deleteProcess({
-        params: {
-          path: {
-            definitionId: key as string,
-          },
-        },
-        parseAs: 'text',
-      });
+  const deleteSelectedProcesses = () => {
+    startTransition(async () => {
+      await deleteProcesses(processKeys as string[]);
+      setDeleteProcessIds([]);
+      setSelection([]);
+      router.refresh();
     });
-  }, [deleteProcess, processKeys]);
+  };
 
   return (
     <>

src/management-system-v2/components/process-list.tsx

@@ -33,7 +33,7 @@ import { useDeleteAsset, useInvalidateAsset, usePostAsset } from '@/lib/fetch-da
 import { useUserPreferences } from '@/lib/user-preferences';
 import ProcessDeleteSingleModal from './process-delete-single';
 import { useAbilityStore } from '@/lib/abilityStore';
-import { AuthCan } from '@/lib/clientAuthComponents';
+import { AuthCan } from '@/components/auth-can';
 import { ProcessListProcess } from './processes';
 
 type ProcessListProps = PropsWithChildren<{