From 0c6ef4eaada75e47af236f30828f01d49ad0b70e Mon Sep 17 00:00:00 2001
From: Po Chun Chiu <57251712+EiffelFly@users.noreply.github.com>
Date: Thu, 15 Feb 2024 00:18:34 +0800
Subject: [PATCH] feat(pipeline-builder):  implement the new array data type
 label design (#957)

Because

- We have new label design for array type. To better visualize the
different array and non-array type

This commit

-  implement the new array data type label design
---
 .../components/ReferenceHintDataTypeTag.tsx   | 22 +++++++++++++++++--
 .../GroupByFormatField.tsx                    |  5 ++++-
 .../FieldHead.tsx                             |  5 ++++-
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/toolkit/src/components/ReferenceHintDataTypeTag.tsx b/packages/toolkit/src/components/ReferenceHintDataTypeTag.tsx
index 12bf0e72e..9255726cb 100644
--- a/packages/toolkit/src/components/ReferenceHintDataTypeTag.tsx
+++ b/packages/toolkit/src/components/ReferenceHintDataTypeTag.tsx
@@ -3,14 +3,32 @@ import cn from "clsx";
 export const ReferenceHintDataTypeTag = ({
   className,
   label,
+  isArray,
 }: {
   className?: string;
   label: string;
+  isArray?: boolean;
 }) => {
-  return (
+  return isArray ? (
     <div
       className={cn(
-        "flex h-5 flex-row items-center gap-x-1 rounded bg-semantic-success-bg px-2 py-1",
+        "flex flex-row gap-x-[3px] rounded bg-[#D1FAED] px-[6px] py-[1.5px]",
+        className
+      )}
+    >
+      <p className="my-auto align-middle font-sans text-[11px] font-medium text-semantic-success-default	">
+        Array
+      </p>
+      <div className="flex flex-row items-center rounded bg-semantic-success-bg	px-[6px] py-[1.5px]">
+        <p className="my-auto align-middle font-sans text-[9px] font-medium text-semantic-success-default">
+          {label}
+        </p>
+      </div>
+    </div>
+  ) : (
+    <div
+      className={cn(
+        "flex h-5 flex-row items-center rounded bg-semantic-success-bg px-2 py-1",
         className
       )}
     >
diff --git a/packages/toolkit/src/lib/use-instill-form/components/component-output-reference-hints/GroupByFormatField.tsx b/packages/toolkit/src/lib/use-instill-form/components/component-output-reference-hints/GroupByFormatField.tsx
index 0f9912ae7..d1b74b823 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/component-output-reference-hints/GroupByFormatField.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/component-output-reference-hints/GroupByFormatField.tsx
@@ -16,7 +16,10 @@ export const GroupByFormatField = ({
   return (
     <div className="flex w-full flex-col gap-y-2">
       <div className="flex">
-        <ReferenceHintDataTypeTag label={instillFormat} />
+        <ReferenceHintDataTypeTag
+          isArray={instillFormat.includes("array:")}
+          label={instillFormat.replace("array:", "")}
+        />
       </div>
       <div className="flex w-full flex-row flex-wrap gap-2">
         {hints.map((hint) => (
diff --git a/packages/toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/FieldHead.tsx b/packages/toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/FieldHead.tsx
index 78bc8f7a5..222ffebda 100644
--- a/packages/toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/FieldHead.tsx
+++ b/packages/toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/FieldHead.tsx
@@ -198,7 +198,10 @@ export const FieldHead = ({
                     className="!max-w-[160px] text-semantic-accent-default"
                   />
                 </ReferenceHintTag.Root>
-                <ReferenceHintDataTypeTag label={instillFormat} />
+                <ReferenceHintDataTypeTag
+                  isArray={instillFormat.includes("array:")}
+                  label={instillFormat.replace("array:", "")}
+                />
               </div>
             </div>
           </div>