59876 frontend [ templates ] migrate template edit form to Formik

[aicarma-artyom-maslov]

Note

High Risk
Large refactor of template editing data flow and save/activate behavior; incorrect Formik vs Redux timing could cause stale UI, lost edits, or wrong autosave on enable.

Overview
This change finishes wiring the template edit surface to the Formik stack: kickoff, task sections, settings, and sidebar controls read and write through useTemplateField / useTaskForm instead of Redux connect, patchTemplate, or per-field debounced setTemplate dispatches.

TemplateEdit is slimmed into TemplateForm plus TemplateEditLayout, with task CRUD moved into useTemplateEditTasks and page bootstrapping into useTemplateEditInit. TaskForm is split into header/sections hooks (TaskFormHeader, TaskFormSections, useTaskFormParts); task fields update via tasks[index] paths so autosave stays in one place. KickoffRedux and KickoffShareForm use the same pattern (share UI split into KickoffLabels, SharedFormTab, EmbeddedFormTab). TemplateControlls uses useTemplatePersist for enable/save flows and is broken into navigation/settings subcomponents.

Redux connect containers for kickoff, task form, and controls are replaced with direct exports. Tests gain act-wrapped interactions, a TaskFormHarness for scoped task form tests, and new coverage for useTaskForm and useTemplateEditTasks (including merging delay edits onto live Formik state).

^{Reviewed by Cursor Bugbot for commit 8ccc55d. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Migrate template edit form state management from Redux to Formik

• Replaces inline Redux dispatch-based state in TemplateEdit with a Formik-backed form managed by useTemplateForm, TemplateForm, and TemplateFormPersistProvider, centralizing template field updates and autosave.
• Task, kickoff, settings, and controls components now read and write form state via useTemplateField/useTaskForm context hooks instead of Redux props or patchTemplate dispatches.
• Autosave is handled by TemplateFormPersistProvider, which diffs changes, debounces patches, de-duplicates in-flight saves by request ID, and supports confirm/revert flows for explicit saves.
• Stale autosave requests are now tracked via persistRequest.ts and skipped in the saga when superseded; late create responses still attach IDs and redirect.
• Fixes a runtime crash in WorkflowLogTaskComplete when currentTask.output is undefined.
• Risk: form mount/unmount behavior changes across create-to-edit transitions due to key derivation from template.id or a session key; KickoffReduxContainer no longer receives a setKickoff prop.

Changes since #246 opened

• Replaced Formik-based test harness with custom TaskFormHarness component and renderTaskPerformers utility function that provide TemplateFieldContext and TaskFormScopeProvider directly without mounting a Formik form [a94700c]
• Updated test suites for checkbox identifiers, requireCompletionByAll checkbox, and skipForStarter checkbox to use renderTaskPerformers helper and removed asynchronous flushPersist waits [a94700c]
• Changed jest.mock for ../../../../utils/createId to spread actual module exports while overriding only createPerformerApiName, and updated import paths for TaskFormScopeProvider and TemplateFieldContext to ../../useTemplateForm/contexts [a94700c]
• Implemented multi-layer debouncing architecture for template form autosave [817b2f9]
• Added templateSnapshot mechanism to template save and patch actions for immutable form state capture [817b2f9]
• Implemented fingerprint-based variable sync optimization to reduce dispatch frequency [817b2f9]
• Refactored Formik instance handling to use refs and reduce unnecessary updates [817b2f9]
• Added owners normalization effect using latest Formik values via ref [817b2f9]
• Changed pending edits comparison to use deep equality instead of reference inequality [817b2f9]
• Modified failed autosave handling to preserve pending edits without automatic re-dispatch [817b2f9]
• Updated test suite for debounced autosave behavior and snapshot mechanism [817b2f9]
• Replaced global numeric autosave persist request ID system with per-scope generation system [586fde2]
• Migrated TemplateFormPersistProvider component to use scoped autosave persist requests [586fde2]
• Updated template Redux action types and saga to use scoped autosave persist request objects [586fde2]
• Updated useTemplateForm tests to use scoped autosave persist request helpers [586fde2]
• Modified createOrUpdateTemplate generator to accept an optional requestId parameter and skip error handling, logging, and user notifications when the autosave persist request is no longer current by checking isAutosavePersistRequestCurrent(requestId) in the catch block and returning null early, and updated fetchSaveTemplate generator to pass the requestId when invoking createOrUpdateTemplate [df0af6a]
• Added a test in the template saga test suite that verifies createOrUpdateTemplate completes without error logging or user notifications when an autosave request becomes superseded mid-saga [df0af6a]
• Fixed TemplateFormPersistProvider revert logic to restore consumed dirty state after failed explicit saves [d63a157]
• Added test infrastructure to expose and verify form dirty state behavior in template edit form [d63a157]
• Extracted autosave and persistence logic from TemplateFormPersistProvider component into a new useTemplatePersistContextValue hook [b3978a0]
• Removed Redux connect() HOCs and migrated components to use React hooks for state management [b3978a0]
• Decomposed TemplateControlls component into separate feature components [b3978a0]
• Decomposed KickoffShareForm component and extracted tab rendering into separate components [b3978a0]
• Consolidated inline TypeScript interfaces into dedicated types.ts modules [b3978a0]
• Added keyboard accessibility to interactive elements in KickoffShareForm and KickoffLabels [b3978a0]
• Refactored template utility functions and saga generators [b3978a0]
• Added getIsTeamInvitesModalOpen selector to team selectors module [b3978a0]
• Removed early return null condition from TaskForm component [b3978a0]
• Wrapped all user interactions and rendering in CreateUserModal test suite with React act [8ccc55d]
• Refactored collectTypes and findNodeDeep test utilities in CopyAttachmentPlugin tests to functional style and wrapped editor read operation in React act [8ccc55d]

📊 Macroscope summarized 817b2f9. 6 files reviewed, 0 issues evaluated, 0 issues filtered, 0 comments posted

🗂️ Filtered Issues

No issues evaluated.

[cursor]

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 8ccc55d. Configure here.}

[cursor]

Keyboard toggles share twice

Medium Severity

The share wrapper’s onKeyDown handler calls toogleFormIsShared on Enter/Space without preventDefault, while the same element also has onClick={toogleFormIsShared}. For a focusable role="button", the browser often fires a click after key activation, so one keypress can run the toggle twice and leave sharing unchanged.

 

^{Reviewed by Cursor Bugbot for commit 8ccc55d. Configure here.}