diff --git a/src/components/Configs/ConfigTabsLinks.tsx b/src/components/Configs/ConfigTabsLinks.tsx index 25ab7d134..4962fb41f 100644 --- a/src/components/Configs/ConfigTabsLinks.tsx +++ b/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 + }; +} diff --git a/src/pages/config/details/ConfigDetailsIndexRedirect.tsx b/src/pages/config/details/ConfigDetailsIndexRedirect.tsx index ae70845a7..994acbd69 100644 --- a/src/pages/config/details/ConfigDetailsIndexRedirect.tsx +++ b/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 (