Merge remote-tracking branch 'origin/main' into feature/git-hooks

Author: SimonGolms

.env.template

@@ -6,6 +6,7 @@ VITE_AZURE_ACTIVE_DIRECTORY_CLIENT_ID="11111111-2222-3333-4444-555555555dev"
 VITE_AZURE_ACTIVE_DIRECTORY_TENANT_ID="common"
 
 # Optional for (local) development:
+NODE_ENV="development"
 
 # Opens Browser, e.g. "brave", "chrome" or "edge": https://vitejs.dev/config/#server-open
 # BROWSER="brave"

.eslintrc.js

@@ -6,95 +6,107 @@ module.exports = {
     worker: true,
   },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:import/recommended',
-    'plugin:import/typescript',
-    'plugin:jsx-a11y/recommended',
-    'plugin:playwright/playwright-test',
-    'plugin:sonarjs/recommended',
-    'plugin:typescript-sort-keys/recommended',
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:@typescript-eslint/strict",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "plugin:jsx-a11y/recommended",
+    "plugin:playwright/playwright-test",
+    "plugin:sonarjs/recommended",
+    "plugin:typescript-sort-keys/recommended",
     // HINT: prettier must be the last extension to work
-    'plugin:prettier/recommended',
+    "plugin:prettier/recommended",
   ],
-  ignorePatterns: ['build', 'docker', 'node_modules', 'openshift', 'public'],
+  ignorePatterns: ["build", "dev-dist", "dist", "docker", "node_modules", "openshift", "public"],
   overrides: [
     {
-      files: ['*.ts', '*.tsx'],
+      files: ["*.ts", "*.tsx"],
       rules: {
-        'no-undef': 'off',
-        'no-unused-vars': 'off',
+        "no-undef": "off",
+        "no-unused-vars": "off",
       },
     },
   ],
