feat(toolkit): user can better identify some nested output on connect…

…or nodes (#954)

Because

- improve UX

This commit

- user can better identify some nested output on connector nodes

packages/toolkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instill-ai/toolkit",
-  "version": "0.68.3-rc.53",
+  "version": "0.68.3-rc.55",
   "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/data/DataComponentForm.tsx

@@ -155,7 +155,7 @@ export const DataResourceSchema = z
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
           message: "object_name is required",
-          path: ["object_name"],
+          path: ["input.object_name"],
         });
       } else {
         const result = validateIntillUpstreamTypes({
@@ -167,7 +167,7 @@ export const DataResourceSchema = z
           ctx.addIssue({
             code: z.ZodIssueCode.custom,
             message: result.error,
-            path: ["object_name"],
+            path: ["input.object_name"],
           });
         }
       }
@@ -176,7 +176,7 @@ export const DataResourceSchema = z
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
           message: "data is required",
-          path: ["data"],
+          path: ["input.data"],
         });
       } else {
         const result = validateIntillUpstreamTypes({
@@ -188,7 +188,7 @@ export const DataResourceSchema = z
           ctx.addIssue({
             code: z.ZodIssueCode.custom,
             message: result.error,
-            path: ["data"],
+            path: ["input.data"],
           });
         }
       }
@@ -230,10 +230,23 @@ export const DataComponentForm = ({
       ...configuration,
       connector_definition_name: connectorDefinitionName,
       input: configuration.input ? configuration.input : {},
+      task: configuration.task
+        ? configuration.task
+        : connectorDefinitionName === "connector-definitions/data-gcs"
+        ? "TASK_UPLOAD"
+        : "",
     },
   });
 
