CHI-3523: Aselo Webchat React App POC

aselo-webchat-react-app/.circleci/config.yml

@@ -0,0 +1,135 @@
+# This config is equivalent to both the '.circleci/extended/orb-free.yml' and the base '.circleci/config.yml'
+version: 2.1
+
+# Orbs are reusable packages of CircleCI configuration that you may share across projects, enabling you to create encapsulated, parameterized commands, jobs, and executors that can be used across multiple projects.
+# See: https://circleci.com/docs/2.0/orb-intro/
+orbs:
+  node: circleci/[email protected]
+  cypress: cypress-io/cypress@1
+  sonarcloud: sonarsource/[email protected]
+
+executors:
+  with-chrome:
+    docker:
+      - image: 'cypress/browsers:node18.12.0-chrome103-ff107'
+
+jobs:
+  cleanUp:
+    docker:
+      - image: cimg/node:18.18.0
+    steps:
+      - checkout
+      - run:
+          command: yarn add twilio --no-save
+          name: Install Twilio client
+      - run:
+          command: |
+            yarn e2eCleanupExistingTasks \
+                accountSid=$TWILIO_ACCOUNT_SID \
+                authToken=$TWILIO_AUTH_TOKEN \
+          name: Cleanup existing tasks
+  runUnitTests:
+    working_directory: ~/repo
+    docker:
+      - image: cimg/node:18.18.0
+    steps:
+      - checkout
+      - node/install-packages:
+          pkg-manager: yarn-berry
+          with-cache: true
+      - run:
+          command: yarn test:nowatch
+          name: Run YARN tests
+      - store_test_results:
+          path: /coverage
+      - persist_to_workspace:
+          root: ~/repo
+          paths:
+            - ./coverage
+  cypressTestsOnSauce:
+    docker:
+      - image: cimg/node:18.18.0
+    steps:
+      - checkout
+      - run:
+          name: "Install dependencies"
+          command: |
+            yarn install --frozen-lockfile
+      - run:
+          name: "Initialize accounts"
+          command: |
+            yarn bootstrap \
+                accountSid=$TWILIO_ACCOUNT_SID \
+                authToken=$TWILIO_AUTH_TOKEN \
+                apiKey=$TWILIO_API_KEY \
+                apiSecret=$TWILIO_API_SECRET \
+                deploymentKey=$TWILIO_REACT_APP_DEPLOYMENT_KEY \
+                region=$TWILIO_REACT_APP_REGION
+      - run:
+          name: "Running Application"
+          background: true
+          command: |
+            yarn start
+      - run:
+          name: "Set Up Tunnel"
+          background: true
+          command: |
+            curl https://saucelabs.com/downloads/sc-4.7.1-linux.tar.gz -o saucelabs.tar.gz
+            tar -xzf saucelabs.tar.gz
+            cd sc-*
+            bin/sc -u ${SAUCE_USERNAME} -k ${SAUCE_ACCESS_KEY} --region ${SAUCE_REGION} --tunnel-name ${SAUCE_TUNNEL_IDENTIFIER}
+      - run:
+          name: "Install Sauce Labs saucectl"
+          command: |
+            curl -fsSL -o get_saucectl.sh https://saucelabs.github.io/saucectl/install && \
+            chmod 700 get_saucectl.sh && \
+            sudo ./get_saucectl.sh -b /usr/local/bin
+      - run:
+          name: "Configure Sauce saucectl"
+          command: |
+            saucectl configure -u ${SAUCE_USERNAME} -a ${SAUCE_ACCESS_KEY}
+      - run:
+          name: "Run Cypress on Sauce"
+          command: |
+            saucectl run --tunnel-name ${SAUCE_TUNNEL_IDENTIFIER} -e TEST_EMAIL=${TEST_EMAIL}
+  sonarqubeCloudScan:
+    working_directory: ~/repo
+    docker:
+      - image: cimg/node:18.18.0
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/repo
+      - sonarcloud/scan
+workflows:
+  build:
+    jobs:
+      - runUnitTests
+      - cypress/run:
+          executor: with-chrome
+          post-install:
+            - run: "yarn bootstrap \
+                    accountSid=$TWILIO_ACCOUNT_SID \
+                    authToken=$TWILIO_AUTH_TOKEN \
+                    apiKey=$TWILIO_API_KEY \
+                    apiSecret=$TWILIO_API_SECRET \
+                    deploymentKey=$TWILIO_REACT_APP_DEPLOYMENT_KEY \
+                    region=$TWILIO_REACT_APP_REGION"
+          browser: chrome
+          yarn: true
+          start: 'yarn start' # start app before running tests
+          store_artifacts: true
+      - cypressTestsOnSauce
+      - sonarqubeCloudScan:
+          requires:
+            - runUnitTests
+          context: SonarCloud
+          filters:
+            branches:
+              only:
+                - flex-webchat-ui
+                - /.*FLEXIN-\d+.*/
+      - cleanUp:
+          requires:
+            - cypressTestsOnSauce
+            - cypress/run

aselo-webchat-react-app/.env.sample

@@ -0,0 +1,18 @@
+## This .env file is required to run e2e tests. To run webchat react add query params
+## To understand how to add request params, please refer to README.md.
+
+ACCOUNT_SID=
+AUTH_TOKEN=
+API_KEY=
+API_SECRET=
+
+# Deployment key used to boot the Webchat UI locally.
+# You can also pass this as part of query params to REACT_APP_SERVER_URL
+REACT_APP_DEPLOYMENT_KEY=
+
+# Region for the host (i.e stage-us1, dev-us1, us1), defaults to us1(prod)
+REACT_APP_REGION=''
+
+# Webchat Version
+WEBCHAT_VERSION='3.x'
+

