Skip to content

Commit db2bfab

Browse files
juanmaguitarclaude
andcommitted
Say "Ready" for the next setup step until its action runs
The checklist labelled the current step "In progress" as soon as it became the next actionable step — before the contributor clicked anything and before any work was happening. On a fresh site "Install npm dependencies" read "In progress" while nothing was installing (#257); the next-action ring (#252) drew the eye straight to the wrong word. The "current" status conflated next with running: it always mapped to "In progress", ignoring the installing/building/starting (and clone-pending) flags that already gate the buttons. Add a pure setupStepLabel(status, isRunning) that reads "Ready" for a current step whose action is not under way and "In progress" only once it is; pass each step its own running flag; and drop the now-dead label keys from checklistVisuals so the status word has one source. Closes #257. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1 parent 37ce9ac commit db2bfab

3 files changed

Lines changed: 64 additions & 9 deletions

File tree

‎src/renderer/index.jsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { plus, chevronLeft, chevronRight, chevronDown, copy as copyIcon, check a
2020
import '@wordpress/components/build-style/style.css';
2121
import { Terminal } from 'xterm';
2222
import 'xterm/css/xterm.css';
23-
import { computeSetupStepState } from './setup-steps.cjs';
23+
import { computeSetupStepState, setupStepLabel } from './setup-steps.cjs';
2424
import { deriveNextAction } from './next-action.cjs';
2525
import { shouldShowTerminalHints, computeTerminalBusy } from './terminal-hints.cjs';
2626
import { planDevServerStart, formatElapsed } from './dev-server-command.cjs';
@@ -3351,9 +3351,11 @@ function SiteRow({ sitePath, initialized, createdAt, label, onInitialized, onSit
33513351
? { background: '#e7f6e7', color: '#0f5132' }
33523352
: { background: '#fff4ce', color: '#8a6d1c' };
33533353

3354+
// Colours and indicator per step status. The status *word* is not here — it
3355+
// lives in `setupStepLabel`, the one place that distinguishes a step that is
3356+
// merely next from one that is running (#257).
33543357
const checklistVisuals = {
33553358
complete: {
3356-
label: 'Completed',
33573359
color: '#0f5132',
33583360
background: '#f4fbf4',
33593361
border: '#94d3ae',
@@ -3363,7 +3365,6 @@ function SiteRow({ sitePath, initialized, createdAt, label, onInitialized, onSit
33633365
indicatorContent: '✓'
33643366
},
33653367
current: {
3366-
label: 'In progress',
33673368
color: '#0b5d95',
33683369
background: '#e8f3ff',
33693370
border: '#66afe9',
@@ -3373,7 +3374,6 @@ function SiteRow({ sitePath, initialized, createdAt, label, onInitialized, onSit
33733374
indicatorContent: '•'
33743375
},
33753376
pending: {
3376-
label: 'Pending',
33773377
color: '#6c6f72',
33783378
background: '#f8f9f9',
33793379
border: '#dcdcde',
@@ -3383,7 +3383,6 @@ function SiteRow({ sitePath, initialized, createdAt, label, onInitialized, onSit
33833383
indicatorContent: '•'
33843384
},
33853385
locked: {
3386-
label: 'Locked',
33873386
color: '#6c6f72',
33883387
background: '#f5f5f7',
33893388
border: '#dcdcde',
@@ -3417,7 +3416,8 @@ function SiteRow({ sitePath, initialized, createdAt, label, onInitialized, onSit
34173416
description: isPending
34183417
? 'Cloning the WordPress develop repository… the next step unlocks when it finishes.'
34193418
: 'Clone the WordPress develop repository.',
3420-
...stepState.download
3419+
...stepState.download,
3420+
running: isPending
34213421
},
34223422
{
34233423
key: 'install',
@@ -3428,6 +3428,7 @@ function SiteRow({ sitePath, initialized, createdAt, label, onInitialized, onSit
34283428
? 'Installed. Added a dependency to package.json since? Run npm install in the Terminal below.'
34293429
: 'Install npm packages so commands can run.',
34303430
...stepState.install,
3431+
running: installing,
34313432
action: (
34323433
<Button
34333434
isBusy={installing}
@@ -3444,6 +3445,7 @@ function SiteRow({ sitePath, initialized, createdAt, label, onInitialized, onSit
34443445
? 'Built. Edited files in src/ since? Run npm run build in the Terminal below so the site picks them up — updates and applied patches rebuild on their own.'
34453446
: 'Compile WordPress Core to generate the dist files. Later updates rebuild automatically.',
34463447
...stepState.build,
3448+
running: building,
34473449
action: (
34483450
<Button
34493451
isBusy={building}
@@ -3458,6 +3460,7 @@ function SiteRow({ sitePath, initialized, createdAt, label, onInitialized, onSit
34583460
label: 'Start dev server & finish wizard',
34593461
description: 'Launch the development server once to complete the WordPress setup wizard.',
34603462
...stepState.dev,
3463+
running: starting,
34613464
action: (
34623465
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
34633466
<Button
@@ -3798,7 +3801,7 @@ function SiteRow({ sitePath, initialized, createdAt, label, onInitialized, onSit
37983801
</div>
37993802
<div style={{ gridColumn: '2 / 3', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, minWidth: 0, flexWrap: 'wrap' }}>
38003803
<div style={{ fontWeight: 600, color: '#1d2327', lineHeight: 1.4 }}>{step.label}</div>
3801-
<div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', color: visuals.color, marginLeft: 'auto', whiteSpace: 'nowrap' }}>{visuals.label}</div>
3804+
<div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', color: visuals.color, marginLeft: 'auto', whiteSpace: 'nowrap' }}>{setupStepLabel(step.status, step.running)}</div>
38023805
</div>
38033806
<div style={{ gridColumn: '2 / 3', fontSize: 12, color: '#3c434a', lineHeight: 1.5 }}>{step.description}</div>
38043807
<div style={{ gridRow: '1 / span 2', gridColumn: '3 / 4', alignSelf: 'center', display: 'flex', alignItems: 'center' }}>

‎src/renderer/setup-steps.cjs‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,4 +56,38 @@ function computeSetupStepState(flags = {}) {
5656
};
5757
}
5858

59-
module.exports = { computeSetupStepState };
59+
/**
60+
* The status word shown on a checklist step.
61+
*
62+
* `current` is the step a contributor should act on next — but being next is
63+
* not the same as being under way (#257). Its old label, "In progress", read as
64+
* "the app is already doing this" on a step whose button had not been touched:
65+
* on a fresh site *Install npm dependencies* announced itself as running while
66+
* nothing was, so a contributor waited instead of clicking. The distinction the
67+
* label was missing is `isRunning` — whether the step's own action (the clone,
68+
* install, build or dev-server start) is actually in flight — which the caller
69+
* already knows from the flags that drive the buttons. A current step reads
70+
* "Ready" until that is true, and "In progress" only once it is.
71+
*
72+
* Kept here, pure and tested, rather than as a lookup in the component: it is a
73+
* decision with branches, and those belong in a module by this project's own
74+
* rule.
75+
*
76+
* @param {string} status One of complete|current|pending|locked.
77+
* @param {boolean} isRunning The current step's action is under way.
78+
* @return {string}
79+
*/
80+
function setupStepLabel(status, isRunning) {
81+
switch (status) {
82+
case 'complete':
83+
return 'Completed';
84+
case 'pending':
85+
return 'Pending';
86+
case 'locked':
87+
return 'Locked';
88+
default:
89+
return isRunning ? 'In progress' : 'Ready';
90+
}
91+
}
92+
93+
module.exports = { computeSetupStepState, setupStepLabel };

‎test/setup-steps.test.cjs‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
const test = require('node:test');
44
const assert = require('node:assert');
55

6-
const { computeSetupStepState } = require('../src/renderer/setup-steps.cjs');
6+
const { computeSetupStepState, setupStepLabel } = require('../src/renderer/setup-steps.cjs');
77

88
test('while the clone is still running, the install step is locked (issue #47)', () => {
99
const steps = computeSetupStepState({ isPending: true });
@@ -108,3 +108,21 @@ test('a finished update releases the checklist again', () => {
108108
assert.strictEqual(steps.build.disabled, true, 'nothing left to build');
109109
assert.strictEqual(steps.dev.disabled, false);
110110
});
111+
112+
test('the current step reads "Ready" until its action starts (#257)', () => {
113+
// The exact case from the report: a fresh site, install is the next step,
114+
// nothing is running. It must not claim to be under way.
115+
assert.strictEqual(setupStepLabel('current', false), 'Ready');
116+
});
117+
118+
test('the current step reads "In progress" once its action is running (#257)', () => {
119+
assert.strictEqual(setupStepLabel('current', true), 'In progress');
120+
});
121+
122+
test('the other statuses keep their fixed labels regardless of the running flag', () => {
123+
for (const running of [true, false]) {
124+
assert.strictEqual(setupStepLabel('complete', running), 'Completed');
125+
assert.strictEqual(setupStepLabel('pending', running), 'Pending');
126+
assert.strictEqual(setupStepLabel('locked', running), 'Locked');
127+
}
128+
});

0 commit comments

Comments
 (0)