chore: use Nx affected tasks in CI

Closes #5097

.github/workflows/ci-front.yaml

@@ -40,26 +40,33 @@ jobs:
           key: root-node_modules-${{hashFiles('yarn.lock')}}
           restore-keys: root-node_modules-
       - name: Front / Install Dependencies
-        run: yarn
+        run: yarn --immutable
+  front-affected:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          # We need to fetch all branches and commits so that Nx affected has a base to compare against.
+          fetch-depth: 0
+      - name: Get last successful commit
+        id: nxSHAs
+        uses: nrwl/nx-set-shas@v4
   front-pages-sb-test:
     needs: front-yarn-install
     runs-on: ci-8-cores
     env:
       REACT_APP_SERVER_BASE_URL: http://localhost:3000
+      STORYBOOK_SCOPE: pages
     steps:
       - name: Cancel Previous Runs
         uses: styfle/[email protected]
         with:
-            access_token: ${{ github.token }}
+          access_token: ${{ github.token }}
       - uses: actions/checkout@v4
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
           node-version: "18"
-      - name: Front / Write .env
-        run: |
-          cd packages/twenty-front
-          cp .env.example .env
       - name: Cache front node modules
         uses: actions/cache@v3
         with:
@@ -74,16 +81,19 @@ jobs:
           restore-keys: root-node_modules-
       - name: Install Playwright
         run: cd packages/twenty-front && npx playwright install
+      - name: Front / Write .env
+        run: npx nx reset:env twenty-front
       - name: Run storybook tests
         run: |
           npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "STORYBOOK_SCOPE=pages npx nx run twenty-front:storybook:static:ci" \
-            "npx wait-on tcp:6006 && STORYBOOK_SCOPE=pages npx nx run twenty-front:storybook:test"
+            "npx nx run twenty-front:storybook:static:ci" \
+            "npx wait-on tcp:6006 && npx nx run twenty-front:storybook:test"
   front-modules-sb-test:
     needs: front-yarn-install
     runs-on: ci-4-cores
     env:
       REACT_APP_SERVER_BASE_URL: http://localhost:3000
+      STORYBOOK_SCOPE: modules
     steps:
       - name: Cancel Previous Runs
         uses: styfle/[email protected]
@@ -94,10 +104,6 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: "18"
-      - name: Front / Write .env
-        run: |
-          cd packages/twenty-front
-          cp .env.example .env
       - name: Cache front node modules
         uses: actions/cache@v3
         with:
@@ -112,16 +118,22 @@ jobs:
           restore-keys: root-node_modules-
       - name: Install Playwright
         run: cd packages/twenty-front && npx playwright install
+      - name: Front / Write .env
+        run: npx nx reset:env twenty-front
       - name: Run storybook tests
         run: |
           npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "STORYBOOK_SCOPE=modules npx nx run twenty-front:storybook:static:ci" \
-            "npx wait-on tcp:6006 && STORYBOOK_SCOPE=modules npx nx run twenty-front:storybook:test"
+            "npx nx run twenty-front:storybook:static:ci" \
+            "npx wait-on tcp:6006 && npx nx run twenty-front:storybook:test"
   front-lint-tsc:
-    needs: front-yarn-install
+    needs:
+      - front-yarn-install
+      - front-affected
     runs-on: ubuntu-latest
     env:
       REACT_APP_SERVER_BASE_URL: http://localhost:3000
+      NX_BASE: ${{ steps.nxSHAs.outputs.base }}
+      NX_HEAD: ${{ steps.nxSHAs.outputs.head }}
     steps:
       - name: Cancel Previous Runs
         uses: styfle/[email protected]
@@ -144,19 +156,19 @@ jobs:
           path: node_modules
           key: root-node_modules-${{hashFiles('yarn.lock')}}
           restore-keys: root-node_modules-
-      - name: UI / Run linter
-        run: npx nx lint twenty-ui
-      - name: UI / Run Typescript Check
-        run: npx nx run twenty-ui:typecheck:ci
-      - name: Front / Run linter
-        run: npx nx run twenty-front:lint:ci
-      - name: Front / Run Typescript Check
-        run: npx nx run twenty-front:typecheck:ci
+      - name: Affected / Run linter
+        run: npx nx affected:ci -t lint
+      - name: Affected / Run Typescript Check
+        run: npx nx affected:ci -t typecheck
   front-jest:
-    needs: front-yarn-install
+    needs:
+      - front-yarn-install
+      - front-affected
     runs-on: ubuntu-latest
     env:
       REACT_APP_SERVER_BASE_URL: http://localhost:3000
+      NX_BASE: ${{ steps.nxSHAs.outputs.base }}
+      NX_HEAD: ${{ steps.nxSHAs.outputs.head }}
     steps:
       - name: Cancel Previous Runs
         uses: styfle/[email protected]
@@ -180,4 +192,4 @@ jobs:
           key: root-node_modules-${{hashFiles('yarn.lock')}}
           restore-keys: root-node_modules-
       - name: Front / Run jest
-        run: npx nx test twenty-front --configuration=ci
+        run: npx nx affected:ci -t test --parallel=1

nx.json

@@ -1,4 +1,8 @@
 {
+  "namedInputs": {
+    "default": ["{projectRoot}/**/*", "sharedGlobals"],
+    "sharedGlobals": ["{workspaceRoot}/.github/workflows/ci-front.yaml"]
+  },
   "targetDefaults": {
     "build": {
       "cache": true,

package.json

@@ -331,7 +331,8 @@
   "version": "0.2.1",
   "nx": {},
   "scripts": {
-    "start": "nx run-many -t start -p twenty-server twenty-front"
+    "affected:ci": "npx nx affected --base=$NX_BASE --head=$NX_HEAD --nxBail --configuration=ci",
+    "start": "npx nx run-many -t start -p twenty-server twenty-front"
   },
   "workspaces": {
     "packages": [

packages/twenty-front/project.json

@@ -2,6 +2,7 @@
   "name": "twenty-front",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
+  "tags": ["scope:frontend"],
   "targets": {
     "build": {
       "outputs": ["{options.outputPath}"],
@@ -24,6 +25,16 @@
         "open": true
       }
     },
+    "reset:env": {
+      "executor": "nx:run-commands",
+      "inputs": ["{projectRoot}/.env.example"],
+      "outputs": ["{projectRoot}/.env"],
+      "cache": true,
+      "options": {
+        "cwd": "{projectRoot}",
+        "command": "cp .env.example .env"
+      }
+    },
     "typecheck": {
       "executor": "nx:run-commands",
       "options": {