npm workspaces (#400)

* initial

* revert @redhat-cloud-services/frontend-components-notifications to ^3.2.2

* Skip client/src/app/store/alert/actions.test.ts for now

* Bumps @redhat-cloud-services/frontend-components-notifications to latest supported

* Build: Moving rules up

* Workaround for Quay build

* Entrypoint path

* Explicitely install server workspace

* Updated package-lock.json

* Updated README.md

.github/workflows/ci-actions.yml

@@ -21,13 +21,13 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install
-        working-directory: pkg/client
+        working-directory: client
         run: npm install
       - name: Build
-        working-directory: pkg/client
+        working-directory: client
         run: npm run build
       - name: Test
-        working-directory: pkg/client
+        working-directory: client
         run: npm run test --coverage --watchAll=false
       - uses: codecov/codecov-action@v1
         with:

.gitignore

@@ -1,17 +1,17 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/pkg/**/node_modules
-/pkg/client/public/locales/**/translation_old.json
+/node_modules
+/client/public/locales/**/translation_old.json
 /.pnp
 .pnp.js
 
 # testing
 /coverage
 
 # production
-/pkg/client/dist
-/pkg/qa-tests/build
+/client/dist
+/qa/build
 
 # misc
 .DS_Store
@@ -25,8 +25,9 @@ npm-debug.log*
 .eslintcache
 
 # cypress
-/pkg/cypress/videos
-/pkg/cypress/screenshots
+# TODO To be groomed
+/qa/cypress/videos
+/qa/cypress/screenshots
 .nyc_output
 
 # VSCode

Dockerfile

@@ -2,9 +2,9 @@
 FROM registry.access.redhat.com/ubi8/nodejs-16 as builder
 USER 0
 COPY . .
-WORKDIR "/opt/app-root/src/pkg/client" 
-RUN npm install && npm run build
-WORKDIR "/opt/app-root/src/pkg/server" 
+WORKDIR "/opt/app-root/src" 
+RUN npm install && npm run build -w client
+WORKDIR "/opt/app-root/src/server" 
 RUN npm install
 
 # Runner image
@@ -33,9 +33,9 @@ LABEL name="konveyor/tackle2-ui" \
       io.openshift.min-cpu="100m" \
       io.openshift.min-memory="350Mi"
 
-COPY --from=builder /opt/app-root/src/pkg/client/dist /opt/app-root/src/pkg/client/dist
-COPY --from=builder /opt/app-root/src/pkg/client/dist/index.html.ejs /opt/app-root/src/pkg/server/views/index.html.ejs
-COPY --from=builder /opt/app-root/src/pkg/server /opt/app-root/src/pkg/server
+COPY --from=builder /opt/app-root/src/client/dist /opt/app-root/src/client/dist
+COPY --from=builder /opt/app-root/src/client/dist/index.html.ejs /opt/app-root/src/server/views/index.html.ejs
+COPY --from=builder /opt/app-root/src/server /opt/app-root/src/server
 COPY --from=builder /opt/app-root/src/entrypoint.sh /usr/bin/entrypoint.sh
 
 ENV DEBUG=1

README.md

@@ -14,13 +14,13 @@ To install a Tackle2 cluster environment please refer to [Tackle documentation](
 ```
 git clone https://github.com/konveyor/tackle2-ui
 cd tackle2-ui
-npm install -ws && npm install
+npm install
 ```
 
 With a Tackle2 environment available (with kubectl authentication validated)  
-then one can start a tackle-ui instance locallly serving the pages from the current source code: 
+then one can start a tackle2-ui instance locallly serving the pages from the current source code: 
 
-`npm run start:dev:local`
+`npm run start:dev`
 
 If you're using minikube please read on.
 

client/config/stylePaths.js

@@ -0,0 +1,42 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require("path");
+module.exports = {
+  stylePaths: [
+    path.resolve(__dirname, "../src"),
+    path.resolve(__dirname, "../../node_modules/patternfly"),
+    path.resolve(__dirname, "../../node_modules/@patternfly/patternfly"),
+    path.resolve(__dirname, "../../node_modules/@patternfly/react-styles/css"),
+    path.resolve(
+      __dirname,
+      "../../node_modules/@patternfly/react-core/dist/styles/base.css"
+    ),
+    path.resolve(
+      __dirname,
+      "../../node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly"
+    ),
+    path.resolve(
+      __dirname,
+      "../../node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css"
+    ),
+    path.resolve(
+      __dirname,
+      "../../node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css"
+    ),
+    path.resolve(
+      __dirname,
+      "../../node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css"
+    ),
+    path.resolve(
+      __dirname,
+      "../../node_modules/@redhat-cloud-services/frontend-components-notifications/index.css"
+    ),
+    path.resolve(
+      __dirname,
+      "../../node_modules/@redhat-cloud-services/frontend-components-notifications/esm/Portal/portal.css"
+    ),
+    path.resolve(
+      __dirname,
+      "../../node_modules/@redhat-cloud-services/frontend-components-notifications/esm/Notification/notification.css"
+    ),
+  ],
+};

pkg/client/config/webpack.common.js → client/config/webpack.common.js

@@ -5,7 +5,6 @@ const Dotenv = require("dotenv-webpack");
 const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
 const { WatchIgnorePlugin } = require("webpack");
 
-
 const BG_IMAGES_DIRNAME = "images";
 
 module.exports = (env) => {
@@ -38,22 +37,22 @@ module.exports = (env) => {
           // only process modules with this loader
           // if they live under a 'fonts' or 'pficon' directory
           include: [
-            path.resolve(__dirname, "../node_modules/patternfly/dist/fonts"),
+            path.resolve(__dirname, "../../node_modules/patternfly/dist/fonts"),
             path.resolve(
               __dirname,
-              "../node_modules/@patternfly/react-core/dist/styles/assets/fonts"
+              "../../node_modules/@patternfly/react-core/dist/styles/assets/fonts"
             ),
             path.resolve(
               __dirname,
-              "../node_modules/@patternfly/react-core/dist/styles/assets/pficon"
+              "../../node_modules/@patternfly/react-core/dist/styles/assets/pficon"
             ),
             path.resolve(
               __dirname,
-              "../node_modules/@patternfly/patternfly/assets/fonts"
+              "../../node_modules/@patternfly/patternfly/assets/fonts"
             ),
             path.resolve(
               __dirname,
-              "../node_modules/@patternfly/patternfly/assets/pficon"
+              "../../node_modules/@patternfly/patternfly/assets/pficon"
             ),
           ],
           use: {
@@ -120,30 +119,30 @@ module.exports = (env) => {
           test: /\.(jpg|jpeg|png|gif)$/i,
           include: [
             path.resolve(__dirname, "../src"),
-            path.resolve(__dirname, "../node_modules/patternfly"),
+            path.resolve(__dirname, "../../node_modules/patternfly"),
             path.resolve(
               __dirname,
-              "../node_modules/@patternfly/patternfly/assets/images"
+              "../../node_modules/@patternfly/patternfly/assets/images"
             ),
             path.resolve(
               __dirname,
-              "../node_modules/@patternfly/react-styles/css/assets/images"
+              "../../node_modules/@patternfly/react-styles/css/assets/images"
             ),
             path.resolve(
               __dirname,
-              "../node_modules/@patternfly/react-core/dist/styles/assets/images"
+              "../../node_modules/@patternfly/react-core/dist/styles/assets/images"
             ),
             path.resolve(
               __dirname,
-              "../node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css/assets/images"
+              "../../node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css/assets/images"
             ),
             path.resolve(
               __dirname,
-              "../node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css/assets/images"
+              "../../node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css/assets/images"
             ),
             path.resolve(
               __dirname,
-              "../node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css/assets/images"
+              "../../node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css/assets/images"
             ),
           ],
           use: [
@@ -159,7 +158,10 @@ module.exports = (env) => {
           type: "javascript/auto",
         },
         {
-          test: path.resolve(__dirname, "../node_modules/xmllint/xmllint.js"),
+          test: path.resolve(
+            __dirname,
+            "../../node_modules/xmllint/xmllint.js"
+          ),
           loader: "exports-loader",
           options: {
             exports: "xmllint",

pkg/client/config/webpack.dev.js → client/config/webpack.dev.js

@@ -10,7 +10,7 @@ module.exports = merge(common("development"), {
   devtool: "eval-source-map",
   watch: true,
   watchOptions: {
-    ignored: ["**/node_modules"],
+    ignored: ["../node_modules"],
   },
   plugins: [
     new HtmlWebpackPlugin({

pkg/client/package.json → client/package.json

@@ -1,14 +1,14 @@
 {
-  "name": "tackle2-ui",
+  "name": "client",
   "version": "0.1.0",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
     "analyze": "source-map-explorer 'dist/static/js/*.js'",
     "prebuild": "npm run tsc",
-    "build:dev": "GENERATE_SOURCEMAP=true $(npm bin)/webpack --config config/webpack.dev.js",
+    "build:dev": "GENERATE_SOURCEMAP=true ../node_modules/webpack/bin/webpack.js --config config/webpack.dev.js",
     "build:instrumentation": "CYPRESS_INSTRUMENT_PRODUCTION=true react-scripts -r @cypress/instrument-cra build",
-    "build": "NODE_ENV=production $(npm bin)/webpack --config ./config/webpack.prod.js",
+    "build": "NODE_ENV=production ../node_modules/webpack/bin/webpack.js --config ./config/webpack.prod.js",
     "extract": "i18next --config i18next-parser.config.js",
     "proxy:hub": "kubectl port-forward svc/tackle-hub -n konveyor-tackle 9002:8080",
     "proxy:keycloak": "kubectl port-forward svc/tackle-keycloak-sso -n konveyor-tackle 9001:8080",
@@ -18,7 +18,7 @@
     "start": "node ../server/index.js -r @cypress/instrument-cra",
     "start:dev": "concurrently -n proxy,server,client -c \"green.bold.inverse,blue.bold.inverse,yellow.bold.inverse\" \"npm:proxy\" \"npm:server\" \"npm:build:dev\"",
     "test": "$(npm bin)/jest --rootDir=. --config=config/jest.config.js",
-    "tsc": "$(npm bin)/tsc -p ./tsconfig.json"
+    "tsc": "../node_modules/typescript/bin/tsc -p ./tsconfig.json"
   },
   "dependencies": {
     "@hookform/resolvers": "^2.8.0",
@@ -30,7 +30,7 @@
     "@patternfly/react-table": "^4.100.8",
     "@patternfly/react-tokens": "^4.83.8",
     "@react-keycloak/web": "^3.4.0",
-    "@redhat-cloud-services/frontend-components-notifications": "^3.2.2",
+    "@redhat-cloud-services/frontend-components-notifications": "^3.2.10",
     "@types/ejs": "^3.1.0",
     "axios": "^0.21.2",
     "ejs": "^3.1.7",
@@ -64,7 +64,7 @@
     "@testing-library/dom": "^8.14.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^4.0.1",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.2.1",
     "@types/enzyme": "^3.10.11",
     "@types/file-saver": "^2.0.2",
@@ -83,9 +83,8 @@
     "browserslist": "^4.19.1",
     "camelcase": "^6.3.0",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "concurrently": "^7.0.0",
-    "copy-webpack-plugin": "^10.2.1",
-    "css-loader": "^5.2.6",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^3.4.1",
     "cypress": "8.4.0",
     "cypress-file-upload": "^5.0.8",
@@ -122,9 +121,9 @@
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.1.0",
     "url-loader": "^4.1.1",
-    "webpack": "^5.67.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.3",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.0",
     "webpack-manifest-plugin": "^4.1.1",
     "webpack-merge": "^5.8.0"
   },