fix: Navigate to the view tab on config page view

[adityathebe]

• fix: Config tab navigation
• Updated the redirect flow to wait on view loading/errors and fixed view tab highlighting by matching activeTabName to the view ID.

Summary by CodeRabbit

Release Notes

• Bug Fixes

  • Improved loading and error state handling for configuration tabs, ensuring better visual feedback during data fetching and failures.
  • Fixed active tab selection to correctly reflect the current view from the URL.

• Enhancements

  • Enhanced error messaging to provide clearer feedback when configuration or view data fails to load.

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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
aws-preview	Ready	Preview	Dec 25, 2025 8:54am
flanksource-ui	Ready	Preview	Dec 25, 2025 8:54am

[netlify]

❌ Deploy Preview for flanksource-demo-stable failed. Why did it fail? →

Name	Link
🔨 Latest commit	93b7584
🔍 Latest deploy log	https://app.netlify.com/projects/flanksource-demo-stable/deploys/694cfafbb355d50008f36d49

[coderabbitai]

Walkthrough

The changes refactor the useConfigDetailsTabs hook to return an object containing loading state, error state, and tabs array instead of just the tabs array. Components consuming this hook are updated to destructure and handle the new return structure and propagated loading/error states.

Changes

Cohort / File(s)	Summary
Hook definition and return shape src/components/Configs/ConfigTabsLinks.tsx	Modified useConfigDetailsTabs hook to return { isLoading, isError, tabs } object instead of ConfigDetailsTab[] array. Extracts loading and error states from underlying useQuery and propagates them alongside tabs in all return paths.
Hook consumer updates src/components/Configs/ConfigDetailsTabs.tsx, src/pages/config/details/ConfigDetailsIndexRedirect.tsx	Updated to destructure new hook return shape. ConfigDetailsIndexRedirect additionally merges config and view loading/error states, adds early guards in effects when loading or error states are present, and expands dependency arrays to include new state variables.
Tab selection logic src/pages/config/details/ConfigDetailsViewPage.tsx	Changed activeTabName parameter from displayName to viewId ?? "", making active tab selection route-dependent rather than data-driven.

Possibly related PRs

• fix: View sections in config details page #2766: Modifies ConfigDetailsViewPage.tsx to rewrite view data fetching/rendering, overlapping with this PR's tab selection changes in the same file.

Suggested reviewers

• moshloop

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 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: fixing navigation to view tabs on the config page. It aligns with the PR objectives about fixing config tab navigation and view tab highlighting.

✨ 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/config-navigation-view-2

---

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

[netlify]

❌ Deploy Preview for clerk-saas-ui failed. Why did it fail? →

Name	Link
🔨 Latest commit	93b7584
🔍 Latest deploy log	https://app.netlify.com/projects/clerk-saas-ui/deploys/694cfafb3d3aac0008936950

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/pages/config/details/ConfigDetailsIndexRedirect.tsx (1)

27-29: Guard on config loading/error states in the effect.

The effect currently only guards on view loading/error states, but should also check isConfigLoading and isConfigError to prevent executing redirect logic when config data isn't ready.

🔎 Proposed fix

  useEffect(() => {
-   if (isLoading || isViewsError) {
+   if (isConfigLoading || isConfigError || isLoading || isViewsError) {
      return;
    }
    
    if (!id || tabs.length === 0) {
      return;
    }

    const firstTab = tabs[0];

    if (!firstTab || location.pathname === firstTab.path) {
      return;
    }

    navigate(
      {
        pathname: firstTab.path,
        search: firstTab.search ?? location.search
      },
      { replace: true }
    );
  }, [
+   isConfigLoading,
+   isConfigError,
    isLoading,
    isViewsError,
    id,
    tabs,
    navigate,
    location.pathname,
    location.search
  ]);

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 86b3c88 and 93b7584.

📒 Files selected for processing (4)

• src/components/Configs/ConfigDetailsTabs.tsx
• src/components/Configs/ConfigTabsLinks.tsx
• src/pages/config/details/ConfigDetailsIndexRedirect.tsx
• src/pages/config/details/ConfigDetailsViewPage.tsx

🧰 Additional context used

🧬 Code graph analysis (3)

src/components/Configs/ConfigDetailsTabs.tsx (1)

src/components/Configs/ConfigTabsLinks.tsx (1)

• useConfigDetailsTabs (17-119)

src/components/Configs/ConfigTabsLinks.tsx (1)

src/api/types/configs.ts (1)

• ConfigItem (49-91)

src/pages/config/details/ConfigDetailsIndexRedirect.tsx (1)

src/components/Configs/ConfigTabsLinks.tsx (1)

• useConfigDetailsTabs (17-119)

🔇 Additional comments (8)

src/pages/config/details/ConfigDetailsViewPage.tsx (1)

32-32: LGTM: Correct fix for tab highlighting.

This change correctly aligns the activeTabName with the tab's key property (which is set to view.id in useConfigDetailsTabs), ensuring the active tab is properly highlighted when viewing a config view page.

src/components/Configs/ConfigDetailsTabs.tsx (1)

48-48: LGTM: Correctly updated to match the new hook API.

The destructuring properly extracts the tabs array from the new object-based return value of useConfigDetailsTabs.

src/pages/config/details/ConfigDetailsIndexRedirect.tsx (3)

20-24: LGTM: Correctly extracts loading and error states.

The destructuring properly handles the new object-based return value from useConfigDetailsTabs, enabling proper coordination between config and view loading states.

---

58-64: LGTM: Correctly merges loading states.

Properly handles loading states from both config and view queries, ensuring the loading indicator displays until both are ready.

---

66-72: LGTM: Correctly merges error states.

Properly handles error states from both config and view queries with an appropriate error message.

src/components/Configs/ConfigTabsLinks.tsx (3)

17-21: LGTM: Well-structured return type.

The new return type properly exposes loading and error states alongside the tabs array, enabling better coordination and user experience across consuming components.

---

24-32: LGTM: Correctly extracts query states.

Properly destructures the loading and error states from the useQuery hook for propagation to consumers.

---

114-118: LGTM: Consistent return structure.

Both return paths correctly wrap the tabs array in the new object structure along with loading and error states.