[WEB-5472] refactor: project form

[JayashTripathy]

Description

This PR adds showActionButtons in the project form components

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• Feature (non-breaking change which adds functionality)
• Improvement (change that would cause existing functionality to not work as expected)
• Code refactoring
• Performance improvements
• Documentation update

Screenshots and Media (if applicable)

Test Scenarios

References

Summary by CodeRabbit

• Refactor
  • Internal restructuring of component dependencies and properties for improved maintainability. No changes to user-facing functionality or behavior.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR updates project creation components by migrating the Info icon import source in common-attributes and refactoring header props—renaming handleFormChange to handleFormOnChange, introducing a showActionButtons flag, and gating the ProjectTemplateSelect render behind this new prop.

Changes

Cohort / File(s)	Summary
Icon Import Update apps/web/core/components/project/create/common-attributes.tsx	Changed Info icon import from lucide-react to @plane/propel/icons package; updated component usage from <Info /> to <InfoIcon />.
Header Props Refactor apps/web/core/components/project/create/header.tsx	Renamed prop handleFormChange → handleFormOnChange; added new optional showActionButtons prop (defaults to true); made ProjectTemplateSelect rendering conditional on showActionButtons; updated all call sites accordingly.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A hop and a skip, we've made things neat,
Icons now come from a cleaner street,
Props renamed, a flag brought to light,
Templates conditional—everything's right!
Creation flows smoother, our work is complete!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately reflects the main change: refactoring the project form with the addition of showActionButtons prop and icon component updates.
Description check	✅ Passed	The description covers the main change (adding showActionButtons) and correctly identifies it as code refactoring, though it lacks depth on secondary changes and missing test scenarios.

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c97e418 and f3a7867.

📒 Files selected for processing (2)

• apps/web/core/components/project/create/common-attributes.tsx
• apps/web/core/components/project/create/header.tsx

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{ts,tsx,mts,cts}

📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)

**/*.{ts,tsx,mts,cts}: Use const type parameters for more precise literal inference in TypeScript 5.0+
Use the satisfies operator to validate types without widening them
Leverage inferred type predicates to reduce the need for explicit is return types in filter/check functions
Use NoInfer<T> utility to block inference for specific type arguments when they should be determined by other arguments
Utilize narrowing in switch(true) blocks for control flow analysis (TypeScript 5.3+)
Rely on narrowing from direct boolean comparisons for type guards
Trust preserved narrowing in closures when variables aren't modified after the check (TypeScript 5.4+)
Use constant indices to narrow object/array properties (TypeScript 5.5+)
Use standard ECMAScript decorators (Stage 3) instead of legacy experimentalDecorators
Use using declarations for explicit resource management with Disposable pattern instead of manual cleanup (TypeScript 5.2+)
Use with { type: "json" } for import attributes; avoid deprecated assert syntax (TypeScript 5.3/5.8+)
Use import type explicitly when importing types to ensure they are erased during compilation, respecting verbatimModuleSyntax flag
Use .ts, .mts, .cts extensions in import type statements (TypeScript 5.2+)
Use import type { Type } from "mod" with { "resolution-mode": "import" } for specific module resolution contexts (TypeScript 5.3+)
Use new iterator methods (map, filter, etc.) if targeting modern environments (TypeScript 5.6+)
Utilize new Set methods like union, intersection, etc., when available (TypeScript 5.5+)
Use Object.groupBy / Map.groupBy standard methods for grouping instead of external libraries (TypeScript 5.4+)
Use Promise.withResolvers() for creating promises with exposed resolve/reject functions (TypeScript 5.7+)
Use copying array methods (toSorted, toSpliced, with) for immutable array operations (TypeScript 5.2+)
Avoid accessing instance fields via super in classes (TypeScript 5....

Files:

• apps/web/core/components/project/create/common-attributes.tsx
• apps/web/core/components/project/create/header.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Enable TypeScript strict mode and ensure all files are fully typed

Files:

• apps/web/core/components/project/create/common-attributes.tsx
• apps/web/core/components/project/create/header.tsx

**/*.{js,jsx,ts,tsx,json,css}

📄 CodeRabbit inference engine (AGENTS.md)

Use Prettier with Tailwind plugin for code formatting, run pnpm fix:format

Files:

• apps/web/core/components/project/create/common-attributes.tsx
• apps/web/core/components/project/create/header.tsx

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{js,jsx,ts,tsx}: Use ESLint with shared config across packages, adhering to max warnings limits per package
Use camelCase for variable and function names, PascalCase for components and types
Use try-catch with proper error types and log errors appropriately

Files:

• apps/web/core/components/project/create/common-attributes.tsx
• apps/web/core/components/project/create/header.tsx

🧠 Learnings (5)

📚 Learning: 2025-12-12T15:20:36.542Z

Learnt from: CR
Repo: makeplane/plane PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:36.542Z
Learning: Applies to packages/plane/ui/**/*.{ts,tsx} : Build components in `plane/ui` package with Storybook for isolated development

Applied to files:

• apps/web/core/components/project/create/common-attributes.tsx

📚 Learning: 2025-10-09T20:42:31.843Z

Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T20:42:31.843Z
Learning: In the makeplane/plane repository, React types are globally available through TypeScript configuration. Type annotations like React.FC, React.ReactNode, etc. can be used without explicitly importing the React namespace. The codebase uses the modern JSX transform, so React imports are not required for JSX or type references.

Applied to files:

• apps/web/core/components/project/create/common-attributes.tsx

📚 Learning: 2025-10-21T17:22:05.204Z

Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7989
File: apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx:45-46
Timestamp: 2025-10-21T17:22:05.204Z
Learning: In the makeplane/plane repository, the refactor from useParams() to params prop is specifically scoped to page.tsx and layout.tsx files in apps/web/app (Next.js App Router pattern). Other components (hooks, regular client components, utilities) should continue using the useParams() hook as that is the correct pattern for non-route components.

Applied to files:

• apps/web/core/components/project/create/common-attributes.tsx

📚 Learning: 2025-10-01T15:30:17.605Z

Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7888
File: packages/propel/src/avatar/avatar.stories.tsx:2-3
Timestamp: 2025-10-01T15:30:17.605Z
Learning: In the makeplane/plane repository, avoid suggesting inline type imports (e.g., `import { Avatar, type TAvatarSize }`) due to bundler compatibility issues. Keep type imports and value imports as separate statements.

Applied to files:

• apps/web/core/components/project/create/common-attributes.tsx

📚 Learning: 2025-10-10T13:25:14.810Z

Learnt from: gakshita
Repo: makeplane/plane PR: 7949
File: apps/web/core/components/issues/issue-modal/form.tsx:183-189
Timestamp: 2025-10-10T13:25:14.810Z
Learning: In `apps/web/core/components/issues/issue-modal/form.tsx`, the form reset effect uses a `dataResetProperties` dependency array prop (default: []) to give parent components explicit control over when the form resets. Do not suggest adding the `data` prop itself to the dependency array, as this would cause unwanted resets on every render when the data object reference changes, disrupting user input. The current pattern is intentional and allows the parent to trigger resets only when specific conditions are met.

Applied to files:

• apps/web/core/components/project/create/header.tsx

🧬 Code graph analysis (1)

apps/web/core/components/project/create/header.tsx (1)

apps/web/ce/components/projects/create/template-select.tsx (1)

• ProjectTemplateSelect (7-9)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: Agent
• GitHub Check: CodeQL analysis (javascript-typescript)
• GitHub Check: Build packages
• GitHub Check: Analyze (javascript)

🔇 Additional comments (5)

apps/web/core/components/project/create/common-attributes.tsx (1)

4-4: Clean icon library migration.

The migration from lucide-react's Info to @plane/propel/icons's InfoIcon is correct. The component accepts the className prop through the ISvgIcons interface (which extends React.SVGAttributes), and the styling is properly maintained with the exact same className value.

apps/web/core/components/project/create/header.tsx (4)

27-35: LGTM! Props destructuring with sensible defaults.

The destructuring properly extracts all props with appropriate default values. The showActionButtons = true default preserves existing behavior when the prop is not provided.

---

51-55: LGTM! Conditional rendering correctly implements the new feature.

The ProjectTemplateSelect is now properly gated behind the showActionButtons prop, achieving the refactor objective stated in the PR.

---

72-72: LGTM! Consistent usage of the renamed event handler.

The handleFormOnChange callback is properly invoked with optional chaining in both the image picker and emoji picker change handlers.

Also applies to: 114-114

---

18-25: No action needed—the prop rename is not a breaking change.

The parent component (apps/web/ce/components/projects/create/root.tsx) only passes handleClose and isMobile to ProjectCreateHeader. It does not pass handleFormOnChange or showActionButtons, so the rename from handleFormChange to handleFormOnChange and the addition of the new optional showActionButtons prop have no impact on existing callers. Both new props are optional with appropriate defaults, so no parent component updates are required.

---

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

[makeplane]

Linked to Plane Work Item(s)

• [WEB-5472] Create project with Templates

This comment was auto-generated by Plane

[Copilot]

Pull request overview

This PR refactors project form components by introducing better control over UI elements and improving naming consistency.

• Added showActionButtons prop to conditionally render action buttons in the project header
• Renamed handleFormChange to handleFormOnChange for improved naming clarity
• Replaced Info icon from lucide-react with InfoIcon from @plane/propel/icons to align with project icon conventions

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
apps/web/core/components/project/create/header.tsx	Added showActionButtons prop with default value true to control template select button visibility; renamed handleFormChange to handleFormOnChange for consistency
apps/web/core/components/project/create/common-attributes.tsx	Updated icon import from lucide-react's Info to @plane/propel/icons' InfoIcon to follow project's icon usage pattern

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.