Skip to content

toggle done and back buttons#3825

Merged
James-Baloyi merged 3 commits intoshesha-io:releases/0.44from
James-Baloyi:james/en/44/3781
Sep 10, 2025
Merged

toggle done and back buttons#3825
James-Baloyi merged 3 commits intoshesha-io:releases/0.44from
James-Baloyi:james/en/44/3781

Conversation

@James-Baloyi
Copy link
Copy Markdown
Contributor

@James-Baloyi James-Baloyi commented Sep 10, 2025

Summary by CodeRabbit

  • New Features
    • Added configurable visibility for Back and Done buttons in Wizard Tabs.
    • New settings toggles let you show/hide Back and Done buttons per wizard instance.
    • Defaults keep both buttons visible; existing behavior remains unchanged unless toggled.
    • Back button now appears only when not on the first step and the toggle is enabled.
    • Done button now appears only on the last step and when enabled.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Sep 10, 2025

Warning

Rate limit exceeded

@James-Baloyi has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 5 minutes and 0 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 04c8043 and 29387ef.

📒 Files selected for processing (1)
  • shesha-reactjs/src/designer-components/wizard/settingsForm.ts (1 hunks)

Walkthrough

Adds two optional boolean flags (showBackButton, showDoneButton) to the wizard component model, initializes them with default true, exposes toggles in settings, and conditionally renders Back/Done buttons in the Tabs wizard based on these flags and step position.

Changes

Cohort / File(s) Summary
Model updates
shesha-reactjs/src/designer-components/wizard/models.ts
Added optional props showBackButton?: boolean and showDoneButton?: boolean to IWizardComponentProps.
Component init defaults
shesha-reactjs/src/designer-components/wizard/index.tsx
In TabsComponent.initModel, defaulted model.showBackButton and model.showDoneButton to true via nullish coalescing.
Settings UI
shesha-reactjs/src/designer-components/wizard/settingsForm.ts
Added two switches in Common tab for showBackButton and showDoneButton (default true, jsSetting: false).
Rendering logic
shesha-reactjs/src/designer-components/wizard/tabs.tsx
Tabs component now accepts showBackButton = true, showDoneButton = true; Back renders when current > 0 && showBackButton; Done renders when current === last && showDoneButton.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant WizardTabs as Wizard Tabs
  participant Settings as Settings Form

  rect rgba(230,245,255,0.6)
    note over WizardTabs: Initialization
    WizardTabs->>WizardTabs: initModel(model)
    WizardTabs-->>WizardTabs: showBackButton = model?.showBackButton ?? true
    WizardTabs-->>WizardTabs: showDoneButton = model?.showDoneButton ?? true
  end

  rect rgba(240,255,240,0.6)
    note over Settings: Configuration
    User->>Settings: Toggle Back/Done switches
    Settings-->>WizardTabs: Props: showBackButton, showDoneButton
  end

  rect rgba(255,250,230,0.6)
    note over WizardTabs: Render
    WizardTabs->>WizardTabs: If current > 0 && showBackButton → Render Back
    WizardTabs->>WizardTabs: If current == last && showDoneButton → Render Done
  end

  User->>WizardTabs: Navigate steps
  WizardTabs-->>User: Buttons appear/disappear per flags and step
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Suggested reviewers

  • IvanIlyichev

Pre-merge checks (3 passed)

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The title “toggle done and back buttons” directly reflects the primary change in this pull request, which is the introduction of two initialization flags (showBackButton and showDoneButton) to control the visibility of the Back and Done buttons in the wizard component. It is concise and specific enough that a reviewer can understand the key feature being added without extraneous detail.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.

Poem

A bunny taps through steps with glee,
New toggles blink: Back? Done? We’ll see! 🐇
With flags set true, the path is clear,
Hide or show—now crystal here.
Hop, hop, finish—carrot cheer! 🥕

✨ 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

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

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.

Actionable comments posted: 0

🧹 Nitpick comments (3)
shesha-reactjs/src/designer-components/wizard/models.ts (1)

83-84: Consider brief JSDoc on new props

Add short comments clarifying behavior:

  • Back is hidden on first step regardless.
  • Done only applies on the last step.
shesha-reactjs/src/designer-components/wizard/settingsForm.ts (1)

159-183: Add tooltips and caution to prevent dead-end wizards

Helpful UX hints and a warning reduce misconfiguration risk when hiding navigation.

Suggested tweaks:

 .addSettingsInputRow(
   {
     id: nanoid(),
     inputs: [
       {
         id: nanoid(),
         propertyName: 'showBackButton',
         label: 'Show Back Button',
         parentId: 'root',
         type: 'switch',
         jsSetting: false,
         defaultValue: true,
+        tooltip: 'Toggle visibility of the Back button across all steps (it is always hidden on the first step).'
       },
       {
         id: nanoid(),
         propertyName: 'showDoneButton',
         label: 'Show Done Button',
         parentId: 'root',
         type: 'switch',
         jsSetting: false,
         defaultValue: true,
+        tooltip: 'Toggle visibility of the Done button on the last step. If turned off, ensure an alternative way to finish (custom action or API).'
       }
     ]
   }
 )

Verification ask: Please confirm that flows which hide Done on the last step still provide a finish mechanism (e.g., custom action calling wizardApi.done or Cancel allowed). I can add a lightweight settings validator to flag configurations where Done is hidden and no alternative exists.

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

126-169: Button gating works; verify no “last-step trap” when Done is hidden

Logic for Back (current > 0 && showBackButton) and Done (last step && showDoneButton) is correct. Please verify UX paths where:

  • showDoneButton = false, and
  • currentStep.allowCancel !== true on the last step.

Such a setup can strand users at the end. Consider hiding the buttons container when it would be empty or surfacing a non-blocking notice in designer mode.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8857f18 and 04c8043.

📒 Files selected for processing (4)
  • shesha-reactjs/src/designer-components/wizard/index.tsx (1 hunks)
  • shesha-reactjs/src/designer-components/wizard/models.ts (1 hunks)
  • shesha-reactjs/src/designer-components/wizard/settingsForm.ts (1 hunks)
  • shesha-reactjs/src/designer-components/wizard/tabs.tsx (3 hunks)
🔇 Additional comments (3)
shesha-reactjs/src/designer-components/wizard/models.ts (1)

83-84: API additions look good

Global toggles for Back/Done are appropriate and align with usage elsewhere.

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

32-33: Sane defaults with nullish coalescing

Defaults preserve explicit false; matches Tabs usage. Good.

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

41-44: Defaults mirrored here are fine

Redundant with initModel but harmless and keeps Tabs safe if used outside the Toolbox component.

@James-Baloyi James-Baloyi merged commit af48422 into shesha-io:releases/0.44 Sep 10, 2025
1 check passed
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.

1 participant