Skip to content

Thulasizwe/en/45/1594#4842

Open
czwe-01 wants to merge 4 commits intoshesha-io:releases/0.45from
czwe-01:thulasizwe/en/45/1594
Open

Thulasizwe/en/45/1594#4842
czwe-01 wants to merge 4 commits intoshesha-io:releases/0.45from
czwe-01:thulasizwe/en/45/1594

Conversation

@czwe-01
Copy link
Copy Markdown
Collaborator

@czwe-01 czwe-01 commented Apr 21, 2026

#1594

Summary by CodeRabbit

  • New Features

    • Wizard steps can have per-step custom footers that replace the standard navigation buttons when enabled.
    • Added a toggle to enable custom footer and to define footer content for each step.
  • Improvements

    • Wizard UI now separates step body and footer rendering for clearer layout and behavior.
    • Better handling of nested components inside custom containers (including footers) and added runtime validation utilities for component containers.
  • Chores

    • New steps include default footer configuration to ensure consistent behavior for existing wizards.

czwe-01 added 2 commits April 21, 2026 11:58
- Introduced `hasCustomFooter` property to `IWizardStepProps` and related interfaces.
- Updated `useWizard` hook to manage custom footers for steps, including dynamic footer ID generation.
- Enhanced `TabsComponent` to handle custom footer rendering and container management.
- Added settings input for enabling/disabling custom footers in item settings.
- Adjusted utility functions to accommodate nested custom containers for step footers.
- Ensured backward compatibility with existing step configurations.
- Modified the dependency array of the useWizard hook to include formMode, ensuring proper reactivity when form mode changes.
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 21, 2026

Walkthrough

Adds per-step custom footer support to the wizard: new hasCustomFooter/stepFooter fields, initialization/migration, settings toggle, rendering split between body and footer, footer component resolution via form markup, and form utilities updated to handle nested custom containers. (≤50 words)

Changes

Cohort / File(s) Summary
Hook integrations
shesha-reactjs/src/designer-components/wizard/hooks.ts
Integrates ShaForm.useMarkup() to resolve footer component relations; populates step.stepFooter.components for steps with hasCustomFooter; adds componentRelations and allComponents to memo deps.
Component initialization & containers
shesha-reactjs/src/designer-components/wizard/index.tsx
Initializes hasCustomFooter and stepFooter on steps, updates migration to backfill these fields, and getContainers now returns step containers with parentId and additional footer containers for custom footers.
Rendering / UI split
shesha-reactjs/src/designer-components/wizard/tabs.tsx
Splits step rendering into bodyContent and a separate footer region; computes currentStepFooterId; conditionally renders ComponentsContainer for custom footers or default button layout otherwise; renamed contentbodyContent.
Item settings UI
shesha-reactjs/src/designer-components/wizard/itemSettings.ts
Adds hasCustomFooter switch in Common tab and hides Next/Back/Done/Cancel button panels when custom footer is enabled.
Step utils / creation
shesha-reactjs/src/designer-components/wizard/utils.ts
onAddNewItem now sets hasCustomFooter: false and creates a stepFooter with id ${id}_footer and empty components.
Type & model updates
shesha-reactjs/src/designer-components/wizard/models.ts, shesha-reactjs/src/providers/form/models.ts
Introduced IStepFooterContainer, added hasCustomFooter/stepFooter to step types, switched to StepsProps for status, and added runtime guards/types (isComponentsContainer, IObjectWithStringId, isObjectWithStringId).
Form utilities (tree ↔ flat)
shesha-reactjs/src/providers/form/utils.ts
Enhanced traversal and reconstruction to detect and process nested custom containers inside array items; uses type guards and unsafeGetValueByPropertyName; added explicit error for unexpected container types.

Sequence Diagram(s)

sequenceDiagram
    participant Tabs as Wizard Tabs
    participant Hook as useWizard Hook
    participant ShaForm as ShaForm.useMarkup
    participant Container as ComponentsContainer

    rect rgba(150, 200, 100, 0.5)
    note over Tabs,Container: New flow for steps with custom footer
    Tabs->>Hook: active step hasCustomFooter? (check)
    Hook->>ShaForm: resolve markup → componentRelations, allComponents
    ShaForm-->>Hook: return relations for footerId
    Hook->>Container: assemble footer components (filter/configurable)
    Container-->>Tabs: render custom footer components
    end
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Possibly related PRs

  • Thulasizwe/en 43/1594 #4483 — Modifies wizard step footer initialization and container discovery with matching hasCustomFooter/stepFooter handling.

Suggested reviewers

  • IvanIlyichev

Poem

