From 33140257ec93a3024de734ed2e6cb1c602845c07 Mon Sep 17 00:00:00 2001
From: John Hobbs <john@velvetcache.org>
Date: Fri, 24 Jan 2025 13:43:32 -0600
Subject: [PATCH] Move to multiline format for changes.

---
 .../ui/messages/errors/buildHasChanges.ts     | 12 ++++++++---
 .../ui/messages/info/buildPassed.stories.ts   | 21 +++++++++++++++++++
 node-src/ui/messages/info/buildPassed.ts      |  4 ++--
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/node-src/ui/messages/errors/buildHasChanges.ts b/node-src/ui/messages/errors/buildHasChanges.ts
index cbdfce684..17b98042e 100644
--- a/node-src/ui/messages/errors/buildHasChanges.ts
+++ b/node-src/ui/messages/errors/buildHasChanges.ts
@@ -10,14 +10,20 @@ export default ({ build, exitCode, isOnboarding }) => {
 
   const changes: any[] = [];
   if (build.changeCount > 0) {
-    changes.push(pluralize('visual changes', build.changeCount, true));
+    changes.push(
+      chalk`${error} {bold Found ${pluralize('visual changes', build.changeCount, true)}}`
+    );
   }
   if (build.accessibilityChangeCount > 0) {
-    changes.push(pluralize('accessibility changes', build.accessibilityChangeCount, true));
+    changes.push(
+      chalk`${error} {bold Found ${pluralize('accessibility changes', build.accessibilityChangeCount, true)}}`
+    );
   }
 
   return dedent(chalk`
-    ${error} {bold Found ${changes.join(' and ')}}: Review the changes at ${link(url)}
+    ${changes.join('\n')}
+
+    Review the changes at ${link(url)}
     
     ${info} For CI/CD use cases, this command failed with exit code ${exitCode}
     Pass {bold --exit-zero-on-changes} to succeed this command regardless of changes.
diff --git a/node-src/ui/messages/info/buildPassed.stories.ts b/node-src/ui/messages/info/buildPassed.stories.ts
index 2140561cc..4ca33d2e1 100644
--- a/node-src/ui/messages/info/buildPassed.stories.ts
+++ b/node-src/ui/messages/info/buildPassed.stories.ts
@@ -23,6 +23,27 @@ export const BuildPassedWithChanges = () =>
       number: 42,
       webUrl: 'https://www.chromatic.com/build?appId=59c59bd0183bd100364e1d57&number=42',
       changeCount: 2,
+      accessibilityChangeCount: 1,
+    },
+  } as any);
+
+export const BuildPassedWithVisualChanges = () =>
+  buildPassed({
+    ...ctx,
+    build: {
+      number: 42,
+      webUrl: 'https://www.chromatic.com/build?appId=59c59bd0183bd100364e1d57&number=42',
+      changeCount: 2,
+    },
+  } as any);
+
+export const BuildPassedWithAccessibilityChanges = () =>
+  buildPassed({
+    ...ctx,
+    build: {
+      number: 42,
+      webUrl: 'https://www.chromatic.com/build?appId=59c59bd0183bd100364e1d57&number=42',
+      accessibilityChangeCount: 1,
     },
   } as any);
 
diff --git a/node-src/ui/messages/info/buildPassed.ts b/node-src/ui/messages/info/buildPassed.ts
index c1a5f656c..a38a86c20 100644
--- a/node-src/ui/messages/info/buildPassed.ts
+++ b/node-src/ui/messages/info/buildPassed.ts
@@ -11,7 +11,7 @@ import { stats } from '../../tasks/snapshot';
 export default (ctx: Context) => {
   const { snapshots, components, stories, e2eTests } = stats({ build: ctx.build });
 
-  const totalChanges = ctx.build.changeCount + ctx.build.accessibilityChangeCount;
+  const totalChanges = (ctx.build.changeCount || 0) + (ctx.build.accessibilityChangeCount || 0);
 
   if (ctx.isOnboarding) {
     const foundString = isE2EBuild(ctx.options)
@@ -36,7 +36,7 @@ export default (ctx: Context) => {
   return ctx.build.autoAcceptChanges && totalChanges > 0
     ? dedent(chalk`
       ${success} {bold Build ${ctx.build.number} passed!}
-      Auto-accepted ${pluralize('changes', ctx.build.changeCount + ctx.build.accessibilityChangeCount, true)}.
+      Auto-accepted ${pluralize('changes', totalChanges, true)}.
       ${info} View build details at ${link(ctx.build.webUrl)}
     `)
     : dedent(chalk`