Restore properties panel after exiting preview mode (#4223)

[Lihlu]

#4223

Summary by CodeRabbit

Release Notes

• Refactor
  • Updated settings panel element management in the form designer for improved internal consistency and stability.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 401c0b14-f56c-4bd1-b379-9161fff4eed7

📥 Commits

Reviewing files that changed from the base of the PR and between a2bc408 and c477f03.

📒 Files selected for processing (6)

• shesha-reactjs/src/components/formDesigner/componentPropertiesPanel/index.tsx
• shesha-reactjs/src/components/formDesigner/configurableFormComponent/index.tsx
• shesha-reactjs/src/providers/formDesigner/contexts.tsx
• shesha-reactjs/src/providers/formDesigner/index.tsx
• shesha-reactjs/src/providers/formDesigner/instance.ts
• shesha-reactjs/src/providers/formDesigner/models.ts

---

Walkthrough

This PR refactors the settings panel reference handling from React refs (MutableRefObject) to direct element references (HTMLDivElement | null). The change updates the FormDesigner context, state models, and components to use a callback-based approach for storing and accessing the settings panel element instead of managing refs directly.

Changes

Cohort / File(s)	Summary
Form Designer State Management src/providers/formDesigner/contexts.tsx, src/providers/formDesigner/models.ts, src/providers/formDesigner/instance.ts, src/providers/formDesigner/index.tsx	Replaced settingsPanelRef: MutableRefObject<HTMLDivElement> with settingsPanelElement: HTMLDivElement | null in FormDesignerState. Added setSettingsPanelElement(element: HTMLDivElement | null) action. Removed useRef usage from provider initialization.
Component Integration src/components/formDesigner/configurableFormComponent/index.tsx, src/components/formDesigner/componentPropertiesPanel/index.tsx	Updated IConfigurableFormComponentDesignerProps to use settingsPanelElement prop instead of settingsPanelRef. Added useCallback hook in componentPropertiesPanel to set element via formDesigner.setSettingsPanelElement(). Updated all portal and conditional render logic to reference the element directly.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• IvanIlyichev
• James-Baloyi

Poem

🐰 A ref once held the panel tight,
Now elements dance in designer's light,
From refs to direct, callbacks hop free,
Settings flow through with elegancy,
The rabbit rejoices—simpler's the way! ✨

🚥 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 describes the main change: replacing a non-reactive ref with a reactive callback-based approach to restore the properties panel after exiting preview mode.
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 unit tests (beta)

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

📝 Coding Plan

• Generate coding plan for human review comments

---

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

Tip

You can customize the high-level summary generated by CodeRabbit.

Configure the reviews.high_level_summary_instructions setting to provide custom instructions for generating the high-level summary.