James/en/43/3781

[James-Baloyi]

#3781

Summary by CodeRabbit

• New Features
  • Wizard now supports toggling the visibility of Back and Done buttons via Settings.
  • Both buttons are enabled by default for new and existing wizards; no manual migration required.
  • Back button appears only when not on the first step and can be hidden entirely.
  • Done button appears on the final step and can be hidden entirely for custom completion flows.

[coderabbitai]

Walkthrough

Adds showBackButton/showDoneButton props to wizard models and UI, initializes them to true in new models, migrates existing models to include them, and gates Back/Done button rendering in Tabs based on these flags.

Changes

Cohort / File(s)	Summary
Wizard model initialization & migration shesha-reactjs/src/designer-components/wizard/index.tsx	initModel now sets showBackButton/showDoneButton to true; migrator adds step 7 to ensure these fields exist (default true) while preserving existing values.
Public props extension shesha-reactjs/src/designer-components/wizard/models.ts	Added optional props to IWizardComponentProps: showBackButton?, showDoneButton?. No removals or signature changes.
Settings UI shesha-reactjs/src/designer-components/wizard/settings.tsx	Added checkbox settings for Show Back Button and Show Done Button (valuePropName="checked"), wiring to new fields; placed in Display panel.
Tabs rendering logic shesha-reactjs/src/designer-components/wizard/tabs.tsx	Tabs component now accepts showBackButton/showDoneButton (default true) and requires them for Back/Done button visibility alongside existing conditions.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant W as Wizard (Tabs)
  participant M as Model/Settings

  Note over M: New fields<br/>showBackButton=true<br/>showDoneButton=true
  U->>W: Open Wizard
  W->>M: Read showBackButton/showDoneButton
  alt Back button conditions
    Note over W: current > 0 AND showBackButton
    W-->>U: Render Back
  else
    W-->>U: Hide Back
  end
  alt Done button conditions
    Note over W: last step AND showDoneButton
    W-->>U: Render Done
  else
    W-->>U: Hide Done
  end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Thulasizwe/en/dropdown tag #3395 — Also modifies wizard/tabs.tsx (styling/useStyles); touches the same component area and could conflict or interact with button visibility changes.

Suggested reviewers

• AlexStepantsov

Pre-merge checks (2 passed, 1 warning)

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title Check	⚠️ Warning	The current title “James/en/43/3781” is merely a branch identifier and does not describe any of the actual changes made to the wizard component properties or behavior, so it fails to communicate the purpose or scope of this pull request.	Please update the pull request title to a concise summary of the main change, for example “Add showBackButton and showDoneButton props to Wizard component” so that reviewers can immediately understand the purpose of the changeset.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

Poem

A bunny taps through steps with cheer,
Back? Done? Now toggled, crystal-clear.
Two checkboxes in moonlit code,
Guard the buttons on the road.
Hippity-hop, migrations run—
Old wizards learn the newer fun.
🐇✨

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

shesha-reactjs/src/designer-components/wizard/tabs.tsx (1)

31-33: Back/Done visibility gating — LGTM; consider symmetry for “Next”

• Defaults (= true) preserve explicit false values and match migrator behavior.
• Rendering conditions for Back/Done are correct and short-circuit as expected.

Optional: If product needs full control, consider a showNextButton flag for symmetry with Back/Done.

Also applies to: 97-105, 137-146

shesha-reactjs/src/designer-components/wizard/settings.tsx (1)

122-128: Fix truncated tooltip copy

Minor UX nit: “This will be the default step tha” reads truncated.

-          label="Default Active Step"
-          tooltip="This will be the default step tha"
+          label="Default Active Step"
+          tooltip="The step that will be active when the wizard loads"

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3b2c063 and d0ae92b.

📒 Files selected for processing (4)

• shesha-reactjs/src/designer-components/wizard/index.tsx (2 hunks)
• shesha-reactjs/src/designer-components/wizard/models.ts (1 hunks)
• shesha-reactjs/src/designer-components/wizard/settings.tsx (1 hunks)
• shesha-reactjs/src/designer-components/wizard/tabs.tsx (3 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-06-12T16:55:57.638Z

Learnt from: teboho
PR: shesha-io/shesha-framework#3397
File: shesha-reactjs/src/designer-components/charts/bar.tsx:49-52
Timestamp: 2025-06-12T16:55:57.638Z
Learning: For the chart components’ migrators (e.g., BarChartComponent in shesha-reactjs/src/designer-components/charts/bar.tsx), the version 5 step intentionally spreads `{ ...prev, ...defaultConfigFiller }` so that values from `defaultConfigFiller` override any existing properties in `prev`. This reset to new defaults is by design and should not be flagged as an issue.

Applied to files:

• shesha-reactjs/src/designer-components/wizard/index.tsx

🔇 Additional comments (3)

shesha-reactjs/src/designer-components/wizard/models.ts (1)

79-81: New visibility flags on the public model — LGTM

showBackButton? and showDoneButton? align with usage in Tabs and are safely defaulted via init/migrator. No breaking changes.

shesha-reactjs/src/designer-components/wizard/index.tsx (1)

47-50: Defaults and migrator step — LGTM

• initModel sets sensible defaults.
• Step 7 uses nullish coalescing to preserve existing values while defaulting missing ones — good.

No further action from my side.

Also applies to: 106-110

shesha-reactjs/src/designer-components/wizard/settings.tsx (1)

150-156: Settings toggles wired correctly — LGTM

Checkboxes map to showBackButton/showDoneButton with valuePropName="checked" and respect readOnly. Good placement under Display.