[8655] Fix FE2 Save as Draft functionality

[jvega190]

craftercms/craftercms#8655

Summary by CodeRabbit

New Features

• Added draft-saving capability to forms, allowing users to save progress without completing submission.
• Introduced dual-action save button offering "Save/Done" and "Save Draft/Done" options.
• Enhanced form validation with real-time field tracking and feedback.

Improvements

• Split buttons now support controlled selection states and full-width layout options.
• Improved form close behavior to consider draft status.
• Better handling of incomplete form submissions with draft preservation.

[coderabbitai]

Warning

Rate limit exceeded

@jvega190 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 50 minutes and 1 second before requesting another review.

To continue reviewing without waiting, purchase usage credits in the billing tab.

⌛ 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.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e741fe59-6b47-4e46-9814-783b2fc29faf

📥 Commits

Reviewing files that changed from the base of the PR and between 77d7965 and 13638a7.

📒 Files selected for processing (7)

• ui/app/src/components/FormsEngine/FormsEngine.tsx
• ui/app/src/components/FormsEngine/components/SaveCard.tsx
• ui/app/src/components/FormsEngine/lib/formUtils.tsx
• ui/app/src/components/FormsEngine/lib/useSaveForm.tsx
• ui/app/src/components/SplitButton/SplitButton.tsx
• ui/app/src/components/SplitButton/SplitButtonUI.tsx
• ui/app/src/components/SplitButton/utils.ts

Walkthrough

The PR implements a draft-saving feature across the FormsEngine system by introducing draft state tracking and field validation, refactoring SaveCard to use a split-button UI exposing separate save and save-as-draft actions, and updating unlock-on-close logic to respect draft state. It also enhances the SplitButton component with controlled selection and full-width layout capabilities.

Changes

Draft-Saving Feature in FormsEngine

Layer / File(s)	Summary
Type Definitions ui/app/src/components/FormsEngine/lib/formUtils.tsx	ShouldUnlockArguments interface extended with saveAsDraft and invalidForm boolean fields; shouldUnlockItem now gates unlock on these flags.
Core Validation & State ui/app/src/components/FormsEngine/FormsEngine.tsx	Introduces saveAsDraft and invalidForm local state; subscribes to field updates via debounce to refresh validation; includes lockStatus in effect dependencies.
Save Function Enhancement ui/app/src/components/FormsEngine/lib/useSaveForm.tsx	Save function signature changed to accept optional draft boolean parameter; computes isFormInvalid and saveAsDraft based on validity and draft flag.
UI Component Refactor ui/app/src/components/FormsEngine/components/SaveCard.tsx	Replaced single primary button with SplitButton offering "Save/Done" and "Save Draft/Done (Draft)" options; accepts externally controlled saveAsDraft, setSaveAsDraft, and invalidForm props; onSave callback signature updated to include draft flag.
Integration & Unlock Logic ui/app/src/components/FormsEngine/FormsEngine.tsx, ui/app/src/components/FormsEngine/lib/formUtils.tsx	FormsEngine passes saveAsDraft to useUnlockOnClose hook; new useUnlockOnClose hook exports unlock-on-close behavior respecting draft and validation state; SaveCard invocation passes draft state and updated onSave handler.

SplitButton Component Enhancement

Layer / File(s)	Summary
Type Definitions ui/app/src/components/SplitButton/utils.ts	Extended SplitButtonProps with selectedIndex, onSelectedIndexChange, disabledOptions, and fullWidth; propagated new types to SplitButtonUIProps.
Component Logic ui/app/src/components/SplitButton/SplitButton.tsx	Refactored to support both controlled (selectedIndex prop) and uncontrolled selection; adds storage persistence for sub-action selection; dispatches onSelectedIndexChange callback on selection changes; forwards disabledOptions and fullWidth to UI layer.
UI Implementation ui/app/src/components/SplitButton/SplitButtonUI.tsx	Added useLayoutEffect to synchronize popper width with anchor when fullWidth enabled; destructures disabledOptions and loading from props; applies dynamic minimum width to dropdown menu; updated button group and dropdown toggle to accommodate full-width layout.

Sequence Diagram

sequenceDiagram
    participant User
    participant FormsEngine
    participant SaveCard
    participant SplitButton
    participant useSaveForm
    participant formUtils
    
    User->>FormsEngine: Edit form fields
    FormsEngine->>FormsEngine: Subscribe to field updates (debounced)
    FormsEngine->>FormsEngine: Update invalidForm state via checkValidationState
    FormsEngine->>SaveCard: Render with saveAsDraft, invalidForm, setSaveAsDraft
    
    User->>SaveCard: Click "Save Draft" option in SplitButton
    SaveCard->>SaveCard: setSaveAsDraft(true)
    SaveCard->>SaveCard: onSave(event, draft=true)
    SaveCard->>useSaveForm: saveFn(draft=true)
    useSaveForm->>useSaveForm: Compute isFormInvalid, set saveAsDraft=true
    useSaveForm->>useSaveForm: Execute save flow with draft flag
    
    Note over FormsEngine,formUtils: On component unmount/close
    FormsEngine->>formUtils: useUnlockOnClose({ saveAsDraft, invalidForm })
    formUtils->>formUtils: shouldUnlockItem checks: not invalidForm AND not saveAsDraft
    formUtils->>formUtils: Conditionally unlock item based on flags

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Possibly related issues

• Fix FE2 Save as Draft functionality craftercms#8655: Directly addresses draft-saving and item-locking behavior by implementing draft state tracking, save-as-draft UI options, and draft-aware unlock logic in FormsEngine.

Possibly related PRs

• craftercms/studio-ui#4707: Modifies useSaveForm hook to handle saveAsDraft behavior, overlapping with this PR's save flow enhancement.
• craftercms/studio-ui#4758: Overlaps on FormsEngine SaveCard, unlock/close logic, and save flow codepaths.
• craftercms/studio-ui#4751: Modifies FormsEngine codepaths including lockStatus dependencies and save/unlock flows.

Suggested reviewers

• rart

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description only provides a ticket reference link without detailing what changes were made, why they were needed, or how the fix addresses the issue.	Add a detailed description explaining the Save as Draft functionality fix, the changes made to FormsEngine, SaveCard, and related components, and how these changes resolve issue #8655.
Docstring Coverage	⚠️ Warning	Docstring coverage is 42.86% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing FE2 Save as Draft functionality, which aligns with the extensive changes to draft-saving flows across FormsEngine and SaveCard components.
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

• X
• Mastodon
• Reddit
• LinkedIn

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