INTYGFV-15269: Upgrade build system, react and dependencies (#715)

.eslintrc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['custom'],
+}

.eslintrc.json.back

@@ -0,0 +1,54 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "prettier/@typescript-eslint",
+    "prettier/react",
+    "plugin:jsdoc/recommended",
+    "plugin:prettier/recommended",
+    "plugin:storybook/recommended"
+  ],
+  "plugins": ["unused-imports"],
+  "settings": {
+    "jsdoc": {
+      "mode": "typescript"
+    }
+  },
+  "rules": {
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "unused-imports/no-unused-imports": "error",
+    "unused-imports/no-unused-vars": ["warn"],
+    "import/no-relative-packages": "error",
+    "jsdoc/require-jsdoc": "off",
+    "jsdoc/require-param": "off",
+    "jsdoc/require-returns": "off"
+  },
+  "overrides": [
+    {
+      "files": ["packages/webcert-e2e/**/*.js"],
+      "extends": ["plugin:cypress/recommended"],
+      "rules": {
+        "no-undef": "off",
+        "@typescript-eslint/no-var-requires": "off",
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "no-unused-expressions": "off"
+      }
+    },
+    {
+      "files": ["*.stories.@(ts|tsx|js|jsx|mjs|cjs)"],
+      "rules": {
+        "import/no-anonymous-default-export": "off"
+      }
+    },
+    {
+      "files": ["**/*.stories.*"],
+      "rules": {
+        "import/no-anonymous-default-export": "off"
+      }
+    }
+  ]
+}

.github/workflows/e2e.yml

@@ -9,12 +9,12 @@ jobs:
       - uses: cypress-io/github-action@v4
         env:
           NODE_TLS_REJECT_UNAUTHORIZED: 0
-          HTTP_PROXY_LOGS: 'false'
         with:
-          install-command: yarn --frozen-lockfile --silent
           working-directory: 'packages/webcert-e2e'
-          start: yarn workspace @frontend/webcert start:test
-          wait-on: 'https://localhost:3000'
+          install-command: yarn --frozen-lockfile --silent
+          build: yarn workspace @frontend/common build
+          start: yarn workspace @frontend/webcert dev -m test
+          wait-on: 'https://127.0.0.1:3000'
           command: yarn workspace @frontend/webcert-e2e cypress run
-            --config baseUrl=https://localhost:3000,screenshotOnRunFailure=false
+            --config baseUrl=https://127.0.0.1:3000,screenshotOnRunFailure=false
             --env grepTags=@react,grepFilterSpecs=true

.github/workflows/frontend.yml

@@ -10,42 +10,38 @@ on:
     branches: [master, 'project/**']
 
 jobs:
-  eslint:
-    name: runner / eslint
+  build:
+    name: Build and Test
+    timeout-minutes: 15
     runs-on: ubuntu-latest
+    # To use Remote Caching, uncomment the next lines and follow the steps below.
+    # env:
+    #  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+    #  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '14.x'
-          cache: 'yarn'
-      - run: yarn install --frozen-lockfile
-      - uses: reviewdog/action-eslint@v1.17.0
-  tsc:
-    name: runner / tsc
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        package: [common, webcert]
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - name: Check out code
+        uses: actions/checkout@v3
         with:
-          node-version: '14.x'
-          cache: 'yarn'
-      - run: yarn install --frozen-lockfile
-      - run: yarn workspace @frontend/${{ matrix.package }} tsc --noEmit
-  jest:
-    name: runner / jest
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        package: [common, webcert]
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+          fetch-depth: 2
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
         with:
-          node-version: '14.x'
+          node-version: 14
           cache: 'yarn'
-      - run: yarn install --frozen-lockfile
-      - run: yarn workspace @frontend/${{ matrix.package }} test:ci
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Build
+        run: yarn build
+
+      - name: 'Lint'
+        uses: reviewdog/action-eslint@v1.17.0
+
+      - name: Typescript
+        run: yarn typescript
+
+      - name: Test
+        run: yarn test

.gitignore

@@ -12,6 +12,10 @@ junit.xml
 # production
 build
 
