feat(pipeline-builder): user can have consistent node width between T…

…EST_VIEW and BUILD_VIEW (#957)

Because

- improve UX

This commit

- user can have consistent node width between TEST_VIEW and BUILD_VIEW

packages/toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instill-ai/toolkit",
-  "version": "0.68.3-rc.60",
+  "version": "0.68.3-rc.63",
   "description": "Instill AI's frontend toolkit",
   "repository": "https://github.com/instill-ai/design-system.git",
   "bugs": "https://github.com/instill-ai/design-system/issues",

packages/toolkit/src/view/pipeline-builder/components/connector-node/ConnectorNode.tsx

@@ -438,12 +438,11 @@ export const ConnectorNode = ({ data, id }: NodeProps<ConnectorNodeData>) => {
     <>
       <div
         className={cn(
-          "flex flex-col rounded-sm border-2 border-semantic-bg-primary bg-semantic-bg-base-bg px-3 py-2.5 shadow-md hover:shadow-lg",
+          "flex flex-col w-[340px] rounded-sm border-2 border-semantic-bg-primary bg-semantic-bg-base-bg px-3 py-2.5 shadow-md hover:shadow-lg",
           {
             "outline outline-2 outline-semantic-accent-default outline-offset-1":
               id === selectedConnectorNodeId,
-          },
-          testModeEnabled ? "w-[480px]" : "w-[340px]"
+          }
         )}
       >
         <div className="mb-3 flex flex-row w-full">

packages/toolkit/src/view/pipeline-builder/lib/createGraphLayout.tsx

@@ -4,7 +4,7 @@ import { NodeData } from "../type";
 
 // This is the default dimension of a connector node we have right now
 const CONNECTOR_NODE_DIMENSION = {
-  width: 246,
+  width: 340,
   height: 305,
 };
 

packages/toolkit/src/view/pipeline-builder/use-node-output-fields/useConnectorTestModeOutputFields.tsx

@@ -66,20 +66,16 @@ function getOutputFieldComponent({
   const fields: React.ReactElement[] = [];
 
   for (const property of properties) {
-    const title = property.title ? property.title : property.path ?? null;
+    const title = property.path ? property.path : property.title ?? null;
 
     let propertyValue: any = null;
 
     if (property.type === "array" && !property.instillFormat) {
-      const arrayFields = getOutputFieldComponent({
-        properties: property.items as InstillAIOpenAPIProperty[],
-        trace,
-      });
-
       fields.push(
-        <ArrayObjectField nodeType="connector" title={title}>
-          {arrayFields}
-        </ArrayObjectField>
+        ...getOutputFieldComponent({
+          properties: property.items as InstillAIOpenAPIProperty[],
+          trace,
+        })
       );
     }