fix: fix issue with topoogy properties being empty

Author: mainawycliffe

src/components/Configs/ConfigDetailsTabs.tsx

@@ -9,7 +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 { TopologyCard } from "../Topology/TopologyCard/TopologyCard";
 import { useConfigDetailsTabs } from "./ConfigTabsLinks";
 import ConfigSidebar from "./Sidebar/ConfigSidebar";
 

src/components/Incidents/Hypothesis/EvidenceSection/index.tsx

@@ -17,7 +17,7 @@ import { ConfigDetailsChanges } from "@flanksource-ui/components/Configs/Changes
 import ConfigLink from "@flanksource-ui/components/Configs/ConfigLink/ConfigLink";
 import { ConfigAnalysisLink } from "@flanksource-ui/components/Configs/Insights/ConfigAnalysisLink/ConfigAnalysisLink";
 import { LogsTable } from "@flanksource-ui/components/Logs/Table/LogsTable";
-import { TopologyCard } from "@flanksource-ui/components/Topology/TopologyCard";
+import { TopologyCard } from "@flanksource-ui/components/Topology/TopologyCard/TopologyCard";
 import { Size, ViewType } from "@flanksource-ui/types";
 import { Age } from "@flanksource-ui/ui/Age";
 import { Button } from "@flanksource-ui/ui/Buttons/Button";

src/components/Incidents/IncidentDetails/DefinitionOfDone/EvidenceView/index.tsx

@@ -5,18 +5,18 @@ import {
 } from "@flanksource-ui/api/query-hooks";
 import { getCanaries } from "@flanksource-ui/api/services/topology";
 import { Evidence, EvidenceType } from "@flanksource-ui/api/types/evidence";
+import { CardMetrics } from "@flanksource-ui/components/Topology/TopologyCard/CardMetrics";
+import { StatusStyles } from "@flanksource-ui/components/Topology/TopologyCard/TopologyCard";
 import { Size, ViewType } from "@flanksource-ui/types";
 import { Badge } from "@flanksource-ui/ui/Badge/Badge";
+import { ConfigIcon } from "@flanksource-ui/ui/Icons/ConfigIcon";
+import { Icon } from "@flanksource-ui/ui/Icons/Icon";
 import TextSkeletonLoader from "@flanksource-ui/ui/SkeletonLoader/TextSkeletonLoader";
 import { useQuery } from "@tanstack/react-query";
 import clsx from "clsx";
 import { useMemo } from "react";
 import { BsFillCircleFill, BsPersonFill } from "react-icons/bs";
 import { Link } from "react-router-dom";
