Merge pull request #700 from PROCEED-Labs/ant-design-upgrade

Ant Design Update

Author: jjoderis

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

@@ -147,7 +147,7 @@ const SignIn: FC<{
             </Button>
 
             <Alert
-              message='Note: if you select "Continue as Guest", the this Platform is functionally restricted and your created processes will not be accessible on other devices. All your data will be deleted automatically after a few days."'
+              title='Note: if you select "Continue as Guest", the this Platform is functionally restricted and your created processes will not be accessible on other devices. All your data will be deleted automatically after a few days."'
               type="info"
             />
           </>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo } from 'react';
+import { useMemo, Fragment } from 'react';
 import useDeployments from './use-deployments';
 import { Card, Col, Row, Skeleton, Statistic } from 'antd';
 
@@ -97,7 +97,7 @@ const DashboardView: React.FC = () => {
   return (
     <>
       {Object.entries(stats).map(([name, entries]) => (
-        <>
+        <Fragment key={name}>
           <h3>{name}</h3>
           <Row key={name} gutter={16}>
             {entries.map((entry) => (
@@ -108,7 +108,7 @@ const DashboardView: React.FC = () => {
               </Col>
             ))}
           </Row>
-        </>
+        </Fragment>
       ))}
     </>
   );

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

@@ -32,6 +32,7 @@ export function ElementStatus({ info }: { info: RelevantInstanceInfo }) {
         {/** TODO: correct image url */}
         <Image
           // TODO: use engine endpoint to get the image
+          alt="Image linked to the element"
           src={endpointBuilder('get', '/resources/process/:definitionId/images/:fileName', {
             pathParams: {
               definitionId: info.process.definitionId,
@@ -59,7 +60,7 @@ export function ElementStatus({ info }: { info: RelevantInstanceInfo }) {
 
   statusEntries.push([
     'Current state:',
-    status && statusType && <Alert type={statusType} message={status} showIcon />,
+    status && statusType && <Alert type={statusType} title={status} showIcon />,
   ]);
 
   // from ./src/management-system/src/frontend/components/deployments/activityInfo/ActivityStatusInformation.vue

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

@@ -115,7 +115,7 @@ const InstanceVariables: React.FC<InstanceVariableProps> = ({ info, refetch }) =
   return (
     <>
       <Table
-        pagination={{ position: ['bottomCenter'] }}
+        pagination={{ placement: ['bottomCenter'] }}
         rowKey="name"
         scroll={{ x: true }}
         columns={columns}

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

@@ -170,6 +170,7 @@ export default function ProcessDeploymentView({
                     ? selectedInstance.processInstanceId
                     : undefined
                 }
+                variant="borderless"
                 onSelect={(value) => setSelectedInstanceId(value)}
                 options={instances?.map((instance, idx) => ({
                   value: instance.processInstanceId,

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

@@ -18,7 +18,7 @@ const StartFormModal: React.FC<StartFormModalProps> = ({ html, onSubmit, onCance
       height={'80vh'}
       style={{ padding: '1px' }}
       styles={{
-        content: {
+        container: {
           height: '80vh',
           display: 'flex',
           flexDirection: 'column',

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

@@ -1,4 +1,4 @@
-import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
+import { RefObject, useCallback, useEffect, useRef } from 'react';
 
 import { ColorOptions, flowElementsStyling } from './instance-coloring';
 import { InstanceInfo } from '@/lib/engines/deployment';

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

@@ -1,11 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { getProcessIds, getVariablesFromElementById } from '@proceed/bpmn-helper';
 import { DeployedProcessInfo, InstanceInfo, VersionInfo } from '@/lib/engines/deployment';
-import {
-  ProcessVariable,
-  ProcessVariableSchema,
-  textFormatMap,
-} from '@/lib/process-variable-schema';
+import { ProcessVariable, ProcessVariableSchema } from '@/lib/process-variable-schema';
 
 export type Variable = {
   name: string;

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

@@ -6,8 +6,6 @@ import { getUsersFavourites } from '@/lib/data/users';
 import { getDeployedProcessesFromSavedEngines } from '@/lib/engines/saved-engines-helpers';
 import { DeployedProcessInfo } from '@/lib/engines/deployment';
 import { isUserErrorResponse } from '@/lib/user-error';
-import { Skeleton } from 'antd';
-import { Suspense } from 'react';
 import { getDbEngines } from '@/lib/data/db/engines';
 
 function getDeploymentNames<T extends { versions: DeployedProcessInfo['versions'] }>(

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

@@ -12,7 +12,7 @@ const Projects = async (props: { params: Promise<{ environmentId: string }> }) =
 
   return (
     <Content title="Projects">
-      <Space direction="vertical" size="large" style={{ display: 'flex' }}>
+      <Space orientation="vertical" size="large" style={{ display: 'flex' }}>
         <ProjectStats />
         <Processes
           processes={[]}