@testgorilla/tgo-ui 2.30.13 → 2.31.1

package/.circleci/config.yml

@@ -0,0 +1,349 @@
+version: 2.1
+
+orbs:
+  node: circleci/node@5.0.2
+  aws-cli: circleci/aws-cli@3.1.1
+  slack: circleci/slack@4.13.3
+
+aliases:
+  - &only-main-and-hotfix
+    branches:
+      only:
+        - master
+        - /hotfix.*/
+  - &slack-notify-only-main-and-hotfix
+    event: fail
+    branch_pattern: 'master, hotfix.*'
+    template: basic_fail_1
+  - &slack-notify-all
+    event: fail
+    template: basic_fail_1
+  - &only-pull-requests
+    branches:
+      ignore:
+        - master
+        - /hotfix.*/
+        - /qa.*/
+
+commands:
+   get-cicd-tools:
+    description: "Get the CICD-Tools project"
+    steps:
+      - run:
+          name: Checkout CICD-Tools project
+          command: |
+            git clone --depth=1 git@github.com:TestGorilla-BV/tgo-cicd-tools.git --single-branch --branch=master
+      - restore_cache:
+          key: python-tools-V1-{{ checksum "tgo-cicd-tools/requirements.txt" }}
+      - run:
+          name: pip tool dependencies
+          command: |
+            python3 -m venv .venv
+            source .venv/bin/activate
+            # Install dependencies
+            pip install -r tgo-cicd-tools/requirements.txt
+            # Add to path
+            echo "source .venv/bin/activate" >> $BASH_ENV;
+      - save_cache:
+          key: python-tools-V1-{{ checksum "tgo-cicd-tools/requirements.txt" }}
+          paths:
+            - ".venv"
+
+executors:
+  playwright_latest:
+    docker:
+      - image: mcr.microsoft.com/playwright:latest
+  node_18:
+    docker:
+      - image: cimg/node:18.20
+  python_node_executor:
+    docker:
+      - image: cimg/python:3.11.11-node
+
+jobs:
+  playwright-visual-tests:
+    executor: playwright_latest
+    working_directory: ~/project
+    parallelism: 2
+    environment:
+      NODE_OPTIONS: "--max-old-space-size=4096"
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - node_modules-{{ checksum "package.json" }}
+            - node_modules- # fallback to using the latest cache if no exact match is found
+      - run:
+            name: Install dependencies
+            command: |
+              rm -rf node_modules yarn.lock package-lock.json
+              export NODE_OPTIONS="--max-old-space-size=4096"
+              npm install --force
+              npx playwright install --with-deps
+              npm install -g wait-on
+      - save_cache:
+          paths:
+            - node_modules
+          key: node_modules-{{ checksum "package.json" }}
+      - run:
+          name: Running tests
+          command: |
+            npx ng build tgo-ui
+            SHARD="$((${CIRCLE_NODE_INDEX}+1))"; npx playwright test visual-tests --config 'visual-tests/playwright.config.ts' --shard=${SHARD}/${CIRCLE_NODE_TOTAL} || true
+      - store_test_results:
+          path: ./visual-tests/test-results
+      - store_artifacts:
+          path: ./visual-tests/test-results 
+          event: fail
+      - persist_to_workspace:
+          root: .
+          paths: 
+            - ./visual-tests
+      # - slack/notify: *slack-notify-all
+  build:
+    executor:
+      name: node/default
+      tag: '18.13'
+    steps:
+      - checkout
+      - node/install-packages
+      - run: npm run build-storybook
+      - persist_to_workspace:
+          root: storybook-static
+          paths:
+            - .
+      - slack/notify: *slack-notify-only-main-and-hotfix
+  
+  unit-tests:
+    docker:
+      - image: cimg/node:18.20
+    steps:
+      - checkout
+      - run: npm install
+      - save_cache:
+          paths:
+            - node_modules
+          key: node_modules-{{ checksum "package.json" }}
+      - run:
+          name: unit tests
+          no_output_timeout: 30m
+          environment:
+            NODE_OPTIONS: "--max-old-space-size=8192"
+          command: |
+            npm run test:ci
+      - persist_to_workspace:
+          root: .
+          paths:
+            - coverage
+  coverage-report:
+    executor: python_node_executor
+    resource_class: small
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          name: package dependencies
+          command: |
+            sudo npm install -g nyc
+      - run:
+          name: "Combine coverage report"
+          command: |
+            mv /tmp/workspace/coverage .
+            for dir in ./coverage/; do
+                base=$(basename "$dir")
+                mv "$dir/coverage-final.json" "./coverage/coverage-final-$base.json"
+            done
+            nyc merge ./coverage/
+            mkdir -p ./coverage/merged/
+            mv coverage.json ./coverage/merged/coverage-final.json
+            nyc report --reporter=html --report-dir=./coverage/merged --temp-dir=./coverage/merged
+      - store_artifacts:
+          path: /coverage/merged
+      - get-cicd-tools
+      - run:
+          name: "Check test coverage for changed lines"
+          command: python ./tgo-cicd-tools/utils/typescript_check_test_coverage_in_pr_changes.py $GH_TOKEN_TGO_GITHUB $CIRCLE_PULL_REQUEST "coverage/merged/coverage-final.json" 90
+  deploy:
+    executor: aws-cli/default
+    steps:
+      - attach_workspace:
+          at: /tmp/workspace
+      - aws-cli/install
+      - run: aws s3 sync --delete /tmp/workspace/. s3://tgo-ui-frontend-bucket-dev-eu
+      - run: aws cloudfront create-invalidation --distribution-id $UI_CLOUDFRONT_DISTRIBUTION_ID --paths "/*"
+      - slack/notify: *slack-notify-only-main-and-hotfix
+  fossa-check:
+    docker:
+      - image: cimg/base:stable
+    resource_class: small
+    steps:
+      - run: |
+          curl -H 'Cache-Control: no-cache' https://raw.githubusercontent.com/fossas/fossa-cli/master/install-latest.sh | bash
+      - checkout
+      - run:
+          command: fossa analyze
+  update-snapshots:
+    executor: playwright_latest
+    working_directory: ~/project
+    environment:
+      NODE_OPTIONS: "--max-old-space-size=4096"
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - node_modules-{{ checksum "package.json" }}
+            - node_modules- # fallback to using the latest cache if no exact match is found
+      - run:
+            name: Install dependencies
+            command: |
+              rm -rf node_modules yarn.lock package-lock.json
+              npm install --force
+              npx playwright install --with-deps
+              npm install -g wait-on
+      - run:
+          name: Update snapshots
+          command: |
+            npx ng build tgo-ui
+            npx playwright test visual-tests --config 'visual-tests/playwright.config.ts'  --update-snapshots
+      - persist_to_workspace:
+          root: .
+          paths: 
+            - .
+  commit-snapshots-to-branch:
+    executor: node_18
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/project
+      - run:
+          name: Configure Git
+          command: |
+            git config --global user.email "$GIT_USER_EMAIL"
+            git config --global user.name "$GIT_USER_NAME"
+     
+      - run:
+          name: Check git diff
+          command: |
+            git status
+            git diff
+      - run:
+          name: Commit and Push Changes
+          command: |
+            git add .
+            git commit -m "Snapshot update commit by CircleCI"
+            git push https://$GIT_USER_NAME:$GIT_PERSONAL_ACCESS_TOKEN@github.com/TestGorilla-BV/tgo-canopy-ui.git $CIRCLE_BRANCH
+  slack-notify:
+    executor: node_18
+    parameters:
+      test_results_path:
+        type: string
+        default: "visual-tests/test-results"
+    steps:
+      - run:
+          name: Checkout QA automation project
+          command: |
+            git clone --depth=1 https://$GIT_PERSONAL_ACCESS_TOKEN@github.com/TestGorilla-BV/tgo-qa-automation.git --single-branch --branch=master
+      - attach_workspace:
+          at: ~/project 
+      - run:
+          name: List workspace layers & move results to QA workspace
+          command: |
+            ls
+            cp -R << parameters.test_results_path >> tgo-qa-automation/playwright/test-results/ || true
+            cd tgo-qa-automation/playwright/test-results
+            ls
+      - run:
+            name: Install dependencies
+            command: |
+              cd tgo-qa-automation/playwright
+              npm install --force
+      - run:
+          name: Merge blob results
+          command: |
+            cd tgo-qa-automation/playwright/
+            npx playwright merge-reports --reporter html test-results
+            mv playwright-report/* test-results
+            ls test-results
+      - store_artifacts:
+          path: tgo-qa-automation/playwright/test-results
+      - run:
+          name: Send html report
+          command: |
+            cd tgo-qa-automation/playwright/
+            node helpers/slackNotifyHtml.ts
+      - slack/notify:
+          event: pass
+          template: basic_success_1
+  accessibility-linter:
+    executor: node_18
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - node_modules-{{ checksum "package.json" }}
+            - node_modules- # fallback to using the latest cache if no exact match is found
+      - run:
+              name: Install dependencies
+              command: |
+                npm install
+      - run:
+          name: Run eslint and log warnings
+          command: |
+            npm run lint:a11y || true
+      - run:
+          name: Calculate a11y violation metrics and validate
+          command: |
+            npm run lint:a11y > lint-a11y-output.txt || true
+            node parse-a11y-linter.js $A11Y_VIOLATION_THRESHOLD
+
+workflows:
+  version: 2
+  tgo-ui:
+    jobs:
+      - unit-tests
+      - coverage-report:
+          context:
+            - slack
+          requires:
+            - unit-tests
+          filters: *only-pull-requests
+      - playwright-visual-tests:
+          context:
+            - slack
+      - accessibility-linter:
+          context:
+            - qa-automation
+      - build:
+          filters: *only-main-and-hotfix
+          context:
+            - slack
+      - fossa-check:
+          requires:
+            - playwright-visual-tests
+      - deploy:
+          context:
+            - dev
+            - slack
+          requires:
+            - build
+          filters: *only-main-and-hotfix
+      - slack-notify:
+          requires:
+            - playwright-visual-tests
+          context:
+            - git
+      - update-snapshot-approval:
+          type: approval
+          requires:
+            - playwright-visual-tests
+      - update-snapshots:
+          requires:
+            - update-snapshot-approval
+          context:
+            - git
+      - commit-snapshots-to-branch:
+            requires:
+              - update-snapshots
+            context:
+              - git

package/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+package.json
+package-lock.json
+karma.conf.js

package/.eslintrc-a11y.js

@@ -0,0 +1,23 @@
+module.exports = {
+  overrides: [
+    {
+      files: ['*.html', '**/*.component.html'],
+      parser: '@angular-eslint/template-parser',
+      plugins: ['@html-eslint','@angular-eslint/template'],
+      rules: {
+        '@angular-eslint/template/click-events-have-key-events':'error',
+        '@angular-eslint/template/accessibility-elements-content':'error',
+        '@angular-eslint/template/accessibility-valid-aria':'error',
+        '@html-eslint/no-abstract-roles': 'error',
+        '@html-eslint/no-accesskey-attrs': 'error',
+        '@html-eslint/no-aria-hidden-body': 'error',
+        '@html-eslint/no-non-scalable-viewport': 'error',
+        '@html-eslint/no-positive-tabindex': 'error',
+        '@html-eslint/no-skip-heading-levels': 'error',
+        '@html-eslint/require-frame-title': 'error',
+        '@html-eslint/require-img-alt': 'error',
+        '@html-eslint/require-meta-viewport': 'error',
+      },
+    },
+  ],
+};

package/.eslintrc.js

@@ -0,0 +1,301 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+  },
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'prettier',
+    'plugin:storybook/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: 'tsconfig.json',
+    tsconfigRootDir: __dirname,
+    sourceType: 'module',
+  },
+  plugins: [
+    'eslint-plugin-import',
+    '@angular-eslint/eslint-plugin',
+    'eslint-plugin-jsdoc',
+    '@angular-eslint/eslint-plugin-template',
+    'eslint-plugin-prefer-arrow',
+    '@typescript-eslint',
+    'prettier',
+  ],
+  rules: {
+    '@angular-eslint/component-class-suffix': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@angular-eslint/component-selector': [
+      'warn', //TODO: Valid rule, needs retroactive work
+      {
+        type: 'element',
+        prefix: 'ui',
+        style: 'kebab-case',
+      },
+    ],
+    '@angular-eslint/contextual-lifecycle': 'error',
+    '@angular-eslint/directive-class-suffix': 'error',
+    '@angular-eslint/directive-selector': [
+      'warn',
+      {
+        type: 'attribute',
+        prefix: 'ui',
+        style: 'camelCase',
+      },
+    ],
+    // TODO: Valid rule, needs retroactive work
+    '@angular-eslint/no-conflicting-lifecycle': 'error',
+    '@angular-eslint/no-host-metadata-property': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@angular-eslint/no-input-rename': 'error',
+    '@angular-eslint/no-inputs-metadata-property': 'error',
+    '@angular-eslint/no-output-native': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@angular-eslint/no-output-on-prefix': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@angular-eslint/no-output-rename': 'error',
+    '@angular-eslint/no-outputs-metadata-property': 'error',
+    '@angular-eslint/use-lifecycle-interface': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@angular-eslint/use-pipe-transform-interface': 'error',
+    '@typescript-eslint/adjacent-overload-signatures': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/array-type': 'off',
+    '@typescript-eslint/ban-types': [
+      'warn',
+      {
+        types: {
+          Object: {
+            message: 'Avoid using the `Object` type. Did you mean `object`?',
+          },
+          Function: {
+            message: 'Avoid using the `Function` type. Prefer a specific function type, like `() => void`.',
+          },
+          Boolean: {
+            message: 'Avoid using the `Boolean` type. Did you mean `boolean`?',
+          },
+          Number: {
+            message: 'Avoid using the `Number` type. Did you mean `number`?',
+          },
+          String: {
+            message: 'Avoid using the `String` type. Did you mean `string`?',
+          },
+          Symbol: {
+            message: 'Avoid using the `Symbol` type. Did you mean `symbol`?',
+          },
+        },
+      },
+    ],
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/consistent-type-assertions': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/explicit-member-accessibility': [
+      'off',
+      {
+        accessibility: 'explicit',
+      },
+    ],
+    '@typescript-eslint/member-delimiter-style': [
+      'error',
+      {
+        multiline: {
+          delimiter: 'semi',
+          requireLast: true,
+        },
+        singleline: {
+          delimiter: 'semi',
+          requireLast: false,
+        },
+      },
+    ],
+    '@typescript-eslint/naming-convention': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-empty-interface': 'error',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-inferrable-types': [
+      'error',
+      {
+        ignoreParameters: true,
+      },
+    ],
+    '@typescript-eslint/no-misused-new': 'error',
+    '@typescript-eslint/no-namespace': 'error',
+    '@typescript-eslint/no-non-null-assertion': 'error',
+    '@typescript-eslint/no-parameter-properties': 'off',
+    '@typescript-eslint/no-shadow': [
+      'warn',
+      {
+        hoist: 'all',
+      },
+    ],
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/no-unused-expressions': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/prefer-for-of': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/prefer-function-type': 'error',
+    '@typescript-eslint/prefer-namespace-keyword': 'error',
+    '@typescript-eslint/semi': ['error', 'always'],
+    '@typescript-eslint/triple-slash-reference': [
+      'error',
+      {
+        path: 'always',
+        types: 'prefer-import',
+        lib: 'always',
+      },
+    ],
+    '@typescript-eslint/type-annotation-spacing': 'error',
+    '@typescript-eslint/unified-signatures': 'error',
+    'arrow-body-style': 'error',
+    'arrow-parens': ['off', 'always'],
+    'brace-style': ['off', 'off'],
+    'comma-dangle': 'off',
+    complexity: 'off',
+    'constructor-super': 'error',
+    curly: 'error',
+    'dot-notation': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    'eol-last': 'error',
+    eqeqeq: ['warn', 'smart'],
+    // TODO: Valid rule, needs retroactive work
+    'guard-for-in': 'error',
+    'id-denylist': [
+      'warn',
+      'any',
+      'Number',
+      'number',
+      'String',
+      'string',
+      'Boolean',
+      'boolean',
+      'Undefined',
+      'undefined',
+    ],
+    // TODO: Valid rule, needs retroactive work
+    'id-match': 'error',
+    'import/no-deprecated': 'warn',
+    'import/order': 'off',
+    'jsdoc/check-alignment': 'error',
+    'linebreak-style': 'off',
+    'max-classes-per-file': 'off',
+    'max-len': [
+      'warn', //TODO: Valid rule, needs retroactive work
+      {
+        ignorePattern: '^import |^export | implements',
+        code: 180,
+      },
+    ],
+    'new-parens': 'off',
+    'newline-per-chained-call': 'off',
+    'no-bitwise': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    'no-caller': 'error',
+    'no-cond-assign': 'error',
+    'no-console': [
+      'error',
+      {
+        allow: [
+          'warn',
+          'dir',
+          'timeLog',
+          'assert',
+          'clear',
+          'count',
+          'countReset',
+          'group',
+          'groupEnd',
+          'table',
+          'dirxml',
+          'error',
+          'groupCollapsed',
+          'Console',
+          'profile',
+          'profileEnd',
+          'timeStamp',
+          'context',
+        ],
+      },
+    ],
+    'no-debugger': 'error',
+    'no-empty': 'off',
+    'no-empty-function': 'off',
+    'no-eval': 'error',
+    'no-extra-semi': 'off',
+    'no-fallthrough': 'error',
+    'no-invalid-this': 'off',
+    'no-irregular-whitespace': 'off',
+    'no-multiple-empty-lines': 'off',
+    'no-new-wrappers': 'error',
+    'no-restricted-imports': ['error', 'rxjs/Rx'],
+    'no-throw-literal': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    'no-trailing-spaces': 'off',
+    'no-undef-init': 'error',
+    'no-underscore-dangle': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    'no-unsafe-finally': 'error',
+    'no-unused-labels': 'error',
+    'no-use-before-define': 'off',
+    'no-var': 'error',
+    'object-shorthand': 'error',
+    'one-var': ['error', 'never'],
+    'padded-blocks': [
+      'off',
+      {
+        blocks: 'never',
+      },
+      {
+        allowSingleLineBlocks: true,
+      },
+    ],
+    'prefer-arrow/prefer-arrow-functions': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    'prefer-const': 'warn',
+    'quote-props': ['error', 'as-needed'],
+    quotes: ['warn', 'single'],
+    // TODO: Valid rule, needs retroactive work
+    radix: 'warn',
+    // TODO: Valid rule, needs retroactive work
+    semi: 'error',
+    'space-in-parens': ['off', 'never'],
+    'use-isnan': 'error',
+    'valid-typeof': 'off',
+    '@typescript-eslint/no-unsafe-assignment': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/no-unsafe-call': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/no-unsafe-member-access': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/no-floating-promises': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/no-unsafe-return': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/no-unsafe-argument': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/restrict-template-expressions': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/ban-ts-comment': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/restrict-plus-operands': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/unbound-method': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/no-this-alias': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    '@typescript-eslint/no-for-in-array': 'warn',
+    // TODO: Valid rule, needs retroactive work
+    'prettier/prettier': [
+      'warn',
+      {
+        singleQuote: true,
+      },
+    ],
+    // TODO: Valid rule, needs work
+    'prefer-template': 'warn', // TODO: Valid rule, needs retroactive work
+  },
+};