Client package update (#293 and #323)

  - Make some yarn commands cross-platform
  - Updates npm packages to latest versions

client/package.json

@@ -1,27 +1,29 @@
 {
-  "name": "dtaas-web",
-  "version": "0.2.0",
+  "name": "@into-cps-association/dtaas-web",
+  "version": "0.3.1",
   "description": "Web client for Digital Twin as a Service (DTaaS)",
   "main": "index.tsx",
   "author": "prasadtalasila <[email protected]> (http://prasad.talasila.in/)",
   "contributors": [
     "Omar Suleiman",
     "Asger Busk Breinholm",
-    "Mathias Brændgaard"
+    "Mathias Brændgaard",
+    "Emre Temel",
+    "Cesar Vela"
   ],
   "license": "SEE LICENSE IN <LICENSE.md>",
   "private": false,
   "type": "module",
   "scripts": {
-    "develop": "npx react-scripts start",
-    "test": "script/test.bash",
-    "syntax": "script/syntax.bash",
-    "build": "script/build.bash",
+    "build": "react-scripts build",
+    "clean": "npx rimraf build/ node_modules/ coverage/ playwright-report/  *.svg",
     "configapp": "script/config.bash",
-    "start": "script/start.bash",
-    "clean": "script/clean.bash",
+    "develop": "npx react-scripts start",
     "format": "prettier --ignore-path ../.gitignore --write \"**/*.{ts,tsx,css,scss}\"",
-    "graph": "script/graph.bash"
+    "graph": "npx madge --image src.svg src && npx madge --image test.svg test",
+    "start": "serve -s build -l 4000",
+    "syntax": "npx eslint . --fix",
+    "test": "script/test.bash"
   },
   "eslintConfig": {
     "extends": [
@@ -32,57 +34,57 @@
     "singleQuote": true
   },
   "dependencies": {
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "@fontsource/roboto": "^4.5.8",
-    "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.12.1",
-    "@reduxjs/toolkit": "^1.9.5",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.8",
+    "@mui/icons-material": "^5.14.8",
+    "@mui/material": "^5.14.8",
+    "@reduxjs/toolkit": "^1.9.7",
     "dotenv": "^16.1.4",
     "oidc-client-ts": "^2.2.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "react-oidc-context": "^2.2.2",
-    "react-redux": "^8.0.5",
-    "react-router-dom": "^6.3.0",
-    "react-tabs": "^6.0.0",
+    "react-redux": "^8.1.3",
+    "react-router-dom": "^6.20.0",
+    "react-tabs": "^6.0.2",
     "redux": "^4.2.1",
     "resize-observer-polyfill": "^1.5.1",
-    "serve": "^14.0.1",
-    "styled-components": "^5.3.9",
+    "serve": "^14.2.1",
+    "styled-components": "^6.1.1",
     "typescript": "^4.9.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.3",
-    "@babel/plugin-syntax-flow": "^7.18.6",
-    "@babel/plugin-transform-react-jsx": "^7.21.0",
+    "@babel/core": "^7.23.3",
+    "@babel/plugin-syntax-flow": "^7.23.3",
+    "@babel/plugin-transform-react-jsx": "^7.23.4",
     "@playwright/test": "^1.32.1",
-    "@testing-library/dom": "^9.2.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.0",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.34.0",
-    "@typescript-eslint/parser": "^5.34.0",
-    "eslint": "^8.22.0",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.10",
+    "@types/react": "^18.2.38",
+    "@types/react-dom": "^18.2.17",
+    "@types/styled-components": "^5.1.32",
+    "@typescript-eslint/eslint-plugin": "^6.12.0",
+    "@typescript-eslint/parser": "^6.12.0",
+    "eslint": "^8.54.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.30.1",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "playwright": "^1.32.1",
-    "prettier": "2.7.1",
+    "prettier": "3.1.0",
     "react-iframe": "^1.8.5",
     "react-scripts": "^5.0.1",
-    "ts-jest": "^29.0.5"
+    "ts-jest": "^29.1.1"
   },
   "browserslist": {
     "production": [

client/public/static/css/MaterialIcon.css

@@ -4,7 +4,9 @@
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
-  src: local('Material Icons'), local('MaterialIcons-Regular'),
+  src:
+    local('Material Icons'),
+    local('MaterialIcons-Regular'),
     url(/static/font/MaterialIcons-Regular.woff2) format('woff2'),
     url(/static/font/MaterialIcons-Regular.woff) format('woff'),
     url(/static/font/MaterialIcons-Regular.ttf) format('truetype');

client/src/components/tab/TabComponent.tsx

@@ -24,7 +24,7 @@ function renderScopeTabList(scope: TabData[][], subIndex: number): JSX.Element {
 
 function renderScopeTabPanels(
   scope: TabData[][],
-  subIndex: number
+  subIndex: number,
 ): JSX.Element {
   return (
     <>

client/src/index.tsx

@@ -57,7 +57,7 @@ const router = createBrowserRouter(
   ],
   {
     basename: `/${useURLbasename()}`,
-  }
+  },
 );
 
 const root = document.getElementById('root');
@@ -68,7 +68,7 @@ if (root) {
       <AppProvider>
         <RouterProvider router={router} />
       </AppProvider>
-    </React.StrictMode>
+    </React.StrictMode>,
   );
 } else {
   throw Error("Couldn't find root element");

client/src/route/library/Library.tsx

@@ -32,7 +32,7 @@ export function createCombinedTabs() {
           />
         </>
       ),
-    }))
+    })),
   );
 }
 

client/test/integration/authRedux.test.tsx

@@ -49,7 +49,7 @@ const setupTest = (authState: AuthState) => {
     <PrivateRoute>
       <Library />
     </PrivateRoute>,
-    { route: '/private', store }
+    { route: '/private', store },
   );
 };
 
@@ -75,7 +75,7 @@ describe('Redux and Authentication integration test', () => {
 
     expect(screen.getByText('Signin')).toBeInTheDocument();
     expect(authReducer(undefined, { type: 'unknown' })).toEqual(
-      initialState.auth
+      initialState.auth,
     );
     expect(store.getState().userName).toBe(undefined);
   });

client/test/unitTests/Components/Linkbuttons.test.tsx

@@ -24,7 +24,7 @@ const getButtonIcon = (key: string) =>
 const evaluateButtonSize = (expectedSize: number) => {
   buttons.forEach((button) => {
     expect(
-      getComputedStyle(getButtonIcon(button.key)).getPropertyValue('font-size')
+      getComputedStyle(getButtonIcon(button.key)).getPropertyValue('font-size'),
     ).toBe(`${expectedSize}rem`);
   });
 };
@@ -38,7 +38,7 @@ describe('LinkButtons component default size', () => {
     buttons.forEach((button) => {
       expect(getButton(button.key).parentElement).toHaveAttribute(
         'aria-label',
-        button.link
+        button.link,
       );
       expect(getLabel(button.key).tagName).toBe('H6');
     });
@@ -66,7 +66,7 @@ describe('LinkButtons component default size', () => {
 
   it('should use name from iconLib as label when avaiable', () => {
     expect(getLabel(buttons[0].key).textContent).toBe(
-      LinkIcons[buttons[0].key].name
+      LinkIcons[buttons[0].key].name,
     );
   });
 });

client/test/unitTests/Components/PrivateRoute.test.tsx

@@ -30,7 +30,7 @@ const setupTest = (authState: AuthState) => {
     <PrivateRoute>
       <TestComponent />
     </PrivateRoute>,
-    { route: '/private' }
+    { route: '/private' },
   );
 };
 

client/test/unitTests/Components/TabComponent.test.tsx

@@ -11,7 +11,7 @@ describe('TabComponent', () => {
 
   test('renders an empty tab', () => {
     const { getByText } = render(
-      <TabComponent assetType={assetTypeTabs} scope={scopeTabs} />
+      <TabComponent assetType={assetTypeTabs} scope={scopeTabs} />,
     );
     const emptyTab = getByText('Functions');
     expect(emptyTab).toBeInTheDocument();
@@ -60,10 +60,10 @@ describe('TabComponent', () => {
     }
 
     expect(
-      screen.queryByText(assetTypeTabs[0].body.props.children)
+      screen.queryByText(assetTypeTabs[0].body.props.children),
     ).not.toBeInTheDocument();
     expect(
-      screen.queryByText(assetTypeTabs[1].body.props.children)
+      screen.queryByText(assetTypeTabs[1].body.props.children),
     ).not.toBeInTheDocument();
   });
 

client/test/unitTests/Page/LayoutPublic.test.tsx

@@ -11,7 +11,7 @@ const PublicTestComponentId = 'public-component';
 
 describe('LayoutPublic component with one element', () => {
   beforeEach(() =>
-    renderLayoutWithRouter(LayoutPublic, [PublicTestComponentId])
+    renderLayoutWithRouter(LayoutPublic, [PublicTestComponentId]),
   );
 
   basicLayoutTestsWithSingleComponent();

client/test/unitTests/Page/page.testUtils.tsx

@@ -7,7 +7,7 @@ export const TestComponentIdList = ['component1', 'component2', 'component3'];
 
 export function renderLayoutWithRouter(
   Layout: (props: { children: React.ReactElement[] }) => React.ReactElement,
-  Children: string[]
+  Children: string[],
 ) {
   render(<Layout>{generateTestDivs(Children)}</Layout>, {
     wrapper: BrowserRouter,

client/test/unitTests/Routes/Library.test.tsx

@@ -19,7 +19,7 @@ describe('Library with no props', () => {
   InitRouteTests(
     <AuthProvider>
       <Library />
-    </AuthProvider>
+    </AuthProvider>,
   );
 
   itDisplaysContentOfTabs(assetType);

client/test/unitTests/Routes/SignIn.test.tsx

@@ -23,19 +23,19 @@ describe('SignIn', () => {
     render(
       <MemoryRouter>
         <SignIn />
-      </MemoryRouter>
+      </MemoryRouter>,
     );
 
     expect(
-      screen.getByRole('button', { name: /Sign In With GitLab/i })
+      screen.getByRole('button', { name: /Sign In With GitLab/i }),
     ).toBeInTheDocument();
   });
 
   it('handles button click', () => {
     render(
       <MemoryRouter>
         <SignIn />
-      </MemoryRouter>
+      </MemoryRouter>,
     );
 
     const signInButton = screen.getByRole('button', {

client/test/unitTests/Util/Store.test.ts

@@ -25,15 +25,15 @@ describe('reducers', () => {
   describe('menu reducer', () => {
     const itShouldHandleMenuActions = (
       actionCreator: () => { type: string },
-      expectedValue: boolean
+      expectedValue: boolean,
     ) => {
       const newState = menuReducer(initialState.menu, actionCreator());
       expect(newState.isOpen).toBe(expectedValue);
     };
 
     it('menuReducer should return the initial menu state when an unknown action type is passed with an undefined state', () => {
       expect(menuReducer(undefined, { type: 'unknown' })).toEqual(
-        initialState.menu
+        initialState.menu,
       );
     });
 
@@ -50,7 +50,7 @@ describe('reducers', () => {
   describe('auth reducer', () => {
     it('authReducer should return the initial menu state when an unknown action type is passed with an undefined state', () => {
       expect(authReducer(undefined, { type: 'unknown' })).toEqual(
-        initialState.auth
+        initialState.auth,
       );
     });
 

client/test/unitTests/Util/envUtil.test.ts

@@ -53,10 +53,10 @@ describe('envUtil', () => {
 
   test('GetURL should return the correct enviroment variables', () => {
     expect(useURLforDT()).toBe(
-      `${testAppURL}/${testBasename}/${testUsername}/${testDT}`
+      `${testAppURL}/${testBasename}/${testUsername}/${testDT}`,
     );
     expect(useURLforLIB()).toBe(
-      `${testAppURL}/${testBasename}/${testUsername}/${testLIB}`
+      `${testAppURL}/${testBasename}/${testUsername}/${testLIB}`,
     );
     expect(useURLbasename()).toBe(testBasename);
   });
@@ -71,8 +71,8 @@ describe('envUtil', () => {
     const result = getWorkbenchLinkValues();
     expect(
       result.every(
-        (el) => typeof el.key === 'string' && typeof el.link === 'string'
-      )
+        (el) => typeof el.key === 'string' && typeof el.link === 'string',
+      ),
     ).toBe(true);
   });
 
@@ -83,8 +83,8 @@ describe('envUtil', () => {
     result.forEach((el, i) => {
       expect(el.link).toEqual(
         `${testAppURL}/${testBasename}/${testUsername}/${cleanURL(
-          testWorkbenchEndpoints[i]
-        )}`
+          testWorkbenchEndpoints[i],
+        )}`,
       );
     });
   });