feat: move include/exclude buttons to the tooltip

flanksource · Jul 30, 2024 · dd79fe9 · dd79fe9
1 parent 75d7d7a
commit dd79fe9
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 23 deletions.
diff --git a/src/components/Configs/ConfigList/Cells/ConfigListTagsCell.tsx b/src/components/Configs/ConfigList/Cells/ConfigListTagsCell.tsx
@@ -6,17 +6,19 @@ import { ConfigItem } from "../../../../api/types/configs";
 
 type ConfigListTagsCellProps<
   T extends {
-    tags: Record<string, any>;
+    tags?: Record<string, any>;
+    id: string;
   }
-> = Pick<CellContext<Pick<T, "tags">, any>, "getValue"> & {
+> = Pick<CellContext<Pick<T, "tags" | "id">, any>, "getValue" | "row"> & {
   hideGroupByView?: boolean;
   label?: string;
   enableFilterByTag?: boolean;
 };
 
 export default function ConfigListTagsCell<
-  T extends { tags: Record<string, any> }
+  T extends { tags?: Record<string, any>; id: string }
 >({
+  row,
   getValue,
   hideGroupByView = false,
   enableFilterByTag = false
@@ -100,6 +102,7 @@ export default function ConfigListTagsCell<
             key,
             value
           }}
+          id={row.original.id}
           key={value}
           variant="gray"
           onFilterByTag={enableFilterByTag ? onFilterByTag : undefined}

diff --git a/src/ui/Tags/Tag.tsx b/src/ui/Tags/Tag.tsx
@@ -27,40 +27,51 @@ export function Tag({
   className = "flex flex-row px-1 py-0.5 rounded-md text-xs whitespace-nowrap break-inside-avoid-column",
   variant = "gray",
   tag,
+  id,
   onFilterByTag,
   ...props
 }: TagProps) {
   return (
     <>
       <div
-        data-tooltip-content={tag ? `${tag.key}: ${tag.value}` : undefined}
-        data-tooltip-id={tag ? `${tag.key}-${tag.value}` : undefined}
-        data-tooltip-class-name="z-[9999]"
+        data-tooltip-id={`${id}-${tag?.key}-${tag?.value}`}
+        data-tooltip-delay-show={100}
         className={clsx(
           className,
           variant === "gray" && "bg-gray-100 text-gray-600",
-          variant === "blue" && "bg-blue-100 text-blue-800",
-          onFilterByTag && "group"
+          variant === "blue" && "bg-blue-100 text-blue-800"
         )}
         {...props}
       >
         {children}
-        {onFilterByTag && tag && (
-          <div className="hidden flex-row gap-1 px-1 group-hover:flex">
-            <IconButton
-              onClick={(e) => onFilterByTag(e, tag, "include")}
-              icon={<PiMagnifyingGlassPlusThin size={18} />}
-              title="Include"
-            />
-            <IconButton
-              onClick={(e) => onFilterByTag(e, tag, "exclude")}
-              icon={<PiMagnifyingGlassMinusThin size={18} />}
-              title="Exclude"
-            />
-          </div>
-        )}
       </div>
-      {tag && <Tooltip id={`${tag.key}-${tag.value}`} />}
+      {tag && (
+        <Tooltip
+          id={`${id}-${tag.key}-${tag.value}`}
+          className="z-[999999] bg-gray-400"
+          clickable
+        >
+          <div className="flex flex-col gap-1">
+            <p className="flex-1">
+              {tag.key}: {tag.value}
+            </p>
+            {onFilterByTag && tag && (
+              <div className="flex flex-row justify-center gap-1 px-1">
+                <IconButton
+                  onClick={(e) => onFilterByTag(e, tag, "include")}
+                  icon={<PiMagnifyingGlassPlusThin size={18} />}
+                  title="Include"
+                />
+                <IconButton
+                  onClick={(e) => onFilterByTag(e, tag, "exclude")}
+                  icon={<PiMagnifyingGlassMinusThin size={18} />}
+                  title="Exclude"
+                />
+              </div>
+            )}
+          </div>
+        </Tooltip>
+      )}
     </>
   );
 }