-  const { reset, watch } = form;
+  const {
+    reset,
+    watch,
+    formState: { errors },
+  } = form;
+
+  React.useEffect(() => {
+    console.log(errors);
+  }, [errors]);
 
   React.useEffect(() => {
     reset({
@@ -247,6 +260,8 @@ export const DataComponentForm = ({
     if (!selectedConnectorNodeId) return;
     const modifiedData = recursiveReplaceNullAndEmptyStringWithUndefined(data);
 
+    console.log(modifiedData);
+
     const newNodes = nodes.map((node) => {
       if (
         node.id === selectedConnectorNodeId &&
@@ -269,8 +284,6 @@ export const DataComponentForm = ({
       return node;
     });
 
-    console.log(newNodes);
-
     updateNodes(() => newNodes);
 
     const allReferences: PipelineComponentReference[] = [];
@@ -319,7 +332,7 @@ export const DataComponentForm = ({
                     </Input.Root>
                   </Form.Control>
                   <Form.Description>
-                    The name of the object to be created
+                    The name of the object to be created.
                   </Form.Description>
                   <Form.Message />
                 </Form.Item>
@@ -348,7 +361,7 @@ export const DataComponentForm = ({
                     </Input.Root>
                   </Form.Control>
                   <Form.Description>
-                    The data to be saved in the object
+                    The data to be saved in the object.
                   </Form.Description>
                   <Form.Message />
                 </Form.Item>

packages/toolkit/src/view/pipeline-builder/RightPanel.tsx

@@ -41,35 +41,6 @@ export const RightPanel = () => {
           <Icons.X className="h-4 w-4 stroke-semantic-fg-primary" />
         </Button>
       </div>
-      {selectedConnectorNode ? (
-        <div className="mb-5 flex w-full flex-row gap-x-6">
-          <div className="my-auto text-semantic-fg-primary product-body-text-2-semibold">
-            Resource
-          </div>
-          {selectedConnectorNode.data.nodeType !== "end" &&
-          selectedConnectorNode.data.nodeType !== "start" ? (
-            <div className="flex flex-row gap-x-2 p-2">
-              <div className="flex flex-row gap-x-1">
-                <div className="p-2.5">
-                  <ImageWithFallback
-                    src={`/icons/${selectedConnectorNode.data.component?.connector_definition?.vendor}/${selectedConnectorNode.data.component?.connector_definition?.icon}`}
-                    width={16}
-                    height={15}
-                    alt={`${selectedConnectorNode.data.component?.connector_definition?.title}-icon`}
-                    fallbackImg={
-                      <Icons.Box className="h-8 w-8 stroke-semantic-fg-primary" />
-                    }
-                  />
-                </div>
-                <p className="my-auto w-[200px] truncate text-semantic-fg-primary product-headings-heading-5">
-                  {selectedConnectorNode.data.component?.resource?.id}
-                </p>
-              </div>
-              <Icons.Check className="my-auto h-5 w-5 stroke-semantic-fg-primary" />
-            </div>
-          ) : null}
-        </div>
-      ) : null}
       <div className="relative mb-6 w-full">
         <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-semantic-bg-primary px-2">
           <p className="text-semantic-fg-secondary product-body-text-3-medium">

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

@@ -896,7 +896,7 @@ export const ConnectorNode = ({ data, id }: NodeProps<ConnectorNodeData>) => {
                               key={
                                 property.title ? property.title : property.path
                               }
-                              className="w-full rounded-[6px] bg-semantic-bg-primary p-2"
+                              className="w-full rounded-[6px] bg-semantic-bg-primary"
                             >
                               <div className="flex flex-col gap-y-2">
                                 {items.map((item) => (

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

@@ -55,7 +55,7 @@ const InputPropertyValue = (props: {
 
   if (!reference || !reference.nodeId) {
     return propertyConfiguration ? (
-      <div className="min-h-[32px] min-w-[100px] break-all rounded-sm border border-semantic-bg-line px-2 py-1.5 product-body-text-3-regular">
+      <div className="min-h-[32px] min-w-[100px] break-all rounded-sm text-semantic-fg-secondary border border-semantic-bg-line px-2 py-1.5 product-body-text-3-regular">
         {propertyConfiguration}
       </div>
     ) : null;

packages/toolkit/src/view/pipeline-builder/lib/getConnectorInputOutputSchema.ts

@@ -21,42 +21,53 @@ export function getConnectorInputOutputSchema(
       // If the component has task field in its component_configuration, it means it has complicate category
       // The <default> category will be replaces with the task in the component_configuration
 
-      const hasTaskField = checkHasTaskField(
-        component.connector_definition.spec.component_specification
-      );
-
-      if (hasTaskField) {
-        if (component.configuration.task) {
-          inputSchema = (
+      if (component.configuration.task) {
+        inputSchema = (
+          (
+            (
+              component?.connector_definition?.spec.openapi_specifications[
+                component.configuration.task
+              ].paths["/execute"]?.post
+                ?.requestBody as OpenAPIV3.RequestBodyObject
+            ).content["application/json"]?.schema as OpenAPIV3.SchemaObject
+          ).properties?.inputs as OpenAPIV3.ArraySchemaObject
+        ).items as OpenAPIV3.SchemaObject;
+        outputSchema = (
+          (
             (
               (
                 component?.connector_definition?.spec.openapi_specifications[
                   component.configuration.task
-                ].paths["/execute"]?.post
-                  ?.requestBody as OpenAPIV3.RequestBodyObject
-              ).content["application/json"]?.schema as OpenAPIV3.SchemaObject
-            ).properties?.inputs as OpenAPIV3.ArraySchemaObject
-          ).items as OpenAPIV3.SchemaObject;
-          outputSchema = (
+                ].paths["/execute"]?.post?.responses[
+                  "200"
+                ] as OpenAPIV3.ResponseObject
+              ).content as { [key: string]: OpenAPIV3.MediaTypeObject }
+            )["application/json"]?.schema as OpenAPIV3.SchemaObject
+          ).properties?.outputs as OpenAPIV3.ArraySchemaObject
+        ).items as OpenAPIV3.SchemaObject;
+      } else if (
+        component.connector_definition.spec.component_specification.oneOf &&
+        component.connector_definition.spec.component_specification.oneOf
+          .length > 0
+      ) {
+        const defaultTask =
+          ((
             (
-              (
-                (
-                  component?.connector_definition?.spec.openapi_specifications[
-                    component.configuration.task
-                  ].paths["/execute"]?.post?.responses[
-                    "200"
-                  ] as OpenAPIV3.ResponseObject
-                ).content as { [key: string]: OpenAPIV3.MediaTypeObject }
-              )["application/json"]?.schema as OpenAPIV3.SchemaObject
-            ).properties?.outputs as OpenAPIV3.ArraySchemaObject
-          ).items as OpenAPIV3.SchemaObject;
+              component.connector_definition.spec.component_specification
+                .oneOf[0] as JSONSchema7
+            )?.properties?.task as JSONSchema7
+          )?.const as string) ?? null;
+
+        if (!defaultTask) {
+          return { outputSchema, inputSchema };
         }
-      } else {
+
         inputSchema = (
           (
             (
-              component.connector_definition.spec.openapi_specifications.default
-                .paths["/execute"]?.post
+              component?.connector_definition?.spec.openapi_specifications[
+                defaultTask
+              ].paths["/execute"]?.post
                 ?.requestBody as OpenAPIV3.RequestBodyObject
             ).content["application/json"]?.schema as OpenAPIV3.SchemaObject
           ).properties?.inputs as OpenAPIV3.ArraySchemaObject
@@ -65,8 +76,9 @@ export function getConnectorInputOutputSchema(
           (
             (
               (
-                component.connector_definition?.spec.openapi_specifications
-                  .default.paths["/execute"]?.post?.responses[
+                component?.connector_definition?.spec.openapi_specifications[
+                  defaultTask
+                ].paths["/execute"]?.post?.responses[
                   "200"
                 ] as OpenAPIV3.ResponseObject
               ).content as { [key: string]: OpenAPIV3.MediaTypeObject }

packages/toolkit/src/view/pipeline-builder/lib/getPropertiesFromOpenAPISchema.ts

@@ -23,7 +23,8 @@ export function getPropertiesFromOpenAPISchema(
             ...properties,
             ...getPropertiesFromOpenAPISchema(
               value,
-              [...parentKeyList, key].join(".")
+              [...parentKeyList, key].join("."),
+              key
             ),
           ];
         }
@@ -37,10 +38,11 @@ export function getPropertiesFromOpenAPISchema(
         items: getPropertiesFromOpenAPISchema(
           schema.items as OpenAPIV3.SchemaObject,
           parentKey,
-          schema.title,
+          undefined,
           true
         ) as OpenAPIV3.ArraySchemaObject["items"],
         path: parentKey,
+        title: schema.title ? schema.title : title,
       },
     ];
   } else {
@@ -50,7 +52,7 @@ export function getPropertiesFromOpenAPISchema(
       properties.push({
         path: parentKey,
         ...schema,
-        title: title ? title : schema.title,
+        title: schema.title ? schema.title : title,
       });
     }
   }

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { Nullable } from "../../../lib";
+import { ConnectorNodeFieldRoot, EndNodeFieldRoot } from "./FieldRoot";
+
+export type ArrayObjectFieldProps = {
+  nodeType: "end" | "connector";
+  title: Nullable<string>;
+  children: React.ReactNode;
+};
+
+export const ArrayObjectField = (props: ArrayObjectFieldProps) => {
+  const { nodeType, title, children } = props;
+
+  if (nodeType === "connector") {
+    return (
+      <ConnectorNodeFieldRoot title={title} key={`${title}-field`}>
+        {children}
+      </ConnectorNodeFieldRoot>
+    );
+  }
+
+  return (
+    <EndNodeFieldRoot title={title} key={`${title}-field`}>
+      {children}
+    </EndNodeFieldRoot>
+  );
+};

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

@@ -1,19 +1,25 @@
+import cn from "clsx";
 import * as React from "react";
 import { Nullable } from "../../../lib";
 
 export const ConnectorNodeFieldRoot = ({
   key,
   title,
   children,
+  className,
 }: {
   key: string;
   title: Nullable<string>;
   children: React.ReactNode;
+  className?: string;
 }) => {
   return (
     <div
       key={key}
-      className="flex  w-full flex-row flex-wrap gap-2 rounded-[6px] bg-semantic-bg-primary p-2"
+      className={cn(
+        "flex w-full flex-row flex-wrap gap-2 rounded-[6px] bg-semantic-bg-primary p-2",
+        className
+      )}
     >
       <p className="text-semantic-fg-secondary product-body-text-4-semibold">
         {title}
@@ -27,15 +33,20 @@ export const EndNodeFieldRoot = ({
   key,
   title,
   children,
+  className,
 }: {
   key: string;
   title: Nullable<string>;
   children: React.ReactNode;
+  className?: string;
 }) => {
   return (
     <div
       key={key}
-      className="flex w-full flex-col gap-y-2 rounded-[6px] bg-semantic-bg-primary p-2"
+      className={cn(
+        "flex w-full flex-col gap-y-2 rounded-[6px] bg-semantic-bg-primary p-2",
+        className
+      )}
     >
       <p className="text-semantic-fg-primary product-body-text-3-semibold">
         {title}

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

@@ -14,7 +14,7 @@ export const ObjectField = (props: ObjectFieldProps) => {
     return (
       <ConnectorNodeFieldRoot title={title} key={`${title}-field`}>
         <div className="flex w-full">
-          <pre className="whitespace-pre-line max-w-[480px] breal-all flex flex-1 text-semantic-fg-primary product-body-text-4-regular">
+          <pre className="min-h-[16px] whitespace-pre-line max-w-[480px] breal-all flex flex-1 text-semantic-fg-primary product-body-text-4-regular">
             {JSON.stringify(object, null, 2)}
           </pre>
         </div>
@@ -25,7 +25,7 @@ export const ObjectField = (props: ObjectFieldProps) => {
   return (
     <EndNodeFieldRoot title={title} key={`${title}-field`}>
       <div className="flex w-full">
-        <pre className="whitespace-pre-line max-w-[480px] breal-all flex flex-1 text-semantic-fg-primary product-body-text-4-regular">
+        <pre className="min-h-[16px] whitespace-pre-line max-w-[480px] breal-all flex flex-1 text-semantic-fg-primary product-body-text-4-regular">
           {JSON.stringify(object, null, 2)}
         </pre>
       </div>

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

@@ -17,7 +17,7 @@ export const ObjectsField = (props: ObjectsFieldProps) => {
           {objects?.map((object) => (
             <pre
               key={`${title}-${JSON.stringify(object)}-field`}
-              className="whitespace-pre-line max-w-[480px] breal-all flex flex-1 text-semantic-fg-primary product-body-text-4-regular"
+              className="min-h-[16px] whitespace-pre-line max-w-[480px] breal-all flex flex-1 text-semantic-fg-primary product-body-text-4-regular"
             >
               {JSON.stringify(object, null, 2)}
             </pre>
@@ -33,7 +33,7 @@ export const ObjectsField = (props: ObjectsFieldProps) => {
         {objects?.map((object) => (
           <pre
             key={`${title}-${JSON.stringify(object)}-field`}
-            className="whitespace-pre-line max-w-[480px] breal-all flex flex-1 text-semantic-fg-primary product-body-text-4-regular"
+            className="min-h-[16px] whitespace-pre-line max-w-[480px] breal-all flex flex-1 text-semantic-fg-primary product-body-text-4-regular"
           >
             {JSON.stringify(object, null, 2)}
           </pre>