fix: fix connector definition not correctly update after user picking…

… up the existing connector (#935)

Because

- We have a nested flow, 
  - user select connector definition
  - user select existing connector
  - We didn't put in the updated connector definition
- close https://github.com/instill-ai/community/issues/549

This commit

- fix connector definition not correctly update after user picking up
the existing connector

packages/toolkit/src/lib/use-instill-form/pick/pickComponentsFromReferenceHints.tsx

@@ -34,6 +34,7 @@ export function pickComponentsFromReferenceHints(
     nonObjectArrayHints.forEach((hint) => {
       fields.push(
         <ComponentOutputReferenceHints.ListField
+          key={hint.path}
           title={hint.title}
           path={hint.path}
           instillFormat={hint.instillFormat}
@@ -46,6 +47,7 @@ export function pickComponentsFromReferenceHints(
     Object.entries(groupedObjectArrayHints).forEach(([parentPath, hints]) => {
       fields.push(
         <ComponentOutputReferenceHints.ObjectArrayField
+          key={parentPath}
           parentPath={parentPath}
           hints={hints}
           componentID={componentID}
@@ -58,6 +60,7 @@ export function pickComponentsFromReferenceHints(
     Object.entries(groupedHints).forEach(([instillFormat, hints]) => {
       fields.push(
         <ComponentOutputReferenceHints.GroupByFormatField
+          key={instillFormat}
           instillFormat={instillFormat}
           hints={hints}
           componentID={componentID}

packages/toolkit/src/lib/use-instill-form/pick/pickRegularFieldsFromInstillFormTree.tsx

@@ -251,6 +251,7 @@ export function pickRegularFieldsFromInstillFormTree(
   if (enableSmartHint) {
     return (
       <SmartHintFields.TextField
+        key={tree.path}
         fieldKey={tree.fieldKey}
         path={tree.path}
         form={form}

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

@@ -443,6 +443,8 @@ export const FlowControl = (props: FlowControlProps) => {
         throw new Error("Component type is not defined");
       }
 
+      console.log(resource);
+
       if ("configuration" in resource) {
         // Create a new array to let reactflow rerender the component
         newNodes = [

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

@@ -359,6 +359,11 @@ export const ConnectorNode = ({ data, id }: NodeProps<ConnectorNodeData>) => {
                         component: {
                           ...node.data.component,
                           resource_name: connector.name,
+
+                          // Some dynamic generated connector definition like instill_model's modelName enum
+                          // will only be returned from connectors endpoint. Therefore, we need to update the
+                          // connector definition here
+                          connector_definition: connector.connector_definition,
                         },
                       };
                     }

packages/toolkit/src/view/pipeline-builder/components/nodes/end-operator-node/UserDefinedFieldItem.tsx

@@ -35,7 +35,7 @@ export const UserDefinedFieldItem = ({
           <div className="my-auto flex flex-row gap-x-2">
             <Tooltip.Provider>
               <Tooltip.Root>
-                <Tooltip.Trigger>
+                <Tooltip.Trigger asChild>
                   <button onClick={() => onEditField(fieldKey)}>
                     <Icons.Edit03 className="my-auto h-3 w-3 stroke-semantic-accent-on-bg" />
                   </button>
@@ -63,7 +63,7 @@ export const UserDefinedFieldItem = ({
             </Tooltip.Provider>
             <Tooltip.Provider>
               <Tooltip.Root>
-                <Tooltip.Trigger>
+                <Tooltip.Trigger asChild>
                   <button onClick={() => onDeleteField(fieldKey)}>
                     <Icons.Trash01 className="h-3 w-3 stroke-semantic-error-on-bg" />
                   </button>