Skip to content

refactor: remove labels on languagescreen and fix stepper#8937

Merged
mikeallisonJS merged 9 commits intomainfrom
siyangcao/nes-1516-customisation-ui-remove-labels-on-languagescreen-and-fix
Apr 1, 2026
Merged

refactor: remove labels on languagescreen and fix stepper#8937
mikeallisonJS merged 9 commits intomainfrom
siyangcao/nes-1516-customisation-ui-remove-labels-on-languagescreen-and-fix

Conversation

@csiyang
Copy link
Copy Markdown
Contributor

@csiyang csiyang commented Mar 31, 2026

Summary by CodeRabbit

  • New Features

    • Progress stepper now shows the full step count for customization flows
    • Language field uses a searchable input with a leading icon
    • Team selector is full-width and shows a leading icon
  • Bug Fixes

    • Removed duplicated instructional labels in the language/team UI
    • Stepper is hidden on completion/preview screens
  • Tests

    • Updated and added unit tests to reflect stepper and label behavior changes

@csiyang csiyang self-assigned this Mar 31, 2026
@linear
Copy link
Copy Markdown

linear Bot commented Mar 31, 2026

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Mar 31, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 3258e38f-e034-424b-926d-d0b38d954403

📥 Commits

Reviewing files that changed from the base of the PR and between c50b170 and b5af0f8.

📒 Files selected for processing (2)
  • apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
  • libs/locales/en/journeys-ui.json
✅ Files skipped from review due to trivial changes (1)
  • apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • libs/locales/en/journeys-ui.json

Walkthrough

Introduce STEPPER_EXCLUDED_SCREENS and STEPPER_HIDDEN_SCREENS, adjust totalSteps/step indexing to exclude hidden screens, update stepper rendering/visibility logic, change language/team inputs to use adornments and remove duplicate labels, and update tests/locale strings accordingly.

Changes

Cohort / File(s) Summary
Stepper Configuration & Exports
apps/journeys-admin/src/components/TemplateCustomization/utils/getCustomizeFlowConfig/getCustomizeFlowConfig.ts, apps/journeys-admin/src/components/TemplateCustomization/utils/getCustomizeFlowConfig/index.ts
Added exported STEPPER_EXCLUDED_SCREENS (done, guestPreview) and STEPPER_HIDDEN_SCREENS (done); getCustomizeFlowConfig.totalSteps now subtracts excluded screens; re-exported new constants.
MultiStepForm Integration
apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
Compute stepperScreens by filtering STEPPER_EXCLUDED_SCREENS; derive activeStepNumber from indices in that filtered list (including prior screen when needed); stepper rendering now also checks !STEPPER_HIDDEN_SCREENS.has(activeScreen).
ProgressStepper Rendering & Tests
apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/ProgressStepper/ProgressStepper.tsx, .../ProgressStepper/ProgressStepper.spec.tsx
Render totalSteps Step items (was totalSteps - 1); adjust step/checkmark logic accordingly; updated unit tests to expect the new counts.
Language / Team UI & Tests
apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx, apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/JourneyCustomizeTeamSelect/JourneyCustomizeTeamSelect.tsx, .../LanguageScreen/LanguageScreen.spec.tsx
Removed responsive Typography labels for language/team; LanguageAutocomplete uses custom renderInput with filled TextField, data-testid, placeholder, and leading Translate adornment; team Select set to fullWidth with startAdornment UsersProfiles2 and wrapped in a Box with spacing; tests adjusted for removed labels.
MultiStepForm Tests
apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.spec.tsx
Added test asserting router state screen: 'done' shows the done screen and hides the overall progress-stepper.
getCustomizeFlowConfig Tests
apps/journeys-admin/src/components/TemplateCustomization/utils/getCustomizeFlowConfig/getCustomizeFlowConfig.spec.ts
Updated expected totalSteps across scenarios to reflect exclusion of STEPPER_EXCLUDED_SCREENS.
Locale Cleanup
libs/locales/en/journeys-ui.json
Removed "Select a language" and "Select a team" translations; added/kept "Search Language" translation for the new placeholder.

