Replace rainbow bar with moving hill for no-color mode

[amcaplan]

WHY are these changes introduced?

Fixes the poor display of the loading bar in no-color terminals.

WHAT is this pull request doing?

Screen.Recording.2025-01-23.at.17.45.20.mov

How to test your changes?

$ p shopify kitchen-sink async

or any other command which uses a rainbow bar (e.g. creating a new app)

Measuring impact

How do we know this change was effective? Please choose one:

• n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix
• Existing analytics will cater for this addition
• PR includes analytics changes to measure impact
• Impact is unknown, a followup PR will includes analytics changes to measure impact

Checklist

• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've considered possible documentation changes

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟡	Statements	75.34% (+0.02% 🔼)	8899/11812
🟡	Branches	70.57% (+0.03% 🔼)	4328/6133
🟡	Functions	75.11% (+0.02% 🔼)	2339/3114
🟡	Lines	75.88% (+0.03% 🔼)	8411/11085

Show files with reduced coverage 🔻

St.❔	File	Statements	Branches	Functions	Lines
🟢	... / app-event-watcher.ts	93.83% (-1.23% 🔻)	86.49%	90.48%	98.61%
🟢	... / TextAnimation.tsx	100%	50% (-50% 🔻)	100%	100%

Test suite run success

2003 tests passing in 904 suites.

Report generated by 🧪jest coverage report action from 549c884

[amcaplan]

I only introduced this to inject true in tests because mocking output.js (where we get shouldDisplayColors) led to very weird results. It's a private interface, so I don't think this should matter all that much.

[amcaplan]

Rounding up here so we have a bit of extra insurance at the end (which TextAnimation will truncate), rather than overtruncating immediately.

[github-actions]

Differences in type declarations

We detected differences in the type declarations generated by Typescript for this branch compared to the baseline ('main' branch). Please, review them to ensure they are backward-compatible. Here are some important things to keep in mind:

• Some seemingly private modules might be re-exported through public modules.
• If the branch is behind main you might see odd diffs, rebase main into this branch.

New type declarations

We found no new type declarations in this PR

Existing type declarations

packages/cli-kit/dist/private/node/ui/components/Tasks.d.ts

@@ -13,6 +13,7 @@ interface TasksProps<TContext> {
     silent?: boolean;
     onComplete?: (ctx: TContext) => void;
     abortSignal?: AbortSignal;
+    noColor?: boolean;
 }
-declare function Tasks<TContext>({ tasks, silent, onComplete, abortSignal, }: React.PropsWithChildren<TasksProps<TContext>>): JSX.Element | null;
+declare function Tasks<TContext>({ tasks, silent, onComplete, abortSignal, noColor, }: React.PropsWithChildren<TasksProps<TContext>>): JSX.Element | null;
 export { Tasks };
\ No newline at end of file

packages/cli-kit/dist/private/node/ui/components/TextAnimation.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 interface TextAnimationProps {
     text: string;
+    maxWidth?: number;
 }
 /**
  *  applies a rainbow animation to text.
  */
-declare const TextAnimation: React.MemoExoticComponent<({ text }: TextAnimationProps) => JSX.Element>;
+declare const TextAnimation: React.MemoExoticComponent<({ text, maxWidth }: TextAnimationProps) => JSX.Element>;
 export { TextAnimation };
\ No newline at end of file

[karreiro]

Thank you, @amcaplan! Very neat accessibility enhancement! LGTM and works as expected as well: