fix(config): address swimlane review comments

Avoid modifying the base shadcn hover-card by moving portaled content into a project wrapper used by the swimlane.

Gate the config changes infinite query so table view does not issue the extra swimlane request, and clone fallback icons with the same className and forwarded props as normal icons.

Author: adityathebe

src/api/query-hooks/useConfigChangesHooks.ts

@@ -174,10 +174,12 @@ export function useGetConfigChangesByIDQuery(
 
 export function useGetAllConfigsChangesInfiniteQuery({
   pageSize = 200,
-  paramPrefix
+  paramPrefix,
+  enabled = true
 }: {
   pageSize?: number;
   paramPrefix?: string;
+  enabled?: boolean;
 } = {}) {
   const showChangesFromDeletedConfigs = useShowDeletedConfigs();
   const { timeRangeValue } = useTimeRangeParams(
@@ -221,6 +223,7 @@ export function useGetAllConfigsChangesInfiniteQuery({
       lastPage.changes && lastPage.changes.length < pageSize
         ? undefined
         : allPages.length,
-    keepPreviousData: true
+    keepPreviousData: true,
+    enabled
   });
 }

src/components/Configs/Changes/ConfigChangesSwimlane.tsx

@@ -1,9 +1,9 @@
 import { ConfigChange } from "@flanksource-ui/api/types/configs";
 import {
   HoverCard,
-  HoverCardContent,
   HoverCardTrigger
 } from "@flanksource-ui/components/ui/hover-card";
+import { PortaledHoverCardContent as HoverCardContent } from "@flanksource-ui/components/ui/portaled-hover-card";
 import { Age } from "@flanksource-ui/ui/Age";
 import { ChangeIcon } from "@flanksource-ui/ui/Icons/ChangeIcon";
 import { relativeDateTime } from "@flanksource-ui/utils/date";

src/components/ui/hover-card.tsx

@@ -11,18 +11,16 @@ const HoverCardContent = React.forwardRef<
   React.ElementRef<typeof HoverCardPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
 >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <HoverCardPrimitive.Portal>
-    <HoverCardPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-64 origin-[--radix-hover-card-content-transform-origin] rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </HoverCardPrimitive.Portal>
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 origin-[--radix-hover-card-content-transform-origin] rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
 ));
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 

src/components/ui/portaled-hover-card.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+import { cn } from "@flanksource-ui/lib/utils";
+
+const PortaledHoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Portal>
+    <HoverCardPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-64 origin-[--radix-hover-card-content-transform-origin] rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </HoverCardPrimitive.Portal>
+));
+PortaledHoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { PortaledHoverCardContent };

src/pages/config/ConfigChangesPage.tsx

@@ -92,7 +92,8 @@ export function ConfigChangesPage() {
 
   // Graph view: infinite query
   const infiniteQuery = useGetAllConfigsChangesInfiniteQuery({
-    pageSize: parseInt(pageSize)
+    pageSize: parseInt(pageSize),
+    enabled: isGraphView
   });
 
   // Initialize cursor from base data when live tail is turned on

src/ui/Icons/Icon.tsx

@@ -1,6 +1,7 @@
 import { IconType } from "@flanksource/icons";
 import { IconMap as Icons } from "@flanksource/icons/mi";
 import { isEmpty } from "lodash";
+import { cloneElement, isValidElement } from "react";
 
 type IconMap = Record<string, string>;
 export const aliases: IconMap = {
@@ -1005,7 +1006,30 @@ export function Icon({
   const Icon = findIcon(name, secondary, iconWithColor);
 
   if (!Icon || !Icon.SVG) {
-    return fallback ? (fallback as React.ReactElement) : null;
+    if (!fallback) {
+      return null;
+    }
+
+    if (isValidElement(fallback)) {
+      const fallbackElement = fallback as React.ReactElement<{
+        className?: string;
+      }>;
+      return (
+        <>
+          {prefix}{" "}
+          {cloneElement(fallbackElement, {
+            ...props,
+            className: `inline-block fill-current object-center ${className} ${fallbackElement.props.className ?? ""}`
+          })}
+        </>
+      );
+    }
+
+    return (
+      <>
+        {prefix} {fallback}
+      </>
+    );
   }
 
   return (