fix: fix ESlint warnings

[feifei325]

Summary by CodeRabbit

• Refactor
  • Optimized internal state management through strategic function memoization and improved dependency tracking to enhance application performance and stability.
  • Enhanced lifecycle management across features to ensure proper UI responsiveness when translations or messages update.
  • Refined code structure and formatting for improved maintainability and consistency.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The PR updates React hook dependency arrays across 11 frontend components, primarily adding missing dependencies like translation functions (t) and message objects to useEffect hooks, introduces useCallback memoization for function stabilization, and includes minor code formatting adjustments.

Changes

Cohort / File(s)	Summary
Translation Function Dependencies frontend/src/features/login/components/OidcTokenHandler.tsx, frontend/src/features/tasks/components/TeamSelector.tsx, frontend/src/features/settings/components/BotList.tsx, frontend/src/features/settings/components/GitHubIntegration.tsx, frontend/src/features/settings/components/TeamList.tsx	Added t (translation function) to useEffect dependency arrays, causing effects to re-run on translation changes and ensuring UI text updates align with language changes.
Message & Callback Dependencies frontend/src/features/settings/components/GitHubIntegration.tsx, frontend/src/features/settings/components/BotList.tsx, frontend/src/features/settings/components/TeamList.tsx, frontend/src/features/tasks/components/TaskParamSync.tsx	Expanded useEffect dependencies to include message, setBotsSorted, and setTeamsSorted callbacks, triggering re-fetches when these values change.
State & Context Dependencies frontend/src/features/tasks/components/ChatArea.tsx	Added selectedTeam and hasMessages to useEffect dependency arrays for improved scroll restoration and message presence tracking.
Agent Type Dependency frontend/src/features/settings/components/McpConfigImportModal.tsx	Added agentType to handleImportConfirm's dependency array to ensure normalization logic updates when agent type changes.
Function Memoization frontend/src/features/onboarding/useOnboarding.ts, frontend/src/features/tasks/components/ResizableSidebar.tsx	Introduced useCallback wrappers for startTour and saveWidth functions with appropriate dependencies to stabilize function identity across renders.
Code Restructuring frontend/src/features/settings/components/TabParamSync.tsx	Relocated tabNameToIndex mapping from module scope into useEffect body; adds clarifying comment.
Code Formatting frontend/src/features/tasks/components/ResizableSidebar.tsx	Applied semicolon and trailing comma formatting adjustments for stylistic consistency without behavior changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Rationale: The changes follow a consistent, repetitive pattern—primarily adding missing dependencies to useEffect hooks. While spread across 11 files, the homogeneity of updates (dependency additions) significantly reduces complexity per file.
• Areas requiring attention:
  • Verify that newly added dependencies (especially t and message) don't cause unintended re-renders or performance regressions in components with frequent re-evaluations (e.g., TeamList.tsx, ChatArea.tsx).
  • Confirm useCallback memoization in useOnboarding.ts and ResizableSidebar.tsx properly stabilizes function references without introducing stale closures.
  • Review TabParamSync.tsx to ensure moving tabNameToIndex into useEffect doesn't affect the tab resolution logic or URL synchronization behavior.

Possibly related PRs

• support resizable task sidebar #18: Modifies ResizableSidebar.tsx with similar useCallback and dependency array adjustments; likely coordinating on component stabilization.
• auto scroll to latest message #19: Updates ChatArea.tsx scroll-to-bottom behavior and effect dependencies; aligns with the selectedTeam and hasMessages dependency additions in this PR.

Poem

🐰 Hooks now dance with deps so true,
Translations sync when t runs through,
Callbacks memoized, functions stay,
React effects won't stray astray—hopping hooray! ✨

Pre-merge checks and finishing touches

✅ 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 objective of the pull request - fixing ESLint warnings across multiple frontend components by updating dependency arrays and adding memoization.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/ESlint

---

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: 0

🧹 Nitpick comments (3)

frontend/src/features/tasks/components/ChatArea.tsx (2)

81-121: Restoration effect dependency update is safe; minor optional cleanup only

Including selectedTeam in the dependency array matches the values used in the effect and avoids stale logs, and the hasRestoredPreferences guard prevents any re-run loop when setSelectedTeam is called. The added dependency looks correct and low-cost.

If you ever want to cut a tiny bit of noise, you could remove selectedTeam from the log (or move that log elsewhere) so the effect doesn’t re-run on every team change just for logging, but this is purely optional.

---

273-279: Scroll-on-open effect dependency expansion looks correct

Adding hasMessages to the dependency array aligns with the values used inside the effect and keeps the scroll behavior consistent when the presence of messages changes. Since hasMessages is derived from selectedTaskDetail?.id, this is effectively redundant but harmless and resolves ESLint warnings without changing behavior.

frontend/src/features/settings/components/TabParamSync.tsx (1)

18-39: Consider moving the constant mapping outside the effect.

The tabNameToIndex mapping is a constant object that doesn't depend on any props, state, or effect dependencies. Moving it inside the useEffect causes it to be recreated on every execution (whenever searchParams or setTabIndex change). While the performance impact is negligible for this small object, it's more idiomatic to define such constants at the module or component level.

