Skip to content

Commit d650bec

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 28293be commit d650bec

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';
@@ -3348,9 +3348,11 @@ function SiteRow({ sitePath, initialized, createdAt, label, onInitialized, onSit
33483348
? { background: '#e7f6e7', color: '#0f5132' }
33493349
: { background: '#fff4ce', color: '#8a6d1c' };
33503350

3351+
// Colours and indicator per step status. The status *word* is not here — it
3352+
// lives in `setupStepLabel`, the one place that distinguishes a step that is
3353+
// merely next from one that is running (#257).
33513354
const checklistVisuals = {
33523355
complete: {
3353-
label: 'Completed',
33543356
color: '#0f5132',
33553357
background: '#f4fbf4',
33563358
border: '#94d3ae',
@@ -3360,7 +3362,6 @@ function SiteRow({ sitePath, initialized, createdAt, label, onInitialized, onSit
33603362
indicatorContent: '✓'
33613363
},
33623364
current: {
3363-
label: 'In progress',
33643365
color: '#0b5d95',
33653366
background: '#e8f3ff',
33663367
border: '#66afe9',
@@ -3370,7 +3371,6 @@ function SiteRow({ sitePath, initialized, createdAt, label, onInitialized, onSit
33703371
indicatorContent: '•'
33713372
},
33723373
pending: {
3373-
label: 'Pending',
33743374
color: '#6c6f72',
33753375
background: '#f8f9f9',
33763376
border: '#dcdcde',
@@ -3380,7 +3380,6 @@ function SiteRow({ sitePath, initialized, createdAt, label, onInitialized, onSit
33803380
indicatorContent: '•'
33813381
},
33823382
locked: {
3383-
label: 'Locked',
33843383
color: '#6c6f72',
33853384
background: '#f5f5f7',
33863385
border: '#dcdcde',
@@ -3414,7 +3413,8 @@ function SiteRow({ sitePath, initialized, createdAt, label, onInitialized, onSit
34143413
description: isPending
34153414
? 'Cloning the WordPress develop repository… the next step unlocks when it finishes.'
34163415
: 'Clone the WordPress develop repository.',
3417-
...stepState.download
3416+
...stepState.download,
3417+
running: isPending
34183418
},
34193419
{
34203420
key: 'install',
@@ -3425,6 +3425,7 @@ function SiteRow({ sitePath, initialized, createdAt, label, onInitialized, onSit
34253425
? 'Installed. Added a dependency to package.json since? Run npm install in the Terminal below.'
34263426
: 'Install npm packages so commands can run.',
34273427
...stepState.install,
3428+
running: installing,
34283429
action: (
34293430
<Button
34303431
isBusy={installing}
@@ -3441,6 +3442,7 @@ function SiteRow({ sitePath, initialized, createdAt, label, onInitialized, onSit
34413442
? '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.'
34423443
: 'Compile WordPress Core to generate the dist files. Later updates rebuild automatically.',
34433444
...stepState.build,
3445+
running: building,
34443446
action: (
34453447
<Button
34463448
isBusy={building}
@@ -3455,6 +3457,7 @@ function SiteRow({ sitePath, initialized, createdAt, label, onInitialized, onSit
34553457
label: 'Start dev server & finish wizard',
34563458
description: 'Launch the development server once to complete the WordPress setup wizard.',
34573459
...stepState.dev,
3460+
running: starting,
34583461
action: (
34593462
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
34603463
<Button
@@ -3795,7 +3798,7 @@ function SiteRow({ sitePath, initialized, createdAt, label, onInitialized, onSit
37953798
</div>
37963799
<div style={{ gridColumn: '2 / 3', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, minWidth: 0, flexWrap: 'wrap' }}>
37973800
<div style={{ fontWeight: 600, color: '#1d2327', lineHeight: 1.4 }}>{step.label}</div>
3798-
<div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', color: visuals.color, marginLeft: 'auto', whiteSpace: 'nowrap' }}>{visuals.label}</div>
3801+
<div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', color: visuals.color, marginLeft: 'auto', whiteSpace: 'nowrap' }}>{setupStepLabel(step.status, step.running)}</div>
37993802
</div>
38003803
<div style={{ gridColumn: '2 / 3', fontSize: 12, color: '#3c434a', lineHeight: 1.5 }}>{step.description}</div>
38013804
<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)