fix: Navigate to the view tab on config page view (#2802)

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

Author: adityathebe

src/components/Configs/ConfigDetailsTabs.tsx

@@ -45,7 +45,7 @@ export function ConfigDetailsTabs({
   const { data: configItem, isLoading: isLoadingConfig } =
     useGetConfigByIdQuery(id!);
 
-  const configTabList = useConfigDetailsTabs(configItem?.summary);
+  const { tabs: configTabList } = useConfigDetailsTabs(configItem?.summary);
 
   return (
     <>

src/components/Configs/ConfigTabsLinks.tsx

@@ -14,12 +14,18 @@ type ConfigDetailsTab = {
   search?: string;
 };
 
-export function useConfigDetailsTabs(
-  countSummary?: ConfigItem["summary"]
-): ConfigDetailsTab[] {
+export function useConfigDetailsTabs(countSummary?: ConfigItem["summary"]): {
+  isLoading: boolean;
+  isError: boolean;
+  tabs: ConfigDetailsTab[];
+} {
   const { id } = useParams<{ id: string }>();
 
-  const { data: views = [] } = useQuery({
+  const {
+    data: views = [],
+    isLoading,
+    isError
+  } = useQuery({
     queryKey: ["views", id],
     queryFn: () => getViewsByConfigId(id!),
     enabled: !!id
@@ -105,9 +111,9 @@ export function useConfigDetailsTabs(
   }));
 
   if (viewTabs.length === 0) {
-    return staticTabs;
+    return { isLoading, isError, tabs: staticTabs };
   }
 
   // Views configured for a config should appear ahead of the built-in tabs.
-  return [...viewTabs, ...staticTabs];
+  return { isLoading, isError, tabs: [...viewTabs, ...staticTabs] };
 }

src/pages/config/details/ConfigDetailsIndexRedirect.tsx

@@ -17,9 +17,17 @@ export function ConfigDetailsIndexRedirect() {
     isError: isConfigError
   } = useGetConfigByIdQuery(idParam);
 
-  const tabs = useConfigDetailsTabs(configDetails?.summary);
+  const {
+    tabs,
+    isLoading,
+    isError: isViewsError
+  } = useConfigDetailsTabs(configDetails?.summary);
 
   useEffect(() => {
+    if (isLoading || isViewsError) {
+      return;
+    }
+
     if (!id || tabs.length === 0) {
       return;
     }
@@ -37,20 +45,28 @@ export function ConfigDetailsIndexRedirect() {
       },
       { replace: true }
     );
-  }, [id, tabs, navigate, location.pathname, location.search]);
+  }, [
+    isLoading,
+    isViewsError,
+    id,
+    tabs,
+    navigate,
+    location.pathname,
+    location.search
+  ]);
 
-  if (isConfigLoading) {
+  if (isConfigLoading || isLoading) {
     return (
       <div className="flex h-full items-center justify-center">
         <Loading />
       </div>
     );
   }
 
-  if (isConfigError) {
+  if (isConfigError || isViewsError) {
     return (
       <div className="flex h-full items-center justify-center text-gray-500">
-        Failed to load config
+        Failed to load config or views
       </div>
     );
   }

src/pages/config/details/ConfigDetailsViewPage.tsx

@@ -29,7 +29,7 @@ export function ConfigDetailsViewPage() {
     <ConfigDetailsTabs
       pageTitlePrefix={`Config View - ${displayName}`}
       isLoading={isLoading}
-      activeTabName={displayName}
+      activeTabName={viewId ?? ""}
       refetch={handleForceRefresh}
     >
       <div className="">