Update autoAccept branch to develop and add comment only on PRs (#11614)

Author: MrFlashAccount

.github/workflows/gui-checks.yml

@@ -72,23 +72,18 @@ jobs:
         continue-on-error: true
         run: pnpm run ci:test
 
-      - name: 💾 Save cache
-        uses: actions/cache/save@v4
-        if: always() && steps.cache.outputs.cache-hit != 'true'
-        id: save-cache
-        with:
-          key: ${{ steps.cache.outputs.cache-primary-key }}
-          path: |
-            **/.eslintcache
-            node_modules/.cache/prettier
-
       - name: 📝 Annotate Code Linting Results
+        if: always()
+        continue-on-error: true
         uses: ataylorme/eslint-annotate-action@v3
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           report-json: "./**/eslint_report.json"
           markdown-report-on-step-summary: true
           check-name: 🧹 GUI Lint Results
+          only-pr-files: false
+          fail-on-error: false
+          fail-on-warning: false
 
       - name: ❌ Fail if any check failed
         if: always() && (steps.prettier.outcome == 'failure' || steps.lint.outcome == 'failure' || steps.typecheck.outcome == 'failure' || steps.unit-tests.outcome == 'failure')
@@ -99,6 +94,16 @@ jobs:
           echo "Unit tests outcome: ${{ steps.unit-tests.outcome }}"
           exit 1
 
+      - name: 💾 Save cache
+        uses: actions/cache/save@v4
+        if: always() && steps.cache.outputs.cache-hit != 'true'
+        id: save-cache
+        with:
+          key: ${{ steps.cache.outputs.cache-primary-key }}
+          path: |
+            **/.eslintcache
+            node_modules/.cache/prettier
+
   playwright:
     name: 🎭 Playwright Tests
     env:
@@ -186,7 +191,7 @@ jobs:
 
       - name: 🔗 Merge into HTML Report
         working-directory: app/gui
-        run: pnpm playwright merge-reports --reporter html ./blob-report
+        run: pnpm playwright merge-reports --reporter=html,github ./blob-report
 
       - name: ⬆️ Upload HTML report
         uses: actions/upload-artifact@v4

.github/workflows/gui-pull-request.yml

@@ -22,7 +22,7 @@ permissions:
 jobs:
   changed-files:
     runs-on: ubuntu-latest
-    name: 🔍 Detect changed files in GUI
+    name: 🔍 GUI files changed
     outputs:
       all_changed_files: ${{ steps.changed-files.outputs.all_changed_files }}
       any_changed: ${{ steps.changed-files.outputs.any_changed }}
@@ -43,6 +43,7 @@ jobs:
             .prettierrc.js
             .prettierignore
             vitest.workspace.ts
+            .github/workflows/gui*
           files_ignore: |
             app/ide-desktop/**
             app/gui/scripts/**
@@ -71,13 +72,24 @@ jobs:
     if: ${{ needs.changed-files.outputs.any_changed == 'true' }}
     secrets: inherit
 
+  print-checks-result:
+    name: 🤷 Print checks result
+    runs-on: ubuntu-latest
+    needs: [checks, storybook]
+    if: always()
+    steps:
+      - name: Print checks result
+        run: |
+          echo "Checks: ${{ needs.checks.result }}"
+          echo "Storybook: ${{ needs.storybook.result }}"
+
   # This job is used to report success if the needed jobs were successful.
   # This is a workaround to make optional jobs required if they run
   report-success:
-    name: ✅ Success or skipped due to no changes
+    name: GUI Checks Success or Skipped
     runs-on: ubuntu-latest
     needs: [checks, storybook]
-    if: needs.checks.result == 'skipped' && needs.storybook.result == 'skipped' || needs.checks.result == 'success' && needs.storybook.result == 'success'
+    if: always() && (needs.checks.result == 'skipped' && needs.storybook.result == 'skipped') || (needs.checks.result == 'success' && needs.storybook.result == 'success')
     steps:
       - name: Report success
         run: echo "Success!"

.github/workflows/storybook.yml

@@ -78,6 +78,7 @@ jobs:
   comment-on-pr:
     name: 💬 Comment on PR
     runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request'
     needs: deploy-chromatic-react
     steps:
       - uses: actions/checkout@v4

app/gui/.storybook/preview.tsx

@@ -3,13 +3,21 @@
  */
 import type { Preview as ReactPreview } from '@storybook/react'
 import type { Preview as VuePreview } from '@storybook/vue3'
-import React, { useLayoutEffect, useState } from 'react'
+import isChromatic from 'chromatic/isChromatic'
+import { useLayoutEffect, useState } from 'react'
+
 import invariant from 'tiny-invariant'
 import UIProviders from '../src/dashboard/components/UIProviders'
 
+import { MotionGlobalConfig } from 'framer-motion'
 import z from 'zod'
 import '../src/dashboard/tailwind.css'
 
+if (isChromatic()) {
+  MotionGlobalConfig.skipAnimations = true
+  document.documentElement.classList.add('disable-animations')
+}
+
 const framework = z.enum(['vue', 'react']).parse(window.ENV.FRAMEWORK)
 
 const vuePreview: VuePreview = {
@@ -32,7 +40,6 @@ const reactPreview: ReactPreview = {
       },
     },
   },
-
   // Decorators for all stories
   // Decorators are applied in the reverse order they are defined
   decorators: [

app/gui/chromatic.config.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://www.chromatic.com/config-file.schema.json",
   "projectId": "Enso Dashboard",
-  "autoAcceptChanges": "main",
+  "autoAcceptChanges": "develop",
   "exitOnceUploaded": true,
   "skip": "dependabot/**",
   "buildScriptName": "build-storybook:react"

app/gui/package.json

@@ -21,7 +21,7 @@
     "build": "vite build",
     "build-cloud": "cross-env CLOUD_BUILD=true corepack pnpm run build",
     "preview": "vite preview",
-    "lint": "eslint . --max-warnings=0",
+    "lint": "eslint . --cache --max-warnings=0",
     "format": "prettier --version && prettier --write src/ && eslint . --fix",
     "dev:vite": "vite",
     "test": "corepack pnpm run /^^^^test:.*/",
@@ -31,6 +31,8 @@
     "test-dev-dashboard:e2e": "cross-env NODE_ENV=production playwright test ./e2e/dashboard/ --ui",
     "preinstall": "corepack pnpm run generate-metadata",
     "generate-metadata": "node scripts/generateIconMetadata.js",
+    "storybook:react": "cross-env FRAMEWORK=react storybook dev",
+    "storybook:vue": "cross-env FRAMEWORK=vue storybook dev",
     "build-storybook:react": "cross-env FRAMEWORK=react storybook build",
     "build-storybook:vue": "cross-env FRAMEWORK=vue storybook build",
     "chromatic:react": "cross-env FRAMEWORK=react chromatic deploy",

app/gui/src/dashboard/styles.css

@@ -23,10 +23,3 @@
 :where(.enso-dashboard) {
   @apply absolute inset-0 flex flex-col overflow-hidden;
 }
-
-/* Disable all animations. */
-html.disable-animations * {
-  transition: none !important;
-  animation: none !important;
-  animation-play-state: paused !important;
-}

app/gui/src/dashboard/tailwind.css

@@ -556,3 +556,10 @@ body[data-debug] {
 :root::highlight(field-existing-email) {
   @apply text-amber-500;
 }
+
+/* Disable all animations. */
+html.disable-animations * {
+  transition: none !important;
+  animation: none !important;
+  animation-play-state: paused !important;
+}