chore: aselo-webchat-react-app - add CD job [CHI-3672]

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

@@ -40,28 +40,6 @@ runs:
         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
@@ -73,28 +51,20 @@ runs:
       with:
         script: |
           core.setFailed('Bundle was not built!')
-    # Zip files individually
+    - name: Merge configs for helplines and copy to build
+      run: |
+        npm run mergeConfigs
+        mv mergedConfigs build/mergedConfigs
+      working-directory: ./aselo-webchat-react-app
+      shell: bash
+    # Zip files recursively
     # 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
+        gzip -r -9 .
+        find . -type f -name '*.gz' -exec sh -c 'mv -n "$1" "${1%.gz}"' _ {} \;
       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

.github/actions/copy-aselo-webchat-react-app-to-release-location/action.yml

@@ -0,0 +1,73 @@
+# 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: copy-aselo-webchat-react-app-to-release-location
+description: 'Copy aselo-webchat-react-app from the build location to the release location'
+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
+  source-git-reference:
+    description: 'Identifies the git reference for target key'
+    required: true
+  source-git-reference-type:
+    description: 'Identifies if the git reference is a branch or tag'
+    required: true
+  target-git-tag:
+    description: 'Identifies the release tag for the plugin'
+    required: true
+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 }}
+
+    - name: Copy to Development S3 release folder
+      shell: bash
+      run: |
+        aws s3 cp --recursive 's3://assets-development.tl.techmatters.org/aselo-webchat-react-app/${{ inputs.source-git-reference-type }}/${{ inputs.source-git-reference }}/' 's3://assets-development.tl.techmatters.org/aselo-webchat-react-app/tag/${{ inputs.target-git-tag }}/'
+
+    - name: Copy to Staging S3 release folder
+      shell: bash
+      run: |
+        aws s3 cp --recursive 's3://assets-staging.tl.techmatters.org/aselo-webchat-react-app/${{ inputs.source-git-reference-type }}/${{ inputs.source-git-reference }}/' 's3://assets-staging.tl.techmatters.org/aselo-webchat-react-app/tag/${{ inputs.target-git-tag }}/'
+
+    - name: Copy to Production S3 release folder
+      shell: bash
+      run: |
+        aws s3 cp --recursive 's3://assets-production.tl.techmatters.org/aselo-webchat-react-app/${{ inputs.source-git-reference-type }}/${{ inputs.source-git-reference }}/' 's3://assets-production.tl.techmatters.org/aselo-webchat-react-app/tag/${{ inputs.target-git-tag }}/'
+
+    - 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/tag/${{ inputs.target-git-tag }}/*
+
+        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/tag/${{ inputs.target-git-tag }}/*
+
+        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/tag/${{ inputs.target-git-tag }}/*
+

.github/workflows/aselo-webchat-react-app-deploy-environment.yml

@@ -0,0 +1,70 @@
+# 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: Deploy Aselo Webchat React App - environment
+
+on:
+  workflow_dispatch:
+    inputs:
+      environment:
+        description: Environment to deploy.
+        default: development
+        required: true
+        type: choice
+        options:
+          - development
+          - staging
+          - production
+
+jobs:
+  configure:
+    name: Determine Configuration
+    runs-on: ubuntu-latest
+    outputs:
+      target_helplines: ${{ steps.determine-target-helplines.outputs.target_helplines }}
+    steps:
+      - uses: actions/checkout@v6
+      - id: determine-target-helplines
+        shell: bash
+        run: |
+          helplines=$(node aselo-webchat-react-app/scripts/outputHelplinesForEnvironment.js '${{ inputs.environment }}')
+          echo "target_helplines=$helplines" >> $GITHUB_OUTPUT
+  deploy-helplines:
+    name: Deploy to multiple helplines
+    needs: configure
+    uses: ./.github/workflows/deploy-multiple-helplines.yml
+    secrets: inherit
+    with:
+      project: aselo-webchat-react-app
+      helplines: ${{ needs.configure.outputs.target_helplines }}
+      environments: '[ ${{ inputs.environment }} ]'
+      invalidate-cache: 'false'
+
+  invalidate-cache:
+    name: Invalidate CloudFront cache for all production aselo-webchat-react-app files
+    needs: deploy-helplines
+    runs-on: ubuntu-latest
+    steps:
+      # Setup credentials to access AWS for parameters
+      - 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: Clear cloudfront cache
+        run: |
+          CF_DISTRO=$(aws cloudfront list-distributions --query "DistributionList.Items[*].{id:Id,origin:Origins.Items[0].DomainName}[?origin=='assets-${{ inputs.environment }}.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/${{ steps.helpline_code.outputs.lowercase }}/*
+

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

@@ -13,7 +13,7 @@
 # along with this program.  If not, see https://www.gnu.org/licenses/.
 
 # Upload Webchat to S3 bucket with Github Actions
-name: Aselo Webchat React App Deploy
+name: Deploy Aselo Webchat React App - single helpline
 
 on:
   workflow_dispatch:
@@ -57,7 +57,131 @@ on:
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
-  # This workflow contains a single job called "build"
-  build:
+  deploy:
     # The type of runner that the job will run on
     runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Change String Case for Helpline Code
+      - name: Change String Case for Helpline Code
+        id: helpline_code
+        uses: "ASzc/change-string-case-action@v6"
+        with:
+          string: "${{ inputs.helpline_code }}"
+      # Set SHORT_ENVIRONMENT_CODE
+      - name: Production Environment
+        if: inputs.environment == 'production'
+        run: echo "SHORT_ENVIRONMENT_CODE=prod" >> $GITHUB_ENV
+
+      - name: Staging Environment
+        if: inputs.environment == 'staging'
+        run: echo "SHORT_ENVIRONMENT_CODE=stg" >> $GITHUB_ENV
+
+      - name: Development Environment
+        if: inputs.environment == 'development'
+        run: echo "SHORT_ENVIRONMENT_CODE=dev" >> $GITHUB_ENV
+
+      # Setup credentials to access AWS for parameters
+      - 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"
+
+      # Get AWS parameters
+      - name: Set GITHUB_ACTIONS_SLACK_BOT_TOKEN
+        uses: "marvinpinto/action-inject-ssm-secrets@latest"
+        with:
+          ssm_parameter: "GITHUB_ACTIONS_SLACK_BOT_TOKEN"
+          env_variable_name: "GITHUB_ACTIONS_SLACK_BOT_TOKEN"
+
+      - name: Set ASELO_DEPLOYS_CHANNEL_ID
+        uses: "marvinpinto/action-inject-ssm-secrets@latest"
+        with:
+          ssm_parameter: "ASELO_DEPLOYS_CHANNEL_ID"
+          env_variable_name: "ASELO_DEPLOYS_CHANNEL_ID"
+
+      - name: Set ACCOUNT_SID
+        uses: "marvinpinto/action-inject-ssm-secrets@latest"
+        with:
+          ssm_parameter: "/${{ inputs.environment }}/twilio/${{ inputs.helpline_code }}/account_sid"
+          env_variable_name: "ACCOUNT_SID"
+
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v6
+
+      - name: Use Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: "22.x"
+
+      - name: Create local working directory
+        run: mkdir -p ./aselo-webchat-react-app/temp
+
+      - name: Download target build from S3
+        run: |
+          aws s3 sync 's3://assets-${{ inputs.environment }}.tl.techmatters.org/aselo-webchat-react-app/${{ github.ref_type }}/${{ github.ref_name }}' './aselo-webchat-react-app/temp' --delete --no-progress
+        shell: bash
+
+      - name: Copy target config and remove the rest
+        run: |
+          mv './mergedConfigs/${{ steps.helpline_code.outputs.lowercase }}/${{ inputs.environment }}.json' 'config.json'
+          rm -rf ./mergedConfigs 
+        working-directory: aselo-webchat-react-app/temp
+        shell: bash
+
+      # Upload the app to S3 corresponding buckets
+      - name: Upload Webchat to 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: tl-public-chat-${{ steps.helpline_code.outputs.lowercase }}-$SHORT_ENVIRONMENT_CODE
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: "${{ secrets.AWS_DEFAULT_REGION }}"
+          SOURCE_DIR: "aselo-webchat-react-app/temp"
+          DEST_DIR: "aselo-webchat-react-app"
+      - name: Upload Webchat to 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-${{ inputs.environment }}.tl.techmatters.org
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: "${{ secrets.AWS_DEFAULT_REGION }}"
+          SOURCE_DIR: "aselo-webchat-react-app/temp"
+          DEST_DIR: "aselo-webchat-react-app/${{ steps.helpline_code.outputs.lowercase }}"
+
+      - name: Clear cloudfront cache
+        if: ${{ inputs.invalidate-cache != 'false' }}
+        run: |
+          CF_DISTRO=$(aws cloudfront list-distributions --query "DistributionList.Items[*].{id:Id,origin:Origins.Items[0].DomainName}[?origin=='assets-${{ inputs.environment }}.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/${{ steps.helpline_code.outputs.lowercase }}/*
+
+      # Send Slack notifying success
+      - name: Slack Aselo channel
+        id: slack
+        uses: slackapi/slack-github-action@v2.1.1
+        if: ${{ inputs.send-slack-message != 'false' }}
+        with:
+          method: chat.postMessage
+          token: ${{ env.GITHUB_ACTIONS_SLACK_BOT_TOKEN }}
+          payload: |
+            channel: ${{ env.ASELO_DEPLOYS_CHANNEL_ID }}
+            text: '`[WEBCHAT]` Deployment to `${{inputs.helpline_code}}-${{inputs.environment}}` of ${{ github.ref_type }} `${{ github.ref_name }}` requested by `${{ github.triggering_actor }}` completed using workflow `${{ github.workflow }}` with SHA ${{ github.sha }} :rocket:.'
+      # Update deployment matrix 
+      - name: Update deployment matrix
+        uses: ./.github/actions/deployment-matrix
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_DEFAULT_REGION }}
+          identifier: ${{ inputs.helpline_code }}
+          environment: ${{ inputs.environment}}
+          service_repo: 'aselo-webchat-react-app'
+          version_tag: ${{ github.ref_name }}
+

.github/workflows/deploy-multiple-helplines.yml

@@ -82,6 +82,22 @@ jobs:
       send-slack-message: ${{ inputs.send_slack_message_per_deploy }}
       invalidate-cache: ${{ inputs.invalidate-cache }}
 
+  deploy-aselo-webchat-react-app-helplines:
+    if: inputs.project == 'aselo-webchat-react-app'
+    strategy:
+      fail-fast: false
+      matrix:
+        short_helplines: ${{ fromJson(inputs.helplines) }}
+        environment: ${{ fromJson(inputs.environments) }}
+    uses: ./.github/workflows/aselo-webchat-react-app-deploy.yml
+    secrets: inherit
+    with:
+      helpline_code: ${{ matrix.short_helplines }}
+      environment: ${{ matrix.environment }}
+      recaptcha_verify_url: ${{ inputs.recaptcha_verify_url }}
+      send-slack-message: ${{ inputs.send_slack_message_per_deploy }}
+      invalidate-cache: ${{ inputs.invalidate-cache }}
+
   # Send Slack notifying success
   send-slack-message:
     # The type of runner that the job will run on