Implementing Devices using shared UI codebase

web/.gitignore

@@ -31,4 +31,6 @@ yarn-error.log*
 /playwright/test-results/
 /playwright/playwright-report/
 /playwright/.cache/
-/playwright/storageState.json
+/playwright/storageState.json
+
+/public/theme

web/package.json

@@ -1,92 +1,73 @@
 {
   "name": "plgd-client-application",
   "version": "3.0.0",
-  "private": false,
+  "private": true,
   "dependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/plugin-transform-react-jsx": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
     "@emotion/babel-plugin": "^11.11.0",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/react": "^11.11.1",
-    "@reduxjs/toolkit": "^1.9.5",
-    "@types/jest": "^28.1.8",
-    "@types/lodash": "^4.14.195",
-    "@types/node": "^18.15.11",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "@types/react-helmet": "^6.1.6",
-    "@types/react-table": "^7.7.14",
-    "@types/url-parse": "^1.4.8",
-    "@types/uuid": "^9.0.2",
-    "@typescript-eslint/parser": "^5.61.0",
-    "axios": "^1.4.0",
-    "bootstrap": "^5.3.0",
-    "classnames": "^2.3.2",
-    "cross-env": "^7.0.2",
-    "date-fns": "^2.30.0",
-    "detect-browser": "^5.3.0",
-    "framer-motion": "^10.12.18",
+    "@reduxjs/toolkit": "^1.9.7",
+    "cross-env": "^7.0.3",
     "history": "^5.3.0",
-    "jsoneditor": "^9.10.2",
-    "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "oidc-client": "^1.11.5",
     "oidc-react": "^3.2.2",
     "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^9.0.0",
-    "prop-types": "^15.8.1",
-    "random-words": "^2.0.0",
+    "postcss-preset-env": "^9.3.0",
     "react": "^18.2.0",
-    "react-avatar": "^5.0.3",
-    "react-bootstrap": "^2.8.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-intl": "^5.25.1",
     "react-intl-po": "^2.2.2",
-    "react-redux": "^8.1.1",
-    "react-resize-detector": "^9.1.0",
-    "react-router-dom": "^6.14.1",
+    "react-redux": "^8.1.3",
+    "react-router-dom": "^6.20.0",
     "react-scripts": "5.0.1",
-    "react-select": "^5.7.3",
-    "react-table": "^7.8.0",
-    "react-toastify": "^9.1.3",
     "redux": "^4.2.1",
     "redux-batched-actions": "^0.5.0",
     "redux-persist": "^6.0.0",
-    "typescript": "^4.9.4",
-    "units-converter": "^1.0.3",
-    "uuid": "^9.0.0",
-    "validate.js": "^0.13.1",
-    "web-vitals": "^3.3.2"
+    "web-vitals": "^3.5.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.6",
+    "@babel/cli": "^7.23.4",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/plugin-transform-react-jsx": "^7.23.4",
+    "@babel/preset-env": "^7.23.5",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@craco/craco": "^7.1.0",
-    "@formatjs/cli": "^6.1.3",
-    "@formatjs/ts-transformer": "^3.13.3",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "babel-plugin-formatjs": "^10.5.3",
-    "eslint": "8.44.0",
-    "eslint-config-prettier": "^8.8.0",
+    "@formatjs/cli": "^6.2.4",
+    "@formatjs/ts-transformer": "^3.13.9",
+    "@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/lodash": "^4.14.202",
+    "@types/node": "^20.10.3",
+    "@types/react": "^18.2.42",
+    "@types/react-dom": "^18.2.17",
+    "@types/react-helmet": "^6.1.11",
+    "@typescript-eslint/parser": "^6.13.2",
+    "babel-plugin-formatjs": "^10.5.10",
+    "eslint": "8.54.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-formatter-pretty": "^5.0.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jest": "^27.2.2",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "2.8.1",
+    "prettier": "3.1.0",
     "react-app-alias-ex": "^2.1.0",
-    "sass": "^1.63.6",
+    "sass": "^1.69.5",
     "shelljs": "^0.8.5",
-    "webpack": "^5.88.1"
+    "typescript": "^4.9.4",
+    "webpack": "^5.89.0"
+  },
+  "overrides": {
+    "react-refresh": "0.11.0"
   },
   "scripts": {
     "start": "npm run generate-language-files && craco start",
@@ -97,7 +78,8 @@
     "generate-language-files": "node ./scripts/generate-language-files.js",
     "lint": "npm-run-all :lint:eslint :lint:prettier",
     ":lint:eslint": "eslint --ext .js,.jsx,.ts,.tsx -c .eslintrc.js --max-warnings 0 --format=pretty ./src",
-    ":lint:prettier": "prettier ./src --check"
+    ":lint:prettier": "prettier ./src --check",
+    ":generate:theme": "npm run :generate:theme -w @plgd/shared-ui"
   },
   "workspaces": [
     "./packages/*"

web/playwright/tests/devices/detail/onboard.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '@playwright/test'
-import testId from '../../../../src/testId'
+import testId from '../../../../packages/shared-ui/src/app/clientApp/testId'
 
 test('onboard device', async ({ page }) => {
     const { WELL_KNOWN_CONFIG, REACT_APP_TEST_LOGIN_USERNAME, REACT_APP_TEST_LOGIN_PASSWORD } = process.env
@@ -14,7 +14,7 @@ test('onboard device', async ({ page }) => {
     // back to page
     await page.goto('/')
 
-    await page.getByTestId('devsim-server00').click()
+    // await page.getByTestId('devsim-server00').click()
 
     // is onboarded -> exist offboard button
     if (await page.getByTestId(offboardButton).isVisible()) {

web/public/index.html

@@ -14,6 +14,7 @@
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root" style="height: 100vh;"></div>
   <div id="modal-root"></div>
+  <div id="toast-root"></div>
 </body>
 
 </html>

web/src/containers/App/App.i18n.ts

@@ -42,4 +42,20 @@ export const messages = defineMessages({
         id: 'app.clickHere',
         defaultMessage: 'Click here!',
     },
+    theme: {
+        id: 'app.theme',
+        defaultMessage: 'Theme',
+    },
+    configurationUpdated: {
+        id: 'app.configurationUpdated',
+        defaultMessage: 'Configuration Updated',
+    },
+    configurationUpdatedMessage: {
+        id: 'app.configurationUpdatedMessage',
+        defaultMessage: 'The configuration was successfully updated.',
+    },
+    config: {
+        id: 'app.config',
+        defaultMessage: 'Config',
+    },
 })

web/src/containers/App/App.scss

@@ -1,24 +1,10 @@
-@import '~bootstrap/scss/bootstrap';
 @import '@/assets/fonts/fontawesome/css/all.min.css';
-@import 'react-toastify/dist/ReactToastify.css';
 
 @import '@shared-ui/common/styles/colors.scss';
 @import '@shared-ui/common/styles/default.scss';
 @import '@shared-ui/common/styles/animations.scss';
-@import '@shared-ui/common/styles/form.scss';
-@import '@shared-ui/components/Atomic/PageLoader/PageLoader.scss';
+
 @import '@shared-ui/components/Atomic/Table/Table.scss';
-@import '@shared-ui/components/Atomic/Table/Pagination.scss';
-@import '@shared-ui/components/Atomic/Badge/Badge.scss';
-@import '@shared-ui/components/Atomic/Label/Label.scss';
-@import '@shared-ui/components/Atomic/Button/Button.scss';
-@import '@shared-ui/components/Atomic/Editor/Editor.scss';
-@import '@shared-ui/components/Atomic/Toast/Toast.scss';
-@import '@shared-ui/components/Atomic/Checkbox/Checkbox.scss';
-@import '@shared-ui/components/Atomic/TextField/TextField.scss';
-@import '@shared-ui/components/Atomic/TreeExpander/TreeExpander.scss';
-@import '@shared-ui/components/Atomic/CopyBox/CopyBox.scss';
-@import '@shared-ui/components/Atomic/SplitButton/SplitButton.scss';
 
 html {
   height: 100%;
@@ -31,12 +17,6 @@ body {
 #root {
   height: 100%;
   min-height: 100vh;
-  //display: flex;
-  //flex-direction: column;
-
-  & > div:first-child{
-    min-height: 100vh;
-  }
 }
 
 #app {
@@ -48,14 +28,6 @@ body {
   overflow: hidden;
 }
 
-
-// Collapsed menu state
-#app.collapsed {
-  #content {
-    //margin-left: $left_panel_collapsed;
-  }
-}
-
 .client-error-message,
 .page-loading-text {
   text-align: center;