-  parser: '@typescript-eslint/parser',
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: ["./tsconfig.json"],
+    tsconfigRootDir: __dirname,
+  },
   plugins: [
-    '@typescript-eslint',
-    'jsx-a11y',
-    'react-hooks',
-    'react',
-    'sonarjs',
-    'sort-keys-fix',
-    'typescript-sort-keys',
-    'no-type-assertion',
+    "@typescript-eslint",
+    "jsx-a11y",
+    "react-hooks",
+    "react",
+    "sonarjs",
+    "sort-keys-fix",
+    "typescript-sort-keys",
     // HINT: prettier must be the last plugin to work
-    'prettier',
+    "prettier",
   ],
   rules: {
-    '@typescript-eslint/no-unused-vars': [
-      'warn',
+    "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+    "@typescript-eslint/no-floating-promises": ["error", { ignoreVoid: true }],
+    "@typescript-eslint/no-misused-promises": [
+      "error",
+      {
+        checksVoidReturn: false,
+      },
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
       {
-        argsIgnorePattern: '^_',
-        caughtErrorsIgnorePattern: '^_',
-        varsIgnorePattern: '^_',
+        argsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
       },
     ],
-    '@typescript-eslint/sort-type-union-intersection-members': 'error',
-    camelcase: 'warn',
-    curly: 'error',
-    'import/no-unused-modules': [
-      'error',
+    "@typescript-eslint/sort-type-union-intersection-members": "error",
+    camelcase: "warn",
+    curly: "error",
+    "import/no-unused-modules": [
+      "error",
       {
         ignoreExports: [
-          'playwright/index.ts',
-          'src/index.tsx',
-          'src/**/*.d.ts',
-          'src/**/*.{spec,test}.{ts,tsx}',
-          '*.{js,ts}', // mostly configuration files
+          "playwright/index.ts",
+          "src/index.tsx",
+          "src/**/*.d.ts",
+          "src/**/*.{spec,test}.{ts,tsx}",
+          "*.{js,ts}", // mostly configuration files
         ],
         missingExports: true,
-        src: ['.'],
+        src: ["."],
         unusedExports: true,
       },
     ],
-    'import/order': [
-      'error',
+    "import/order": [
+      "error",
       {
         alphabetize: {
           caseInsensitive: true,
-          order: 'asc',
+          order: "asc",
         },
-        groups: ['builtin', 'external', 'internal'],
+        groups: ["builtin", "external", "internal"],
         pathGroups: [
           {
-            group: 'external',
-            pattern: 'react',
-            position: 'before',
+            group: "external",
+            pattern: "react",
+            position: "before",
           },
         ],
-        pathGroupsExcludedImportTypes: ['react'],
+        pathGroupsExcludedImportTypes: ["react"],
       },
     ],
-    'import/prefer-default-export': 'off',
-    'no-console': ['warn', { allow: ['warn', 'error'] }],
-    'no-type-assertion/no-type-assertion': 'error',
-    'prettier/prettier': 'error',
-    'react/jsx-sort-default-props': 'error',
-    'react/jsx-sort-props': [
-      'error',
+    "import/prefer-default-export": "off",
+    "no-console": ["warn", { allow: ["warn", "error"] }],
+    "prettier/prettier": "error",
+    "react/jsx-sort-default-props": "error",
+    "react/jsx-sort-props": [
+      "error",
       {
         callbacksLast: true,
         ignoreCase: true,
@@ -104,34 +116,34 @@ module.exports = {
         shorthandLast: false,
       },
     ],
-    'react-hooks/exhaustive-deps': 'error',
-    'react-hooks/rules-of-hooks': 'error',
-    'sort-imports': [
-      'error',
+    "react-hooks/exhaustive-deps": "error",
+    "react-hooks/rules-of-hooks": "error",
+    "sort-imports": [
+      "error",
       {
         ignoreCase: true,
         ignoreDeclarationSort: true,
         ignoreMemberSort: false,
       },
     ],
     // Required to fix sort-keys automatically, since this is not done by default.
-    'sort-keys-fix/sort-keys-fix': [
-      'error',
-      'asc',
+    "sort-keys-fix/sort-keys-fix": [
+      "error",
+      "asc",
       {
         caseSensitive: false,
         natural: true,
       },
     ],
   },
   settings: {
-    'import/resolver': {
+    "import/resolver": {
       typescript: {
         alwaysTryTypes: true,
       },
     },
     react: {
-      version: 'detect',
+      version: "detect",
     },
   },
 };

.github/workflows/build-and-test.yaml

@@ -0,0 +1,44 @@
+name: Build and Test
+on:
+  push:
+    branches-ignore:
+      - 'main'
+
+jobs:
+  build_and_test:
+    name: 'Build and Test'
+    runs-on: ubuntu-20.04
+    container:
+      # Using the playwright container (https://mcr.microsoft.com/product/playwright/about)
+      # for performance reasons to avoid having to download and install all dependencies again.
+      image: mcr.microsoft.com/playwright:v1.27.1-focal
+      # Container should run with the same user of the host VM, otherwise it leads to permission issues
+      # see: https://github.com/actions/runner/issues/691 & https://github.com/actions/checkout/issues/211#issuecomment-680107607
+      options: --user 1001
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
+      # Ignore README.md from find results to avoid unintentionally changes on the release step
+      - name: Setup Quickstarter (Project ID)
+        run: find . -type f \( ! -name "README.md" \) -exec sed -i 's/PROJECTID/foo/g' {} +
+      # Ignore README.md from find results to avoid unintentionally changes on the release step
+      - name: Setup Quickstarter (Component ID)
+        run: find . -type f \( ! -name "README.md" \) -exec sed -i 's/COMPONENTID/app/g' {} +
+      - name: Install Dependencies
+        run: npm ci
+      - name: Analyze Code - Check ESLint Rules
+        run: npm run lint
+      - name: Test Components
+        env:
+          VITE_AZURE_ACTIVE_DIRECTORY_CLIENT_ID: '11111111-2222-3333-4444-555555555dev'
+          # IMPORTANT: A valid Azure AD Tenant ID for testing purposes is required.
+          VITE_AZURE_ACTIVE_DIRECTORY_TENANT_ID: 'common'
+        run: npm run test
+      - name: Build Application
+        run: npm run build

.github/workflows/release.yaml

@@ -9,14 +9,16 @@ jobs:
       # Disable husky (git hooks) in CI, see: https://typicode.github.io/husky/#/?id=disable-husky-in-cidocker
       HUSKY: 0
     name: Release
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
       # Ignore README.md from find results to avoid unintentionally changes on the release step
       - name: Setup Quickstarter (Project ID)
         run: find . -type f \( ! -name "README.md" \) -exec sed -i 's/PROJECTID/foo/g' {} +

.gitignore

@@ -11,10 +11,14 @@
 /playwright/.cache/
 /test-results/
 
+# development
+/dev-dist
+
 # production
 /build
 /dist
 /docker/build
+/docker/dist
 
 # misc
 .DS_Store

.husky/commit-msg

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx --no -- commitlint --edit "$1" || { echo "Try \033[1;32mnpx git-cz --disable-emoji\033[0;37m to commit and be align with the conventions or use \033[1;32git commit -m \"yolo!\" --no-verify\033[0;37m to bypass the commit-msg hook."; exit 1; }
+npx --no -- commitlint --edit "$1" || { echo "Try \033[1;32mnpx git-cz --disable-emoji\033[0;37m to commit and be align with the conventions or use \033[1;33mgit commit -m \"yolo!\" --no-verify\033[0;37m to bypass the commit-msg hook."; exit 1; }

.husky/pre-commit

@@ -1,5 +1,15 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
+# The (feature) branch name is part of the helm release name and only supports a maximum number of characters.
+# The number is unknown for the moment, since it's also depends on Project Id and Component Id.
+# However, the recommendation is that the branch name should not be longer than 32 characters.
+BRANCH_NAME_LENGTH=$(git branch --show-current | wc -m)
+BRANCH_NAME_MAX_LENGTH=32
+if [ $BRANCH_NAME_LENGTH -gt $BRANCH_NAME_MAX_LENGTH ]
+then
+ echo "\033[1;31m✖ Branch name too long ($((BRANCH_NAME_LENGTH))), only $((BRANCH_NAME_MAX_LENGTH)) characters are allowed. Change with 'git branch -m \"new-name\"'\033[0m" && exit;
+fi
+
 npx --no lint-staged
 helm lint chart --strict

.lintstagedrc.js

@@ -1,8 +1,13 @@
 module.exports = {
   '*.css': ['stylelint --fix', 'git add --force'],
-  '*.{js,jsx,ts,tsx}': [
-    // Extend rule levels based on .eslintrc.js
-    "eslint --fix --rule '@typescript-eslint/no-unused-vars: error' --rule 'no-console: error'",
+  '*.{js,jsx}': [
+    // Extend rule set of .eslintrc.js with 'no-console' and 'no-unused-vars'
+    "eslint --fix --rule 'no-console: [error, { allow: [warn, error] }]' --rule 'no-unused-vars: error'",
+    'git add --force',
+  ],
+  '*.{ts,tsx}': [
+    // Extend rule set of .eslintrc.js with 'no-console' and '@typescript-eslint/no-unused-vars'
+    "eslint --fix --rule 'no-console: [error, { allow: [warn, error] }]' --rule '@typescript-eslint/no-unused-vars: [error, { argsIgnorePattern: ^_, caughtErrorsIgnorePattern: ^_, varsIgnorePattern: ^_, }]'",
     'git add --force',
   ],
   '*.json': ['prettier --write', 'git add --force'],

.npmrc

@@ -9,4 +9,5 @@
 # strict-ssl = false
 
 registry = https://registry.npmjs.org/
+save-exact = true
 strict-ssl = true

.nvmrc

@@ -1 +1 @@
-lts/*
+v18