"🐰 I hopped through steps and found a new floor,
Tiny footers flourish, components galore,
Buttons take a bow, custom renders play,
I nudge the wizard — hooray, hooray! 🥕"

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Title check ❓ Inconclusive The PR title 'Thulasizwe/en/45/1594' is a branch reference that does not meaningfully summarize the changeset, which involves adding custom footer support to wizard components. Use a descriptive title that summarizes the main change, such as 'Add custom footer support to wizard steps' or 'Implement step footer containers for wizard component'.
✅ Passed checks (4 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 changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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: 4

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@shesha-reactjs/src/designer-components/wizard/index.tsx`:
- Around line 36-40: The code preserves persisted stepFooter objects as-is
(step?.stepFooter ?? { id: `${step.id}_footer`, components: [] }) which allows
partial shapes like { id } without a components array; update the assignment for
hasCustomFooter and stepFooter (and the analogous block around the version 9
migrator) to normalize existing footer containers by ensuring
stepFooter.components is an array (e.g., if step?.stepFooter exists, copy its id
and set components to Array.isArray(step.stepFooter.components) ?
step.stepFooter.components : []), so any persisted footer is coerced into the
expected container shape before being returned.

In `@shesha-reactjs/src/designer-components/wizard/models.ts`:
- Around line 71-72: IStepProps incorrectly extends StepsProps (props for the
whole Steps component); change it to extend the actual per-item type by deriving
the item type from StepsProps['items'] (e.g., create a type alias like StepItem
= NonNullable<StepsProps['items']>[number]) and then have IStepProps extend that
StepItem while keeping bodyContent?: JSX.Element so objects passed to <Steps
items={...}> use the correct AntD step-item shape.

In `@shesha-reactjs/src/designer-components/wizard/tabs.tsx`:
- Around line 137-142: currentStep's custom footer container
(ComponentsContainer) isn't receiving dynamic components, so dynamic wizard
footers (currentStep.stepFooter) don't render; update the JSX where
ComponentsContainer is used to pass the footer's dynamicComponents (or resolved
components) into it—e.g., add a prop like
dynamicComponents={currentStep.stepFooter?.dynamicComponents} (or
components={currentStep.stepFooter?.components}) to the ComponentsContainer call
so that ComponentsContainer receives and renders the stepFooter dynamic content.
- Around line 78-104: The useMemo that builds steps is missing dependencies and
can return stale values when formMode, executeBooleanExpression, content, model,
isDynamic, or components change; update the dependency array of the useMemo for
steps to include all of those referenced values (e.g. visibleSteps, current,
formMode, executeBooleanExpression, content, model, isDynamic, components) so
disabled/readOnly/bodyContent reflect updates to formMode, model, and dynamic
components (keep visibleSteps/current as well).
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 704ddf84-7c1f-431b-b649-75e70d6f9b74

📥 Commits

Reviewing files that changed from the base of the PR and between 1605c3c and 876f37f.

📒 Files selected for processing (8)
  • shesha-reactjs/src/designer-components/wizard/hooks.ts
  • shesha-reactjs/src/designer-components/wizard/index.tsx
  • shesha-reactjs/src/designer-components/wizard/itemSettings.ts
  • shesha-reactjs/src/designer-components/wizard/models.ts
  • shesha-reactjs/src/designer-components/wizard/tabs.tsx
  • shesha-reactjs/src/designer-components/wizard/utils.ts
  • shesha-reactjs/src/providers/form/models.ts
  • shesha-reactjs/src/providers/form/utils.ts

Comment thread shesha-reactjs/src/designer-components/wizard/index.tsx
Comment thread shesha-reactjs/src/designer-components/wizard/models.ts Outdated
Comment thread shesha-reactjs/src/designer-components/wizard/tabs.tsx Outdated
Comment thread shesha-reactjs/src/designer-components/wizard/tabs.tsx
czwe-01 added 2 commits April 21, 2026 13:22
- Improved stepFooter initialization in TabsComponent to ensure proper handling of custom footers.
- Updated IStepProps interface to extend from StepItem for better type safety.
- Adjusted useWizard hook dependencies to include additional parameters for enhanced reactivity.
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: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@shesha-reactjs/src/designer-components/wizard/tabs.tsx`:
- Around line 78-104: The steps mapping is producing a dead content property
(content: content(description, index)) that isn’t used by IStepProps or Antd and
wastes work; update the map in steps to remove that assignment and pass the
description field directly (use description instead of calling content(...)),
ensure bodyContent remains as-is (current render uses
steps[current]?.bodyContent), and then remove the now-unused content identifier
from the useWizard destructure (the one on line 34) unless you still need to
expose it via the api; adjust imports/types if TypeScript complains about
IStepProps shape.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: ca14bc63-47bf-4e3a-ba12-a97ad29288d1

📥 Commits

Reviewing files that changed from the base of the PR and between 876f37f and 86dc892.

📒 Files selected for processing (3)
  • shesha-reactjs/src/designer-components/wizard/index.tsx
  • shesha-reactjs/src/designer-components/wizard/models.ts
  • shesha-reactjs/src/designer-components/wizard/tabs.tsx

Comment thread shesha-reactjs/src/designer-components/wizard/tabs.tsx
@czwe-01 czwe-01 requested review from James-Baloyi April 21, 2026 13:30
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