+# development
+dist
+.turbo
+
 # misc
 .DS_Store
 .env.local
@@ -27,4 +31,6 @@ yarn-error.log*
 /packages/webcert-e2e/results/
 /packages/webcert-e2e/videos/
 
-/.vscode/settings.json
+/.vscode/settings.json
+
+lint-result.xml

Dockerfile.webcert

@@ -1,4 +1,4 @@
-FROM node:12-alpine3.12 AS build-stage
+FROM node:14-alpine3.16 AS build-stage
 
 # RUN npm install -g yarn
 RUN apk update
@@ -18,7 +18,6 @@ WORKDIR /app
 COPY ./package.json .
 COPY ./yarn.lock .
 COPY ./packages/common/package.json ./packages/common/package.json
-COPY ./packages/mockserver/package.json ./packages/mockserver/package.json
 COPY ./packages/webcert/package.json ./packages/webcert/package.json
 
 # Install all dependencies
@@ -27,9 +26,6 @@ RUN yarn install
 # Copy the source
 COPY . .
 
-# Change to webcert
-WORKDIR /app/packages/webcert
-
 RUN yarn build
 
 # Make nginx image
@@ -41,7 +37,7 @@ WORKDIR /usr/share/nginx/html
 # Remove default nginx static assets
 RUN rm -rf ./*
 
-COPY --from=build-stage /app/packages/webcert/build/ .
+COPY --from=build-stage /app/packages/webcert/dist/ .
 
 COPY --from=build-stage /app/packages/webcert/nginx/templates /etc/nginx/templates/
 COPY --from=build-stage /app/packages/webcert/nginx/conf/nginx.conf /etc/nginx/nginx.conf

README.md

@@ -19,32 +19,35 @@
 
 ## Setup
 
-- Clone the repo. `git clone https://github.com/sklintyg/frontend.git`
-- Open terminal in `sklintyg/frontend/` and install packages with `yarn install`
-- Configure preferred IDE
-  - IntelliJ
-    - Install [Prettier](https://plugins.jetbrains.com/plugin/10456-prettier/) plugin.
-    - Configure to use prettier when formatting in IntelliJ (requires IntelliJ 2020.2). See Settings -> Language & Frameworks -> Javascript -> Prettier
-  - VS Code
-    - Install plugin `ESLint`
-    - Install plugin `vscode-styled-components`
-    - Install plugin `Prettier - Code formatter`
-    - Enable auto format on save
-      - Press `ctrl` + `shift` + `p`, type `settings` and open `Preferences: Open Settings (JSON)`
-      - Add the following properties
-        ```json
-        {
-          "editor.defaultFormatter": "esbenp.prettier-vscode",
-          "editor.formatOnSave": true
-        }
-        ```
-      - Add the following properties (_optional_)
-        ```json
-        "editor.codeActionsOnSave": {
-          "source.organizeImports": true,
-          "source.fixAll": true
-        }
-        ```
+1. Install dependencies with `yarn install`
+2. Execute a build with `yarn build`
+3. Start development environment and watchers with `yarn start`
+
+## Configure Editor
+
+- IntelliJ
+  - Install [Prettier](https://plugins.jetbrains.com/plugin/10456-prettier/) plugin.
+  - Configure to use prettier when formatting in IntelliJ (requires IntelliJ 2020.2). See Settings -> Language & Frameworks -> Javascript -> Prettier
+- VS Code
+  - Install plugin `ESLint`
+  - Install plugin `vscode-styled-components`
+  - Install plugin `Prettier - Code formatter`
+  - Enable auto format on save
+    - Press `ctrl` + `shift` + `p`, type `settings` and open `Preferences: Open Settings (JSON)`
+    - Add the following properties
+      ```json
+      {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
+      }
+      ```
+    - Add the following properties (_optional_)
+      ```json
+      "editor.codeActionsOnSave": {
+        "source.organizeImports": true,
+        "source.fixAll": true
+      }
+      ```
 
 ## Run Webcert backend and frontend client
 
@@ -63,7 +66,7 @@ Detailed instructions for building and running the backend apps can be found in
    - Open terminal in `sklintyg/webcert/`
    - Run command `gradlew appRun` (or `./gradlew appRun` in Git Bash)
 5. Run the app in the development mode. React will hot-reload changes made in the app as well as in common.
-   - Start webcert in development: `yarn workspace @frontend/webcert start`
+   - Start webcert in development: `yarn start`
 6. Navigate to Webcert-frontend in a chromium-browser: https://wc2.wc.localtest.me/welcome
 
 ## OpenShift Build Pipeline
@@ -97,13 +100,11 @@ Storybook can be used to develop and test components within the common package.
 
 ## Running tests
 
-Jest is used for executing tests.
+vitest is used for executing tests.
 
-To run tests in Webcert: `yarn workspace @frontend/webcert test`
+To run tests in all packages `yarn test`
 
-To run tests in Common: `yarn workspace @frontend/common test` (add `--watchAll` if you want the test runner to run the tests for any change you make.)
-
-See [Jest CLI Options](https://jestjs.io/docs/en/cli) for more info what you can do when executing tests.
+To run tests in a perticular workspace `yarn workspace <name of workspace> test`
 
 ## Writing tests
 
@@ -113,18 +114,17 @@ Smoke test that checks if the component can be rendered without crashing. Ex:
 
 ```javascript
 it('renders without crashing', () => {
-  const question = createQuestionWithTextValue()
-  const div = document.createElement('div')
-  ReactDOM.render(<UvText question={question} />, div)
+  const question = fakeTextElement({ id: 'id' })
+  expect(render(<UvText question={question['id']} />)).not.toThrow()
 })
 ```
 
 Tests that verifies the components behavior from a user perspective. Use React Testing Library.
 
 ```javascript
 it('displaying empty value', () => {
-  const question = createQuestion({ type: CertificateDataValueType.TEXT })
-  const { getByText } = render(<UvText question={question} />)
+  const question = fakeTextElement({ id: 'id' })
+  const { getByText } = render(<UvText question={question['id']} />)
   getByText(/Ej angivet/i)
 })
 ```

openshift/s2i-frontend-builder/s2i/bin/assemble

@@ -24,41 +24,25 @@ yarn lint
 echo "############### Posting Linting report ###############"
 curl -X POST -k -d @lint-result.xml $PIPELINE_CALLBACK_URL
 
-# Run common tests
-echo "############### Testing Common ###############"
-CI=true yarn workspace @frontend/common test:ci
-
-# Run webcert tests
-echo "############### Testing Webcert ###############"
-CI=true yarn workspace @frontend/webcert test:ci
-
-# Copy test reports
-echo "############### Moving Testing Reports ###############"
-mkdir results
-mv packages/common/junit.xml results/junit-common.xml
-mv packages/webcert/junit.xml results/junit-webcert.xml
-mv packages/webcert/coverage/cobertura-coverage.xml .
-
-# Merge test results
-echo "############### Mergings Testing Reports ###############"
-yarn merge-reports
+# Run tests
+echo "############### Testing ###############"
+CI=true yarn test:ci
 
 # Copy reports
 echo "############### Posting Testing Reports ###############"
-curl -X POST -k -d @combined.xml $PIPELINE_CALLBACK_URL
+curl -X POST -k -d @junit.xml $PIPELINE_CALLBACK_URL
 curl -X POST -k -d @cobertura-coverage.xml $PIPELINE_CALLBACK_URL
 
 # Make a production build
 echo "############### Production Build ###############"
-#CI=true yarn workspace @frontend/webcert build
-yarn workspace @frontend/webcert build
+yarn build
 BUILD_RESULT=$?
 echo $BUILD_RESULT
 curl -X POST -k -d $BUILD_RESULT $PIPELINE_CALLBACK_URL
 
 # Copy the resulting artifacts
 echo "############### Moving Build Artifacts ###############"
-mv packages/webcert/build/* /tmp/artifacts/build
+mv packages/webcert/dist/* /tmp/artifacts/build
 
 # Copy the nginx configuration
 echo "############### Moving Nginx Configuration ###############"