## 🔍 Problem
Currently, the property pane does not support disabling entire sections
or individual controls. This leads to several issues:
- Users(especially first time users) cannot see which properties are
unavailable in certain contexts when they are hidden.
- No tooltips explain why a property is disabled.
## 💡 Solution
This PR introduces the ability to:
- **Disable entire property sections** via a new `disabled` callback in
`PropertyPaneSectionConfig`.
- **Disable individual property controls** via a new `disabled` callback
in `PropertyPaneControlConfig`.
- **Add tooltip support** via a new `disabledHelpText` property for both
sections and controls.
- **Propagate the disabled state** from parent sections to child
controls using React Context.
### 🔑 Key Implementation Details
- Updated **styling** for disabled sections/controls (lower opacity,
cursor changes).
- Modified **code editor controls** to respect the disabled state.
- Moved **`CollapseContext`** to a dedicated contexts file for better
organisation and cyclic dependency prevention.
## 🤔 Why This Solution?
This approach provides several benefits:
✔ **Backward Compatibility** – Optional properties ensure existing code
remains unaffected.
✔ **Flexible Implementation** – The callback approach allows for dynamic
disabling logic.
✔ **Consistent UX** – Clear visual indicators and tooltips improve user
experience.
✔ **Performance Optimized** – Using React Context prevents prop drilling
and reduces unnecessary re-renders.
## 🧪 Tests
Comprehensive tests have been added to ensure the new functionality
works as expected:
📌 **`PropertySection.test.tsx`** – Tests section rendering in normal and
disabled states.
📌 **`PropertyControl.test.tsx`** – Tests control rendering in normal and
disabled states.
### ✅ Tests Verify:
- Proper application of **disabled styling**.
- Correct rendering of **help tooltips**.
- Click handlers being disabled when appropriate.
- Proper propagation of the **disabled state** through context.
Fixes#39940
## Automation
/ok-to-test tags="@tag.Binding, @tag.IDE, @tag.Sanity, @tag.Widget"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/14191720905>
> Commit: 285d46d04d12b5888a3b1c5eea5ce672d29ad02d
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14191720905&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Binding, @tag.IDE, @tag.Sanity, @tag.Widget`
> Spec:
> <hr>Tue, 01 Apr 2025 10:55:54 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Enhanced the property panel with conditional disabling; sections and
controls now visually reflect a disabled state.
- Added contextual tooltip help text for disabled sections and controls
to improve user guidance.
- **Tests**
- Introduced new tests to ensure accurate behavior and UI feedback when
sections and controls are disabled.
- **Refactor**
- Refined UI interactions and reorganized component configurations for a
more responsive and reliable user experience.
- **Chores**
- Reorganized import statements for improved structure in various
components.
- **Documentation**
- Added new context provider to manage state for collapsing components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
a5f8aed1d9