diff --git a/.github/actions/build-and-upload-aselo-webchat-react-app/action.yml b/.github/actions/build-and-upload-aselo-webchat-react-app/action.yml new file mode 100644 index 0000000000..b2903f8aa8 --- /dev/null +++ b/.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 <> ./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}}/* diff --git a/.github/workflows/aselo-webchat-react-app-ci.yml b/.github/workflows/aselo-webchat-react-app-ci.yml new file mode 100644 index 0000000000..3d591e7d3c --- /dev/null +++ b/.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 }} diff --git a/.github/workflows/global-ci.yml b/.github/workflows/global-ci.yml index c3398cc50a..d881993d0a 100644 --- a/.github/workflows/global-ci.yml +++ b/.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 \ No newline at end of file + secrets: inherit diff --git a/aselo-webchat-react-app/.eslintrc.json b/aselo-webchat-react-app/.eslintrc.json index cd59da988b..c95c0fc83f 100644 --- a/aselo-webchat-react-app/.eslintrc.json +++ b/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": {