fix: resolve react-hooks/exhaustive-deps violations in admin settings components

[Agarwalchetan]

fixes: #38465 Fix react-hooks/exhaustive-deps violations in admin settings components

This PR fixes react-hooks/exhaustive-deps violations in two admin settings components by removing suppressed lint rules and properly tracking hook dependencies.

The issue was caused by type-cast expressions used directly in dependency arrays, which the hooks linter cannot statically analyze. As a result, eslint-disable react-hooks/exhaustive-deps was used instead of addressing the root cause.

---

What was changed

• Removed all eslint-disable react-hooks/exhaustive-deps comments in the affected files
• Introduced useMemo to safely derive and memoize the editor value from setting
• Updated useEffect and useCallback dependency arrays to rely on stable, lint-trackable values
• Added brief comments explaining the dependency logic

---

Files modified

• apps/meteor/client/views/admin/settings/Setting/Setting.tsx
• apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx

---

Why this approach

• Type-casts in dependency arrays create unstable references and confuse ESLint
• useMemo is the recommended pattern for derived state used by hooks
• Preserves existing component behavior
• Improves readability and long-term maintainability

---

Testing

• Existing unit tests for SettingField.tsx pass
• ESLint no longer reports react-hooks/exhaustive-deps warnings in the modified files
• TypeScript checks pass

Manual verification performed:

• Color editor settings behave correctly
• Reset button works as expected
• No infinite re-renders or console warnings observed

---

Scope

• Limited to two components only
• No refactors or behavior changes
• Focused solely on fixing exhaustive-deps violations

Summary by CodeRabbit

• Refactor
  • Optimized admin settings UI to reduce unnecessary re-renders and improve responsiveness when editing color settings.
  • Centralized and memoized the editor value used by the settings UI to ensure more stable state synchronization and more efficient reset behavior.

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6f88ffb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Walkthrough

Two admin settings components extract a color-setting editor into a memoized value and replace inline type-casts in hook dependency arrays with that memoized value, preserving behavior while fixing react-hooks/exhaustive-deps issues.

Changes

Cohort / File(s)	Summary
Admin Settings Editor Refactor apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx, apps/meteor/client/views/admin/settings/Setting/Setting.tsx	Introduce editorValue via useMemo for color settings; replace direct (setting as ISettingColor).editor usages with editorValue in useEffect, useCallback, and onResetButtonClick; update dependency arrays to reference editorValue and remove non-statically-analyzable type-casts.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• regression(ABAC): Missing settings from abac -> Settings tab #37766: Modifies the same ABAC SettingField.tsx component and overlaps with editor handling changes.

Suggested reviewers

• tassoevan

Poem

🐰 I hopped through code with careful paws,
I swapped the casts for memoized laws.
editorValue snug and neat,
Hooks now track each proper beat.
ESLint smiles — carrot treat. 🥕

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main change: fixing react-hooks/exhaustive-deps violations in admin settings components.
Linked Issues check	✅ Passed	The PR successfully addresses all coding requirements from issue #38465: removed eslint-disable comments, introduced useMemo for memoized editorValue, updated hook dependencies, and maintained component behavior.
Out of Scope Changes check	✅ Passed	All changes are scoped to the two specified files (Setting.tsx and SettingField.tsx) and directly address the issue requirements without introducing unrelated modifications.

_{✏️ 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

🤖 Fix all issues with AI agents

In `@apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingField.tsx`:
- Around line 60-63: Remove the inline comment above the useMemo in
SettingField.tsx: delete the line "// Memoize editor value extraction to avoid
type-cast in dependency array" and keep the useMemo implementation as-is (the
code using useMemo(() => isSettingColor(setting) ? setting.editor : undefined,
[setting]) with functions isSettingColor and variable setting unchanged).

In `@apps/meteor/client/views/admin/settings/Setting/Setting.tsx`:
- Around line 67-70: Remove the inline implementation comment above the
memoization; keep the logic as-is. Specifically, in the useMemo block that
computes editorValue (using isSettingColor(setting) ? setting.editor :
undefined) simply delete the comment "// Memoize editor value extraction to
avoid type-cast in dependency array" and leave the useMemo, editorValue,
isSettingColor, and setting code unchanged.

[cubic-dev-ai]

No issues found across 2 files

[kody-ai]

Your trial has ended! 😢

To keep getting reviews, activate your plan here.

Got questions about plans or want to see if we can extend your trial? Talk to our founders here.😎

[codecov]

Codecov Report

❌ Patch coverage is 92.30769% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 70.45%. Comparing base (7d89aae) to head (6f88ffb).
⚠️ Report is 1 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #38466      +/-   ##
===========================================
+ Coverage    70.43%   70.45%   +0.01%     
===========================================
  Files         3161     3162       +1     
  Lines       110151   110343     +192     
  Branches     19872    19893      +21     
===========================================
+ Hits         77588    77744     +156     
- Misses       30532    30573      +41     
+ Partials      2031     2026       -5     

Flag	Coverage Δ
e2e	60.36% <100.00%> (-0.01%)	⬇️
e2e-api	47.81% <ø> (-0.04%)	⬇️
unit	71.50% <88.88%> (+0.04%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.