ms2/bump nextjs 15

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   //this is the project root dir, eslint will not include parent config files
   root: true,
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   parserOptions: {
     ecmaVersion: 8,
   },

package.json

@@ -78,6 +78,7 @@
   "devDependencies": {
     "@babel/core": "^7.5.0",
     "@babel/eslint-plugin": "7.19.1",
+    "@babel/eslint-parser": "7.28.5",
     "@babel/plugin-proposal-class-properties": "^7.5.0",
     "@babel/preset-env": "^7.5.2",
     "@open-wc/webpack-import-meta-loader": "0.4.7",

src/management-system-v2/app/(auth)/signin/page.tsx

@@ -9,7 +9,8 @@ import db from '@/lib/data/db';
 const dayInMS = 1000 * 60 * 60 * 24;
 
 // take in search query
-const SignInPage = async ({ searchParams }: { searchParams: { callbackUrl: string } }) => {
+const SignInPage = async (props: { searchParams: Promise<{ callbackUrl: string }> }) => {
+  const searchParams = await props.searchParams;
   const { session } = await getCurrentUser();
   const isGuest = session?.user.isGuest;
 

src/management-system-v2/app/(dashboard)/[environmentId]/(automation)/engines/[dbEngineId]/page.tsx

@@ -12,13 +12,12 @@ import SpaceLink from '@/components/space-link';
 
 export type TableEngine = Engine & { id: string };
 
-export default async function EnginesPage({
-  params,
-  searchParams,
-}: {
-  params: { dbEngineId: string; environmentId: string };
-  searchParams: { engineId: string };
+export default async function EnginesPage(props: {
+  params: Promise<{ dbEngineId: string; environmentId: string }>;
+  searchParams: Promise<{ engineId: string }>;
 }) {
+  const searchParams = await props.searchParams;
+  const params = await props.params;
   const msConfig = await getMSConfig();
   if (!msConfig.PROCEED_PUBLIC_PROCESS_AUTOMATION_ACTIVE) return notFound();
 

src/management-system-v2/app/(dashboard)/[environmentId]/(automation)/engines/engines-modal.tsx

@@ -24,7 +24,7 @@ const EnginesModal = ({
       onCancel={() => close()}
       title={title}
       onOk={() => close({ name: values.name, address: values.address })}
-      destroyOnClose={true}
+      destroyOnHidden={true}
       {...modalProps}
     >
       <Form

src/management-system-v2/app/(dashboard)/[environmentId]/(automation)/engines/page.tsx

@@ -21,10 +21,11 @@ const getEngineStatus = async (engine: DBEngine) => {
   }
 };
 
-const EnginesPage = async ({ params }: { params: { environmentId: string } }) => {
+const EnginesPage = async (props: { params: Promise<{ environmentId: string }> }) => {
   const msConfig = await getMSConfig();
   if (!msConfig.PROCEED_PUBLIC_PROCESS_AUTOMATION_ACTIVE) return notFound();
 
+  const params = await props.params;
   const { activeEnvironment, ability } = await getCurrentEnvironment(params.environmentId);
 
   const machinesSettings = await getSpaceSettingsValues(
@@ -57,7 +58,8 @@ const EnginesPage = async ({ params }: { params: { environmentId: string } }) =>
   );
 };
 
-const Page = ({ params }: any) => {
+const Page = async (props: any) => {
+  const params = await props.params;
   return (
     <Content title="Engines">
       <Suspense fallback={<Skeleton />}>

src/management-system-v2/app/(dashboard)/[environmentId]/(automation)/executions-dashboard/page.tsx

@@ -5,7 +5,8 @@ import { getMSConfig } from '@/lib/ms-config/ms-config';
 import { getSpaceSettingsValues } from '@/lib/data/db/space-settings';
 import DashboardView from './dashboard-view';
 
-const Page = async ({ params }: any) => {
+const Page = async (props: any) => {
+  const params = await props.params;
   const msConfig = await getMSConfig();
   if (!msConfig.PROCEED_PUBLIC_PROCESS_AUTOMATION_ACTIVE) return notFound();
 

src/management-system-v2/app/(dashboard)/[environmentId]/(automation)/executions/[processId]/instance-variables.tsx

@@ -124,9 +124,8 @@ const InstanceVariables: React.FC<InstanceVariableProps> = ({ info, refetch }) =
       <Modal
         open={!!variableToEdit}
         title={`Change value of ${variableToEdit?.name}`}
-        onClose={handleClose}
         onCancel={handleClose}
-        destroyOnClose
+        destroyOnHidden
         okButtonProps={{ loading: submitting }}
         onOk={async () => {
           await form.validateFields();

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

@@ -19,11 +19,10 @@ async function Deployment({ processId, spaceId }: { processId: string; spaceId:
   return <ProcessDeploymentView processId={processId} initialDeploymentInfo={deployment} />;
 }
 
-export default async function Page({
-  params,
-}: {
-  params: { processId: string; environmentId: string };
+export default async function Page(props: {
+  params: Promise<{ processId: string; environmentId: string }>;
 }) {
+  const params = await props.params;
   //TODO: authentication + authorization
   const { activeEnvironment } = await getCurrentEnvironment(params.environmentId);
 

src/management-system-v2/app/(dashboard)/[environmentId]/(automation)/executions/layout.tsx

@@ -5,10 +5,14 @@ import { getCurrentEnvironment } from '@/components/auth';
 import { getMSConfig } from '@/lib/ms-config/ms-config';
 
 type ExecutionLayoutProps = {
-  params: { environmentId: string };
+  params: Promise<{ environmentId: string }>;
 } & React.PropsWithChildren;
 
-const ExecutionsLayout: React.FC<ExecutionLayoutProps> = async ({ params, children }) => {
+const ExecutionsLayout: React.FC<ExecutionLayoutProps> = async (props) => {
+  const params = await props.params;
+
+  const { children } = props;
+
   const msConfig = await getMSConfig();
 
   if (!msConfig.PROCEED_PUBLIC_PROCESS_AUTOMATION_ACTIVE) return notFound();

src/management-system-v2/app/(dashboard)/[environmentId]/(automation)/executions/page.tsx

@@ -75,7 +75,10 @@ async function Executions({ environmentId }: { environmentId: string }) {
   );
 }
 
-export default function ExecutionsPage({ params }: { params: { environmentId: string } }) {
+export default async function ExecutionsPage(props: {
+  params: Promise<{ environmentId: string }>;
+}) {
+  const params = await props.params;
   return (
     <Content title="Executions">
       <Executions environmentId={params.environmentId} />

src/management-system-v2/app/(dashboard)/[environmentId]/(automation)/layout.tsx

@@ -5,10 +5,14 @@ import { getCurrentEnvironment } from '@/components/auth';
 import { getMSConfig } from '@/lib/ms-config/ms-config';
 
 type AutomationLayoutProps = {
-  params: { environmentId: string };
+  params: Promise<{ environmentId: string }>;
 } & React.PropsWithChildren;
 
-const AutomationsLayout: React.FC<AutomationLayoutProps> = async ({ params, children }) => {
+const AutomationsLayout: React.FC<AutomationLayoutProps> = async (props) => {
+  const params = await props.params;
+
+  const { children } = props;
+
   const msConfig = await getMSConfig();
   if (!msConfig.PROCEED_PUBLIC_PROCESS_AUTOMATION_ACTIVE) {
     return notFound();

src/management-system-v2/app/(dashboard)/[environmentId]/(automation)/projects/page.tsx

@@ -5,7 +5,8 @@ import { Space } from 'antd';
 import { getCurrentEnvironment } from '@/components/auth';
 import { redirect } from 'next/navigation';
 
-const Projects = async ({ params }: { params: { environmentId: string } }) => {
+const Projects = async (props: { params: Promise<{ environmentId: string }> }) => {
+  const params = await props.params;
   const { ability } = await getCurrentEnvironment(params.environmentId);
   if (!ability.can('view', 'Setting')) return redirect('/');
 

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

@@ -6,7 +6,8 @@ import SettingsForm from './settings-form';
 import Title from 'antd/es/typography/Title';
 import { redirect } from 'next/navigation';
 
-const GeneralSettingsPage = async ({ params }: { params: { environmentId: string } }) => {
+const GeneralSettingsPage = async (props: { params: Promise<{ environmentId: string }> }) => {
+  const params = await props.params;
   const { ability } = await getCurrentEnvironment(params.environmentId);
   if (!ability.can('view', 'Setting')) return redirect('/');
 

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

@@ -13,11 +13,11 @@ import { AuthenticatedUser } from '@/lib/data/user-schema';
 import SpaceLink from '@/components/space-link';
 import { getFolderById } from '@/lib/data/db/folders';
 
-const Page = async ({
-  params: { roleId, environmentId },
-}: {
-  params: { roleId: string; environmentId: string };
-}) => {
+const Page = async (props: { params: Promise<{ roleId: string; environmentId: string }> }) => {
+  const params = await props.params;
+
+  const { roleId, environmentId } = params;
+
   const { ability, activeEnvironment } = await getCurrentEnvironment(environmentId);
   const role = await getRoleWithMembersById(roleId, ability);
   // if (role && !ability.can('manage', toCaslResource('Role', role))) return <UnauthorizedFallback />;

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

@@ -4,7 +4,8 @@ import { getRolesWithMembers } from '@/lib/data/db/iam/roles';
 import RolesPage from './role-page';
 import UnauthorizedFallback from '@/components/unauthorized-fallback';
 
-const Page = async ({ params }: { params: { environmentId: string } }) => {
+const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
+  const params = await props.params;
   const { ability, activeEnvironment } = await getCurrentEnvironment(params.environmentId);
 
   // if (!ability.can('manage', 'Role')) return <UnauthorizedFallback />;

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

@@ -4,7 +4,8 @@ import Content from '@/components/content';
 import UnauthorizedFallback from '@/components/unauthorized-fallback';
 import { getFullMembersWithRoles } from '@/lib/data/db/iam/memberships';
 
-const Page = async ({ params }: { params: { environmentId: string } }) => {
+const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
+  const params = await props.params;
   const { ability, activeEnvironment } = await getCurrentEnvironment(params.environmentId);
   if (!ability.can('manage', 'User')) return <UnauthorizedFallback />;
 

src/management-system-v2/app/(dashboard)/[environmentId]/layout-client.tsx

@@ -202,7 +202,7 @@ const Layout: FC<
                 },
               ],
             }}
-            modalProps={{ closeIcon: null, destroyOnClose: true }}
+            modalProps={{ closeIcon: null, destroyOnHidden: true }}
           />
         ) : null}
 

src/management-system-v2/app/(dashboard)/[environmentId]/layout.tsx

@@ -43,10 +43,13 @@ import { CustomNavigationLink } from '@/lib/custom-links/custom-link';
 import { env } from '@/lib/ms-config/env-vars';
 import { getUserPassword } from '@/lib/data/db/iam/users';
 
-const DashboardLayout = async ({
-  children,
-  params,
-}: PropsWithChildren<{ params: { environmentId: string } }>) => {
+const DashboardLayout = async (
+  props: PropsWithChildren<{ params: Promise<{ environmentId: string }> }>,
+) => {
+  const params = await props.params;
+
+  const { children } = props;
+
   const { userId, systemAdmin, user } = await getCurrentUser();
 
   const { activeEnvironment, ability } = await getCurrentEnvironment(params.environmentId);

src/management-system-v2/app/(dashboard)/[environmentId]/management/@organizationSettings/page.tsx

@@ -7,7 +7,8 @@ import SettingsInjector from '../../settings/settings-injector';
 import { UnauthorizedError } from '@/lib/ability/abilityHelper';
 import { env } from '@/lib/ms-config/env-vars';
 
-const GeneralSettingsPage = async ({ params }: { params: { environmentId: string } }) => {
+const GeneralSettingsPage = async (props: { params: Promise<{ environmentId: string }> }) => {
+  const params = await props.params;
   const { ability, activeEnvironment } = await getCurrentEnvironment(params.environmentId);
   if (
     !activeEnvironment.isOrganization ||

src/management-system-v2/app/(dashboard)/[environmentId]/management/@organizationSettings/wrapper.tsx

@@ -26,7 +26,7 @@ const Wrapper: React.FC<WrapperProps> = ({ group }) => {
   const { message } = App.useApp();
   const [upToDateGroup, setUpToDateGroup] = useState(group);
   const { spaceId } = useEnvironment();
-  const updateTimeout = useRef<ReturnType<typeof setTimeout> | undefined>();
+  const updateTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const changes = useRef<Record<string, string>>({});
 
   const [errors, parseInput] = useParseZodErrors(UserOrganizationEnvironmentInputSchema.partial());

src/management-system-v2/app/(dashboard)/[environmentId]/management/layout.tsx

@@ -1,14 +1,12 @@
-import React, { ReactNode } from 'react';
-
 import Content from '@/components/content';
 import SettingsPage from '../settings/settings-page';
 
 export default function Layout({
   params,
   ...children
 }: {
-  params: { environmentId: string };
-} & Record<string, ReactNode>) {
+  params: Promise<{ environmentId: string }>;
+}) {
   // TODO: check if the user has the rights to change the settings
 
   return (

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[mode]/[processId]/blockly-editor.tsx

@@ -113,7 +113,7 @@ const BlocklyEditor = ({ onChange, initialXml, editorRef, blocklyOptions }: Bloc
   //
   // For this reason we want the function only to be called when there has really been a change in
   // xml in the blockly editor
-  const onChangeFunc = useRef<OnChangeFunc | undefined>();
+  const onChangeFunc = useRef<OnChangeFunc | undefined>(undefined);
   useEffect(() => {
     onChangeFunc.current = onChange;
   }, [onChange]);

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[mode]/[processId]/description-section.tsx

@@ -1,6 +1,6 @@
 import useModelerStateStore from './use-modeler-state-store';
 import '@toast-ui/editor/dist/toastui-editor.css';
-import type { Editor as EditorClass, Viewer as ViewerClass } from '@toast-ui/react-editor';
+import type { Editor as EditorClass } from '@toast-ui/react-editor';
 import React, { useEffect, useState } from 'react';
 import { EditOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Divider, Grid, Modal, Space, theme } from 'antd';
@@ -29,8 +29,7 @@ const DescriptionSection: React.FC<{ selectedElement: any; readOnly?: boolean }>
   const [showPopupEditor, setShowPopupEditor] = useState(false);
   const breakpoint = Grid.useBreakpoint();
 
-  const onSubmit = (editorRef: React.RefObject<EditorClass>) => {
-    const editor = editorRef.current as EditorClass;
+  const onSubmit = (editor: EditorClass) => {
     const editorInstance = editor.getInstance();
     const content = editorInstance.getMarkdown();
     updateDescription(content);
@@ -131,7 +130,11 @@ const DescriptionSection: React.FC<{ selectedElement: any; readOnly?: boolean }>
         open={showPopupEditor}
         title="Edit Description"
         okText="Save"
-        onOk={() => onSubmit(modalEditorRef)}
+        onOk={() => {
+          if (modalEditorRef.current) {
+            onSubmit(modalEditorRef.current);
+          }
+        }}
         onCancel={() => setShowPopupEditor(false)}
       >
         <TextEditor editorRef={modalEditorRef} initialValue={description}></TextEditor>

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

@@ -1,8 +1,9 @@
-import { FC, PropsWithChildren, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 
-type ProcessesLayoutProps = PropsWithChildren<{
+type ProcessesLayoutProps = {
+  children?: ReactNode;
   /*background: ReactNode;*/
-}>;
+};
 
 const ProcessesLayout: FC<ProcessesLayoutProps> = ({ children /*, background*/ }) => {
   return (

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[mode]/[processId]/modeler-toolbar.module.scss

@@ -1,21 +1,21 @@
-.Toolbar :global {
-  .ant-space-compact {
+.Toolbar {
+  :global(.ant-space-compact) {
     box-shadow:
       0px 0px 0.9310142993927002px 0px rgba(0, 0, 0, 0.17),
       0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, 0.08),
       0px 7px 14px 0px rgba(0, 0, 0, 0.05);
     border-radius: 0.5rem;
   }
 
-  .ant-select-selector {
+  :global(.ant-select-selector) {
     border: none !important;
   }
 
-  .ant-select-selection-item {
+  :global(.ant-select-selection-item) {
     font-size: 0.875rem;
   }
 
-  .ant-btn-compact-item {
+  :global(.ant-btn-compact-item) {
     border: none !important;
   }
 }

src/management-system-v2/app/(dashboard)/[environmentId]/processes/[mode]/[processId]/modeler-zoombar.module.scss

@@ -1,13 +1,13 @@
-.Zoombar :global {
-  .ant-input {
+.Zoombar {
+  :global(.ant-input) {
     border: none !important;
     width: 75px;
     background-color: #eeeeee;
     font-size: 0.875rem;
     text-align: center;
   }
 
-  .ant-btn-compact-item {
+  :global(.ant-btn-compact-item) {
     border: none !important;
     background-color: #eeeeee;
   }