Conversation
- 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.
WalkthroughAdds per-step custom footer support to the wizard: new Changes
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
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
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
📒 Files selected for processing (8)
shesha-reactjs/src/designer-components/wizard/hooks.tsshesha-reactjs/src/designer-components/wizard/index.tsxshesha-reactjs/src/designer-components/wizard/itemSettings.tsshesha-reactjs/src/designer-components/wizard/models.tsshesha-reactjs/src/designer-components/wizard/tabs.tsxshesha-reactjs/src/designer-components/wizard/utils.tsshesha-reactjs/src/providers/form/models.tsshesha-reactjs/src/providers/form/utils.ts
- 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.
There was a problem hiding this comment.
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
📒 Files selected for processing (3)
shesha-reactjs/src/designer-components/wizard/index.tsxshesha-reactjs/src/designer-components/wizard/models.tsshesha-reactjs/src/designer-components/wizard/tabs.tsx
#1594
Summary by CodeRabbit
New Features
Improvements
Chores