Meta: Separate CI workflows (#487)

Splits CI jobs to run in parallel and make the reason of the failure
clearer.

Before: 

<img width="946" alt="CleanShot 2023-06-01 at 12 24 55@2x"
src="https://github.com/WordPress/wordpress-playground/assets/205419/e1ce9b97-fb9d-474e-9435-dae31185d2d7">

After:

<img width="937" alt="CleanShot 2023-06-01 at 13 28 43@2x"
src="https://github.com/WordPress/wordpress-playground/assets/205419/a9c32ee2-fbe5-4aec-a7b3-0bbe805402d0">

Author: adamziel

.github/actions/prepare-playground/action.yml

@@ -0,0 +1,32 @@
+name: Clone the repository, install dependencies, and configures nx variables
+
+runs:
+    using: 'composite'
+    steps:
+        - name: Fetch trunk
+          shell: bash
+          run: git fetch origin trunk --depth=1
+        - uses: actions/setup-node@v3
+        - name: Cache node modules
+          id: cache-nodemodules
+          uses: actions/cache@v2
+          env:
+              cache-name: cache-node-modules
+          with:
+              # caching node_modules
+              path: node_modules
+              key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+              restore-keys: |
+                  ${{ runner.os }}-build-${{ env.cache-name }}-
+                  ${{ runner.os }}-build-
+                  ${{ runner.os }}-
+        - name: Install Dependencies
+          shell: bash
+          if: steps.cache-nodemodules.outputs.cache-hit != 'true'
+          run: npm ci
+        - name: Set NX_BASE
+          shell: bash
+          run: echo "NX_BASE=$(git rev-parse origin/trunk)" >> $GITHUB_ENV
+        - name: Set NX_HEAD
+          shell: bash
+          run: echo "NX_HEAD=$(git rev-parse HEAD)" >> $GITHUB_ENV

.github/workflows/ci.yml

@@ -6,19 +6,37 @@ on:
     pull_request:
 
 jobs:
-    main:
+    warmup-cache:
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@v2
-              with:
-                  fetch-depth: 0
-            - uses: actions/setup-node@v3
-            - uses: nrwl/nx-set-shas@v3
-              with:
-                  main-branch-name: 'trunk'
-            - run: npm ci
+            - uses: actions/checkout@v3
+            - uses: ./.github/actions/prepare-playground
+    format:
+        runs-on: ubuntu-latest
+        needs: [warmup-cache]
+        steps:
+            - uses: actions/checkout@v3
+            - uses: ./.github/actions/prepare-playground
             - run: npx nx format:check || npx prettier --check .
+            - run: npx nx affected --target=lint
+    typecheck:
+        runs-on: ubuntu-latest
+        needs: [warmup-cache]
+        steps:
+            - uses: actions/checkout@v3
+            - uses: ./.github/actions/prepare-playground
             - run: npx nx affected --target=typecheck
-            - run: npx nx affected --target=lint --parallel=3
-            - run: npx nx affected --target=test --parallel=3 --configuration=ci
+    test:
+        runs-on: ubuntu-latest
+        needs: [warmup-cache]
+        steps:
+            - uses: actions/checkout@v3
+            - uses: ./.github/actions/prepare-playground
+            - run: npx nx affected --target=test --configuration=ci
+    build:
+        runs-on: ubuntu-latest
+        needs: [warmup-cache]
+        steps:
+            - uses: actions/checkout@v3
+            - uses: ./.github/actions/prepare-playground
             - run: npx nx affected --target=build --parallel=3