-import { ConfigIcon } from "../../../../../ui/Icons/ConfigIcon";
-import { Icon } from "../../../../../ui/Icons/Icon";
-import { StatusStyles } from "../../../../Topology/TopologyCard";
-import { CardMetrics } from "../../../../Topology/TopologyCard/CardMetrics";
 import {
   ConfigAnalysisEvidence,
   ConfigChangeEvidence

src/components/Topology/TopologyCard/Property.tsx

@@ -14,6 +14,7 @@ export function PropertyDisplay({
   className = "",
   ...props
 }: PropertyDisplayProps) {
+  console.log("property display", property);
   const { name, icon, color } = property;
   const label =
     NodePodPropToLabelMap[name as keyof typeof NodePodPropToLabelMap] || name;

src/components/Topology/TopologyCard/TopologyCard.stories.tsx

@@ -1,7 +1,7 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { Topology } from "../../../api/types/topology";
 import { Size } from "../../../types";
-import { TopologyCard } from "./index";
+import { TopologyCard } from "./TopologyCard";
 
 export default {
   title: "TopologyCard",

src/components/Topology/TopologyCard/index.tsx renamed to src/components/Topology/TopologyCard/TopologyCard.tsx

@@ -13,7 +13,7 @@ import { HealthChecksSummary } from "../../Canary/HealthChecksSummary";
 import { HealthSummary } from "../../Canary/HealthSummary";
 import IncidentCardSummary from "../../Incidents/IncidentCardSummary";
 import { CardMetrics } from "./CardMetrics";
-import { PropertyDisplay } from "./Property";
+import TopologyCardPropertiesColumn from "./TopologyCardPropertiesColumn";
 import { TopologyConfigAnalysisLine } from "./TopologyConfigAnalysisLine";
 import { TopologyDropdownMenu } from "./TopologyDropdownMenu";
 
@@ -186,6 +186,8 @@ export function TopologyCard({
           </div>
           <div className="m-auto flex flex-1 flex-col overflow-hidden">
             <div
+              role="heading"
+              aria-level={2}
               className="overflow-hidden truncate text-ellipsis align-middle text-15pxinrem font-bold leading-1.21rel"
               title={topology.name}
             >
@@ -241,26 +243,7 @@ export function TopologyCard({
           </div>
         ) : (
           <>
-            {Boolean(properties.length) && (
-              <CustomScroll
-                className="flex-1 py-2 pl-2"
-                showMoreClass="text-xs linear-1.21rel mr-1 cursor-pointer"
-                maxHeight="200px"
-                minChildCount={6}
-              >
-                {properties.map((property, index) => (
-                  <PropertyDisplay
-                    key={index}
-                    property={property}
-                    className={
-                      index === topology.properties!.length - 1
-                        ? "mb-0"
-                        : "mb-1.5"
-                    }
-                  />
-                ))}
-              </CustomScroll>
-            )}
+            <TopologyCardPropertiesColumn properties={properties} />
             <CustomScroll
               className="flex-1 space-y-1.5 py-2 pl-2 pr-2"
               showMoreClass="text-xs linear-1.21rel mr-1 cursor-pointer"

src/components/Topology/TopologyCard/TopologyCardPropertiesColumn.tsx

@@ -0,0 +1,38 @@
+import { Property } from "@flanksource-ui/api/types/topology";
+import { CustomScroll } from "@flanksource-ui/ui/CustomScroll";
+import { PropertyDisplay } from "./Property";
+
+type TopologyCardPropertiesColumnProps = {
+  properties: Property[];
+};
+
+export default function TopologyCardPropertiesColumn({
+  properties
+}: TopologyCardPropertiesColumnProps) {
+  // Filter out properties that are hidden, have no text or value, and are not a
+  // headline property.
+  const noneHeadlineProperties = properties.filter(
+    (i) => !i.headline && i.type !== "hidden" && (i.text || i.value)
+  );
+
+  if (noneHeadlineProperties.length === 0) {
+    return null;
+  }
+
+  return (
+    <CustomScroll
+      className="flex-1 py-2 pl-2"
+      showMoreClass="text-xs linear-1.21rel mr-1 cursor-pointer"
+      maxHeight="200px"
+      minChildCount={6}
+    >
+      {noneHeadlineProperties.map((property, index) => (
+        <PropertyDisplay
+          key={index}
+          property={property}
+          className={index === properties!.length - 1 ? "mb-0" : "mb-1.5"}
+        />
+      ))}
+    </CustomScroll>
+  );
+}

src/components/Topology/TopologyCard/Utils/FormatProperties.tsx

@@ -14,6 +14,7 @@ type FormatPropertyProps = {
 };
 
 export function FormatPropertyURL({ property }: FormatPropertyProps) {
+  console.log("property", property);
   if (property == null) {
     return null;
   }

src/components/Topology/TopologyCard/__tests__/TopologyCard.unit.test.tsx

@@ -0,0 +1,86 @@
+import { Topology } from "@flanksource-ui/api/types/topology";
+import { render, screen } from "@flanksource-ui/test-utils";
+import { rest } from "msw";
+import { setupServer } from "msw/node";
+import { TopologyCard } from "../TopologyCard";
+
+const data: Topology = {
+  id: "01903a93-1d3f-ce22-2203-d558bccbd2d2",
+  topology_id: "0d0f9eca-e1f9-45fa-b803-29d3237d70cc",
+  agent_id: "00000000-0000-0000-0000-000000000000",
+  external_id: "flux (aws)",
+  name: "flux (aws)",
+  namespace: "mission-control",
+  labels: {
+    "app.kubernetes.io/managed-by": "Helm",
+    "helm.toolkit.fluxcd.io/name": "mission-control-flux",
+    "helm.toolkit.fluxcd.io/namespace": "mission-control"
+  },
+  hidden: true,
+  status: "warning",
+  health: "warning",
+  description: "",
+  status_reason: "",
+  schedule: "@every 5m",
+  icon: "flux",
+  type: "Topology",
+  summary: {
+    healthy: 4,
+    warning: 20,
+    info: 8,
+    insights: {
+      // @ts-expect-error
+      reliability: {
+        low: 2
+      }
+    },
+    // @ts-expect-error
+    checks: {
+      healthy: 34,
+      unhealthy: 4
+    }
+  },
+  is_leaf: false,
+  created_at: "2024-06-21T11:33:58.207353Z",
+  updated_at: "2024-08-23T17:00:21.522058Z",
+  parents: ["01903a93-1d84-9dd8-7b27-dab78df75197"]
+};
+
+const server = setupServer(
+  rest.get("/api/canary/api/topology", (req, res, ctx) => {
+    return res(
+      ctx.status(204),
+      ctx.json({
+        components: [data]
+      })
+    );
+  })
+);
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+test("it should render card with data from props", () => {
+  render(<TopologyCard topology={data} />);
+
+  expect(
+    screen.getAllByRole("link", {
+      name: /flux \(aws\)/i
+    })[0]
+  ).toHaveAttribute("href", "/topology/01903a93-1d3f-ce22-2203-d558bccbd2d2");
+});
+
+test("it should render card with data from api", async () => {
+  render(<TopologyCard topologyId="01903a93-1d3f-ce22-2203-d558bccbd2d2" />);
+
+  await screen.findAllByRole("link", {
+    name: /flux \(aws\)/i
+  });
+
+  expect(
+    screen.getAllByRole("link", {
+      name: /flux \(aws\)/i
+    })[0]
+  ).toHaveAttribute("href", "/topology/01903a93-1d3f-ce22-2203-d558bccbd2d2");
+});

src/components/Topology/TopologyPopover/topologyPreference.tsx

@@ -1,14 +1,12 @@
+import { useOnMouseActivity } from "@flanksource-ui/hooks/useMouseActivity";
+import { Size } from "@flanksource-ui/types";
+import { ClickableSvg } from "@flanksource-ui/ui/ClickableSvg/ClickableSvg";
+import { Toggle } from "@flanksource-ui/ui/FormControls/Toggle";
 import clsx from "clsx";
-import { FaCog } from "react-icons/fa";
-
-import { CardWidth } from "../TopologyCard";
-
 import { LegacyRef } from "react";
+import { FaCog } from "react-icons/fa";
 import { useSearchParams } from "react-router-dom";
-import { useOnMouseActivity } from "../../../hooks/useMouseActivity";
-import { Size } from "../../../types";
-import { ClickableSvg } from "../../../ui/ClickableSvg/ClickableSvg";
-import { Toggle } from "../../../ui/FormControls/Toggle";
+import { CardWidth } from "../TopologyCard/TopologyCard";
 
 export function getCardWidth() {
   let value: any = localStorage.getItem("topology_card_width");

src/pages/TopologyCard.tsx

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { useParams } from "react-router-dom";
 import { getTopology } from "../api/services/topology";
 import { InfoMessage } from "../components/InfoMessage";
-import { TopologyCard } from "../components/Topology/TopologyCard";
+import { TopologyCard } from "../components/Topology/TopologyCard/TopologyCard";
 import { Head } from "../ui/Head";
 
 export function TopologyCardPage() {

src/pages/TopologyPage.tsx

@@ -5,7 +5,7 @@ import { SearchLayout } from "@flanksource-ui/components/Layout/SearchLayout";
 import { toastError } from "@flanksource-ui/components/Toast/toast";
 import TopologySidebar from "@flanksource-ui/components/Topology/Sidebar/TopologySidebar";
 import { TopologyBreadcrumbs } from "@flanksource-ui/components/Topology/TopologyBreadcrumbs";
-import { TopologyCard } from "@flanksource-ui/components/Topology/TopologyCard";
+import { TopologyCard } from "@flanksource-ui/components/Topology/TopologyCard/TopologyCard";
 import TopologyFilterBar from "@flanksource-ui/components/Topology/TopologyPage/TopologyFilterBar";
 import { getCardWidth } from "@flanksource-ui/components/Topology/TopologyPopover/topologyPreference";
 import { Head } from "@flanksource-ui/ui/Head";

src/pages/incident/IncidentDetails.tsx

@@ -20,7 +20,7 @@ import { HypothesisBuilder } from "../../components/Incidents/Hypothesis/Hypothe
 import { HypothesisCommentsViewContainer } from "../../components/Incidents/Hypothesis/HypothesisCommentsViewContainer/HypothesisCommentsViewContainer";
 import EditableIncidentTitleBreadcrumb from "../../components/Incidents/IncidentDetails/EditableIncidentTitleBreadcrumb";
 import { IncidentSidebar } from "../../components/Incidents/IncidentDetails/IncidentSidebar";
-import { TopologyCard } from "../../components/Topology/TopologyCard";
+import { TopologyCard } from "../../components/Topology/TopologyCard/TopologyCard";
 import { useIncidentState } from "../../store/incident.state";
 import { Size } from "../../types";
 import {