From 6e43839d2992ad21a5eb34e126d5c1138349c34a Mon Sep 17 00:00:00 2001
From: Po Chun Chiu <57251712+EiffelFly@users.noreply.github.com>
Date: Mon, 5 Feb 2024 14:58:17 +0800
Subject: [PATCH] fix: fix useInstillForm field's description tooltip break
 words issue (#937)

Because

- The fields of useInstillForm are using the same tooltip to show
complicated description, there break-words rule is not correct
- close https://github.com/instill-ai/community/issues/533

This commit

- fix useInstillForm field's description tooltip break words issue
---
 .../common/FieldDescriptionTooltip.tsx        | 34 ++++++++++++++++
 .../components/common/index.ts                |  1 +
 .../components/regular/BooleanField.tsx       | 34 ++--------------
 .../regular/CredentialTextField.tsx           | 39 ++----------------
 .../regular/OneOfConditionField.tsx           | 39 ++----------------
 .../components/regular/SingleSelectField.tsx  | 39 ++----------------
 .../components/regular/TextAreaField.tsx      | 39 ++----------------
 .../components/regular/TextField.tsx          | 39 ++----------------
 .../smart-hint/SmartHintInfoCard.tsx          | 13 +++---
 .../components/smart-hint/TextArea.tsx        | 40 ++-----------------
 .../components/smart-hint/TextField.tsx       | 40 ++-----------------
 11 files changed, 67 insertions(+), 290 deletions(-)
 create mode 100644 packages/toolkit/src/lib/use-instill-form/components/common/FieldDescriptionTooltip.tsx
 create mode 100644 packages/toolkit/src/lib/use-instill-form/components/common/index.ts

diff --git a/packages/toolkit/src/lib/use-instill-form/components/common/FieldDescriptionTooltip.tsx b/packages/toolkit/src/lib/use-instill-form/components/common/FieldDescriptionTooltip.tsx
new file mode 100644
index 0000000000..e9f4442d23
--- /dev/null
+++ b/packages/toolkit/src/lib/use-instill-form/components/common/FieldDescriptionTooltip.tsx
@@ -0,0 +1,34 @@
+import { Icons, ParagraphWithHTML, Tooltip } from "@instill-ai/design-system";
+import { Nullable } from "../../../type";
+
+export const FieldDescriptionTooltip = ({
+  description,
+}: {
+  description: Nullable<string>;
+}) => {
+  return description ? (
+    <Tooltip.Provider>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <Icons.HelpCircle className="my-auto h-[14px] w-[14px] cursor-pointer stroke-semantic-fg-secondary" />
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content className="w-[360px]" sideOffset={5} side="top">
+            <div className="!rounded-sm !bg-semantic-bg-primary !px-3 !py-2">
+              <ParagraphWithHTML
+                text={description}
+                className="break-words text-semantic-fg-primary product-body-text-4-semibold"
+              />
+            </div>
+            <Tooltip.Arrow
+              className="fill-white"
+              offset={5}
+              width={9}
+              height={6}
+            />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  ) : null;
+};
diff --git a/packages/toolkit/src/lib/use-instill-form/components/common/index.ts b/packages/toolkit/src/lib/use-instill-form/components/common/index.ts
new file mode 100644
index 0000000000..676ecac81b
--- /dev/null
+++ b/packages/toolkit/src/lib/use-instill-form/components/common/index.ts
@@ -0,0 +1 @@
+export * from "./FieldDescriptionTooltip";
diff --git a/packages/toolkit/src/lib/use-instill-form/components/regular/BooleanField.tsx b/packages/toolkit/src/lib/use-instill-form/components/regular/BooleanField.tsx
index 8162a0b7c7..cceec49e42 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/regular/BooleanField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/regular/BooleanField.tsx
@@ -1,6 +1,6 @@
-import { Form, Icons, Switch, Tooltip } from "@instill-ai/design-system";
-import { ParagraphWithHTML } from "@instill-ai/design-system";
+import { Form, Switch } from "@instill-ai/design-system";
 import type { AutoFormFieldBaseProps } from "../../type";
+import { FieldDescriptionTooltip } from "../common";
 
 export const BooleanField = ({
   form,
@@ -29,35 +29,7 @@ export const BooleanField = ({
               >
                 {title}
               </Form.Label>
-              {description ? (
-                <Tooltip.Provider>
-                  <Tooltip.Root>
-                    <Tooltip.Trigger asChild>
-                      <Icons.HelpCircle className="my-auto h-[14px] w-[14px] cursor-pointer stroke-semantic-fg-secondary" />
-                    </Tooltip.Trigger>
-                    <Tooltip.Portal>
-                      <Tooltip.Content
-                        className="w-[360px]"
-                        sideOffset={5}
-                        side="top"
-                      >
-                        <div className="!rounded-sm !bg-semantic-bg-primary !px-3 !py-2">
-                          <ParagraphWithHTML
-                            text={description}
-                            className="break-all text-semantic-fg-primary product-body-text-4-semibold"
-                          />
-                        </div>
-                        <Tooltip.Arrow
-                          className="fill-white"
-                          offset={5}
-                          width={9}
-                          height={6}
-                        />
-                      </Tooltip.Content>
-                    </Tooltip.Portal>
-                  </Tooltip.Root>
-                </Tooltip.Provider>
-              ) : null}
+              <FieldDescriptionTooltip description={description} />
             </div>
             <Form.Control>
               <Switch
diff --git a/packages/toolkit/src/lib/use-instill-form/components/regular/CredentialTextField.tsx b/packages/toolkit/src/lib/use-instill-form/components/regular/CredentialTextField.tsx
index 3a6b189ae3..7a2aa7df8f 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/regular/CredentialTextField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/regular/CredentialTextField.tsx
@@ -1,13 +1,8 @@
 import cn from "clsx";
 import * as React from "react";
-import {
-  Form,
-  Icons,
-  Input,
-  ParagraphWithHTML,
-  Tooltip,
-} from "@instill-ai/design-system";
+import { Form, Input } from "@instill-ai/design-system";
 import { AutoFormFieldBaseProps } from "../../type";
+import { FieldDescriptionTooltip } from "../common";
 
 export const CredentialTextField = ({
   form,
@@ -38,35 +33,7 @@ export const CredentialTextField = ({
               >
                 {title}
               </Form.Label>
-              {description ? (
-                <Tooltip.Provider>
-                  <Tooltip.Root>
-                    <Tooltip.Trigger asChild>
-                      <Icons.HelpCircle className="my-auto h-[14px] w-[14px] cursor-pointer stroke-semantic-fg-secondary" />
-                    </Tooltip.Trigger>
-                    <Tooltip.Portal>
-                      <Tooltip.Content
-                        className="w-[360px]"
-                        sideOffset={5}
-                        side="top"
-                      >
-                        <div className="!rounded-sm !bg-semantic-bg-primary !px-3 !py-2">
-                          <ParagraphWithHTML
-                            text={description}
-                            className="break-all text-semantic-fg-primary product-body-text-4-semibold"
-                          />
-                        </div>
-                        <Tooltip.Arrow
-                          className="fill-white"
-                          offset={5}
-                          width={9}
-                          height={6}
-                        />
-                      </Tooltip.Content>
-                    </Tooltip.Portal>
-                  </Tooltip.Root>
-                </Tooltip.Provider>
-              ) : null}
+              <FieldDescriptionTooltip description={description} />
             </div>
             <Form.Control>
               <Input.Root>
diff --git a/packages/toolkit/src/lib/use-instill-form/components/regular/OneOfConditionField.tsx b/packages/toolkit/src/lib/use-instill-form/components/regular/OneOfConditionField.tsx
index 933c831aa3..0507ad2586 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/regular/OneOfConditionField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/regular/OneOfConditionField.tsx
@@ -1,11 +1,5 @@
 import cn from "clsx";
-import {
-  Form,
-  Icons,
-  ParagraphWithHTML,
-  Select,
-  Tooltip,
-} from "@instill-ai/design-system";
+import { Form, Select } from "@instill-ai/design-system";
 import * as React from "react";
 import { recursivelyResetFormData } from "../../transform";
 import { Nullable } from "../../../type";
@@ -14,6 +8,7 @@ import {
   InstillFormTree,
   SelectedConditionMap,
 } from "../../type";
+import { FieldDescriptionTooltip } from "../common";
 
 export const OneOfConditionField = ({
   form,
@@ -84,35 +79,7 @@ export const OneOfConditionField = ({
                   >
                     {title}
                   </Form.Label>
-                  {description ? (
-                    <Tooltip.Provider>
-                      <Tooltip.Root>
-                        <Tooltip.Trigger asChild>
-                          <Icons.HelpCircle className="my-auto h-[14px] w-[14px] cursor-pointer stroke-semantic-fg-secondary" />
-                        </Tooltip.Trigger>
-                        <Tooltip.Portal>
-                          <Tooltip.Content
-                            className="w-[360px]"
-                            sideOffset={5}
-                            side="top"
-                          >
-                            <div className="!rounded-sm !bg-semantic-bg-primary !px-3 !py-2">
-                              <ParagraphWithHTML
-                                text={description}
-                                className="break-all text-semantic-fg-primary product-body-text-4-semibold"
-                              />
-                            </div>
-                            <Tooltip.Arrow
-                              className="fill-white"
-                              offset={5}
-                              width={9}
-                              height={6}
-                            />
-                          </Tooltip.Content>
-                        </Tooltip.Portal>
-                      </Tooltip.Root>
-                    </Tooltip.Provider>
-                  ) : null}
+                  <FieldDescriptionTooltip description={description} />
                 </div>
                 <Select.Root
                   onValueChange={(event) => {
diff --git a/packages/toolkit/src/lib/use-instill-form/components/regular/SingleSelectField.tsx b/packages/toolkit/src/lib/use-instill-form/components/regular/SingleSelectField.tsx
index 455aa7ef2d..42a5ee76eb 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/regular/SingleSelectField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/regular/SingleSelectField.tsx
@@ -1,12 +1,7 @@
 import cn from "clsx";
-import {
-  Form,
-  Icons,
-  ParagraphWithHTML,
-  Select,
-  Tooltip,
-} from "@instill-ai/design-system";
+import { Form, Select } from "@instill-ai/design-system";
 import { AutoFormFieldBaseProps } from "../../type";
+import { FieldDescriptionTooltip } from "../common";
 
 export const SingleSelectField = ({
   form,
@@ -37,35 +32,7 @@ export const SingleSelectField = ({
               >
                 {title}
               </Form.Label>
-              {description ? (
-                <Tooltip.Provider>
-                  <Tooltip.Root>
-                    <Tooltip.Trigger asChild>
-                      <Icons.HelpCircle className="my-auto h-[14px] w-[14px] cursor-pointer stroke-semantic-fg-secondary" />
-                    </Tooltip.Trigger>
-                    <Tooltip.Portal>
-                      <Tooltip.Content
-                        className="w-[360px]"
-                        sideOffset={5}
-                        side="top"
-                      >
-                        <div className="!rounded-sm !bg-semantic-bg-primary !px-3 !py-2">
-                          <ParagraphWithHTML
-                            text={description}
-                            className="break-all text-semantic-fg-primary product-body-text-4-semibold"
-                          />
-                        </div>
-                        <Tooltip.Arrow
-                          className="fill-white"
-                          offset={5}
-                          width={9}
-                          height={6}
-                        />
-                      </Tooltip.Content>
-                    </Tooltip.Portal>
-                  </Tooltip.Root>
-                </Tooltip.Provider>
-              ) : null}
+              <FieldDescriptionTooltip description={description} />
             </div>
             <Select.Root
               onValueChange={(e) => {
diff --git a/packages/toolkit/src/lib/use-instill-form/components/regular/TextAreaField.tsx b/packages/toolkit/src/lib/use-instill-form/components/regular/TextAreaField.tsx
index a882493f2e..e618718798 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/regular/TextAreaField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/regular/TextAreaField.tsx
@@ -1,12 +1,7 @@
 import cn from "clsx";
-import {
-  Form,
-  Icons,
-  ParagraphWithHTML,
-  Textarea,
-  Tooltip,
-} from "@instill-ai/design-system";
+import { Form, Textarea } from "@instill-ai/design-system";
 import { AutoFormFieldBaseProps } from "../../type";
+import { FieldDescriptionTooltip } from "../common";
 
 export const TextAreaField = ({
   form,
@@ -34,35 +29,7 @@ export const TextAreaField = ({
               >
                 {title}
               </Form.Label>
-              {description ? (
-                <Tooltip.Provider>
-                  <Tooltip.Root>
-                    <Tooltip.Trigger asChild>
-                      <Icons.HelpCircle className="my-auto h-[14px] w-[14px] cursor-pointer stroke-semantic-fg-secondary" />
-                    </Tooltip.Trigger>
-                    <Tooltip.Portal>
-                      <Tooltip.Content
-                        className="w-[360px]"
-                        sideOffset={5}
-                        side="top"
-                      >
-                        <div className="!rounded-sm !bg-semantic-bg-primary !px-3 !py-2">
-                          <ParagraphWithHTML
-                            text={description}
-                            className="break-all text-semantic-fg-primary product-body-text-4-semibold"
-                          />
-                        </div>
-                        <Tooltip.Arrow
-                          className="fill-white"
-                          offset={5}
-                          width={9}
-                          height={6}
-                        />
-                      </Tooltip.Content>
-                    </Tooltip.Portal>
-                  </Tooltip.Root>
-                </Tooltip.Provider>
-              ) : null}
+              <FieldDescriptionTooltip description={description} />
             </div>
             <Form.Control>
               <Textarea
diff --git a/packages/toolkit/src/lib/use-instill-form/components/regular/TextField.tsx b/packages/toolkit/src/lib/use-instill-form/components/regular/TextField.tsx
index b521e02f2c..96c5961c48 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/regular/TextField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/regular/TextField.tsx
@@ -1,12 +1,7 @@
 import cn from "clsx";
-import {
-  Form,
-  Icons,
-  Input,
-  ParagraphWithHTML,
-  Tooltip,
-} from "@instill-ai/design-system";
+import { Form, Input } from "@instill-ai/design-system";
 import { AutoFormFieldBaseProps } from "../../type";
+import { FieldDescriptionTooltip } from "../common";
 
 export const TextField = ({
   form,
@@ -35,35 +30,7 @@ export const TextField = ({
               >
                 {title}
               </Form.Label>
-              {description ? (
-                <Tooltip.Provider>
-                  <Tooltip.Root>
-                    <Tooltip.Trigger asChild>
-                      <Icons.HelpCircle className="my-auto h-[14px] w-[14px] cursor-pointer stroke-semantic-fg-secondary" />
-                    </Tooltip.Trigger>
-                    <Tooltip.Portal>
-                      <Tooltip.Content
-                        className="w-[360px]"
-                        sideOffset={5}
-                        side="top"
-                      >
-                        <div className="!rounded-sm !bg-semantic-bg-primary !px-3 !py-2">
-                          <ParagraphWithHTML
-                            text={description}
-                            className="break-all text-semantic-fg-primary product-body-text-4-semibold"
-                          />
-                        </div>
-                        <Tooltip.Arrow
-                          className="fill-white"
-                          offset={5}
-                          width={9}
-                          height={6}
-                        />
-                      </Tooltip.Content>
-                    </Tooltip.Portal>
-                  </Tooltip.Root>
-                </Tooltip.Provider>
-              ) : null}
+              <FieldDescriptionTooltip description={description} />
             </div>
             <Form.Control>
               <Input.Root>
diff --git a/packages/toolkit/src/lib/use-instill-form/components/smart-hint/SmartHintInfoCard.tsx b/packages/toolkit/src/lib/use-instill-form/components/smart-hint/SmartHintInfoCard.tsx
index 7399bdffb6..df75132591 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/smart-hint/SmartHintInfoCard.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/smart-hint/SmartHintInfoCard.tsx
@@ -4,6 +4,7 @@ import { Nullable } from "../../../type";
 import { Tag } from "@instill-ai/design-system";
 import { SmartHintWarning } from "../../type";
 import { SmartHint } from "../../../use-smart-hint";
+import { transformInstillFormatToHumanReadableFormat } from "../../transform";
 
 export const SmartHintInfoCard = ({
   className,
@@ -28,11 +29,13 @@ export const SmartHintInfoCard = ({
 
   return (
     <div className={cn("flex min-h-8 w-full flex-col", className)}>
-      <div className="flex flex-col gap-y-4 p-2">
-        <p className="text-semantic-fg-secondary product-body-text-3-semibold">
-          {highlightedHint ? ` type:${highlightedHint.instillFormat}` : null}
-        </p>
-      </div>
+      {highlightedHint ? (
+        <div className="flex flex-col gap-y-4 p-2">
+          <p className="text-semantic-fg-secondary product-body-text-3-semibold">
+            {`type: ${highlightedHint.instillFormat}`}
+          </p>
+        </div>
+      ) : null}
       {error ? (
         <div className="flex w-full flex-col gap-y-1 bg-semantic-error-bg p-2">
           <p className="text-semantic-error-default product-body-text-3-semibold">
diff --git a/packages/toolkit/src/lib/use-instill-form/components/smart-hint/TextArea.tsx b/packages/toolkit/src/lib/use-instill-form/components/smart-hint/TextArea.tsx
index 7c10e0bdbe..9a8767b6db 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/smart-hint/TextArea.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/smart-hint/TextArea.tsx
@@ -1,13 +1,6 @@
 import cn from "clsx";
 import * as React from "react";
-import {
-  Form,
-  Icons,
-  ParagraphWithHTML,
-  Popover,
-  Textarea,
-  Tooltip,
-} from "@instill-ai/design-system";
+import { Form, Popover, Textarea } from "@instill-ai/design-system";
 import { Nullable } from "../../../type";
 import { useInstillStore } from "../../../use-instill-store";
 
@@ -20,6 +13,7 @@ import { SmartHintList } from "./SmartHintList";
 import { AutoFormFieldBaseProps, SmartHintWarning } from "../../type";
 import { useValidateReferenceAndTemplate } from "./useValidateReferenceAndTemplate";
 import { getFieldPlaceholder } from "./getFieldPlaceholder";
+import { FieldDescriptionTooltip } from "../common";
 
 export const TextArea = ({
   form,
@@ -112,35 +106,7 @@ export const TextArea = ({
               >
                 {isRequired ? `${title} *` : title}
               </Form.Label>
-              {description ? (
-                <Tooltip.Provider>
-                  <Tooltip.Root>
-                    <Tooltip.Trigger asChild>
-                      <Icons.HelpCircle className="my-auto h-[14px] w-[14px] cursor-pointer stroke-semantic-fg-secondary" />
-                    </Tooltip.Trigger>
-                    <Tooltip.Portal>
-                      <Tooltip.Content
-                        className="w-[360px]"
-                        sideOffset={5}
-                        side="top"
-                      >
-                        <div className="!rounded-sm !bg-semantic-bg-primary !px-3 !py-2">
-                          <ParagraphWithHTML
-                            text={description}
-                            className="break-all text-semantic-fg-primary product-body-text-4-semibold"
-                          />
-                        </div>
-                        <Tooltip.Arrow
-                          className="fill-white"
-                          offset={5}
-                          width={9}
-                          height={6}
-                        />
-                      </Tooltip.Content>
-                    </Tooltip.Portal>
-                  </Tooltip.Root>
-                </Tooltip.Provider>
-              ) : null}
+              <FieldDescriptionTooltip description={description} />
             </div>
             <Popover.Root
               open={smartHintsPopoverIsOpen}
diff --git a/packages/toolkit/src/lib/use-instill-form/components/smart-hint/TextField.tsx b/packages/toolkit/src/lib/use-instill-form/components/smart-hint/TextField.tsx
index 1e43d56e85..f0a70e7c30 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/smart-hint/TextField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/smart-hint/TextField.tsx
@@ -1,13 +1,6 @@
 import cn from "clsx";
 import * as React from "react";
-import {
-  Form,
-  Icons,
-  Input,
-  ParagraphWithHTML,
-  Popover,
-  Tooltip,
-} from "@instill-ai/design-system";
+import { Form, Input, Popover } from "@instill-ai/design-system";
 import { Nullable } from "../../../type";
 import { useInstillStore } from "../../../use-instill-store";
 
@@ -20,6 +13,7 @@ import { SmartHintList } from "./SmartHintList";
 import { AutoFormFieldBaseProps, SmartHintWarning } from "../../type";
 import { useValidateReferenceAndTemplate } from "./useValidateReferenceAndTemplate";
 import { getFieldPlaceholder } from "./getFieldPlaceholder";
+import { FieldDescriptionTooltip } from "../common";
 
 export const TextField = ({
   fieldKey,
@@ -115,35 +109,7 @@ export const TextField = ({
                   {isRequired ? `${title} *` : title}
                 </Form.Label>
 
-                {shortDescription ? (
-                  <Tooltip.Provider>
-                    <Tooltip.Root>
-                      <Tooltip.Trigger asChild>
-                        <Icons.HelpCircle className="my-auto h-[14px] w-[14px] cursor-pointer stroke-semantic-fg-secondary" />
-                      </Tooltip.Trigger>
-                      <Tooltip.Portal>
-                        <Tooltip.Content
-                          className="w-[360px]"
-                          sideOffset={5}
-                          side="top"
-                        >
-                          <div className="!rounded-sm !bg-semantic-bg-primary !px-3 !py-2">
-                            <ParagraphWithHTML
-                              text={description}
-                              className="break-all text-semantic-fg-primary product-body-text-4-semibold"
-                            />
-                          </div>
-                          <Tooltip.Arrow
-                            className="fill-white"
-                            offset={5}
-                            width={9}
-                            height={6}
-                          />
-                        </Tooltip.Content>
-                      </Tooltip.Portal>
-                    </Tooltip.Root>
-                  </Tooltip.Provider>
-                ) : null}
+                <FieldDescriptionTooltip description={description} />
               </div>
             ) : null}
             <Popover.Root