Sequence Diagram(s)

sequenceDiagram
    participant Config as getCustomizeFlowConfig
    participant Form as MultiStepForm
    participant Stepper as ProgressStepper
    participant Screen as ScreenRenderer

    Config->>Form: provide screens[], totalSteps (excludes STEPPER_EXCLUDED_SCREENS)
    Form->>Form: compute stepperScreens (filter STEPPER_EXCLUDED_SCREENS)
    Form->>Stepper: render with totalSteps, activeStepNumber (index in stepperScreens)
    Stepper->>Screen: indicate current step / checkmarks
    Form->>Screen: render active screen (e.g., Language, Done)
    Screen-->>Form: user actions (next, select language/team)
    Form->>Stepper: update activeStepNumber / visibility (hide if STEPPER_HIDDEN_SCREENS has active)
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 16.67% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main changes: removing labels on LanguageScreen and fixing stepper step calculations and rendering logic.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch siyangcao/nes-1516-customisation-ui-remove-labels-on-languagescreen-and-fix

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented Mar 31, 2026

View your CI Pipeline Execution ↗ for commit badc253

Command Status Duration Result
nx run journeys-e2e:e2e ✅ Succeeded 21s View ↗
nx run watch-modern-e2e:e2e ✅ Succeeded 4s View ↗
nx run journeys-admin-e2e:e2e ✅ Succeeded 30s View ↗
nx run watch-e2e:e2e ✅ Succeeded 23s View ↗
nx run resources-e2e:e2e ✅ Succeeded 21s View ↗
nx run player-e2e:e2e ✅ Succeeded 3s View ↗
nx run videos-admin-e2e:e2e ✅ Succeeded 4s View ↗
nx run-many --target=vercel-alias --projects=jo... ✅ Succeeded 2s View ↗
Additional runs (20) ✅ Succeeded ... View ↗

☁️ Nx Cloud last updated this comment at 2026-04-01 01:23:20 UTC

@github-actions github-actions Bot requested a deployment to Preview - journeys-admin March 31, 2026 02:36 Pending
@github-actions github-actions Bot temporarily deployed to Preview - player March 31, 2026 02:40 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - journeys March 31, 2026 02:40 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - journeys-admin March 31, 2026 02:40 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - watch-modern March 31, 2026 02:40 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - videos-admin March 31, 2026 02:40 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - resources March 31, 2026 02:40 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - watch March 31, 2026 02:40 Inactive
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/ProgressStepper/ProgressStepper.spec.tsx (1)

27-40: Test values represent an unusual edge case.

With activeStepNumber=1 and totalSteps=1, the active step index exceeds the valid range (0). The check icon renders because stepIndex < activeStepNumber (0 < 1) is true, not because isLastScreen is true. While this works, consider using activeStepNumber=0 and totalSteps=1 to test the actual "on last step" scenario where isLastScreen evaluates to true.

🔧 Optional: Test the actual last-step scenario
 it('should render checkmark for all steps when on the last step', () => {
-    const activeStepNumber = 1
+    const activeStepNumber = 0
     const totalSteps = 1

     render(
       <ProgressStepper
         activeStepNumber={activeStepNumber}
         totalSteps={totalSteps}
       />
     )

     const checkIcons = screen.getAllByTestId('CheckIcon')
     expect(checkIcons).toHaveLength(totalSteps)
   })
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/ProgressStepper/ProgressStepper.spec.tsx`
around lines 27 - 40, The test uses activeStepNumber=1 and totalSteps=1 which
makes stepIndex < activeStepNumber true instead of exercising the
ProgressStepper's isLastScreen logic; update the test for ProgressStepper to use
activeStepNumber=0 and totalSteps=1 so the component is actually on the last
step (isLastScreen path) and assert that the CheckIcon(s) render as expected;
keep the same assertion on screen.getAllByTestId('CheckIcon') length.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/ProgressStepper/ProgressStepper.spec.tsx`:
- Around line 27-40: The test uses activeStepNumber=1 and totalSteps=1 which
makes stepIndex < activeStepNumber true instead of exercising the
ProgressStepper's isLastScreen logic; update the test for ProgressStepper to use
activeStepNumber=0 and totalSteps=1 so the component is actually on the last
step (isLastScreen path) and assert that the CheckIcon(s) render as expected;
keep the same assertion on screen.getAllByTestId('CheckIcon') length.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 32927236-d960-4c20-b44e-97ac567b386a

