fix: config details navigates to the view tab

src/components/Configs/ConfigTabsLinks.tsx

@@ -14,17 +14,17 @@ type ConfigDetailsTab = {
   search?: string;
 };
 
-export function useConfigDetailsTabs(
+function buildConfigDetailsTabs(
+  id: string | undefined,
+  views: Array<{
+    id: string;
+    title?: string;
+    name: string;
+    icon?: string;
+    ordinal?: number;
+  }>,
   countSummary?: ConfigItem["summary"]
 ): ConfigDetailsTab[] {
-  const { id } = useParams<{ id: string }>();
-
-  const { data: views = [] } = useQuery({
-    queryKey: ["views", id],
-    queryFn: () => getViewsByConfigId(id!),
-    enabled: !!id
-  });
-
   const staticTabs: ConfigDetailsTab[] = [
     { label: "Spec", key: "Spec", path: `/catalog/${id}/spec` },
     {
@@ -111,3 +111,34 @@ export function useConfigDetailsTabs(
   // Views configured for a config should appear ahead of the built-in tabs.
   return [...viewTabs, ...staticTabs];
 }
+
+export function useConfigDetailsTabs(
+  countSummary?: ConfigItem["summary"]
+): ConfigDetailsTab[] {
+  const { id } = useParams<{ id: string }>();
+
+  const { data: views = [] } = useQuery({
+    queryKey: ["views", id],
+    queryFn: () => getViewsByConfigId(id!),
+    enabled: !!id
+  });
+
+  return buildConfigDetailsTabs(id, views, countSummary);
+}
+
+export function useConfigDetailsTabsWithStatus(
+  countSummary?: ConfigItem["summary"]
+): { tabs: ConfigDetailsTab[]; isViewsLoading: boolean } {
+  const { id } = useParams<{ id: string }>();
+
+  const { data: views = [], isLoading: isViewsLoading } = useQuery({
+    queryKey: ["views", id],
+    queryFn: () => getViewsByConfigId(id!),
+    enabled: !!id
+  });
+
+  return {
+    tabs: buildConfigDetailsTabs(id, views, countSummary),
+    isViewsLoading
+  };
+}

src/pages/config/details/ConfigDetailsIndexRedirect.tsx

@@ -1,5 +1,5 @@
 import { useGetConfigByIdQuery } from "@flanksource-ui/api/query-hooks";
-import { useConfigDetailsTabs } from "@flanksource-ui/components/Configs/ConfigTabsLinks";
+import { useConfigDetailsTabsWithStatus } from "@flanksource-ui/components/Configs/ConfigTabsLinks";
 import { Loading } from "@flanksource-ui/ui/Loading";
 import { useEffect } from "react";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
@@ -17,10 +17,12 @@ export function ConfigDetailsIndexRedirect() {
     isError: isConfigError
   } = useGetConfigByIdQuery(idParam);
 
-  const tabs = useConfigDetailsTabs(configDetails?.summary);
+  const { tabs, isViewsLoading } = useConfigDetailsTabsWithStatus(
+    configDetails?.summary
+  );
 
   useEffect(() => {
-    if (!id || tabs.length === 0) {
+    if (!id || isViewsLoading || tabs.length === 0) {
       return;
     }
 
@@ -37,7 +39,7 @@ export function ConfigDetailsIndexRedirect() {
       },
       { replace: true }
     );
-  }, [id, tabs, navigate, location.pathname, location.search]);
+  }, [id, isViewsLoading, tabs, navigate, location.pathname, location.search]);
 
   if (isConfigLoading) {
     return (