aselo-webchat-react-app/.eslintignore

@@ -0,0 +1,2 @@
+scripts/**/*.js
+jest.config.js

aselo-webchat-react-app/.eslintrc

@@ -0,0 +1,55 @@
+{
+  "extends": [
+    "twilio-ts",
+    "twilio-react",
+    "prettier"
+  ],
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "jest": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "rules": {
+    "prettier/prettier": [
+      "warn",
+      {},
+      {
+        "usePrettierrc": true
+      }
+    ],
+    "complexity": "off",
+    "react/display-name" : "off",
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/require-default-props": "off",
+    "react/no-multi-comp": "off",
+    "sonarjs/cognitive-complexity": "off",
+    "sonarjs/no-small-switch": "off",
+    "no-shadow": "off",
+    "no-console": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-floating-promises": "off",
+    "@typescript-eslint/no-shadow": ["error"],
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/member-ordering": "off",
+    "lines-between-class-members": "off",
+    "import/no-duplicates": ["error"],
+    "spaced-comment": "warn",
+    "prefer-named-capture-group": "off"
+  },
+  "overrides": [
+    {
+      "files": ["src/definitions.ts"],
+      "rules": {
+        "camelcase": ["off"]
+      }
+    }, {
+      "files": ["src/sessionDataHandler.ts"],
+      "rules": {
+        "camelcase": ["off"]
+      }
+    }
+  ]
+}

aselo-webchat-react-app/.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"

aselo-webchat-react-app/.gitignore

@@ -0,0 +1,17 @@
+node_modules
+.DS_Store
+.env
+build
+.twiliodeployinfo
+.env.prod
+.env.stage
+.idea
+yarn-error.log
+cypress/videos/
+cypress/screenshots/
+cypress/downloads/
+cypress.env.json
+dist
+artifacts
+coverage
+src/coverage

aselo-webchat-react-app/.prettierrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+    trailingComma: "all",
+    printWidth: 120,
+    tabWidth: 4,
+    semi: true,
+    singleQuote: false,
+    arrowParens: "always",
+    endOfLine: "auto"
+};

aselo-webchat-react-app/.sauce/config.yml

@@ -0,0 +1,65 @@
+version: 2.1
+apiVersion: v1
+kind: cypress
+showConsoleLog: false
+sauce:
+    region: us-west-1
+    concurrency: 5
+    sauceignore: .sauceignore
+rootDir: .
+cypress:
+    configFile: cypress.config.ts
+    version: 12.17.2
+suites:
+    - name: cypress - windows 10 - chrome latest
+      browser: chrome
+      browserVersion: latest
+      platformName: Windows 10
+      config:
+          specPattern:
+              - "cypress/e2e/**/*.*"
+    - name: cypress - windows 10 - chrome latest-1
+      browser: chrome
+      browserVersion: latest-1
+      platformName: Windows 10
+      config:
+          specPattern:
+              - "cypress/e2e/**/*.*"
+    #  COMMENTING FIREFOX 101 OUT AS THE SAUCELAB IMAGE IS BUGGY
+    #- name: cypress - windows 10 - firefox latest
+    #  browser: firefox
+    #  extendedDebugging: true
+    #  browserVersion: latest
+    #  platformName: windows 10
+    #  config:
+    #    testFiles:
+    #    - '**/*.*'
+    - name: cypress - windows 10 - firefox 100
+      browser: firefox
+      browserVersion: "100"
+      platformName: Windows 10
+      config:
+          specPattern:
+              - "cypress/e2e/**/*.*"
+    # TODO: Add MICROSOFT EDGE - WINDOWS 10 Browsers to the SauceLabs back again
+    # Check ticket: https://issues.corp.twilio.com/browse/FLEXIN-813
+    # - name: cypress - windows 10 - microsoftedge latest
+    #   browser: microsoftedge
+    #   browserVersion: latest
+    #   platformName: Windows 10
+    #   config:
+    #       specPattern:
+    #           - "cypress/e2e/**/*.*"
+    # - name: cypress - windows 10 - microsoftedge latest-1
+    #   browser: microsoftedge
+    #   browserVersion: latest-1
+    #   platformName: Windows 10
+    #   config:
+    #       specPattern:
+    #           - "cypress/e2e/**/*.*"
+artifacts:
+    download:
+        match:
+            - "*"
+        when: always
+        directory: ./artifacts

aselo-webchat-react-app/.sauce/config.yml.bak

@@ -0,0 +1,29 @@
+apiVersion: v1alpha
+kind: cypress
+defaults: {}
+showConsoleLog: false
+sauce:
+  region: us-west-1
+  concurrency: 60
+  sauceignore: .sauceignore
+cypress:
+  configFile: cypress.json
+  version: 9.1.0
+  record: false
+  key: ""
+  reporters: []
+suites:
+- name: cypress - windows 10 - chrome
+  browser: chrome
+  platformName: windows 10
+  config:
+    testFiles:
+    - '**/*.*'
+  mode: sauce
+rootDir: .
+artifacts:
+  download:
+    match:
+    - '*'
+    when: always
+    directory: ./artifacts

aselo-webchat-react-app/.sauceignore

@@ -0,0 +1,19 @@
+# This file instructs saucectl to not package any files mentioned here.
+/examples/
+/artifacts/
+cypress/videos/
+cypress/results/
+cypress/screenshots/
+# Remove this to have node_modules uploaded with code
+# node_modules/
+.git/
+.github/
+.DS_Store
+.hg/
+.vscode/
+.idea/
+.gitignore
+.hgignore
+.gitlab-ci.yml
+.npmrc
+*.gif