📥 Commits

Reviewing files that changed from the base of the PR and between 1c80b32 and 0645579.

📒 Files selected for processing (10)
  • apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.spec.tsx
  • apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
  • apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/ProgressStepper/ProgressStepper.spec.tsx
  • apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/ProgressStepper/ProgressStepper.tsx
  • apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/JourneyCustomizeTeamSelect/JourneyCustomizeTeamSelect.tsx
  • apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.spec.tsx
  • apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LanguageScreen/LanguageScreen.tsx
  • apps/journeys-admin/src/components/TemplateCustomization/utils/getCustomizeFlowConfig/getCustomizeFlowConfig.spec.ts
  • apps/journeys-admin/src/components/TemplateCustomization/utils/getCustomizeFlowConfig/getCustomizeFlowConfig.ts
  • apps/journeys-admin/src/components/TemplateCustomization/utils/getCustomizeFlowConfig/index.ts

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 31, 2026

The latest updates on your projects.

Name Status Preview Updated (UTC)
watch-modern ✅ Ready watch-modern preview Wed Apr 1 14:16:04 NZDT 2026

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 31, 2026

The latest updates on your projects.

Name Status Preview Updated (UTC)
player ✅ Ready player preview Wed Apr 1 14:16:21 NZDT 2026

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 31, 2026

The latest updates on your projects.

Name Status Preview Updated (UTC)
journeys ✅ Ready journeys preview Wed Apr 1 14:16:51 NZDT 2026

@csiyang csiyang requested a review from jianwei1 March 31, 2026 02:42
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 31, 2026

The latest updates on your projects.

Name Status Preview Updated (UTC)
videos-admin ✅ Ready videos-admin preview Wed Apr 1 14:17:24 NZDT 2026

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 31, 2026

The latest updates on your projects.

Name Status Preview Updated (UTC)
watch ✅ Ready watch preview Wed Apr 1 14:17:59 NZDT 2026

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 31, 2026

The latest updates on your projects.

Name Status Preview Updated (UTC)
resources ✅ Ready resources preview Wed Apr 1 14:17:50 NZDT 2026

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 31, 2026

The latest updates on your projects.

Name Status Preview Updated (UTC)
journeys-admin ✅ Ready journeys-admin preview Wed Apr 1 14:18:34 NZDT 2026

@github-actions github-actions Bot temporarily deployed to Preview - journeys March 31, 2026 20:27 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - watch-modern March 31, 2026 20:27 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - videos-admin March 31, 2026 20:27 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - journeys-admin March 31, 2026 20:27 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - player March 31, 2026 20:28 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - resources March 31, 2026 20:28 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - watch March 31, 2026 20:28 Inactive
@blacksmith-sh

This comment has been minimized.

@github-actions github-actions Bot temporarily deployed to Preview - watch April 1, 2026 01:14 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - player April 1, 2026 01:14 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - journeys-admin April 1, 2026 01:14 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - journeys April 1, 2026 01:14 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - videos-admin April 1, 2026 01:14 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - watch-modern April 1, 2026 01:14 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - resources April 1, 2026 01:14 Inactive
@csiyang csiyang added this pull request to the merge queue Apr 1, 2026
@mikeallisonJS mikeallisonJS removed this pull request from the merge queue due to a manual request Apr 1, 2026
@mikeallisonJS mikeallisonJS merged commit c1af9be into main Apr 1, 2026
34 checks passed
@mikeallisonJS mikeallisonJS deleted the siyangcao/nes-1516-customisation-ui-remove-labels-on-languagescreen-and-fix branch April 1, 2026 01:27
tanflem pushed a commit that referenced this pull request Apr 3, 2026
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants