From 3e9d6827462b354ab8a79da8d0dede1e1d1f2626 Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Fri, 23 Aug 2024 12:14:42 +0300
Subject: [PATCH] feat: when a catalog has one topology, show only topology
 card

Fixes #2174
---
 src/api/services/configs.ts                   |  3 ++-
 src/api/types/configs.ts                      | 19 ++++++++++++-------
 src/components/Configs/ConfigDetailsTabs.tsx  |  9 ++++++++-
 src/components/Configs/ConfigTabsLinks.tsx    |  6 ++++--
 .../Topology/TopologyCard/index.tsx           | 15 ++++++++++++++-
 5 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/api/services/configs.ts b/src/api/services/configs.ts
index 38f0825e8..d05c499a5 100644
--- a/src/api/services/configs.ts
+++ b/src/api/services/configs.ts
@@ -11,6 +11,7 @@ import {
   ConfigChange,
   ConfigHealthCheckView,
   ConfigItem,
+  ConfigItemDetails,
   ConfigSummary,
   ConfigTypeRelationships
 } from "../types/configs";
@@ -138,7 +139,7 @@ export const getAllChanges = (
 };
 
 export const getConfig = (id: string) =>
-  resolvePostGrestRequestWithPagination<ConfigItem[]>(
+  resolvePostGrestRequestWithPagination<ConfigItemDetails[]>(
     ConfigDB.get(`/config_detail?id=eq.${id}&select=*,config_scrapers(id,name)`)
   );
 
diff --git a/src/api/types/configs.ts b/src/api/types/configs.ts
index 9ecfda145..50c092def 100644
--- a/src/api/types/configs.ts
+++ b/src/api/types/configs.ts
@@ -1,5 +1,6 @@
 import { Agent, Avatar, CreatedAt, Timestamped } from "../traits";
 import { HealthCheckSummary } from "./health";
+import { Topology } from "./topology";
 
 export interface ConfigChange extends CreatedAt {
   id: string;
@@ -69,13 +70,6 @@ export interface ConfigItem extends Timestamped, Avatar, Agent, Costs {
     id: string;
     name: string;
   };
-  summary?: {
-    relationships?: number;
-    analysis?: number;
-    changes?: number;
-    playbook_runs?: number;
-    checks?: number;
-  };
   properties?: {
     icon: string;
     name: string;
@@ -87,6 +81,17 @@ export interface ConfigItem extends Timestamped, Avatar, Agent, Costs {
   last_scraped_time?: string;
 }
 
+export interface ConfigItemDetails extends ConfigItem {
+  summary?: {
+    relationships?: number;
+    analysis?: number;
+    changes?: number;
+    playbook_runs?: number;
+    checks?: number;
+  };
+  component?: Topology[];
+}
+
 export interface ConfigItemGraphData extends ConfigItem {
   expanded?: boolean;
   expandable?: boolean;
diff --git a/src/components/Configs/ConfigDetailsTabs.tsx b/src/components/Configs/ConfigDetailsTabs.tsx
index a91d715be..1a49145f9 100644
--- a/src/components/Configs/ConfigDetailsTabs.tsx
+++ b/src/components/Configs/ConfigDetailsTabs.tsx
@@ -9,6 +9,7 @@ import { Head } from "../../ui/Head";
 import { refreshButtonClickedTrigger } from "../../ui/SlidingSideBar/SlidingSideBar";
 import TabbedLinks from "../../ui/Tabs/TabbedLinks";
 import { ErrorBoundary } from "../ErrorBoundary";
+import { TopologyCard } from "../Topology/TopologyCard";
 import { useConfigDetailsTabs } from "./ConfigTabsLinks";
 import ConfigSidebar from "./Sidebar/ConfigSidebar";
 
@@ -69,8 +70,14 @@ export function ConfigDetailsTabs({
         loading={isLoading}
         contentClass="p-0 h-full overflow-y-hidden"
       >
-        <div className={`flex h-full flex-row`}>
+        <div className={`flex h-full flex-row bg-gray-100`}>
           <div className="flex flex-1 flex-col">
+            {configItem?.component && configItem.component.length === 1 && (
+              <div className="flex w-full flex-row items-center justify-between p-4">
+                <TopologyCard topology={configItem.component[0]} />
+              </div>
+            )}
+
             <TabbedLinks
               activeTabName={activeTabName}
               tabLinks={configTabList}
diff --git a/src/components/Configs/ConfigTabsLinks.tsx b/src/components/Configs/ConfigTabsLinks.tsx
index 293b40798..b3b9e75ad 100644
--- a/src/components/Configs/ConfigTabsLinks.tsx
+++ b/src/components/Configs/ConfigTabsLinks.tsx
@@ -1,8 +1,10 @@
 import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import { useParams } from "react-router-dom";
-import { ConfigItem } from "../../api/types/configs";
+import { ConfigItemDetails } from "../../api/types/configs";
 
-export function useConfigDetailsTabs(countSummary?: ConfigItem["summary"]) {
+export function useConfigDetailsTabs(
+  countSummary?: ConfigItemDetails["summary"]
+) {
   const { id } = useParams<{ id: string }>();
 
   return [
diff --git a/src/components/Topology/TopologyCard/index.tsx b/src/components/Topology/TopologyCard/index.tsx
index aa7a654fd..b85e2228b 100644
--- a/src/components/Topology/TopologyCard/index.tsx
+++ b/src/components/Topology/TopologyCard/index.tsx
@@ -37,7 +37,20 @@ export const StatusStyles: Record<keyof typeof ComponentStatus, string> = {
 interface IProps {
   size?: Size | string;
   topologyId?: string;
-  topology?: Topology;
+  topology?: Pick<
+    Topology,
+    | "summary"
+    | "is_leaf"
+    | "id"
+    | "properties"
+    | "components"
+    | "agent_id"
+    | "status"
+    | "status_reason"
+    | "text"
+    | "name"
+    | "icon"
+  >;
   selectionMode?: boolean;
   hideMenu?: boolean;
   // where to open new links