From 6f96aebc271d190b1854a275a490b8707ec89cf2 Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Thu, 19 Dec 2024 00:16:54 -0800
Subject: [PATCH] Enhance Tooltip component by adding CircleHelp icon and fix
 instructions in script component (#910)

* Enhance Tooltip component by adding CircleHelp icon and adjusting layout. Updated TooltipContent max width for better display.

* Refactor ScriptItem and InstallCommand components to improve conditional rendering based on item type. Updated text to clarify usage instructions for 'misc' type scripts.
---
 frontend/src/app/scripts/_components/ScriptItem.tsx   |  2 +-
 .../_components/ScriptItems/InstallCommand.tsx        | 11 ++++++-----
 .../app/scripts/_components/ScriptItems/Tooltips.tsx  |  7 +++++--
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/scripts/_components/ScriptItem.tsx b/frontend/src/app/scripts/_components/ScriptItem.tsx
index 835fce57..fb9e64e0 100644
--- a/frontend/src/app/scripts/_components/ScriptItem.tsx
+++ b/frontend/src/app/scripts/_components/ScriptItem.tsx
@@ -81,7 +81,7 @@ function ScriptItem({
               <div className="mt-4 rounded-lg border bg-accent/50">
                 <div className="flex gap-3 px-4 py-2">
                   <h2 className="text-lg font-semibold">
-                    How to {item.type ? "install" : "use"}
+                    How to {item.type == "misc" ? "use" : "install"}
                   </h2>
                   <Tooltips item={item} />
                 </div>
diff --git a/frontend/src/app/scripts/_components/ScriptItems/InstallCommand.tsx b/frontend/src/app/scripts/_components/ScriptItems/InstallCommand.tsx
index 58525f6b..26d941cf 100644
--- a/frontend/src/app/scripts/_components/ScriptItems/InstallCommand.tsx
+++ b/frontend/src/app/scripts/_components/ScriptItems/InstallCommand.tsx
@@ -28,15 +28,16 @@ export default function InstallCommand({ item }: { item: Script }) {
             time and minimal system resource usage. You are also obliged to
             adhere to updates provided by the package maintainer.
           </>
-        ) : item.type ? (
+        ) : item.type == "misc" ? (
           <>
-            To create a new Proxmox VE {item.name}{" "}
-            {getDisplayValueFromType(item.type)}, run the command below in the
-            Proxmox VE Shell.
+            To use the {item.name} script, run the command below in the shell.
           </>
         ) : (
           <>
-            To use the {item.name} script, run the command below in the shell.
+            {" "}
+            To create a new Proxmox VE {item.name}{" "}
+            {getDisplayValueFromType(item.type)}, run the command below in the
+            Proxmox VE Shell.
           </>
         )}
       </p>
diff --git a/frontend/src/app/scripts/_components/ScriptItems/Tooltips.tsx b/frontend/src/app/scripts/_components/ScriptItems/Tooltips.tsx
index 7e70b68e..9adb58b7 100644
--- a/frontend/src/app/scripts/_components/ScriptItems/Tooltips.tsx
+++ b/frontend/src/app/scripts/_components/ScriptItems/Tooltips.tsx
@@ -6,6 +6,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { Script } from "@/lib/types";
+import { CircleHelp } from "lucide-react";
 import React from "react";
 
 interface TooltipProps {
@@ -18,9 +19,11 @@ const TooltipBadge: React.FC<TooltipProps> = ({ variant, label, content }) => (
   <TooltipProvider>
     <Tooltip delayDuration={100}>
       <TooltipTrigger className="flex items-center">
-        <Badge variant={variant}>{label}</Badge>
+        <Badge variant={variant} className="flex items-center gap-1">
+          {label} <CircleHelp className="size-3" />
+        </Badge>
       </TooltipTrigger>
-      <TooltipContent side="bottom" className="text-sm">
+      <TooltipContent side="bottom" className="text-sm max-w-64">
         {content}
       </TooltipContent>
     </Tooltip>