Open
Conversation
…eactive updates - Added state management for active settings tab key in form designer. - Implemented callback ref for settings panel to trigger re-renders. - Updated components to utilize new active settings tab key functionality. - Improved handling of settings panel element for better reactivity.
…ha-framework into thulasizwe/bug/3259
Contributor
WalkthroughCentralizes active settings tab key into the FormDesigner provider: adds state, setter, and subscription event; exposes a hook to read the value; and updates SearchableTabsComponent to use the provider-backed key instead of local React state. Small whitespace change in a panel file. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Component as "SearchableTabsComponent"
participant Hook as "useFormDesignerActiveSettingsTabKey()"
participant Provider as "FormDesignerInstance"
participant Subscribers as "Other Subscribers"
Component->>Hook: read activeSettingsTabKey
Component->>Provider: setActiveSettingsTabKey(newKey)
Provider-->>Provider: update activeSettingsTabKey
Provider->>Subscribers: notify 'settings-tab' subscribers
Subscribers-->>Component: (optional) react to update
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
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/designer-components/propertiesTabs/searchableTabsComponent.tsx (1)
162-178: 🧹 Nitpick | 🔵 TrivialConsider memoizing
newFilteredTabsto avoid unnecessary effect executions.Both
useEffecthooks at lines 162–171 and 174–178 includenewFilteredTabsin their dependency arrays. SincenewFilteredTabsis computed inline during render, it receives a new reference on every render, causing these effects to fire repeatedly even when the actual tab data hasn't changed.While
setActiveSettingsTabKeyhas an early-return guard preventing unnecessary subscriber notifications, the effects still execute on every render, which is suboptimal.♻️ Suggested refactor: wrap newFilteredTabs computation in useMemo
+import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react'; -import React, { useEffect, useRef, useState, useCallback } from 'react';Then wrap the
newFilteredTabscomputation:- const newFilteredTabs = tabs + const newFilteredTabs = useMemo(() => tabs .map((tab: any, index: number) => { // ... existing mapping logic }) - .filter((tab) => !tab.hidden); + .filter((tab) => !tab.hidden), [tabs, searchQuery, formState.name, formActions, model, styles.searchField]);Note: The dependency array will need to include all values used in the computation. Since
isComponentHiddenmutatescomponent.inputs, you may need to refactor that as well to ensure stable references.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@shesha-reactjs/src/designer-components/propertiesTabs/searchableTabsComponent.tsx` around lines 162 - 178, newFilteredTabs is recomputed each render causing the two useEffect hooks (the one that sets the first visible tab on search and the one that ensures a valid active tab) to run unnecessarily; wrap the computation of newFilteredTabs in a useMemo (identify the existing newFilteredTabs expression in searchableTabsComponent.tsx) and supply a dependency array containing the true inputs used to compute it, then use the memoized newFilteredTabs in both useEffect calls; also eliminate or refactor any mutation inside isComponentHidden (it currently mutates component.inputs) so the memo can rely on stable input references, and finally adjust the useEffect dependency arrays to depend on the memoized newFilteredTabs (and any other stable primitives) instead of the transient inline value.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In
`@shesha-reactjs/src/designer-components/propertiesTabs/searchableTabsComponent.tsx`:
- Around line 162-178: newFilteredTabs is recomputed each render causing the two
useEffect hooks (the one that sets the first visible tab on search and the one
that ensures a valid active tab) to run unnecessarily; wrap the computation of
newFilteredTabs in a useMemo (identify the existing newFilteredTabs expression
in searchableTabsComponent.tsx) and supply a dependency array containing the
true inputs used to compute it, then use the memoized newFilteredTabs in both
useEffect calls; also eliminate or refactor any mutation inside
isComponentHidden (it currently mutates component.inputs) so the memo can rely
on stable input references, and finally adjust the useEffect dependency arrays
to depend on the memoized newFilteredTabs (and any other stable primitives)
instead of the transient inline value.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 8dee9277-030a-4c11-9e01-cee413b2b7de
📒 Files selected for processing (6)
shesha-reactjs/src/components/formDesigner/componentPropertiesPanel/index.tsxshesha-reactjs/src/designer-components/propertiesTabs/searchableTabsComponent.tsxshesha-reactjs/src/providers/formDesigner/contexts.tsxshesha-reactjs/src/providers/formDesigner/index.tsxshesha-reactjs/src/providers/formDesigner/instance.tsshesha-reactjs/src/providers/formDesigner/models.ts
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@shesha-reactjs/src/designer-components/propertiesTabs/searchableTabsComponent.tsx`:
- Around line 25-29: The component currently hardcodes '1' when picking
activeTabKey and falls back to newFilteredTabs[0].key when a persisted key is
stale, which ignores the model's configured defaultActiveKey; update the logic
in searchableTabsComponent to first consult the form model's defaultActiveKey
(via useFormDesigner -> formDesigner.model.defaultActiveKey) before falling back
to '1' (i.e. activeTabKey = persistedActiveTabKey ??
formDesigner?.model?.defaultActiveKey ?? '1'), and likewise change the
stale-persistence recovery code (where it currently selects
newFilteredTabs[0].key) to prefer formDesigner.model.defaultActiveKey when
present, then newFilteredTabs[0].key as the final fallback.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: caedb59d-cdfc-448a-a7f2-b86411a3c6bd
📒 Files selected for processing (1)
shesha-reactjs/src/designer-components/propertiesTabs/searchableTabsComponent.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#3259
Enhance form designer with active settings tab management and reactive updates
Summary by CodeRabbit
New Features
Style