Start unit testing and use preview folders

client/package.json

@@ -32,7 +32,8 @@
     "test:all": "yarn test:unit && yarn test:int && yarn test:e2e",
     "test:e2e": "yarn build && yarn config:test && npx kill-port 4000 && yarn start >/dev/null & playwright test && npx kill-port 4000",
     "test:int": "jest -c ./jest.config.json ../test/integration --setupFilesAfterEnv ./test/integration/jest.setup.ts",
-    "test:unit": "jest -c ./jest.config.json ../test/unit --setupFilesAfterEnv ./test/unit/jest.setup.ts"
+    "test:unit": "jest -c ./jest.config.json ../test/unit --setupFilesAfterEnv ./test/unit/jest.setup.ts",
+    "test:preview": "jest -c ./jest.config.json ../test/preview/unit --setupFilesAfterEnv ./test/preview/unit/jest.setup.ts"
   },
   "eslintConfig": {
     "extends": [
@@ -84,13 +85,13 @@
     "@babel/plugin-syntax-flow": "^7.23.3",
     "@babel/plugin-transform-react-jsx": "^7.23.4",
     "@playwright/test": "^1.32.1",
-    "@testing-library/dom": "^9.3.3",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.5.10",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.2.17",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "playwright": "^1.32.1",

client/src/components/asset/AssetBoard.tsx → client/src/preview/components/asset/AssetBoard.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Grid } from '@mui/material';
 import { GitlabInstance } from 'util/gitlab';
-import { Asset } from './Asset';
-import AssetCardExecute from './AssetCard';
+import { Asset } from 'preview/components/asset/Asset';
+import { AssetCardExecute } from 'preview/components/asset/AssetCard';
 
 const outerGridContainerProps = {
   container: true,

client/src/components/asset/AssetCard.tsx → client/src/preview/components/asset/AssetCard.tsx

@@ -8,13 +8,13 @@ import styled from '@emotion/styled';
 import DigitalTwin, { formatName } from 'util/gitlabDigitalTwin';
 import { GitlabInstance } from 'util/gitlab';
 import { getAuthority } from 'util/envUtil';
-import CustomSnackbar from 'route/digitaltwins/Snackbar';
+import CustomSnackbar from 'preview/route/digitaltwins/Snackbar';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   setDigitalTwin,
   selectDigitalTwinByName,
 } from 'store/digitalTwin.slice';
-import LogDialog from 'route/digitaltwins/LogDialog';
+import LogDialog from 'preview/route/digitaltwins/execute/LogDialog';
 import StartStopButton from './StartStopButton';
 import LogButton from './LogButton';
 import { Asset } from './Asset';
@@ -128,18 +128,22 @@ function AssetCardExecute({ asset }: AssetCardExecuteProps) {
   const dispatch = useDispatch();
 
   useEffect(() => {
+    const initialize = async () => {
     const gitlabInstance = new GitlabInstance(
       sessionStorage.getItem('username') || '',
       getAuthority(),
       sessionStorage.getItem('access_token') || '',
     );
-    gitlabInstance.init();
-    dispatch(
-      setDigitalTwin({
-        assetName: asset.name,
-        digitalTwin: new DigitalTwin(asset.name, gitlabInstance),
-      }),
-    );
+    await gitlabInstance.init();
+      dispatch(
+        setDigitalTwin({
+          assetName: asset.name,
+          digitalTwin: new DigitalTwin(asset.name, gitlabInstance),
+        }),
+      );
+  }
+
+  initialize();
   }, [asset.name, dispatch]);
 
   const digitalTwin = useSelector(selectDigitalTwinByName(asset.name));
@@ -175,4 +179,4 @@ function AssetCardExecute({ asset }: AssetCardExecuteProps) {
   );
 }
 
-export default AssetCardExecute;
+export { AssetCard, AssetCardExecute, CardButtonsContainerExecute };

client/src/components/asset/StartStopButton.tsx → client/src/preview/components/asset/StartStopButton.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState, Dispatch, SetStateAction } from 'react';
 import { AlertColor, Button, CircularProgress } from '@mui/material';
-import { handleButtonClick } from 'route/digitaltwins/pipelineHandler';
+import { handleButtonClick } from 'preview/route/digitaltwins/execute/pipelineHandler';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectDigitalTwinByName } from 'store/digitalTwin.slice';
 

client/src/route/digitaltwins/DigitalTwinsPreview.tsx → client/src/preview/route/digitaltwins/DigitalTwinsPreview.tsx

@@ -4,11 +4,11 @@ import { Typography } from '@mui/material';
 import Layout from 'page/Layout';
 import TabComponent from 'components/tab/TabComponent';
 import { TabData } from 'components/tab/subcomponents/TabRender';
-import { Asset } from 'components/asset/Asset';
-import AssetBoard from 'components/asset/AssetBoard';
+import { Asset } from 'preview/components/asset/Asset';
+import AssetBoard from 'preview/components/asset/AssetBoard';
 import { GitlabInstance } from 'util/gitlab';
 import { getAuthority } from 'util/envUtil';
-import tabs from './DigitalTwinTabData';
+import tabs from '../../../route/digitaltwins/DigitalTwinTabData';
 
 const createDTTab = (
   subfolders: Asset[],

client/src/route/digitaltwins/pipelineChecks.ts → client/src/preview/route/digitaltwins/execute/pipelineChecks.ts

@@ -2,8 +2,8 @@ import { Dispatch, SetStateAction } from 'react';
 import { useDispatch } from 'react-redux';
 import { AlertColor } from '@mui/material';
 import DigitalTwin, { formatName } from 'util/gitlabDigitalTwin';
-import { fetchJobLogs, updatePipelineStateOnCompletion } from './pipelineUtils';
-import { setSnackbar } from './pipelineHandler';
+import { fetchJobLogs, updatePipelineStateOnCompletion } from 'preview/route/digitaltwins/execute/pipelineUtils';
+import { setSnackbar } from 'preview/route/digitaltwins/execute/pipelineHandler';
 
 interface PipelineStatusParams {
   setButtonText: Dispatch<SetStateAction<string>>;
@@ -21,7 +21,7 @@ const delay = (ms: number) =>
 const hasTimedOut = (startTime: number) =>
   Date.now() - startTime > MAX_EXECUTION_TIME;
 
-const handleTimeout = (
+export const handleTimeout = (
   DTName: string,
   setButtonText: Dispatch<SetStateAction<string>>,
   setLogButtonDisabled: Dispatch<SetStateAction<boolean>>,
@@ -40,7 +40,7 @@ const handleTimeout = (
   setLogButtonDisabled(false);
 };
 
-const checkFirstPipelineStatus = async ({
+export const checkFirstPipelineStatus = async ({
   setButtonText,
   digitalTwin,
   setLogButtonDisabled,
@@ -107,7 +107,31 @@ const checkFirstPipelineStatus = async ({
   }
 };
 
-const checkSecondPipelineStatus = async ({
+export const handlePipelineCompletion = async (
+  pipelineId: number,
+  digitalTwin: DigitalTwin,
+  setButtonText: Dispatch<SetStateAction<string>>,
+  setLogButtonDisabled: Dispatch<SetStateAction<boolean>>,
+  dispatch: ReturnType<typeof useDispatch>,
+  setSnackbarMessage: Dispatch<SetStateAction<string>>,
+  setSnackbarSeverity: Dispatch<SetStateAction<AlertColor>>,
+  setSnackbarOpen: Dispatch<SetStateAction<boolean>>,
+  pipelineStatus: 'success' | 'failed'
+) => {
+  const jobLogs = await fetchJobLogs(digitalTwin.gitlabInstance, pipelineId);
+  updatePipelineStateOnCompletion(digitalTwin, jobLogs, setButtonText, setLogButtonDisabled, dispatch);
+  if (pipelineStatus === 'failed') {
+    setSnackbar(
+      `Execution failed for ${formatName(digitalTwin.DTName)}`,
+      'error',
+      setSnackbarMessage,
+      setSnackbarSeverity,
+      setSnackbarOpen,
+    );
+  }
+};
+
+export const checkSecondPipelineStatus = async ({
   setButtonText,
   digitalTwin,
   setLogButtonDisabled,
@@ -122,34 +146,24 @@ const checkSecondPipelineStatus = async ({
   setSnackbarSeverity: Dispatch<SetStateAction<AlertColor>>;
   setSnackbarOpen: Dispatch<SetStateAction<boolean>>;
 }) => {
+  const pipelineId = digitalTwin.pipelineId! + 1;
   const pipelineStatus = await digitalTwin.gitlabInstance.getPipelineStatus(
     digitalTwin.gitlabInstance.projectId!,
-    digitalTwin.pipelineId! + 1,
+    pipelineId,
   );
 
   if (pipelineStatus === 'success' || pipelineStatus === 'failed') {
-    const pipelineIdJobs = digitalTwin.pipelineId! + 1;
-    const jobLogs = await fetchJobLogs(
-      digitalTwin.gitlabInstance,
-      pipelineIdJobs,
-    );
-    updatePipelineStateOnCompletion(
+    await handlePipelineCompletion(
+      pipelineId,
       digitalTwin,
-      jobLogs,
       setButtonText,
       setLogButtonDisabled,
       dispatch,
+      setSnackbarMessage,
+      setSnackbarSeverity,
+      setSnackbarOpen,
+      pipelineStatus
     );
-
-    if (pipelineStatus === 'failed') {
-      setSnackbar(
-        `Execution failed for ${formatName(digitalTwin.DTName)}`,
-        'error',
-        setSnackbarMessage,
-        setSnackbarSeverity,
-        setSnackbarOpen,
-      );
-    }
   } else if (hasTimedOut(startTime)) {
     handleTimeout(
       digitalTwin.DTName,
@@ -161,7 +175,7 @@ const checkSecondPipelineStatus = async ({
     );
   } else {
     await delay(5000);
-    checkSecondPipelineStatus({
+    await checkSecondPipelineStatus({
       setButtonText,
       digitalTwin,
       setLogButtonDisabled,
@@ -174,7 +188,8 @@ const checkSecondPipelineStatus = async ({
   }
 };
 
-const startPipelineStatusCheck = (
+
+export const startPipelineStatusCheck = (
   params: PipelineStatusParams & {
     setSnackbarMessage: Dispatch<SetStateAction<string>>;
     setSnackbarSeverity: Dispatch<SetStateAction<AlertColor>>;
@@ -184,5 +199,3 @@ const startPipelineStatusCheck = (
   const startTime = Date.now();
   checkFirstPipelineStatus({ ...params, startTime });
 };
-
-export default startPipelineStatusCheck;

client/src/route/digitaltwins/pipelineHandler.ts → client/src/preview/route/digitaltwins/execute/pipelineHandler.ts

@@ -7,7 +7,7 @@ import {
   updatePipelineState,
   updatePipelineStateOnStop,
 } from './pipelineUtils';
-import startPipelineStatusCheck from './pipelineChecks';
+import { startPipelineStatusCheck } from './pipelineChecks';
 
 export const handleButtonClick = (
   buttonText: string,
@@ -107,7 +107,7 @@ export const handleStop = async (
   }
 };
 
-const stopPipelines = async (digitalTwin: DigitalTwin) => {
+export const stopPipelines = async (digitalTwin: DigitalTwin) => {
   if (digitalTwin.gitlabInstance.projectId && digitalTwin.pipelineId) {
     await digitalTwin.stop(
       digitalTwin.gitlabInstance.projectId,

client/src/routes.tsx

@@ -4,7 +4,7 @@ import LayoutPublic from 'page/LayoutPublic';
 import PrivateRoute from 'route/auth/PrivateRoute';
 import Library from './route/library/Library';
 import DigitalTwins from './route/digitaltwins/DigitalTwins';
-import DigitalTwinsPreview from './route/digitaltwins/DigitalTwinsPreview';
+import DigitalTwinsPreview from './preview/route/digitaltwins/DigitalTwinsPreview';
 import SignIn from './route/auth/Signin';
 import Account from './route/auth/Account';
 

client/src/store/digitalTwin.slice.ts

@@ -1,6 +1,6 @@
 import { PayloadAction, createSlice } from '@reduxjs/toolkit';
 import DigitalTwin from 'util/gitlabDigitalTwin';
-import { JobLog } from 'components/asset/StartStopButton';
+import { JobLog } from 'preview/components/asset/StartStopButton';
 import { RootState } from './store';
 
 interface DigitalTwinState {

client/src/store/store.ts

@@ -2,18 +2,23 @@ import { combineReducers } from 'redux';
 import { configureStore } from '@reduxjs/toolkit';
 import menuSlice from './menu.slice';
 import authSlice from './auth.slice';
-import cartReducer from './cart.slice';
 import digitalTwinSlice from './digitalTwin.slice';
 
 const rootReducer = combineReducers({
   menu: menuSlice,
   auth: authSlice,
-  cart: cartReducer,
   digitalTwin: digitalTwinSlice,
 });
 
 const store = configureStore({
   reducer: rootReducer,
+  middleware: getDefaultMiddleware => 
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: ['digitalTwin/setDigitalTwin'],
+        ignoredPaths: ['digitalTwin.Test Asset', 'payload.digitalTwin'],
+      },
+    }),
 });
 
 export type RootState = ReturnType<typeof store.getState>;

client/src/util/gitlab.ts

@@ -1,5 +1,5 @@
 import { Gitlab } from '@gitbeaker/rest';
-import { Asset } from '../components/asset/Asset';
+import { Asset } from '../preview/components/asset/Asset';
 
 const GROUP_NAME = 'DTaaS';
 const DT_DIRECTORY = 'digital_twins';