refactor: migrate web TextArea to @makeplane/propel TextArea - #9747
refactor: migrate web TextArea to @makeplane/propel TextArea#9747codingwolf-at wants to merge 10 commits into
Conversation
Updated various forms across the application to utilize TextAreaGroup for better structure and error handling. This change enhances the consistency of the description fields in forms, ensuring they are wrapped in a Field component for validation and styling. The updates were made in the CreateApiTokenForm, CycleForm, ModuleForm, ProjectDetailsForm, and others.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Team Run ID: 📒 Files selected for processing (3)
Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review. 📝 WalkthroughWalkthroughThe changes migrate description and issue title inputs from Plane UI text areas to Propel components. Fields now use automatic resizing and Field-based validation state. Issue title call sites lose negative-margin overrides. The page editor title component is deleted. ChangesWeb input component migration
Estimated code review effort: 3 (Moderate) | ~20 minutes Merge Risk: ⚪ Minimal · up to This change migrates web text areas to Propel components while preserving controlled state, validation handling, and intended title behavior. No concrete current-head merge-blocking risk remains. 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Full details: Description checkExplanation The description clearly explains the TextArea migration, affected areas, implementation patterns, lockfile update, known visual delta, screenshots, and test scenarios. The optional References section is not included, but no related issue is required by the provided template.
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 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 |
|
React Doctor found 3 new issues in 3 files · 3 warnings · score 86 / 100 (Great) · 3 fixed · vs 3 warnings
Reviewed by React Doctor for commit |
codingwolf-at
changed the title
…nd maxRows Updated various forms to improve the TextArea components by adding auto-resize functionality and setting a maximum number of rows. This change enhances user experience by allowing better visibility and management of text input across the CreateApiTokenForm, CycleForm, ModuleForm, ProjectDetailsForm, and others.
Removed the redundant containerClassName="-ml-3" from TextArea components in InboxIssueMainContent, IssueMainContent, and PeekOverviewIssueDetails to streamline the code and improve consistency across the application.
… analytics sidebars Updated the TextArea components in CycleSidebarDetails and ModuleAnalyticsSidebar to remove the maxRows property, allowing for unrestricted text input. This change enhances the user experience by providing more flexibility in text entry.
Eliminated the optional className prop from the IssueTitleInputProps interface to streamline the component's API and improve consistency across the application.
…ionality Deleted the PageEditorTitle component from the editor, simplifying the codebase and enhancing maintainability. This change aligns with ongoing efforts to improve component structure and reduce redundancy in the application.
◈ PR Lens
Architecture 
5 components touched across 3 lanes. Inside the changed components — 2 viewsComponent view — Issue Title & Detail Inputs Issue title inputs and container wrappers in detail, peek, and inbox views migrated to Propel Field and inline auto-resizing TextArea. 
Component view — Entity Modal & Sidebar Forms Form inputs across project, cycle, module, state, view, and API token dialogs migrated to Propel Field validation wrappers and TextAreaGroup. 
Data flow 
Drill down
|
| id="description" | ||
| name="description" | ||
| placeholder="Describe this state for your members." | ||
| value={formData?.description} |
There was a problem hiding this comment.
The textarea mounts uncontrolled because formData initially equals undefined. Propel then ignores the description populated by the effect, so existing state descriptions appear blank.
There was a problem hiding this comment.
Fixed in af26810d81 — value now defaults to "" so the textarea stays controlled and existing state descriptions populate.
| onFocus={() => setIsLengthVisible(true)} | ||
| onBlur={() => setIsLengthVisible(false)} | ||
| /> | ||
| <Field name="title" invalid={title?.length === 0}> |
There was a problem hiding this comment.
The issue title changes from a 20px borderless heading to a bordered 90px-tall field with 16px regular text. Long titles also begin scrolling after four rows. Was this intentional ??
There was a problem hiding this comment.
Addressed in 55e04833a5 — switched to surface="inline" with unbounded autoResize so the title stays heading-like and grows with content.
| value={moduleDetails.description} | ||
| disabled | ||
| /> | ||
| <TextArea size="lg" surface="inline" autoResize value={moduleDetails.description} disabled /> |
There was a problem hiding this comment.
The inline surface relies on flex sizing, but its parent is not a flex container. The textarea therefore falls back to its narrow intrinsic width instead of filling the sidebar. please validate this once in UI.
There was a problem hiding this comment.
Fixed in c2d40147d4 — moved the description into the existing flex column so the inline textarea fills the sidebar.
Updated the description field in the StateForm component to default to an empty string when no value is provided. This change improves the handling of form data and ensures consistent behavior in the input field.
Updated the IssueTitleInput component to eliminate the TextAreaGroup wrapper, replacing it with a div for improved structure. Additionally, adjusted the TextArea properties to set the surface to "inline" and changed the rows to 1, enhancing the input's appearance and functionality.
Removed redundant wrapping of the description TextArea in the ModuleAnalyticsSidebar component, simplifying the code while maintaining functionality. This change enhances readability and consistency in the component's structure.
2 participants
Description
Migrates
TextAreafrom@plane/uito@makeplane/propelacrossapps/web(community edition only — admin, space, andpackages/editoruntouched).Two patterns, applied consistently across all 12 call sites:
Field+TextAreaGroup+TextArea size="lg" surface="field"from@makeplane/propel/components/text-area.hasErrormaps toField invalid, giving the danger border for free via Propel's built-indata-invalidwiring.TextAreafrom the samecomponents/text-areasubpath, noField/TextAreaGroupwrapper.All imports resolve from
@makeplane/propel/components/text-areaonly (noelements/*subpath imports).Also bumps the
@makeplane/propellockfile entry for thewebimporter from0.2.0to0.3.0inpnpm-lock.yaml(already the pinned catalog version; the web importer's lockfile entry was stale and0.2.0has notext-areaexport).Known visual deltas (Propel has no equivalent for these, and per migration convention we don't hack around it with
className):apps/web/core/components/pages/editor/title.tsx— page title losesfont-bold tracking-[-2%]; Propel's size scale has no bold variant. The read-only<h6>view (untouched) still renders bold, so edit vs. view mode differ slightly. Flagged for design review.@plane/ui)@makeplane/propel)hasErrorField invalidtextAreaSize(defaultsm)size="lg"mode="primary"surface="field"(wrapped inTextAreaGroup)className(chrome overrides)classNameon Propel primitivesType of Change
Screenshots and Media (if applicable)
autoResize+maxRowsverified interactively on each field (grows with content, caps at the configured row count, scrolls internally past that — confirmed via real typed input, not just visual inspection).Test Scenarios
pnpm turbo run check:lint check:types check:format build --filter=web— all greenSummary by CodeRabbit