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
instill-ai · Feb 5, 2024 · 6e43839 · 6e43839
1 parent d70120f
commit 6e43839
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 290 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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">