From 7f8e001fd70194fd9e6ffcb303df0a6a0aad915a Mon Sep 17 00:00:00 2001 From: EiffelFly <57251712+EiffelFly@users.noreply.github.com> Date: Thu, 12 Oct 2023 21:38:38 +0800 Subject: [PATCH] feat: user can better identify some nested output --- packages/toolkit/package.json | 2 +- .../src/view/data/DataComponentForm.tsx | 31 ++- .../src/view/pipeline-builder/RightPanel.tsx | 29 -- .../connector-node/ConnectorNode.tsx | 2 +- .../connector-node/InputPropertyItem.tsx | 2 +- .../lib/getConnectorInputOutputSchema.ts | 70 +++-- .../lib/getPropertiesFromOpenAPISchema.ts | 8 +- .../ArrayObjectField.tsx | 27 ++ .../use-node-output-fields/FieldRoot.tsx | 15 +- .../use-node-output-fields/ObjectField.tsx | 4 +- .../use-node-output-fields/ObjectsField.tsx | 4 +- .../use-node-output-fields/TextField.tsx | 4 +- .../use-node-output-fields/TextsField.tsx | 4 +- .../useConnectorTestModeOutputFields.tsx | 253 ++++++++++-------- 14 files changed, 260 insertions(+), 195 deletions(-) create mode 100644 packages/toolkit/src/view/pipeline-builder/use-node-output-fields/ArrayObjectField.tsx diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json index b221e3d8..5368ebec 100644 --- a/packages/toolkit/package.json +++ b/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", diff --git a/packages/toolkit/src/view/data/DataComponentForm.tsx b/packages/toolkit/src/view/data/DataComponentForm.tsx index ee984882..87be41b2 100644 --- a/packages/toolkit/src/view/data/DataComponentForm.tsx +++ b/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 = ({
- {selectedConnectorNode.data.component?.resource?.id} -
-
diff --git a/packages/toolkit/src/view/pipeline-builder/components/connector-node/ConnectorNode.tsx b/packages/toolkit/src/view/pipeline-builder/components/connector-node/ConnectorNode.tsx
index dd63faec..d1a6841f 100644
--- a/packages/toolkit/src/view/pipeline-builder/components/connector-node/ConnectorNode.tsx
+++ b/packages/toolkit/src/view/pipeline-builder/components/connector-node/ConnectorNode.tsx
@@ -896,7 +896,7 @@ export const ConnectorNode = ({ data, id }: NodeProps
{title}
@@ -27,15 +33,20 @@ export const EndNodeFieldRoot = ({
key,
title,
children,
+ className,
}: {
key: string;
title: Nullable
{title}
diff --git a/packages/toolkit/src/view/pipeline-builder/use-node-output-fields/ObjectField.tsx b/packages/toolkit/src/view/pipeline-builder/use-node-output-fields/ObjectField.tsx
index 6902eb95..7cba3c0f 100644
--- a/packages/toolkit/src/view/pipeline-builder/use-node-output-fields/ObjectField.tsx
+++ b/packages/toolkit/src/view/pipeline-builder/use-node-output-fields/ObjectField.tsx
@@ -14,7 +14,7 @@ export const ObjectField = (props: ObjectFieldProps) => {
return (
+
{JSON.stringify(object, null, 2)}
+
{JSON.stringify(object, null, 2)}
{JSON.stringify(object, null, 2)}
@@ -33,7 +33,7 @@ export const ObjectsField = (props: ObjectsFieldProps) => {
{objects?.map((object) => (
{JSON.stringify(object, null, 2)}
diff --git a/packages/toolkit/src/view/pipeline-builder/use-node-output-fields/TextField.tsx b/packages/toolkit/src/view/pipeline-builder/use-node-output-fields/TextField.tsx
index 9933abf9..8b63ed05 100644
--- a/packages/toolkit/src/view/pipeline-builder/use-node-output-fields/TextField.tsx
+++ b/packages/toolkit/src/view/pipeline-builder/use-node-output-fields/TextField.tsx
@@ -15,7 +15,7 @@ export const TextField = (props: TextFieldProps) => {
return (
+
{text}
{text ? (
@@ -32,7 +32,7 @@ export const TextField = (props: TextFieldProps) => {
return (
+
{text}
{text ? (
diff --git a/packages/toolkit/src/view/pipeline-builder/use-node-output-fields/TextsField.tsx b/packages/toolkit/src/view/pipeline-builder/use-node-output-fields/TextsField.tsx
index 0b0e0547..0304baee 100644
--- a/packages/toolkit/src/view/pipeline-builder/use-node-output-fields/TextsField.tsx
+++ b/packages/toolkit/src/view/pipeline-builder/use-node-output-fields/TextsField.tsx
@@ -19,7 +19,7 @@ export const TextsField = (props: TextsFieldProps) => {
key={`${title}-${text}-field`}
className="flex w-full p-2 relative border rounded-sm border-semantic-bg-line flex-row justify-between gap-x-2"
>
-
+
{text}
{text ? (
@@ -42,7 +42,7 @@ export const TextsField = (props: TextsFieldProps) => {
key={`${title}-${text}-field`}
className="flex w-full p-2 border border-semantic-bg-line rounded-sm relative flex-row justify-between gap-x-2"
>
-
+
{text}
{text ? (
diff --git a/packages/toolkit/src/view/pipeline-builder/use-node-output-fields/useConnectorTestModeOutputFields.tsx b/packages/toolkit/src/view/pipeline-builder/use-node-output-fields/useConnectorTestModeOutputFields.tsx
index 8f9c93d4..f8d9e357 100644
--- a/packages/toolkit/src/view/pipeline-builder/use-node-output-fields/useConnectorTestModeOutputFields.tsx
+++ b/packages/toolkit/src/view/pipeline-builder/use-node-output-fields/useConnectorTestModeOutputFields.tsx
@@ -12,6 +12,7 @@ import { AudiosField } from "./AudiosField";
import {
Nullable,
PipelineConnectorComponent,
+ PipelineTrace,
TriggerUserPipelineResponse,
} from "../../../lib";
import {
@@ -21,6 +22,7 @@ import {
} from "../lib";
import { ObjectField } from "./ObjectField";
import { ObjectsField } from "./ObjectsField";
+import { ArrayObjectField } from "./ArrayObjectField";
export function useConnectorTestModeOutputFields(
component: PipelineConnectorComponent,
@@ -28,7 +30,6 @@ export function useConnectorTestModeOutputFields(
) {
const fields = React.useMemo(() => {
let outputProperties: InstillAIOpenAPIProperty[] = [];
- const fields: React.ReactElement[] = [];
if (!component) {
return [];
@@ -42,123 +43,151 @@ export function useConnectorTestModeOutputFields(
const trace = traces ? traces[component.id] : null;
- for (const property of outputProperties) {
- const title = property.path ? property.path : property.title ?? null;
+ console.log(outputProperties);
- let propertyValue: any = null;
+ const fields = getOutputFieldComponent({
+ properties: outputProperties,
+ trace,
+ });
- if (trace) {
- if (property.path) {
- propertyValue = trace.outputs[0][property.path];
- }
- }
+ return fields;
+ }, [component, traces]);
+
+ return fields;
+}
+
+function getOutputFieldComponent({
+ properties,
+ trace,
+}: {
+ properties: InstillAIOpenAPIProperty[];
+ trace: Nullable