Skip to content

refactor: migrate web Collapsible to @makeplane/propel Collapsible - #9743

Open
codingwolf-at wants to merge 9 commits into
previewfrom
refactor/makeplane-propel-collapsible
Open

refactor: migrate web Collapsible to @makeplane/propel Collapsible#9743
codingwolf-at wants to merge 9 commits into
previewfrom
refactor/makeplane-propel-collapsible

Conversation

@codingwolf-at

@codingwolf-at codingwolf-at commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

Description

Migrates the Collapsible used across issue detail widgets (attachments, links, relations, sub-issues) and the workspace settings members panel (pending invites) from @plane/ui's Collapsible/CollapsibleButton to the published @makeplane/propel Collapsible.

Propel's ready-made Collapsible only exposes trigger/icon/trailing props, with no built-in "action visible only while open" slot the way the old CollapsibleButton did. Each title.tsx was restructured to return just the trigger content (label + count/progress badge), and the corresponding root.tsx now wires the trailing action button directly, gated on open/disabled state to match the previous behavior. content.tsx (per-relation nested collapsibles) and list-group.tsx (grouped sub-issues) were converted the same way, dropping their manual chevron icons in favor of Propel's built-in rotating indicator.

Type of Change

  • Code refactoring

Screenshots and Media (if applicable)

Verified all 6 changed surfaces in light and dark, open and closed states

Light Dark
fixed-light fixed-dark

Test Scenarios

  • Issue detail page: expand/collapse Attachments, Links, Relations, and Sub-work items — trailing action icon shows only while open, count/progress badge stays inline with the label
  • Relations: nested per-relation-type collapsibles (defaultOpen groups vs. the collapsed "Duplicate of" group)
  • Sub-work items grouped list: per-state-group collapse (chevron + count) vs. the "All Issues" ungrouped flat list (no header chrome)
  • Workspace Settings → Members: pending invites collapse/expand, count chip
  • Light and dark theme for all of the above

- Migrate collapsible components in issue detail widgets (attachments, links, relations, sub-issues) from @plane/ui to @makeplane/propel.
- Adjust props and structure for consistency with new collapsible implementation.
- Enhance title components to integrate action buttons and improve accessibility.
- Refactor related components to streamline imports and improve code clarity.
@coderabbitai

coderabbitai Bot commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

  • Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

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

Comment @coderabbitai help to get the list of available commands.

@codingwolf-at codingwolf-at changed the title refactor: update collapsible components to use @makeplane/propel refactor: update collapsible components to use @makeplane/propel [WIP] Sep 2, 2026
@github-actions

github-actions Bot commented Sep 2, 2026

Copy link
Copy Markdown

React Doctor found no new issues. 🎉

Reviewed by React Doctor for commit 0373267.

@codingwolf-at codingwolf-at changed the title refactor: update collapsible components to use @makeplane/propel [WIP] refactor: migrate web Collapsible to @makeplane/propel Collapsible Sep 2, 2026
- Update the icon rendering logic in the RelationsCollapsibleContent component to apply additional styling using the cn utility.
- Ensure that icons are wrapped in a styled span for consistent presentation and alignment.
…ontent

- Wrap RelationIssueList in a div to cancel the nested Collapsible's panel inset, ensuring proper alignment under the outer Relations collapsible.
- Improve visual consistency by preventing stacking of insets in the UI.
- Wrap the Collapsible component for pending invitations in a div to enhance layout and spacing.
- Ensure consistent visual presentation by adjusting the structure of the component.
@codingwolf-at codingwolf-at self-assigned this Sep 2, 2026
- Update the onOpenChange prop in SubIssuesListGroup and WorkspaceMembersList to directly use the state setter function, improving code clarity and reducing unnecessary function wrapping.
- Remove optional chaining from the mapping of workItemIds to enhance code clarity and ensure consistent handling of the array.
…ents

- Update padding in the attachment list item for improved spacing and alignment.
- Remove unnecessary padding from the link list component to streamline layout.
…-propel-collapsible

# Conflicts:
#	apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
#	apps/web/core/components/workspace/settings/members-list.tsx
Align the pnpm-lock.yaml file to reflect the updated version of @makeplane/propel from 0.2.0 to 0.3.0 for consistency across importers.
@codingwolf-at
codingwolf-at marked this pull request as ready for review September 3, 2026 06:50
@coldtea-pr-lens

Copy link
Copy Markdown

◈ PR Lens

Reading 0373267 and drawing the architecture and data-flow lenses. This comment updates in place when the render lands.


◈ Rendered by PR Lens · crafted with ❤️ by the Coldtea team · Something drawn wrong?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant