Skip to content

Conversation

sriramveeraghanta
Copy link
Member

@sriramveeraghanta sriramveeraghanta commented Aug 10, 2025

Description

  • Replace JSX.Element types with ReactNode to extend support to react 19

Type of Change

  • Code refactoring

Summary by CodeRabbit

  • Refactor
    • Broadened many component prop and type definitions to accept any React node (React.ReactNode) instead of only JSX elements — increases flexibility when composing UI. No runtime or visible UI changes.
  • Chores
    • Package dependency declarations updated to include React/ReactDOM typings for development.

Copy link
Contributor

coderabbitai bot commented Aug 10, 2025

Walkthrough

This change standardizes React typing across the repo by replacing many JSX.Element (and similar) types with React.ReactNode (and a few related adjustments), removes some unused imports, adds / adjusts package dependencies, and adds guarded handling for bar-chart shapeVariant render results. No functional behavior changes beyond rendering-type handling.

Changes

Cohort / File(s) Change Summary
Admin & Common Components
apps/admin/core/components/authentication/authentication-method-card.tsx, apps/admin/core/components/common/controller-input.tsx, apps/admin/core/components/common/copy-field.tsx
Prop types updated: JSX.Element / `string
Web App — Activity Pages
apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx, apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/activity/page.tsx, apps/web/app/(all)/profile/activity/page.tsx
activityPages: JSX.Element[]React.ReactNode[].
Mobile Header
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
Removed unused imports (ISSUE_LAYOUTS, CustomMenu, IssueLayoutIcon); no logic change.
Command Palette & Workflow
apps/web/ce/components/command-palette/helpers.tsx, apps/web/ce/components/workflow/state-option.tsx
icon / content types: JSX.Element (or `JSX.Element
Analytics & Dropdowns
apps/web/core/components/analytics/select/select-x-axis.tsx, apps/web/core/components/dropdowns/cycle/cycle-options.tsx, apps/web/core/components/dropdowns/estimate.tsx, apps/web/core/components/dropdowns/module/module-options.tsx, packages/ui/src/dropdowns/helper.tsx
label / content / customButton / footerOption: JSX.Element / `string
Gantt Chart Components
apps/web/core/components/gantt-chart/chart/main-content.tsx, apps/web/core/components/gantt-chart/chart/root.tsx, apps/web/core/components/gantt-chart/root.tsx, apps/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx, apps/web/core/components/gantt-chart/sidebar/root.tsx
quickAdd and render-function returns: JSX.Element / React.JSX.ElementReact.ReactNode; root.tsx now captures shapeVariant result and conditionally returns element or wraps in fragment.
Integrations (GitHub / Jira)
apps/web/core/components/integration/github/select-repository.tsx, apps/web/core/components/integration/github/single-user-select.tsx, apps/web/core/components/integration/jira/import-users.tsx
label / content types: JSX.Element (or `string
Issues, Labels & Quick-Add
apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx, apps/web/core/components/issues/issue-layouts/issue-layout-HOC.tsx, apps/web/core/components/issues/issue-layouts/quick-add/root.tsx, apps/web/core/components/issues/select/base.tsx, apps/web/core/components/labels/label-drag-n-drop-HOC.tsx
Broadened icon, label, children, customQuickAddButton, and render-function return types from JSX.Element/arrays → React.ReactNode/arrays.
Project & Workspace Components
apps/web/core/components/project/member-select.tsx, apps/web/core/components/project/send-project-invitation-modal.tsx, apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
options[].content and icon props: JSX.Element / React.JSX.ElementReact.ReactNode.
Propel Charts
packages/propel/src/charts/bar-chart/bar.tsx, packages/propel/src/charts/bar-chart/root.tsx
Functions from createShapeVariant and barShapeVariants now return React.ReactNode; root captures shapeVariant result and conditionally returns element or wraps in fragment.
Types & Manifest
packages/types/src/instance/auth.ts, packages/types/package.json
`TInstanceAuthenticationModes.icon
UI — Tables, Toast, Tooltip, Breadcrumbs
packages/ui/src/tables/types.ts, packages/ui/src/toast/index.tsx, packages/ui/src/tooltip/tooltip.tsx, packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx
Table column renders and toast callback now return React.ReactNode; breadcrumb iconReact.ReactNode; tooltip children adjusted to React.ReactElement.
Utils
packages/utils/src/editor.ts
getTextContent parameter union simplified (removed JSX.Element, duplicate React.ReactNode) — type-only cleanup.

Sequence Diagram(s)

sequenceDiagram
  participant Bar as BarChart.renderBars
  participant Variant as shapeVariant()
  participant React as ReactRenderer

  Bar->>Variant: call shapeVariant(props, bar, stackKeys)
  Variant-->>Bar: returns (React.ReactNode) (could be element, primitive, array)
  alt result is valid React element
    Bar->>React: return element directly
  else result is non-element (string/array/fragment)
    Bar->>React: wrap result in Fragment and return
  end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~15–20 minutes

Possibly related PRs

Suggested labels

🛠️refactor, 🌐frontend, ✍️editor, ready_to_merge

Suggested reviewers

  • aaryan610
  • prateekshourya29
  • Palanikannan1437

Poem

"A rabbit hops through types so spry,
Swapping JSX leaves for nodes in the sky.
Fragments and strings join the parade,
Renderings bend without charade.
Hooray — the code hops light and sly! 🐇"


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1a0948a and dddeb5e.

📒 Files selected for processing (1)
  • packages/propel/src/charts/bar-chart/root.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/propel/src/charts/bar-chart/root.tsx
⏰ 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). (3)
  • GitHub Check: Analyze (javascript)
  • GitHub Check: Analyze (python)
  • GitHub Check: Build and lint web apps
✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch chore-jsx-element-with-reactnode

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
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@sriramveeraghanta sriramveeraghanta changed the title chore: replace jsx element with react node [WEB-4660] chore: replace jsx element with react node Aug 10, 2025
Copy link

makeplane bot commented Aug 10, 2025

Pull Request Linked with Plane Work Items

Comment Automatically Generated by Plane

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 6

🔭 Outside diff range comments (8)
apps/web/core/components/dropdowns/estimate.tsx (1)

258-260: Avoid null key in list rendering

option.value can be null (for the “no estimate” option). Using a null key can trigger React warnings and unstable reconciliation. Provide a stable fallback key.

-                      filteredOptions.map((option) => (
-                        <Combobox.Option key={option.value} value={option.value}>
+                      filteredOptions.map((option) => (
+                        <Combobox.Option key={option.value ?? "no_estimate"} value={option.value}>
apps/web/core/components/integration/github/single-user-select.tsx (1)

43-44: Fix missing React type imports and avoid React namespace in types

This file references React.FC and React.ReactNode without importing React/types. Import types and switch to FC/ReactNode to avoid namespace reliance.

Apply diffs within the selected ranges:

-export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users, setUsers }) => {
+export const SingleUserSelect: FC<Props> = ({ collaborator, index, users, setUsers }) => {
-        content: React.ReactNode;
+        content: ReactNode;

Add the following import near the top:

import type { FC, ReactNode } from "react";

Also applies to: 69-70

apps/web/core/components/dropdowns/module/module-options.tsx (1)

17-23: Import ReactNode and remove React namespace dependency

Without importing React, React.ReactNode will fail type-checking. Use ReactNode with a type import.

Apply this diff within the selected range:

-      content: React.ReactNode;
+      content: ReactNode;

Add this import near the top:

import type { ReactNode } from "react";
apps/web/core/components/dropdowns/cycle/cycle-options.tsx (1)

22-28: Import ReactNode and avoid React namespace in types

React.ReactNode without importing React will fail type-checking. Use ReactNode with a type import.

Apply this diff within the selected range:

-      content: React.ReactNode;
+      content: ReactNode;

Add this import near the top:

import type { ReactNode } from "react";
packages/utils/src/editor.ts (1)

40-46: toString() on ReactNode is unreliable — consider safer coercion

If jsx is a React element or array, .toString() returns [object Object]. Also, if your intent is “strip HTML tags to plain text”, accept string input or handle ReactNode robustly.

Two options:

  • Minimal: Restrict to string-like inputs.
-export const getTextContent = (jsx: React.ReactNode | null | undefined): string => {
+export const getTextContent = (jsx: string | number | null | undefined): string => {
   if (!jsx) return "";
-  const div = document.createElement("div");
-  div.innerHTML = jsx.toString();
+  const div = document.createElement("div");
+  div.innerHTML = String(jsx);
   return div.textContent?.trim() ?? "";
 }
  • Robust (supports ReactNode): Use React.isValidElement and optionally renderToStaticMarkup (note: increases bundle; consider only in server or gated usage).
apps/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx (1)

28-33: Fix effect dependencies to avoid stale closures

The effect captures id and isDragEnabled but doesn’t list them as deps, and it depends on blockRef?.current (unstable). This can lead to stale canDrag behavior or missed re-registrations.

-  useEffect(() => {
+  useEffect(() => {
     const element = blockRef.current;
 
     if (!element) return;
 
     return combine(
       draggable({
         element,
-        canDrag: () => isDragEnabled,
+        canDrag: () => isDragEnabled,
         getInitialData: () => ({ id, dragInstanceId: "GANTT_REORDER" }),
         onDragStart: () => {
           setIsDragging(true);
         },
         onDrop: () => {
           setIsDragging(false);
         },
       }),
       dropTargetForElements({
         element,
         canDrop: ({ source }) => source?.data?.id !== id && source?.data?.dragInstanceId === "GANTT_REORDER",
@@
-  }, [blockRef?.current, isLastChild, onDrop]);
+  }, [id, isLastChild, onDrop, isDragEnabled]);

If you need to re-bind when the element changes, consider a ref callback or an IntersectionObserver rather than depending on .current.

Also applies to: 92-92

apps/admin/core/components/authentication/authentication-method-card.tsx (1)

53-53: Bug: template string injects "false" into className

className={shrink-0 ${disabled && "opacity-70"}} will add a literal "false" when disabled is false. Use cn for conditional classes.

-      <div className={`shrink-0 ${disabled && "opacity-70"}`}>{config}</div>
+      <div className={cn("shrink-0", { "opacity-70": disabled })}>{config}</div>
packages/propel/src/charts/bar-chart/bar.tsx (1)

159-177: Use a typed ContentRenderer for the shape prop to remove any casts

To eliminate the as any return and the untyped shapeProps, extract the inline renderer into a ContentRenderer<any>:

• File: packages/propel/src/charts/bar-chart/root.tsx
• Lines: ~68–72

-import <Bar
-  shape={(shapeProps: any) => {
-    const shapeVariant = barShapeVariants[bar.shapeVariant ?? "bar"];
-    return shapeVariant(shapeProps, bar, stackKeys) as any;
-  }}
-  … />
+import type { ContentRenderer } from "recharts";
+
+const shapeRenderer: ContentRenderer<any> = (shapeProps) => {
+  const shapeVariant = barShapeVariants[bar.shapeVariant ?? "bar"];
+  return shapeVariant(shapeProps, bar, stackKeys);
+};
+
+<Bar
+  shape={shapeRenderer}
+  … />

This change both types the incoming props and removes the downstream as any cast.

🧹 Nitpick comments (16)
apps/web/core/components/dropdowns/estimate.tsx (2)

32-38: Use the imported ReactNode type instead of React.ReactNode

You already import ReactNode; prefer using it directly for consistency and to avoid referencing the React namespace unnecessarily.

 type DropdownOptions =
   | {
       value: string | null;
       query: string;
-      content: React.ReactNode;
+      content: ReactNode;
     }[]
   | undefined;

21-30: Type consistency: onChange should accept null

Options include value: string | null, and you add a “no estimate” option with null. Align the prop and handler signatures to avoid type gaps.

 type Props = TDropdownProps & {
   button?: ReactNode;
   dropdownArrow?: boolean;
   dropdownArrowClassName?: string;
-  onChange: (val: string | undefined) => void;
+  onChange: (val: string | null | undefined) => void;
   onClose?: () => void;
   projectId: string | undefined;
   value: string | undefined | null;
   renderByDefault?: boolean;
 };

-  const dropdownOnChange = (val: string | undefined) => {
+  const dropdownOnChange = (val: string | null | undefined) => {
     onChange(val);
     handleClose();
   };

Also applies to: 149-152

apps/web/core/components/analytics/select/select-x-axis.tsx (1)

7-8: Value type should allow null when “No value” is enabled

You render an option with value={null}, but the prop type for value doesn’t include null.

-  value?: ChartXAxisProperty;
+  value?: ChartXAxisProperty | null;

Also applies to: 20-21

apps/web/core/components/core/modals/gpt-assistant-popover.tsx (1)

193-197: Nested interactive element risk in GptAssistantPopover trigger

The GptAssistantPopover wraps its button prop inside a native <button>. If any caller passes an interactive element (e.g. <button>, <a>, or a focusable custom component) as the button prop, you’ll end up with nested controls—leading to broken keyboard navigation, duplicate event handlers, and accessibility violations.

Please verify and address as follows:

  • Ensure every usage of <GptAssistantPopover> passes only non-interactive content (plain text, icons, or static <span> elements) as the button prop.
  • If you need to allow interactive triggers, switch to a clone-and-merge strategy: detect when button is a valid React element, clone it with ref, className, and event props instead of wrapping it in an extra <button>.

This will protect against nested interactive elements and ensure proper focus/keyboard behavior.

apps/web/ce/components/workflow/state-option.tsx (1)

24-25: Stabilize keys for Combobox.Option

option.value can be undefined (per type), which leads to an unstable/invalid React key. Provide a fallback.

Example:

-      key={option.value}
+      key={option.value ?? option.query}
apps/web/core/components/dropdowns/module/module-options.tsx (1)

95-104: Ensure stable React keys when value can be null

You prepend an option with value: null, but later use key={option.value}. Keys should be stable strings/numbers.

Example change:

-                <Combobox.Option
-                  key={option.value}
+                <Combobox.Option
+                  key={`module-${option.value ?? "none"}`}

Also applies to: 135-136

apps/web/core/components/dropdowns/cycle/cycle-options.tsx (1)

108-118: Stabilize keys where value can be null

You unshift an option with value: null and later use key={option.value}. Use a deterministic string key.

Example:

-                <Combobox.Option
-                  key={option.value}
+                <Combobox.Option
+                  key={`cycle-${option.value ?? "none"}`}

Also applies to: 149-150

packages/utils/src/editor.ts (1)

40-40: Fix redundant union: duplicate React.ReactNode

Type should be deduped to keep it clean and accurate.

-export const getTextContent = (jsx: React.ReactNode | React.ReactNode | null | undefined): string => {
+export const getTextContent = (jsx: React.ReactNode | null | undefined): string => {
packages/ui/src/dropdowns/helper.tsx (1)

13-13: Minor: string | React.ReactNode is redundant.

string is already included in React.ReactNode. You can simplify:

-  label?: string | React.ReactNode;
+  label?: React.ReactNode;
apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx (1)

6-6: Simplify children type to ReactNode.

React.ReactNode already includes string and arrays, so the union is redundant. Prefer:

-interface Props {
-  children: string | React.ReactNode | React.ReactNode[];
+interface Props {
+  children: React.ReactNode;

Optionally, import the type to avoid the namespaced reference:

import type { ReactNode } from "react";
interface Props {
  children: ReactNode;
}
apps/web/core/components/gantt-chart/sidebar/root.tsx (2)

25-25: Prefer concise optional type

quickAdd?: React.ReactNode | undefined can be simplified to quickAdd?: React.ReactNode. Optional already implies undefined.

-  quickAdd?: React.ReactNode | undefined;
+  quickAdd?: React.ReactNode;

100-100: Don’t hide valid falsy nodes

When the type is ReactNode, values like 0 or "" are valid nodes but will be hidden by a truthy check. Prefer nullish coalescing.

-      {quickAdd ? quickAdd : null}
+      {quickAdd ?? null}
apps/web/core/components/gantt-chart/root.tsx (1)

17-17: Prefer concise optional type

quickAdd?: React.ReactNode | undefinedquickAdd?: React.ReactNode.

-  quickAdd?: React.ReactNode | undefined;
+  quickAdd?: React.ReactNode;
apps/web/core/components/issues/issue-layouts/issue-layout-HOC.tsx (1)

34-35: Simplify children type

string | React.ReactNode | React.ReactNode[] is redundant; React.ReactNode already includes string and arrays.

-interface Props {
-  children: string | React.ReactNode | React.ReactNode[];
+interface Props {
+  children: React.ReactNode;
   layout: EIssueLayoutTypes;
 }
apps/web/core/components/gantt-chart/chart/root.tsx (1)

46-46: Prefer concise optional type

quickAdd?: React.ReactNode | undefinedquickAdd?: React.ReactNode.

-  quickAdd?: React.ReactNode | undefined;
+  quickAdd?: React.ReactNode;
apps/web/core/components/gantt-chart/chart/main-content.tsx (1)

49-49: Prefer concise optional type

quickAdd?: React.ReactNode | undefinedquickAdd?: React.ReactNode.

-  quickAdd?: React.ReactNode | undefined;
+  quickAdd?: React.ReactNode;
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1ef3074 and e752fac.

📒 Files selected for processing (41)
  • apps/admin/core/components/authentication/authentication-method-card.tsx (1 hunks)
  • apps/admin/core/components/common/controller-input.tsx (2 hunks)
  • apps/admin/core/components/common/copy-field.tsx (1 hunks)
  • apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx (1 hunks)
  • apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx (1 hunks)
  • apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx (1 hunks)
  • apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/activity/page.tsx (1 hunks)
  • apps/web/app/(all)/profile/activity/page.tsx (1 hunks)
  • apps/web/ce/components/command-palette/helpers.tsx (1 hunks)
  • apps/web/ce/components/workflow/state-option.tsx (1 hunks)
  • apps/web/core/components/analytics/select/select-x-axis.tsx (1 hunks)
  • apps/web/core/components/core/list/list-item.tsx (1 hunks)
  • apps/web/core/components/core/modals/gpt-assistant-popover.tsx (1 hunks)
  • apps/web/core/components/dropdowns/cycle/cycle-options.tsx (1 hunks)
  • apps/web/core/components/dropdowns/estimate.tsx (1 hunks)
  • apps/web/core/components/dropdowns/module/module-options.tsx (1 hunks)
  • apps/web/core/components/gantt-chart/chart/main-content.tsx (1 hunks)
  • apps/web/core/components/gantt-chart/chart/root.tsx (1 hunks)
  • apps/web/core/components/gantt-chart/root.tsx (1 hunks)
  • apps/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx (1 hunks)
  • apps/web/core/components/gantt-chart/sidebar/root.tsx (1 hunks)
  • apps/web/core/components/integration/github/select-repository.tsx (1 hunks)
  • apps/web/core/components/integration/github/single-user-select.tsx (1 hunks)
  • apps/web/core/components/integration/jira/import-users.tsx (1 hunks)
  • apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx (1 hunks)
  • apps/web/core/components/issues/issue-layouts/issue-layout-HOC.tsx (1 hunks)
  • apps/web/core/components/issues/issue-layouts/quick-add/root.tsx (1 hunks)
  • apps/web/core/components/issues/select/base.tsx (1 hunks)
  • apps/web/core/components/labels/label-drag-n-drop-HOC.tsx (1 hunks)
  • apps/web/core/components/project/member-select.tsx (1 hunks)
  • apps/web/core/components/project/send-project-invitation-modal.tsx (1 hunks)
  • apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx (1 hunks)
  • packages/propel/src/charts/bar-chart/bar.tsx (2 hunks)
  • packages/propel/src/charts/bar-chart/root.tsx (1 hunks)
  • packages/types/src/instance/auth.ts (1 hunks)
  • packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx (1 hunks)
  • packages/ui/src/dropdowns/helper.tsx (2 hunks)
  • packages/ui/src/tables/types.ts (1 hunks)
  • packages/ui/src/toast/index.tsx (1 hunks)
  • packages/ui/src/tooltip/tooltip.tsx (1 hunks)
  • packages/utils/src/editor.ts (1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-01-24T09:37:19.339Z
Learnt from: mathalav55
PR: makeplane/plane#6452
File: web/helpers/issue.helper.ts:6-6
Timestamp: 2025-01-24T09:37:19.339Z
Learning: In the Plane codebase, `ISSUE_DISPLAY_FILTERS_BY_LAYOUT` and `ISSUE_DISPLAY_FILTERS_BY_PAGE` are two distinct constants serving different purposes - one for layout-level filters and another for page-level filters. They are not interchangeable and should coexist.

Applied to files:

  • apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
⏰ 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). (3)
  • GitHub Check: Build and lint web apps
  • GitHub Check: Analyze (javascript)
  • GitHub Check: Analyze (python)
🔇 Additional comments (26)
apps/web/core/components/integration/github/select-repository.tsx (1)

18-18: LGTM: broadened label type to ReactNode

The prop type change aligns with React 19 compatibility and improves flexibility.

apps/web/core/components/analytics/select/select-x-axis.tsx (1)

13-14: LGTM: label widened to ReactNode

Matches the project-wide type broadening and is compatible with CustomSelect.

apps/web/core/components/core/modals/gpt-assistant-popover.tsx (1)

25-25: LGTM: button widened to ReactNode

This adds flexibility without affecting behavior.

apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx (1)

7-7: LGTM: icon widened to ReactNode

Makes the component more flexible (icons, text, fragments), no runtime impact.

apps/web/core/components/issues/select/base.tsx (1)

24-25: LGTM: label widened to ReactNode

Consistent with the PR’s objective; usage is already null-safe in render.

apps/web/core/components/issues/issue-layouts/quick-add/root.tsx (1)

45-46: LGTM: customQuickAddButton widened to ReactNode

Improves flexibility for consumers. Rendering is already guarded.

apps/web/ce/components/command-palette/helpers.tsx (1)

21-22: LGTM: icon type broadened to ReactNode | null

Matches return types in commandGroups and keeps API consistent.

packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx (1)

9-20: LGTM — type broadening is correct and compatible

Using React.ReactNode here is safe since React is imported. Change aligns with React 19-friendly typing.

apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx (1)

9-13: LGTM — prop type broadened appropriately

icon: React.ReactNode is appropriate and consistent with usage; imports are present.

packages/ui/src/toast/index.tsx (1)

31-33: LGTM — callback return type widened correctly

React.ReactNode return aligns with actionItems?: React.ReactNode in SetToastProps. No functional changes.

apps/web/core/components/project/member-select.tsx (1)

50-55: Type widening to ReactNode is correct

Switching content to React.ReactNode aligns with the PR goal and allows more flexible option renderers. LGTM.

apps/web/core/components/project/send-project-invitation-modal.tsx (1)

163-168: Good: content accepts ReactNode

Broadening content to React.ReactNode is consistent with the repo-wide refactor. Looks good.

packages/ui/src/tables/types.ts (1)

4-6: Good generalization to ReactNode

Allowing React.ReactNode for header/data cell renderers is appropriate and consistent with the migration. LGTM.

apps/admin/core/components/common/copy-field.tsx (1)

9-20: Description broadened to ReactNode — OK

Typing description as string | React.ReactNode is fine and matches the refactor’s intent. Looks good.

apps/admin/core/components/common/controller-input.tsx (2)

11-20: Props type update to ReactNode — good

description now supports any React node. Aligned with the PR goal.


22-30: Form field type update to ReactNode — good

Consistent with the component props; no issues.

apps/web/core/components/labels/label-drag-n-drop-HOC.tsx (1)

41-46: Render-prop return widened to ReactNode — good

This broadens flexibility for the children render function and is safe here. LGTM.

apps/web/core/components/core/list/list-item.tsx (1)

15-17: Type broadening to ReactNode is appropriate and consistent.

The props now accept any renderable node and match the usage patterns in this component. No logic changes required.

Note: Using "&&" to guard rendering will intentionally drop falsy nodes like 0 or "". If that’s ever a valid input for these props, switch to a nullish check instead.

Also applies to: 25-25

packages/ui/src/dropdowns/helper.tsx (1)

10-10: No type change needed for customButton or footerOption
After digging into the CustomMenu/CustomSelect implementations and existing call-sites, we see:

  • Neither prop is ever “unwrapped” or cloned—instead the wrapper component applies click, keyboard and focus props (including tabIndex) to its container.
  • All current consumers pass interactive elements (buttons, spans with handlers, icons inside wrappers, etc.).

Keeping these as React.ReactNode lets callers supply any markup while the dropdown internals ensure proper interactivity.

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx (1)

9-9: ISSUE_DISPLAY_FILTERS_BY_PAGE shape is correct – no changes needed

Confirmed in packages/constants/src/issue/filter.ts that ISSUE_DISPLAY_FILTERS_BY_PAGE includes an issues entry with sub-keys for each layout (e.g. list, kanban, spreadsheet, calendar), matching all values of EIssueLayoutTypes. The import and usage of

ISSUE_DISPLAY_FILTERS_BY_PAGE.issues[activeLayout]

are valid as-is.

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/activity/page.tsx (1)

37-37: LGTM on type broadening.

Switching to React.ReactNode[] is safe here; the array is rendered directly and remains compatible.

apps/web/app/(all)/profile/activity/page.tsx (1)

40-40: LGTM on type broadening.

React.ReactNode[] fits usage and aligns with the PR’s goal.

apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx (1)

34-34: LGTM on type broadening.

The change to React.ReactNode[] is safe and consistent.

apps/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx (1)

16-16: LGTM on broadening render-prop type

Allowing children to return React.ReactNode is correct and future-proof.

apps/admin/core/components/authentication/authentication-method-card.tsx (1)

10-11: LGTM on broadening to ReactNode

Broadening icon and config to React.ReactNode matches usage and increases flexibility.

packages/propel/src/charts/bar-chart/bar.tsx (1)

179-186: Record signature update is consistent with the factory; LGTM

The barShapeVariants function signatures now correctly return React.ReactNode and align with createShapeVariant. No further changes needed here.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
packages/types/package.json (1)

36-37: Audit pinned @types/react for React 19 migration

We found the following packages still peer-depend on React 18 and/or pin @types/react / @types/react-dom in devDependencies:

• packages/editor/package.json
– peerDependencies: react ^18.3.1, react-dom 18.3.1
– devDependencies: @types/react ^18.3.11, @types/react-dom ^18.2.18

• packages/types/package.json
– peerDependencies: react ^18.0.0, react-dom ^18.0.0
– devDependencies: @types/react 18.3.11, @types/react-dom 18.3.1

• packages/ui/package.json
– peerDependencies: react ^18.3.1, react-dom ^18.3.1
– devDependencies: @types/react ^18.3.11, @types/react-dom ^18.2.18

• apps/admin, apps/space, apps/web (all pin @types/react ^18.3.11, @types/react-dom ^18.2.18)
• packages/hooks (pins @types/react ^18.3.11)
• packages/propel (pins @types/react 18.3.1, @types/react-dom 18.3.0)
• packages/utils (pins @types/react ^18.3.11)

If you’re upgrading the monorepo to React 19 (which bundles its own types), please either:

  • Remove these devDependencies from packages that no longer need standalone typings,
  • Or scope/conditionally install them only where React 18 compatibility is required,
    to avoid type conflicts in consumer builds.
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e752fac and 2f9ae9f.

📒 Files selected for processing (2)
  • packages/types/package.json (1 hunks)
  • packages/ui/src/tooltip/tooltip.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/ui/src/tooltip/tooltip.tsx
⏰ 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). (3)
  • GitHub Check: Analyze (python)
  • GitHub Check: Analyze (javascript)
  • GitHub Check: Build and lint web apps

@sriramveeraghanta sriramveeraghanta merged commit a085c0e into preview Aug 11, 2025
5 of 7 checks passed
@sriramveeraghanta sriramveeraghanta deleted the chore-jsx-element-with-reactnode branch August 11, 2025 13:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants