feat: add a ci mechanism to deploy UI prototypes (#928)

davidgamez · web-flow · commit 19a0e97310a0 · 2025-03-03T12:35:49.000-05:00
diff --git a/.github/workflows/web-app-deployer.yml b/.github/workflows/web-app-deployer.yml
@@ -30,21 +30,37 @@ on:
         description: 1Password Slack webhook URL secret reference for add feed channel
         type: string
         required: false
+      DEPLOY_FIREBASE_FUNCTIONS:
+        description: When true(default), the Firebase functions will be deployed; otherwise, they will not.
+        type: boolean
+        default: true
       OP_ADD_FEED_FORM_GITHUB_TOKEN:
         description: 1Password GitHub token secret reference
         type: string
         required: false
+      ENABLE_QUALITY_CHECKS:
+        description: When true the tests and lint checks are performed(default), false will skip. This is only valid in protopype and demo deployments
+        type: boolean
+        default: true
+      PREVIEW_EXPIRES_DAYS:
+        description: The number of days the preview deployment will be active.
+        type: string
+        default: "7"
     outputs:
       hosting_url:
-        description: "The URL of the deployed web app"
+        description: The URL of the deployed web app, when applicable
         value: ${{ jobs.build-deploy.outputs.hosting_url }}
+      hosting_expiration_date:
+        description: The expiration date of the preview, when applicable
+        value: ${{ jobs.build-deploy.outputs.hosting_expiration_date }}
 env:
   NODE_VERSION: "18"
 
 jobs:
   lint-test:
     name: Test
     runs-on: ubuntu-latest
+    if: ${{ inputs.ENABLE_QUALITY_CHECKS}}
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
@@ -136,11 +152,13 @@ jobs:
     name: "Build & Deploy"
     permissions: write-all
     needs: [lint-test]
+    if: success() || needs.lint-test.result == 'skipped'
     runs-on: ubuntu-latest
     outputs:
       # Output will be baseb4 encoded due to a false positive secret detection
       # More info https://github.com/orgs/community/discussions/37942
-      hosting_url: ${{ steps.deploy-preview.outputs.hosting_url }}  
+      hosting_url: ${{ steps.deploy-preview.outputs.hosting_url }}
+      hosting_expiration_date: ${{ steps.deploy-preview.outputs.hosting_expiration_date }}
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
@@ -234,44 +252,50 @@ jobs:
           ../scripts/replace-variables.sh -in_file src/.env.rename_me -out_file src/.env.${{  inputs.FIREBASE_PROJECT }} -variables REACT_APP_FIREBASE_API_KEY,REACT_APP_FIREBASE_AUTH_DOMAIN,REACT_APP_FIREBASE_PROJECT_ID,REACT_APP_FIREBASE_STORAGE_BUCKET,REACT_APP_FIREBASE_MESSAGING_SENDER_ID,REACT_APP_FIREBASE_APP_ID,REACT_APP_RECAPTCHA_SITE_KEY,REACT_APP_GOOGLE_ANALYTICS_ID,REACT_APP_REMOTE_CONFIG_MINIMUM_FETCH_INTERVAL_MILLI,REACT_APP_FEED_API_BASE_URL
 
       - name: Run Install for Functions
+        if: ${{ inputs.DEPLOY_FIREBASE_FUNCTIONS }}
         working-directory: functions
         run: yarn install
 
       - name: Select Firebase Project for Functions
+        if: ${{ inputs.DEPLOY_FIREBASE_FUNCTIONS }}      
         working-directory: functions
         run: npx firebase use ${{  inputs.FIREBASE_PROJECT }}
 
       - name: Run Lint for Functions
+        if: ${{ inputs.DEPLOY_FIREBASE_FUNCTIONS }}
         working-directory: functions
         run: yarn lint
 
       - name: Run Tests for Functions
+        if: ${{ inputs.DEPLOY_FIREBASE_FUNCTIONS }}
         working-directory: functions
         run: yarn test
 
       - name: Set Firebase Password Policy
+        if: ${{ inputs.DEPLOY_FIREBASE_FUNCTIONS }}      
         working-directory: functions/packages/firebase-password-policy
         run: |
           yarn build
           node lib/index.js
 
       - name: Set Firebase Feed Form Environment
+        if: ${{ inputs.DEPLOY_FIREBASE_FUNCTIONS }}      
         working-directory: functions/packages/feed-form
         run: |
           echo "FEED_SUBMIT_GOOGLE_SHEET_ID=${{  inputs.FEED_SUBMIT_GOOGLE_SHEET_ID }}" > .env
           echo "SLACK_WEBHOOK_URL=${{ env.SLACK_WEBHOOK_URL }}" >> .env
           echo "GITHUB_TOKEN=${{ env.ADD_FEED_FORM_GITHUB_TOKEN }}" >> .env
 
       - name: Deploy Firebase Functions
+        if: ${{ inputs.DEPLOY_FIREBASE_FUNCTIONS }}
         working-directory: functions
         run: npx firebase deploy --only functions
 
-      - name: Set robots.txt
+      - name: Set blocking robots.txt
+        if: ${{ inputs.PREVIEW_DEPLOYMENT || inputs.FIREBASE_PROJECT != 'prod' }}
         working-directory: web-app
         run: |
-          if [ "${{ inputs.FIREBASE_PROJECT }}" != "prod" ]; then
-            mv public/robots.staging.txt public/robots.txt
-          fi
+          mv public/robots.staging.txt public/robots.txt
 
       - name: Build
         working-directory: web-app
@@ -293,6 +317,8 @@ jobs:
         run: |
           npx firebase hosting:channel:deploy ${{ inputs.PREVIEW_HOST_NAME }}
           HOSTING_URL=$(npx firebase hosting:channel:list | grep ${{ inputs.PREVIEW_HOST_NAME }} | awk '{print $7}')
-          HOSTING_URL_64=$(echo $HOSTING_URL | base64)
-          echo "hosting_url=$HOSTING_URL_64" >> "$GITHUB_OUTPUT"
+          HOSTING_URL=$(echo "$HOSTING_URL" | sed 's/mobility-feeds-prod/__firebase_project__/g' | base64 -w 0)
+          HOSTING_EXPIRATION_DATE=$(npx firebase hosting:channel:list | grep ${{ inputs.PREVIEW_HOST_NAME }} | awk '{printf "%s %s\n",$9,$10;}')
+          echo "hosting_url=$HOSTING_URL" >> "$GITHUB_OUTPUT"
+          echo "hosting_expiration_date=$HOSTING_EXPIRATION_DATE" >> "$GITHUB_OUTPUT"
 
diff --git a/.github/workflows/web-pr.yml b/.github/workflows/web-pr.yml
@@ -29,8 +29,8 @@ jobs:
       - name: Check for Existing Comment
         id: check-comment
         run: |
-          HOSTING_URL=$(echo "$HOSTING_URL_64" | base64 -d)
-          COMMENT="Preview Firebase Hosting URL: $HOSTING_URL"
+          HOSTING_URL_DECODED=$(echo "$HOSTING_URL_64" | base64 -d | sed 's/__firebase_project__/mobility-feeds-dev/g')
+          COMMENT="Preview Firebase Hosting URL: $HOSTING_URL_DECODED"
           echo "PR comment: $COMMENT"
           COMMENTS=$(curl -s -H "Authorization: Bearer ${{ secrets.GITHUB_TOKEN }}" -H "Accept: application/vnd.github.v3+json" "https://api.github.com/repos/${{ github.repository }}/issues/${{ env.PR_ID }}/comments")
           JQ_CHECK=`echo "$COMMENTS" | jq -r ".[] | select(.body == \"$COMMENT\")"`
@@ -47,10 +47,12 @@ jobs:
       - name: Comment on PR with Hosting URL (PR Preview)
         if: steps.check-comment.outputs.comment_exists == 'false'
         run: |
-          HOSTING_URL=$(echo "$HOSTING_URL_64" | base64 -d)
-          COMMENT="Preview Firebase Hosting URL: $HOSTING_URL"
+          HOSTING_URL_DECODED=$(echo "$HOSTING_URL_64" | base64 -d | sed 's/__firebase_project__/mobility-feeds-dev/g')
+          COMMENT="Preview Firebase Hosting URL: $HOSTING_URL_DECODED"
           echo "$COMMENT" > comment.txt
           curl -d "{\"body\":\"$(cat comment.txt)\"}" -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" -H "Content-Type: application/json" -X POST "https://api.github.com/repos/${{ github.repository }}/issues/${{ env.PR_ID }}/comments"
         env:
+          # Output is baseb4 encoded due to a false positive secret detection
+          # More info https://github.com/orgs/community/discussions/37942
           HOSTING_URL_64: ${{ needs.deploy-web-app.outputs.hosting_url }}
 
diff --git a/.github/workflows/web-prototype.yml b/.github/workflows/web-prototype.yml
@@ -0,0 +1,77 @@
+# This workflow deploys a preview environment to PROD.
+# The pattern of the URL is:
+#   - https://[firebase_project_id]--protoype-[random_suffix].web.app
+# The firebase preview environments creates undeterministics URLs using a random suffix.
+# The URL will be active for 30 days(maximum). After 30 days, Firebase will generare a new URL.
+
+name: Web App - Prototype
+on:
+  workflow_dispatch:
+    inputs:
+      PREVIEW_HOST_NAME:
+        description: Preview host name
+        default: 'prototype'
+        required: false
+      DEPLOYMENT_ENV:
+        description: Environment in which the branch will be deployed. Valid values dev, qa and prod(default).
+        default: 'prod'
+        required: false
+jobs:
+
+  deploy-web-app:
+    uses: ./.github/workflows/web-app-deployer.yml
+    with:
+      FIREBASE_PROJECT: ${{ inputs.DEPLOYMENT_ENV || 'prod' }}
+      PREVIEW_DEPLOYMENT: true
+      DEPLOY_FIREBASE_FUNCTIONS: false
+      FEED_SUBMIT_GOOGLE_SHEET_ID: "1iXwux9hM4p5Li1EGgwx-8hU3sMDnF15yTflqmGjiZqE"
+      OP_SLACK_WEBHOOK_URL: "op://rbiv7rvkkrsdlpcrz3bmv7nmcu/wm52iemzzm2cwfaoakwaufthuq/password"
+      PREVIEW_HOST_NAME: ${{ inputs.PREVIEW_HOST_NAME || 'prototype' }}
+      ENABLE_QUALITY_CHECKS: false
+      PREVIEW_EXPIRES_DAYS: 30
+    secrets: inherit
+
+  notify-slack:
+    name: Notify Slack
+    runs-on: ubuntu-latest
+    needs: deploy-web-app
+    steps:
+      - name: Load secrets from 1Password
+        id: onepw_secrets
+        uses: 1password/load-secrets-action@v2.0.0
+        with:
+          export-env: true
+        env:
+          OP_SERVICE_ACCOUNT_TOKEN: ${{ secrets.OP_SERVICE_ACCOUNT_TOKEN }}
+          CREDENTIALS: "op://rbiv7rvkkrsdlpcrz3bmv7nmcu/ifkeehu5gzi7wy5ub5qvwkaire/credential"
+          SLACK_WEBHOOK_URL: "op://rbiv7rvkkrsdlpcrz3bmv7nmcu/Slack webhook URLs/internal-github-action-alerts/internal-github-action-alerts"
+
+      - name: Process Hosting URL
+        id: process_hosting_url
+        run: |
+          HOSTING_URL_DECODED=$(echo "$HOSTING_URL" | base64 -d | sed 's/__firebase_project__/mobility-feeds-prod/g')
+          echo "hosting_url_decoded=$HOSTING_URL_DECODED" >> "$GITHUB_OUTPUT"
+          echo "hosting_url: $HOSTING_URL"
+          echo "hosting_url_decoded: $HOSTING_URL_DECODED"
+        env:
+          # Output is baseb4 encoded due to a false positive secret detection
+          # More info https://github.com/orgs/community/discussions/37942        
+          HOSTING_URL: ${{ needs.deploy-web-app.outputs.hosting_url }}
+
+      - name: Send Slack Notification
+        uses: slackapi/slack-github-action@v2.0.0
+        with:
+          webhook: ${{ env.SLACK_WEBHOOK_URL }}
+          webhook-type: incoming-webhook
+          payload: |
+            text: "Prototype Web App Deployed!\n"
+            blocks:
+              - type: "section"
+                text:
+                  type: "mrkdwn"
+                  text: ":rocket: *Prototype Web App Deployed!* \n - *Prototype URL:* ${{ env.HOSTING_URL_ENCODED }} \n - *Expires on:* ${{ env.HOSTING_EXPIRATION_DATE }}"          
+        env:
+          SLACK_WEBHOOK_URL: ${{ env.SLACK_WEBHOOK_URL }}
+          HOSTING_URL_ENCODED: ${{ steps.process_hosting_url.outputs.hosting_url_decoded }}
+          HOSTING_EXPIRATION_DATE: ${{ needs.deploy-web-app.outputs.hosting_expiration_date }}
+