Apply this diff to move the mapping outside the effect:

+const tabNameToIndex: Record<string, number> = {
+  integrations: 0,
+  bots: 1,
+  bot: 1,
+  team: 2,
+};
+
 export default function TabParamSync({ tabIndex: _tabIndex, setTabIndex }: TabParamSyncProps) {
   const searchParams = useSearchParams();
 
   useEffect(() => {
-    // Tab name to index mapping parameterization
-    const tabNameToIndex: Record<string, number> = {
-      integrations: 0,
-      bots: 1,
-      bot: 1,
-      team: 2,
-    };
-
     const tab = searchParams?.get('tab');

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5cf5393 and 904d64d.

📒 Files selected for processing (11)

• frontend/src/features/login/components/OidcTokenHandler.tsx (1 hunks)
• frontend/src/features/onboarding/useOnboarding.ts (4 hunks)
• frontend/src/features/settings/components/BotList.tsx (1 hunks)
• frontend/src/features/settings/components/GitHubIntegration.tsx (1 hunks)
• frontend/src/features/settings/components/McpConfigImportModal.tsx (1 hunks)
• frontend/src/features/settings/components/TabParamSync.tsx (1 hunks)
• frontend/src/features/settings/components/TeamList.tsx (1 hunks)
• frontend/src/features/tasks/components/ChatArea.tsx (2 hunks)
• frontend/src/features/tasks/components/ResizableSidebar.tsx (3 hunks)
• frontend/src/features/tasks/components/TaskParamSync.tsx (1 hunks)
• frontend/src/features/tasks/components/TeamSelector.tsx (1 hunks)

🔇 Additional comments (11)

frontend/src/features/settings/components/McpConfigImportModal.tsx (1)

91-91: LGTM! Correct ESLint fix.

Adding agentType to the dependency array is correct since it's used within the callback (line 75). This ensures the callback references the current agentType value and prevents stale closure bugs.

frontend/src/features/tasks/components/TaskParamSync.tsx (1)

54-54: Including message in the effect dependencies is correct and keeps ESLint happy

This aligns the useEffect with react-hooks/exhaustive-deps and ensures the effect always sees the current message instance; given the early-return guards, the extra reruns when message changes should be negligible. Please just confirm that App.useApp().message is stable enough in your usage so you don’t accidentally trigger unnecessary re-runs.

frontend/src/features/tasks/components/TeamSelector.tsx (1)

91-113: LGTM! Correct dependency addition.

Adding t to the useMemo dependency array is correct since the translation function is used within the memoized computation (line 105). This ensures the team options update properly when the language changes.

frontend/src/features/login/components/OidcTokenHandler.tsx (1)

24-60: LGTM! Dependency array correctly updated.

The addition of t to the dependency array is appropriate since the translation function is used for displaying error and success messages. The effect will now properly reflect language changes if they occur during the OIDC flow.

frontend/src/features/settings/components/GitHubIntegration.tsx (1)

30-49: Verify stability to avoid unnecessary data refetches.

Similar to BotList.tsx, this data-loading effect now depends on message and t. If these references are not stable across renders, the effect will re-run and refetch git information unnecessarily. Please confirm that both message (from App.useApp()) and t (from useTranslation()) maintain stable identities.

frontend/src/features/onboarding/useOnboarding.ts (2)

67-132: LGTM! Proper use of useCallback for function stabilization.

Wrapping startTour in useCallback is the correct approach to stabilize the function reference, especially since it's used as a dependency in the useEffect below (line 166). All values used within the callback are properly included in the dependency array.

---

145-166: LGTM! Dependency array correctly updated.

Including startTour in the dependency array is correct since the function is called within the effect. The memoization above ensures this won't cause unnecessary re-runs.

frontend/src/features/settings/components/TeamList.tsx (1)

77-91: Consistent pattern with other data-loading effects.

This follows the same pattern as BotList.tsx, with message and t added to the dependency array. The memoized setters (setBotsSorted, setTeamsSorted) are correctly included. The same stability verification concern applies here as noted in BotList.tsx.

frontend/src/features/tasks/components/ResizableSidebar.tsx (2)

46-51: LGTM! Proper memoization of the save callback.

Wrapping saveWidth in useCallback with storageKey as a dependency is correct. This stabilizes the function reference and prevents unnecessary re-creation, which is important since it's used in the effect dependency array below.

---

60-92: LGTM! Dependency array correctly includes memoized callback.

Adding saveWidth to the dependency array is correct since it's called within the effect (line 77). The memoization ensures this won't cause unnecessary effect re-runs. The formatting improvements (semicolons, trailing commas) also enhance code consistency.

frontend/src/features/settings/components/BotList.tsx (1)

50-63: Dependency array is correct — no changes needed.

The t function from react-i18next has caused stability issues in concurrent mode and should be included in dependency arrays, and Ant Design's message API does not guarantee unchanging function object identity across renders. Your code correctly includes both message and t as dependencies alongside setBotsSorted, which prevents stale closures and ensures the effect re-runs when these references change.