From f67073a03da540899688d8f0912f1d9829d5087f Mon Sep 17 00:00:00 2001
From: thewbuk <57405495+thewbuk@users.noreply.github.com>
Date: Wed, 31 Jul 2024 16:34:35 +0100
Subject: [PATCH] fix dialog and floating tooltip

---
 .../components/CreateKnowledgeBaseCard.tsx    |  35 +++---
 .../components/CreateKnowledgeDialog.tsx      | 107 +++++++++---------
 2 files changed, 77 insertions(+), 65 deletions(-)

diff --git a/packages/toolkit/src/view/knowledge/components/CreateKnowledgeBaseCard.tsx b/packages/toolkit/src/view/knowledge/components/CreateKnowledgeBaseCard.tsx
index 6234336b9c..efeb71adc2 100644
--- a/packages/toolkit/src/view/knowledge/components/CreateKnowledgeBaseCard.tsx
+++ b/packages/toolkit/src/view/knowledge/components/CreateKnowledgeBaseCard.tsx
@@ -77,7 +77,6 @@ const Menu = ({ onDelete, onEdit, onDuplicate, disabled }: MenuProps) => {
     </React.Fragment>
   );
 };
-
 type CreateKnowledgeBaseCardProps = {
   knowledgeBase: KnowledgeBase;
   onCardClick: () => void;
@@ -101,6 +100,7 @@ export const CreateKnowledgeBaseCard = ({
   const [deleteDialogIsOpen, setDeleteDialogIsOpen] = React.useState(false);
   const [editDialogIsOpen, setEditDialogIsOpen] = React.useState(false);
   const [isHovered, setIsHovered] = React.useState(false);
+  const [mousePosition, setMousePosition] = React.useState({ x: 0, y: 0 });
 
   const { accessToken, enabledQuery } = useInstillStore(
     useShallow((store: InstillStore) => ({
@@ -127,12 +127,12 @@ export const CreateKnowledgeBaseCard = ({
       : [];
 
     return `
-    Converting pipeline ID: ${knowledgeBase.convertingPipelines?.[0] || "N/A"}
-    Splitting pipeline ID: ${knowledgeBase.splittingPipelines?.[0] || "N/A"}
-    Embedding pipeline ID: ${knowledgeBase.embeddingPipelines?.[0] || "N/A"}
-    Files #: ${knowledgeBase.totalFiles || "N/A"}
-    Text Chunks #: ${textChunks.length}
-  `;
+Converting pipeline ID: ${knowledgeBase.convertingPipelines?.[0] || "N/A"}
+Splitting pipeline ID: ${knowledgeBase.splittingPipelines?.[0] || "N/A"}
+Embedding pipeline ID: ${knowledgeBase.embeddingPipelines?.[0] || "N/A"}
+Files #: ${knowledgeBase.totalFiles || "N/A"}
+Text Chunks #: ${textChunks.length}
+    `.trim();
   }, [isHovered, isLoadingChunks, chunks, knowledgeBase]);
 
   const handleDelete = (e: React.MouseEvent) => {
@@ -159,6 +159,13 @@ export const CreateKnowledgeBaseCard = ({
     await onUpdateKnowledgeBase(data, knowledgeBase.kbId);
     setEditDialogIsOpen(false);
   };
+  const handleMouseMove = (e: React.MouseEvent) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    setMousePosition({
+      x: e.clientX - rect.left - 300,
+      y: e.clientY - rect.top - 150,
+    });
+  };
 
   return (
     <React.Fragment>
@@ -170,6 +177,7 @@ export const CreateKnowledgeBaseCard = ({
               onClick={onCardClick}
               onMouseEnter={() => setIsHovered(true)}
               onMouseLeave={() => setIsHovered(false)}
+              onMouseMove={handleMouseMove}
             >
               <div className="flex items-center justify-between">
                 <div className="product-headings-heading-4">
@@ -195,14 +203,15 @@ export const CreateKnowledgeBaseCard = ({
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Content
-              className="w-[360px] rounded-md bg-semantic-bg-primary p-4 shadow-lg !z-10"
-              sideOffset={5}
-              side="bottom"
-              align="end"
+              className="absolute w-[300px] max-w-[300px] rounded-md bg-semantic-bg-primary p-4 shadow-lg !z-10"
+              style={{
+                left: `${mousePosition.x}px`,
+                top: `${mousePosition.y}px`,
+              }}
             >
-              <pre className="whitespace-pre-wrap text-xs">
+              <div className="whitespace-pre-wrap text-xs break-words">
                 {tooltipContent}
-              </pre>
+              </div>
               <Tooltip.Arrow className="fill-semantic-bg-primary" />
             </Tooltip.Content>
           </Tooltip.Portal>
diff --git a/packages/toolkit/src/view/knowledge/components/CreateKnowledgeDialog.tsx b/packages/toolkit/src/view/knowledge/components/CreateKnowledgeDialog.tsx
index 6d924d2e64..93e1242fe7 100644
--- a/packages/toolkit/src/view/knowledge/components/CreateKnowledgeDialog.tsx
+++ b/packages/toolkit/src/view/knowledge/components/CreateKnowledgeDialog.tsx
@@ -102,59 +102,62 @@ export const CreateKnowledgeDialog = ({
               });
             })}
           >
-            <Form.Field
-              control={form.control}
-              name="namespaceId"
-              render={({ field }) => (
-                <Form.Item>
-                  <Form.Label className="text-semantic-fg-primary product-button-button-2">
-                    Owner
-                  </Form.Label>
-                  <Form.Control>
-                    <EntitySelector
-                      value={field.value}
-                      onChange={(value: string) => {
-                        setValue("namespaceId", value, {
-                          shouldValidate: true,
-                        });
-                      }}
-                      data={userNamespaces}
-                    />
-                  </Form.Control>
-                  <Form.Message />
-                </Form.Item>
-              )}
-            />
-            <Icons.SlashDivider className="h-8 w-8 stroke-semantic-fg-secondary stroke-1" />
-            <Form.Field
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <Form.Item className="-ml-4 w-1/2">
-                  <Form.Label className="text-semantic-fg-primary product-button-button-2">
-                    Knowledge base name
-                  </Form.Label>
-                  <Form.Control>
-                    <Input.Root>
-                      <Input.Core
-                        {...field}
-                        id={field.name}
-                        placeholder="Knowledge base name"
+            <div className="flex items-center justify-start gap-4">
+              <Form.Field
+                control={form.control}
+                name="namespaceId"
+                render={({ field }) => (
+                  <Form.Item className="w-1/2">
+                    <Form.Label className="text-semantic-fg-primary product-button-button-2">
+                      Owner
+                    </Form.Label>
+                    <Form.Control>
+                      <EntitySelector
+                        value={field.value}
+                        onChange={(value: string) => {
+                          setValue("namespaceId", value, {
+                            shouldValidate: true,
+                          });
+                        }}
+                        data={userNamespaces}
                       />
-                    </Input.Root>
-                  </Form.Control>
-                  <div className="h-6">
-                    {nameValue && !isNameValid && (
-                      <p className="!mt-0.5 text-semantic-fg-secondary product-body-text-4-regular">
-                        Name will be transformed to: {formattedName}
-                      </p>
-                    )}
-                    <Form.Message className="!mt-0.5 product-body-text-4-regular" />
-                  </div>
-                </Form.Item>
-              )}
-            />
-
+                    </Form.Control>
+                    <div className="h-6">
+                      <Form.Message className="!mt-0.5 product-body-text-4-regular" />
+                    </div>
+                  </Form.Item>
+                )}
+              />
+              <Icons.SlashDivider className="h-8 w-8 stroke-semantic-fg-secondary stroke-1" />
+              <Form.Field
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <Form.Item className="-ml-4 w-1/2">
+                    <Form.Label className="text-semantic-fg-primary product-button-button-2">
+                      Knowledge base name
+                    </Form.Label>
+                    <Form.Control>
+                      <Input.Root>
+                        <Input.Core
+                          {...field}
+                          id={field.name}
+                          placeholder="Knowledge base name"
+                        />
+                      </Input.Root>
+                    </Form.Control>
+                    <div className="h-6">
+                      {nameValue && !isNameValid && (
+                        <p className="!mt-0.5 text-semantic-fg-secondary product-body-text-4-regular">
+                          Name will be transformed to: {formattedName}
+                        </p>
+                      )}
+                      <Form.Message className="!mt-0.5 product-body-text-4-regular" />
+                    </div>
+                  </Form.Item>
+                )}
+              />
+            </div>
             <Form.Field
               control={form.control}
               name="description"