chore: aselo-webchat-react-app - add CI job for [CHI-3613]

.github/actions/build-and-upload-aselo-webchat-react-app/action.yml

@@ -0,0 +1,142 @@
+# Copyright (C) 2021-2024 Technology Matters
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as published
+# by the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see https://www.gnu.org/licenses/.
+
+name: build-and-upload-aselo-webchat-react-app
+description: 'Build Aselo Webchat React App and upload to S3 bucket'
+inputs:
+  aws-access-key-id:
+    description: 'AWS credentials for Aselo user'
+    required: true
+  aws-secret-access-key:
+    description: 'AWS credentials for Aselo user'
+    required: true
+  aws-region:
+    description: 'AWS credentials for Aselo user'
+    required: true
+  git-reference:
+    description: 'Identifies the git reference for target key'
+    default: ''
+  git-reference-type:
+    description: 'Identifies if the git reference is a branch or tag'
+    default: 'tag'
+runs:
+  using: "composite"
+  steps:
+    # Setup credentials to access AWS for parameters
+    - name: Configure AWS credentials
+      uses: aws-actions/configure-aws-credentials@v2
+      with:
+        aws-access-key-id: ${{ inputs.aws-access-key-id }}
+        aws-secret-access-key: ${{ inputs.aws-secret-access-key }}
+        aws-region: ${{ inputs.aws-region }}
+    # Get AWS parameters
+    # - name: Set Fullstory org id
+    #   uses: "marvinpinto/action-inject-ssm-secrets@latest"
+    #   with:
+    #     ssm_parameter: "FULLSTORY_ID"
+    #     env_variable_name: "FULLSTORY_ID"
+
+    # - name: Create secret.js
+    #   run: |
+    #     touch ./src/private/secret.js
+    #   working-directory: ./plugin-hrm-form
+    #   shell: bash
+    # - name: Fill secret.js
+    #   run: |
+    #     cat <<EOT >> ./src/private/secret.js
+    #     export const datadogAccessToken = '$DATADOG_ACCESS_TOKEN';
+    #     export const datadogApplicationID = '$DATADOG_APP_ID';
+    #     export const fullStoryId = '$FULLSTORY_ID';
+    #     EOT
+    #   working-directory: ./plugin-hrm-form
+    #   shell: bash
+
+    # Build aselo-webchat-react-app 
+    - name: Run build command
+      run: npm run build ## TODO: remove CI=false once lint is fixed
+      working-directory: ./aselo-webchat-react-app
+      shell: bash
+    - name: Check bundle was built
+      if: ${{ hashFiles('aselo-webchat-react-app/build/static/js/webchat.min.js') == '' }}
+      uses: actions/github-script@v3
+      with:
+        script: |
+          core.setFailed('Bundle was not built!')
+    # Zip files individually
+    # Cloudfront only zips files under 10000000 bytes on the fly, so we need to store these zipped
+    - name: Zip files
+      run: |
+        gzip -9 -v app.css
+        gzip -9 -v app.js
+        gzip -9 -v asset-manifest.json
+        gzip -9 -v index.html
+        mv app.css.gz app.css
+        mv app.js.gz app.js
+        mv asset-manifest.json.gz asset-manifest.json
+        mv index.html.gz index.html
+      working-directory: ./aselo-webchat-react-app/build
+      shell: bash
+    - name: Zip js files
+      run: |
+        gzip -9 -v webchat.min.js
+        gzip -9 -v webchat.min.js.map
+        mv webchat.min.js.gz webchat.min.js
+        mv webchat.min.js.map.gz webchat.min.js.map
+      working-directory: ./aselo-webchat-react-app/build/static/js
+      shell: bash
+    # Upload to S3 buckets
+    - name: Upload files to Development S3 bucket
+      uses: jakejarvis/s3-sync-action@master
+      with:
+        args: --acl public-read --follow-symlinks --exclude '*' --include '*.js' --include '*.js.map' --include '*.json' --include '*.css' --include 'index.html' --content-encoding 'gzip'
+      env:
+        AWS_S3_BUCKET: assets-development.tl.techmatters.org
+        AWS_ACCESS_KEY_ID: ${{ inputs.aws-access-key-id }}
+        AWS_SECRET_ACCESS_KEY: ${{ inputs.aws-secret-access-key }}
+        AWS_REGION: ${{ inputs.aws-region }}
+        SOURCE_DIR: "aselo-webchat-react-app/build"
+        DEST_DIR: aselo-webchat-react-app/${{inputs.git-reference-type}}/${{inputs.git-reference}}
+    - name: Upload files to Staging S3 bucket
+      uses: jakejarvis/s3-sync-action@master
+      with:
+        args: --acl public-read --follow-symlinks --exclude '*' --include '*.js' --include '*.js.map' --include '*.json' --include '*.css' --include 'index.html' --content-encoding 'gzip'
+      env:
+        AWS_S3_BUCKET: assets-staging.tl.techmatters.org
+        AWS_ACCESS_KEY_ID: ${{ inputs.aws-access-key-id }}
+        AWS_SECRET_ACCESS_KEY: ${{ inputs.aws-secret-access-key }}
+        AWS_REGION: ${{ inputs.aws-region }}
+        SOURCE_DIR: "aselo-webchat-react-app/build"
+        DEST_DIR: aselo-webchat-react-app/${{inputs.git-reference-type}}/${{inputs.git-reference}}
+    - name: Upload files to Production S3 bucket
+      uses: jakejarvis/s3-sync-action@master
+      with:
+        args: --acl public-read --follow-symlinks --exclude '*' --include '*.js' --include '*.js.map' --include '*.json' --include '*.css' --include 'index.html' --content-encoding 'gzip'
+      env:
+        AWS_S3_BUCKET: assets-production.tl.techmatters.org
+        AWS_ACCESS_KEY_ID: ${{ inputs.aws-access-key-id }}
+        AWS_SECRET_ACCESS_KEY: ${{ inputs.aws-secret-access-key }}
+        AWS_REGION: ${{ inputs.aws-region }}
+        SOURCE_DIR: "aselo-webchat-react-app/build"
+        DEST_DIR: aselo-webchat-react-app/${{inputs.git-reference-type}}/${{inputs.git-reference}}
+    - name: Clear cloudfront caches
+      shell: bash
+      run: |
+        CF_DISTRO=$(aws cloudfront list-distributions --query "DistributionList.Items[*].{id:Id,origin:Origins.Items[0].DomainName}[?origin=='assets-development.tl.techmatters.org.s3-website.us-east-1.amazonaws.com'].id" --output text)
+        aws cloudfront create-invalidation --distribution-id $CF_DISTRO --paths /aselo-webchat-react-app/${{inputs.git-reference-type}}/${{inputs.git-reference}}/*
+
+        CF_DISTRO=$(aws cloudfront list-distributions --query "DistributionList.Items[*].{id:Id,origin:Origins.Items[0].DomainName}[?origin=='assets-staging.tl.techmatters.org.s3-website.us-east-1.amazonaws.com'].id" --output text)
+        aws cloudfront create-invalidation --distribution-id $CF_DISTRO --paths /aselo-webchat-react-app/${{inputs.git-reference-type}}/${{inputs.git-reference}}/*
+
+        CF_DISTRO=$(aws cloudfront list-distributions --query "DistributionList.Items[*].{id:Id,origin:Origins.Items[0].DomainName}[?origin=='assets-production.tl.techmatters.org.s3-website.us-east-1.amazonaws.com'].id" --output text)
+        aws cloudfront create-invalidation --distribution-id $CF_DISTRO --paths /aselo-webchat-react-app/${{inputs.git-reference-type}}/${{inputs.git-reference}}/*

.github/workflows/aselo-webchat-react-app-ci.yml

@@ -0,0 +1,86 @@
+# Copyright (C) 2021-2023 Technology Matters
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as published
+# by the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see https://www.gnu.org/licenses/.
+
+name: Aselo Webchat React App CI
+
+on:
+  workflow_call:
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Branch
+        uses: actions/checkout@v6
+      - name: Use Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: '22.x'
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+        working-directory: ./aselo-webchat-react-app
+      - name: Create Temp Files
+        run: |
+          touch ./.env
+        working-directory: ./aselo-webchat-react-app
+      - name: Run aselo-webchat-react-app code Lint
+        run: npm run lint --if-present
+        working-directory: ./aselo-webchat-react-app
+  unit-test:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout Branch
+      uses: actions/checkout@v6
+    - name: Use Node.js
+      uses: actions/setup-node@v6
+      with:
+        node-version: '22.x'
+    - name: Install dependencies
+      run: npm ci --legacy-peer-deps
+      working-directory: ./aselo-webchat-react-app
+    - name: Run aselo-webchat-react-app tests
+      run: npm run test
+      working-directory: ./aselo-webchat-react-app
+    - name: Publish Test Reports
+      uses: dorny/test-reporter@v2
+      if: success() || failure() # always run even if the previous step fails
+      with:
+        name: Unit Tests Report
+        path: '!(node_modules)/**/junit.xml'
+        reporter: jest-junit
+  upload-aselo-webchat-react-app:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout Branch
+      uses: actions/checkout@v6
+    - name: Use Node.js
+      uses: actions/setup-node@v6
+      with:
+        node-version: '22.x'
+    - name: Install dependencies
+      run: npm ci --legacy-peer-deps
+      working-directory: ./aselo-webchat-react-app
+    - name: Configure AWS credentials
+      uses: aws-actions/configure-aws-credentials@v5
+      with:
+        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        aws-region: us-east-1
+    - name: Build and Upload Aselo Webchat React App
+      uses: ./.github/actions/build-and-upload-aselo-webchat-react-app
+      with:
+        git-reference-type: ${{ github.ref_type }}
+        git-reference: ${{ github.ref_name }}
+        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        aws-region: ${{ secrets.AWS_DEFAULT_REGION }}

.github/workflows/global-ci.yml

@@ -23,6 +23,9 @@ jobs:
   webchat-ci:
     uses: ./.github/workflows/webchat-ci.yml
     secrets: inherit
+  aselo-webchat-react-app-ci:
+    uses: ./.github/workflows/aselo-webchat-react-app-ci.yml
+    secrets: inherit
   twilio-lambda-ci:
     uses: ./.github/workflows/twilio-lambda-ci.yml
-    secrets: inherit
+    secrets: inherit

aselo-webchat-react-app/.eslintrc.json

@@ -2,8 +2,7 @@
   "extends": [
     "twilio-react",
     "plugin:react/jsx-runtime",
-    "plugin:sonarjs/recommended",
-    "plugin:prettier/recommended"
+    "plugin:sonarjs/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {