feature: improve deployment actions (#708)

* fix: improve the deployment workflow by using shared workflow and environments

- allows us to have one logic that can be used by both production/staging
- added a slack notification action and message creation script

* fix: add tier1 list and support for deploying to just tier-1

* fix: use new deployment format

.github/workflows/deploy-production-tier1-only.yml

@@ -0,0 +1,15 @@
+name: Deploy to Production - Tier 1 Only
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  test:
+    uses: ./.github/workflows/deploy.yml
+    with:
+      environment: production
+      store_list: ./deployment/production-tier1.json
+    secrets: inherit

.github/workflows/deploy-production.yml

@@ -0,0 +1,14 @@
+name: Deploy to Production - All Stores
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  test:
+    uses: ./.github/workflows/deploy.yml
+    with:
+      environment: production
+    secrets: inherit

.github/workflows/deploy-staging.yml

@@ -0,0 +1,14 @@
+name: Deploy to Staging
+
+on:
+  push:
+    branches:
+      - staging
+  workflow_dispatch:
+
+jobs:
+  test:
+    uses: ./.github/workflows/deploy.yml
+    with:
+      environment: staging
+    secrets: inherit

.github/workflows/deploy.yml

@@ -0,0 +1,133 @@
+name: Storefront deployment
+
+on:
+  workflow_call:
+    inputs:
+      environment:
+        required: true
+        type: string
+      store_list:
+        required: false
+        type: string
+    secrets:
+      ENV:
+        required: true
+      AWS_ACCESS_KEY_ID:
+        required: true
+      AWS_SECRET_ACCESS_KEY:
+        required: true
+      API_HOST:
+        required: true
+      API_CREDENTIAL:
+        required: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment: ${{ inputs.environment }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup NodeJS & Yarn
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Setup secrets
+        run: base64 -d <<<${{ secrets.ENV }} > apps/storefront/.env.${{ inputs.environment }}
+
+      - name: Build
+        run: yarn build:${{ inputs.environment }}
+
+      - name: Calculate revision
+        run: echo "GITHUB_SHA_SHORT=$(echo $GITHUB_SHA | cut -c 1-6)" >> $GITHUB_ENV
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: us-west-2
+
+      - name: Push files to s3
+        run: |
+          aws s3 cp apps/storefront/dist s3://b3-cdn-files/b2b/${{ inputs.environment }}/storefront --recursive --acl public-read
+          aws cloudfront create-invalidation --distribution-id E1ZCC8QPXD9I6K --path "/*"
+
+      - name: Create storefront revision
+        shell: bash
+        run: |
+          poly_js=$(find apps/storefront/dist -name polyfills-legacy.*.js -type f -printf '%f')
+          index_js=$(find apps/storefront/dist -name index.*.js ! -path "apps/storefront/dist/assets/*" -type f -printf '%f')
+          indexLegacy_js=$(find apps/storefront/dist -name index-legacy.*.js ! -path "apps/storefront/dist/assets/*" -type f -printf '%f')
+
+          curl --location --request POST '${{ secrets.API_HOST }}/api/v3/stores/revisions' \
+          --header 'Authorization: Basic ${{ secrets.API_CREDENTIAL }}' \
+          --header 'Content-Type: application/json' \
+          --data-binary @- << EOF
+          {
+            "jsFiles": [
+              "<script type=\"module\" crossorigin src=\"https://cdn.bundleb2b.net/b2b/${{ inputs.environment }}/storefront/${index_js}\"></script>",
+              "<script nomodule crossorigin src=\"https://cdn.bundleb2b.net/b2b/${{ inputs.environment }}/storefront/${poly_js}\"></script>",
+              "<script nomodule crossorigin src=\"https://cdn.bundleb2b.net/b2b/${{ inputs.environment }}/storefront/${indexLegacy_js}\"></script>"
+            ],
+            "revisionTitle": "${GITHUB_SHA_SHORT}"
+          }
+          EOF
+
+      - name: Deploy storefront revision to specific stores
+        if: ${{ inputs.store_list != '' }}
+        shell: bash
+        run: |
+          curl --location --request POST '${{ secrets.API_HOST }}/api/v3/stores/deployments' \
+          --header 'Authorization: Basic ${{ secrets.API_CREDENTIAL }}' \
+          --header 'Content-Type: application/json' \
+          --data-binary @- << EOF
+          {
+            "deploy_all": false,
+            "store_hashes": $(cat ${{ inputs.store_list }}),
+            "revision": "${GITHUB_SHA_SHORT}"
+          }
+          EOF
+
+      - name: Deploy storefront revision to all stores
+        if: ${{ inputs.store_list == '' }}
+        shell: bash
+        run: |
+          curl --location --request POST '${{ secrets.API_HOST }}/api/v3/stores/deployments' \
+          --header 'Authorization: Basic ${{ secrets.API_CREDENTIAL }}' \
+          --header 'Content-Type: application/json' \
+          --data-binary @- << EOF
+          {
+            "deploy_all": true,
+            "revision": "${GITHUB_SHA_SHORT}"
+          }
+          EOF
+
+      - name: Send deployment stable message
+        uses: slackapi/slack-github-action@v1
+        if: ${{ inputs.environment  == 'production' }}
+        with:
+          payload: |
+            {
+              "channel": "b2b-deployments",
+              "text": "B2B Storefront Deployed\nEnvironment: `${{ inputs.environment }}`\nRevision: `${{ github.sha }}`\nBuild: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}"
+            }
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+      - name: Send deployment failed message
+        if: ${{ inputs.environment  == 'production' }} && failure()
+        uses: slackapi/slack-github-action@v1
+        with:
+          payload: |
+            {
+              "channel": "b2b-deployments",
+              "text": "B2B Storefront Deployment Failed\nEnvironment: `${{ inputs.environment }}`\nRevision: `${{ github.sha }}`\nBuild: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}"
+            }
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

.github/workflows/main.yaml → .github/workflows/tests.yaml

@@ -1,4 +1,5 @@
-name: Main
+name: Tests
+
 on:
   push:
     branches:
@@ -14,11 +15,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3
+      - name: Setup NodeJS & Yarn
+        uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: 'yarn'
 
       - name: Install dependencies

.gitignore

@@ -33,3 +33,5 @@ yarn-error.log*
 
 # ide
 .vscode
+
+slack-message.json

apps/storefront/src/pages/accountSetting/AccountSetting.tsx

@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router-dom'
-import { LangFormatFunction,useB3Lang } from '@b3/lang'
+import { LangFormatFunction, useB3Lang } from '@b3/lang'
 import { Box } from '@mui/material'
 import trim from 'lodash-es/trim'
 

apps/storefront/src/pages/orderDetail/components/CreateShoppingList.tsx

@@ -1,6 +1,6 @@
 import { lazy, useContext, useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import { LangFormatFunction,useB3Lang } from '@b3/lang'
+import { LangFormatFunction, useB3Lang } from '@b3/lang'
 import { Box } from '@mui/material'
 
 import { GlobaledContext } from '@/shared/global'

apps/storefront/src/pages/pdp/PDP.tsx

@@ -10,7 +10,7 @@ import { useSelector } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
 import globalB3 from '@b3/global-b3'
 import type { OpenPageState } from '@b3/hooks'
-import { LangFormatFunction,useB3Lang } from '@b3/lang'
+import { LangFormatFunction, useB3Lang } from '@b3/lang'
 import { Box, Button } from '@mui/material'
 
 import { GlobaledContext } from '@/shared/global'

apps/storefront/src/pages/quote/QuotesList.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { LangFormatFunction,useB3Lang } from '@b3/lang'
+import { LangFormatFunction, useB3Lang } from '@b3/lang'
 import { Box } from '@mui/material'
 
 import { B3Sping } from '@/components'

apps/storefront/src/pages/quote/components/ContactInfo.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useEffect, useImperativeHandle } from 'react'
 import { useForm } from 'react-hook-form'
-import { LangFormatFunction,useB3Lang } from '@b3/lang'
+import { LangFormatFunction, useB3Lang } from '@b3/lang'
 import { Box } from '@mui/material'
 import trim from 'lodash-es/trim'
 

deployment/production-tier1.json

@@ -0,0 +1,8 @@
+[
+  "nphozlrwue",
+  "p70ju3hpl0",
+  "sh1inxgzt3",
+  "oov9d9k3v8",
+  "p1xpzyx4re",
+  "c75o808cpx"
+]

package.json

@@ -8,6 +8,7 @@
   ],
   "scripts": {
     "build": "turbo run build",
+    "build:production": "turbo run build",
     "build:staging": "turbo run build:staging",
     "dev": "turbo run dev --parallel",
     "lint": "turbo run lint",

packages/lang/useB3Lang.ts

@@ -1,4 +1,4 @@
-import { IntlShape,useIntl } from 'react-intl'
+import { IntlShape, useIntl } from 'react-intl'
 
 type FormatMessageParameters = Parameters<IntlShape['formatMessage']>