ci: Migrate the CI/CD pipeline from CircleCI to GitHub Actions (#920)

* ci: Migrate the CI/CD pipeline from CircleCI to GitHub Actions * ci: fetch the entire Git history to access the latest tag release
trendmicro-frontend · Sep 10, 2024 · e8f66c2 · e8f66c2
1 parent 65f8570
commit e8f66c2
Show file tree

Hide file tree

Showing 21 changed files with 503 additions and 475 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
diff --git a/.github/workflows/algolia-search-indexing.yml b/.github/workflows/algolia-search-indexing.yml
@@ -17,9 +17,9 @@ jobs:
       matrix:
         node-version: [18.x]
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
     - name: Install yarn

diff --git a/.github/workflows/changesets-release.yml b/.github/workflows/changesets-release.yml
@@ -31,7 +31,7 @@ jobs:
         id: checkout
         uses: actions/checkout@v4
         with:
-          # Ensure the full git history is available so that `changesets` can generate changelogs with the correct commits
+          # Fetch the entire Git history to ensure `Changesets` can generate changelogs with the correct commits
           fetch-depth: 0
       - name: Setup Node
         id: setup-node

diff --git a/.github/workflows/ci-branch.yml b/.github/workflows/ci-branch.yml
@@ -0,0 +1,134 @@
+name: ci-branch
+
+on:
+  push:
+    branches:
+      - v2
+  workflow_dispatch:
+    branches:
+      - v2
+
+permissions:
+  contents: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idoutputs
+    outputs:
+      TONIC_UI_REACT_DOCS_VERSION: ${{ steps.step_setup_env.outputs.TONIC_UI_REACT_DOCS_VERSION }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          # Fetch the entire Git history to access the latest tag release
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Check installed versions
+        run: |
+          git --version
+          node --version
+          npm --version
+          yarn --version
+
+      - name: Configure environment variables
+        id: step_setup_env
+        run: |
+          TONIC_UI_REACT_VERSION=v2
+          echo "CI_BRANCH=${{ github.ref_name }}" >> $GITHUB_ENV
+          echo "CI_COMMIT=${{ github.sha }}" >> $GITHUB_ENV
+          echo "MATOMO_URL=//matomo.xdr.trendmicro.com" >> $GITHUB_ENV
+          echo "MATOMO_CONTAINER_ID=N8rpl9LU" >> $GITHUB_ENV
+          echo "TONIC_UI_REACT_DOCS_BASE_PATH=/tonic-ui/react-docs/${TONIC_UI_REACT_VERSION}" >> $GITHUB_ENV
+          echo "TONIC_UI_REACT_DOCS_VERSION=${TONIC_UI_REACT_VERSION}" >> $GITHUB_ENV
+
+          # $GITHUB_OUTPUT is shared between all steps in a job
+          echo "TONIC_UI_REACT_DOCS_VERSION=${TONIC_UI_REACT_VERSION}" >> $GITHUB_OUTPUT
+
+      - name: Install packages
+        run: |
+          yarn up
+          yarn install
+
+      - name: Build & Test
+        run: |
+          yarn build
+          yarn lint
+          yarn test
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v4
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+        with:
+          files: |
+            ./packages/changelog-github/coverage/lcov.info
+            ./packages/codemod/coverage/lcov.info
+            ./packages/react/coverage/lcov.info
+            ./packages/react-base/coverage/lcov.info
+            ./packages/react-hooks/coverage/lcov.info
+            ./packages/react-icons/coverage/lcov.info
+            ./packages/styled-system/coverage/lcov.info
+            ./packages/theme/coverage/lcov.info
+            ./packages/utils/coverage/lcov.info
+
+      - name: Prepare artifact
+        run: |
+          mkdir -p ${{ github.workspace }}/artifact
+          tar -zcvf ${{ github.workspace }}/artifact/react-docs.tar.gz --dereference --directory packages/react-docs/dist .
+        continue-on-error: true
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: ci-artifact
+          path: |
+            artifact/react-docs.tar.gz
+          if-no-files-found: error
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          repository: ${{ github.repository }}
+          ref: gh-pages
+
+      - name: git config
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+
+      - name: Configure environment variables
+        env:
+          TONIC_UI_REACT_DOCS_VERSION: ${{ needs.build.outputs.TONIC_UI_REACT_DOCS_VERSION }}
+        run: |
+          echo "CI_COMMIT=${{ github.sha }}" >> $GITHUB_ENV
+          echo "TONIC_UI_REACT_DOCS_VERSION=${TONIC_UI_REACT_DOCS_VERSION}" >> $GITHUB_ENV
+
+      - name: Download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: ci-artifact
+          path: artifact
+
+      - name: Extract artifact
+        run: |
+          mkdir -p artifact/react-docs
+          tar -zxvf artifact/react-docs.tar.gz --directory artifact/react-docs
+
+      - name: Deploy to gh-pages
+        run: |
+          rm -rf "react-docs/${TONIC_UI_REACT_DOCS_VERSION}"
+          mkdir -p "react-docs/${TONIC_UI_REACT_DOCS_VERSION}"
+          cp -af artifact/react-docs/** "react-docs/${TONIC_UI_REACT_DOCS_VERSION}/"
+          git add "react-docs/${TONIC_UI_REACT_DOCS_VERSION}"
+          git commit -m "Deploy ${CI_COMMIT:0:8} to gh-pages [skip ci]"
+          git push origin gh-pages
diff --git a/.github/workflows/ci-pr.yml b/.github/workflows/ci-pr.yml
@@ -0,0 +1,155 @@
+name: ci-pr
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+    branches:
+      - v2
+
+permissions:
+  contents: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idoutputs
+    outputs:
+      TONIC_UI_REACT_DOCS_VERSION: ${{ steps.step_setup_env.outputs.TONIC_UI_REACT_DOCS_VERSION }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          # Fetch the entire Git history to access the latest tag release
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Check installed versions
+        run: |
+          git --version
+          node --version
+          npm --version
+          yarn --version
+
+      - name: Configure environment variables
+        id: step_setup_env
+        run: |
+          TONIC_UI_REACT_VERSION=pr-${{ github.event.number }}
+          echo "CI_BRANCH=${{ github.ref_name }}" >> $GITHUB_ENV
+          echo "CI_COMMIT=${{ github.event.pull_request.head.sha }}" >> $GITHUB_ENV
+          echo "CI_PULL_REQUEST_NUMBER=${{ github.event.number }}" >> $GITHUB_ENV
+          echo "MATOMO_URL=//matomo.xdr.trendmicro.com" >> $GITHUB_ENV
+          echo "MATOMO_CONTAINER_ID=N8rpl9LU" >> $GITHUB_ENV
+          echo "TONIC_UI_REACT_DOCS_BASE_PATH=/tonic-ui-demo/react-docs/${TONIC_UI_REACT_VERSION}" >> $GITHUB_ENV
+          echo "TONIC_UI_REACT_DOCS_VERSION=${TONIC_UI_REACT_VERSION}" >> $GITHUB_ENV
+
+          # $GITHUB_OUTPUT is shared between all steps in a job
+          echo "TONIC_UI_REACT_DOCS_VERSION=${TONIC_UI_REACT_VERSION}" >> $GITHUB_OUTPUT
+
+      - name: Install packages
+        run: |
+          yarn up
+          yarn install
+
+      - name: Build & Test
+        run: |
+          yarn build
+          yarn lint
+          yarn test
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v4
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+        with:
+          files: |
+            ./packages/changelog-github/coverage/lcov.info
+            ./packages/codemod/coverage/lcov.info
+            ./packages/react/coverage/lcov.info
+            ./packages/react-base/coverage/lcov.info
+            ./packages/react-hooks/coverage/lcov.info
+            ./packages/react-icons/coverage/lcov.info
+            ./packages/styled-system/coverage/lcov.info
+            ./packages/theme/coverage/lcov.info
+            ./packages/utils/coverage/lcov.info
+
+      - name: Prepare artifact
+        run: |
+          mkdir -p ${{ github.workspace }}/artifact
+          tar -zcvf ${{ github.workspace }}/artifact/react-docs.tar.gz --dereference --directory packages/react-docs/dist .
+          cp -af scripts/github-issue-comment-cli ${{ github.workspace }}/artifact/
+        continue-on-error: true
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: ci-artifact
+          path: |
+            artifact/react-docs.tar.gz
+            artifact/github-issue-comment-cli
+          if-no-files-found: error
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          repository: trendmicro-frontend/tonic-ui-demo
+          ref: gh-pages
+          ssh-key: ${{ secrets.TONIC_UI_DEMO_SSH_PRIVATE_KEY }}
+
+      - name: git config
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Configure environment variables
+        env:
+          TONIC_UI_REACT_DOCS_VERSION: ${{ needs.build.outputs.TONIC_UI_REACT_DOCS_VERSION }}
+        run: |
+          echo "CI_COMMIT=${{ github.event.pull_request.head.sha }}" >> $GITHUB_ENV
+          echo "CI_PULL_REQUEST_NUMBER=${{ github.event.number }}" >> $GITHUB_ENV
+          echo "TONIC_UI_DEMO_PAGES_URL=https://trendmicro-frontend.github.io/tonic-ui-demo" >> $GITHUB_ENV
+          echo "TONIC_UI_REACT_DOCS_VERSION=${TONIC_UI_REACT_DOCS_VERSION}" >> $GITHUB_ENV
+
+      - name: Download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: ci-artifact
+          path: artifact
+
+      - name: Extract artifact
+        run: |
+          mkdir -p artifact/react-docs
+          tar -zxvf artifact/react-docs.tar.gz --directory artifact/react-docs
+
+      - name: Deploy to gh-pages
+        run: |
+          rm -rf "react-docs/${TONIC_UI_REACT_DOCS_VERSION}"
+          mkdir -p "react-docs/${TONIC_UI_REACT_DOCS_VERSION}"
+          cp -af artifact/react-docs/** "react-docs/${TONIC_UI_REACT_DOCS_VERSION}/"
+          git add "react-docs/${TONIC_UI_REACT_DOCS_VERSION}"
+          git commit -m "Deploy ${TONIC_UI_REACT_DOCS_VERSION} to gh-pages [skip ci]"
+          git push origin gh-pages
+          GIT_LOG_LAST_COMMIT_DATE=`git log --pretty=%ci -n 1`
+          yarn add file:./artifact/github-issue-comment-cli
+          npx github-issue-comment-cli \
+            --token ${{ secrets.TONIC_UI_PR_ACCESS_TOKEN }} \
+            --pattern "## Tonic UI Demo" \
+            --owner trendmicro-frontend \
+            --repo tonic-ui \
+            --issue-number ${CI_PULL_REQUEST_NUMBER} \
+            --comment "## Tonic UI Demo\nOn ${GIT_LOG_LAST_COMMIT_DATE}, PR #${CI_PULL_REQUEST_NUMBER} (${CI_COMMIT}) was successfully deployed. You can view it at the following link:\n${TONIC_UI_DEMO_PAGES_URL}/react-docs/${TONIC_UI_REACT_DOCS_VERSION}/\n"
diff --git a/.github/workflows/ci-publish.yml b/.github/workflows/ci-publish.yml
@@ -0,0 +1,37 @@
+name: ci-publish
+
+on:
+  workflow_call:
+  workflow_dispatch:
+    branches:
+      - v2
+
+permissions:
+  contents: write
+
+env:
+  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          # Fetch the entire Git history to access the latest tag release
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Install packages
+        run: |
+          yarn up
+          yarn install
+
+      - name: Publish packages
+        run: |
+          yarn ci-publish