Add accent property to CollapsiblePanel component

[czwe-01]

#4487

• Introduced a new accent boolean property to control the visibility of primary colored borders in the CollapsiblePanel.
• Updated related components and interfaces to support the new property.
• Enhanced settings form to include an option for the accent property, improving customization capabilities.

Summary by CodeRabbit

• New Features
  • Added an Accent option to collapsible panels: a new checkbox in the panel settings lets users toggle the primary-colored borders (top border for parent panels, left border for child panels). The panels now respect this setting so borders are shown only when Accent is enabled. This setting defaults to enabled for existing panels after update.

[coderabbitai]

Walkthrough

Adds an optional accent boolean to the collapsible panel: prop/interface, settings checkbox, propagation from designer model to the CollapsiblePanel, conditional border rendering in styles, and a migration step to seed a default value.

Changes

Cohort / File(s)	Summary
Panel component & styles shesha-reactjs/src/components/panel/index.tsx	Added accent?: boolean to props and forwarded it to StyledCollapse; border-top/left now gated by panelHeadType AND accent.
Designer component & migration shesha-reactjs/src/designer-components/collapsiblePanel/collapsiblePanelComponent.tsx	Destructures accent from model, passes accent into CollapsiblePanel, and adds migration step to default missing accent to true.
Public interfaces shesha-reactjs/src/designer-components/collapsiblePanel/interfaces.ts	Added optional accent?: boolean to ICollapsiblePanelComponentProps (V0 unchanged).
Settings form shesha-reactjs/src/designer-components/collapsiblePanel/settingsForm.json	Appended a checkbox control for accent (label: "Accent", description: "Make the primary colored border visible").

Sequence Diagram(s)

sequenceDiagram
    participant Designer as Designer Component
    participant Model as Serialized Model
    participant Collapsible as CollapsiblePanel
    participant Styled as StyledCollapse / Styles

    Designer->>Model: read/write `accent` (migration seeds default)
    Model-->>Designer: provides `accent` value
    Designer->>Collapsible: render with props including `accent`
    Collapsible->>Styled: forward `accent` and `panelHeadType`
    Styled->>Collapsible: compute borders (top/left) based on `panelHeadType && accent`
    Collapsible-->>Designer: rendered panel (borders visible or hidden)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Thulasizwe/en/panel #3133: Adds an accent/accentStyle flag to the collapsible panel and modifies component, styles, and interfaces similarly.
• Thulasizwe/en/panel #3217: Alters collapsible panel border/styling behavior (related UI styling changes).

Suggested reviewers

• James-Baloyi

Poem

🐰 A nibble of code, a ribbon of light,
Accent on borders to make headers bright,
Migration hops in to keep things tight,
A checkbox to toggle, a UI delight —
I thump and I cheer for panels done right! 🎀

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely summarizes the main change: adding an accent property to the CollapsiblePanel component, which is the primary focus of all file modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

[coderabbitai]

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

shesha-reactjs/src/components/panel/index.tsx (1)

45-46: 🧹 Nitpick | 🔵 Trivial

Pre-existing any type on StyledCollapse.

The StyledCollapse is typed as any, which circumvents TypeScript's type checking. While this pre-dates this PR, consider addressing it in a follow-up to align with the coding guideline to eliminate any types.

🤖 Fix all issues with AI agents

In `@shesha-reactjs/src/components/panel/index.tsx`:
- Around line 50-51: The border template strings for border-top and border-left
include an extra space between "solid" and the color variable; update the
conditional expressions that build the border value (the styled props using
primaryColor, panelHeadType, and accent) to use "3px solid ${primaryColor}" with
a single space (apply the change in both the border-top and border-left lines)
and re-run lint/format to ensure consistent spacing.

In `@shesha-reactjs/src/designer-components/collapsiblePanel/settingsForm.json`:
- Around line 173-183: The new checkbox object with id
"021adb3d-6fae-450b-afb5-0867e6a30d06" (propertyName "accent") is missing the
"version" property; add "version": 1 to that JSON object to match other
checkboxes in the settings form (use the same numeric version used elsewhere,
e.g., 1) so the schema remains consistent for future migrations and processing.

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

shesha-reactjs/src/components/panel/index.tsx (1)

86-109: ⚠️ Potential issue | 🟠 Major

Default accent to preserve existing border rendering.
With accent undefined, the new gating makes borders disappear for existing callers that don’t pass the prop. That’s a backwards-compatibility UI change. Consider defaulting accent to true (or treating undefined as true).

✅ Suggested fix

 export const CollapsiblePanel: FC<Omit<ICollapsiblePanelProps, 'radiusLeft' | 'radiusRight'>> = ({
@@
-  accent,
+  accent = true,
 }) => {