feat: support create airbyte destination under pipeline flow (#205)

Because

- #193 

This commit

- Support create Airbyte destination under pipeline flow
- close #193

src/components/forms/commons/FormBase/FormBase.tsx

@@ -4,6 +4,7 @@ import cn from "clsx";
 
 export type FormBaseProps = {
   padding: Nullable<string>;
+  flex1: Nullable<boolean>;
   marginBottom: Nullable<string>;
   noValidate: boolean;
 };
@@ -13,6 +14,7 @@ const FormBase: FC<FormBaseProps> = ({
   padding,
   marginBottom,
   noValidate,
+  flex1,
 }) => {
   const submitHandler = useCallback((e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -21,7 +23,9 @@ const FormBase: FC<FormBaseProps> = ({
   return (
     <form
       onSubmit={submitHandler}
-      className={cn("flex h-full flex-col", padding, marginBottom)}
+      className={cn("flex h-full flex-col", padding, marginBottom, {
+        "flex-1": flex1,
+      })}
       noValidate={noValidate}
     >
       {children}

src/components/forms/connector/destination/CreateDestinationForm/CreateDestinationForm.tsx

@@ -1,11 +1,10 @@
 import {
-  Dispatch,
   FC,
-  SetStateAction,
   useCallback,
   useMemo,
   useState,
   ChangeEvent,
+  ReactElement,
 } from "react";
 import { useRouter } from "next/router";
 import {
@@ -20,7 +19,11 @@ import * as yup from "yup";
 import Image from "next/image";
 
 import { PrimaryButton } from "@/components/ui";
-import { ConnectorDefinition, CreateDestinationPayload } from "@/lib/instill";
+import {
+  ConnectorDefinition,
+  CreateDestinationPayload,
+  PipelineMode,
+} from "@/lib/instill";
 import { Nullable } from "@/types/general";
 import {
   useCreateDestination,
@@ -44,12 +47,25 @@ import { ErrorDetails } from "@/lib/instill/types";
 
 export type CreateDestinationFormProps = {
   setResult: Nullable<(destinationId: string) => void>;
-  setStepNumber: Nullable<Dispatch<SetStateAction<number>>>;
+  flex1: boolean;
+  title: Nullable<ReactElement>;
+  padding: Nullable<string>;
+  marginBottom: Nullable<string>;
+  onSuccessCb: Nullable<() => void>;
+
+  // Pipeline mode will only work when setup the pipeline.
+  // Please pass null if this is not under pipeline flow.
+  pipelineMode: Nullable<PipelineMode>;
 };
 
 const CreateDestinationForm: FC<CreateDestinationFormProps> = ({
   setResult,
-  setStepNumber,
+  flex1,
+  title,
+  padding,
+  marginBottom,
+  onSuccessCb,
+  pipelineMode,
 }) => {
   const router = useRouter();
   const { amplitudeIsInit } = useAmplitudeCtx();
@@ -65,31 +81,50 @@ const CreateDestinationForm: FC<CreateDestinationFormProps> = ({
   const destinationOptions = useMemo(() => {
     if (!destinationDefinitions.isSuccess) return [];
 
-    const options: SingleSelectOption[] = [];
-
-    for (const definition of destinationDefinitions.data) {
-      options.push({
-        label: definition.connector_definition.title,
-        value: definition.name,
-        startIcon: (
-          <Image
-            className="my-auto"
-            src={
-              definition.connector_definition.docker_repository.split(
-                "/"
-              )[0] === "airbyte"
-                ? `/icons/airbyte/${definition.connector_definition.icon}`
-                : `/icons/instill/${definition.connector_definition.icon}`
-            }
-            width={24}
-            height={24}
-            layout="fixed"
-          />
-        ),
-      });
+    if (pipelineMode === "MODE_ASYNC") {
+      return destinationDefinitions.data
+        .filter(
+          (e) =>
+            e.name !== "destination-connector-definitions/destination-http" &&
+            e.name !== "destination-connector-definitions/destination-grpc"
+        )
+        .map((e) => ({
+          label: e.connector_definition.title,
+          value: e.name,
+          startIcon: (
+            <Image
+              className="my-auto"
+              src={
+                e.connector_definition.docker_repository.split("/")[0] ===
+                "airbyte"
+                  ? `/icons/airbyte/${e.connector_definition.icon}`
+                  : `/icons/instill/${e.connector_definition.icon}`
+              }
+              width={24}
+              height={24}
+              layout="fixed"
+            />
+          ),
+        }));
     }
 
-    return options;
+    return destinationDefinitions.data.map((e) => ({
+      label: e.connector_definition.title,
+      value: e.name,
+      startIcon: (
+        <Image
+          className="my-auto"
+          src={
+            e.connector_definition.docker_repository.split("/")[0] === "airbyte"
+              ? `/icons/airbyte/${e.connector_definition.icon}`
+              : `/icons/instill/${e.connector_definition.icon}`
+          }
+          width={24}
+          height={24}
+          layout="fixed"
+        />
+      ),
+    }));
   }, [destinationDefinitions.isSuccess, destinationDefinitions.data]);
 
   const [selectedDestinationDefinition, setSelectedDestinationDefinition] =
@@ -294,20 +329,15 @@ const CreateDestinationForm: FC<CreateDestinationFormProps> = ({
           description: null,
           message: "Create succeeded.",
         }));
-        if (setResult) {
-          setResult(newDestination.id);
-        }
+        if (setResult) setResult(newDestination.id);
 
-        if (setStepNumber) {
-          setStepNumber((prev) => prev + 1);
-        }
         if (amplitudeIsInit) {
           sendAmplitudeData("create_destination", {
             type: "critical_action",
             process: "destination",
           });
         }
-        router.push("/destinations");
+        if (onSuccessCb) onSuccessCb();
       },
       onError: (error) => {
         if (error instanceof AxiosError) {
@@ -336,8 +366,8 @@ const CreateDestinationForm: FC<CreateDestinationFormProps> = ({
     formYup,
     fieldValues,
     setResult,
-    setStepNumber,
     selectedDestinationDefinition,
+    onSuccessCb,
   ]);
 
   const updateFieldValues = useCallback((field: string, value: string) => {
@@ -350,8 +380,14 @@ const CreateDestinationForm: FC<CreateDestinationFormProps> = ({
   }, []);
 
   return (
-    <FormBase marginBottom={null} padding={null} noValidate={true}>
+    <FormBase
+      padding={padding}
+      noValidate={true}
+      flex1={flex1}
+      marginBottom={marginBottom}
+    >
       <div className="mb-10 flex flex-col gap-y-5">
+        {title}
         <BasicTextField
           id="id"
           label="ID"
@@ -390,7 +426,7 @@ const CreateDestinationForm: FC<CreateDestinationFormProps> = ({
             fieldValues ? (fieldValues.description as string) ?? null : null
           }
           onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
-            updateFieldValues("id", event.target.value)
+            updateFieldValues("description", event.target.value)
           }
         />
         <BasicSingleSelect
@@ -437,7 +473,7 @@ const CreateDestinationForm: FC<CreateDestinationFormProps> = ({
           closable={true}
         />
         <PrimaryButton
-          type="submit"
+          type="button"
           disabled={false}
           position="ml-auto my-auto"
           onClickHandler={() => submitHandler()}

src/components/forms/model/ConfigureModelInstanceForm/ConfigureModelInstanceForm.tsx

@@ -46,7 +46,12 @@ const ConfigureModelInstanceForm: FC<ConfigureModelInstanceFormProps> = ({
 
   return (
     <div className={cn("flex flex-col", marginBottom)}>
-      <FormBase padding={null} marginBottom="mb-10" noValidate={true}>
+      <FormBase
+        padding={null}
+        marginBottom="mb-10"
+        noValidate={true}
+        flex1={false}
+      >
         <div className="flex flex-col gap-y-5">
           {modelInstance.model_definition === "model-definitions/local" ? (
             <></>

src/components/forms/pipeline/CreatePipelineForm/SetupDestinationStep/CreateNewDestinationFlow.tsx

@@ -1,6 +1,7 @@
 import { FC, useState, useEffect, useMemo } from "react";
 import { useFormikContext } from "formik";
 import { SingleSelectOption } from "@instill-ai/design-system";
+import Image from "next/image";
 
 import {
   StepNumberState,
@@ -41,23 +42,55 @@ const CreateNewDestinationFlow: FC<CreateNewDestinationFlowProps> = ({
     if (!destinationDefinitions.isSuccess || !destinationDefinitions.data)
       return;
 
-    setDestinationDefinitionOptions(
-      destinationDefinitions.data.map((e) => {
-        return {
-          label: e.connector_definition.title,
-          value: e.id,
-          startIcon: (
-            <ConnectorIcon
-              iconName={e.connector_definition.icon}
-              iconColor="fill-instillGrey90"
-              iconHeight="h-[30px]"
-              iconWidth="w-[30px]"
-              iconPosition="my-auto"
-            />
-          ),
-        };
-      })
-    );
+    if (values.pipeline.mode === "MODE_ASYNC") {
+      console.log(destinationDefinitions);
+      setDestinationDefinitionOptions(
+        destinationDefinitions.data
+          .filter(
+            (e) =>
+              e.name !== "destination-connector-definitions/destination-http" &&
+              e.name !== "destination-connector-definitions/destination-grpc"
+          )
+          .map((e) => {
+            return {
+              label: e.connector_definition.title,
+              value: e.id,
+              startIcon: (
+                <Image
+                  className="my-auto"
+                  src={
+                    e.connector_definition.docker_repository.split("/")[0] ===
+                    "airbyte"
+                      ? `/icons/airbyte/${e.connector_definition.icon}`
+                      : `/icons/instill/${e.connector_definition.icon}`
+                  }
+                  width={24}
+                  height={24}
+                  layout="fixed"
+                />
+              ),
+            };
+          })
+      );
+    } else {
+      setDestinationDefinitionOptions(
+        destinationDefinitions.data.map((e) => {
+          return {
+            label: e.connector_definition.title,
+            value: e.id,
+            startIcon: (
+              <ConnectorIcon
+                iconName={e.connector_definition.icon}
+                iconColor="fill-instillGrey90"
+                iconHeight="h-[30px]"
+                iconWidth="w-[30px]"
+                iconPosition="my-auto"
+              />
+            ),
+          };
+        })
+      );
+    }
   }, [destinationDefinitions.isSuccess, destinationDefinitions.data]);
 
   const selectedDestinationDefinition = useMemo(() => {
@@ -109,6 +142,7 @@ const CreateNewDestinationFlow: FC<CreateNewDestinationFlowProps> = ({
 
     createDestination.mutate(payload, {
       onSuccess: () => {
+        setFieldValue("destination.type", "existing");
         setFieldValue("destination.type", "existing");
         if (amplitudeIsInit) {
           sendAmplitudeData("create_destination", {
@@ -135,7 +169,7 @@ const CreateNewDestinationFlow: FC<CreateNewDestinationFlowProps> = ({
       />
       <SingleSelect
         id="destinationDefinition"
-        name="dataDestination.new.definition"
+        name="destination.new.definition"
         label="Destination type"
         options={destinationDefinitionOptions || []}
         value={selectedDestinationDefinition}

src/components/forms/pipeline/CreatePipelineForm/SetupDestinationStep/SetupDestinationStep.tsx

@@ -12,12 +12,12 @@ import {
   StepNumberState,
   CreatePipelineFormValues,
 } from "../CreatePipelineForm";
-import CreateNewDestinationFlow from "./CreateNewDestinationFlow";
 import UseExistingDestinationFlow from "./UseExistingDestinationFlow";
 import { useCreateDestination, useDestinations } from "@/services/connector";
 import { CreateDestinationPayload } from "@/lib/instill";
 import { useAmplitudeCtx } from "context/AmplitudeContext";
 import { sendAmplitudeData } from "@/lib/amplitude";
+import { CreateDestinationForm } from "@/components/forms/connector";
 
 export type SetupDestinationStepProps = StepNumberState;
 
@@ -186,13 +186,22 @@ const SetupDestinationStep: FC<SetupDestinationStepProps> = (props) => {
         <div className="flex flex-1 flex-row">
           <UseExistingDestinationFlow {...props} />
           <FormVerticalDividers />
-          <CreateNewDestinationFlow {...props} />
-          {/* <CreateDestinationForm
-            setStepNumber={props.setStepNumber}
-            setResult={(id) => {
-              setFieldValue("destination.new.id", id);
+          <CreateDestinationForm
+            setResult={(destinationId) => {
+              setFieldValue("destination.type", "new");
+              setFieldValue("destination.new.id", destinationId);
             }}
-          /> */}
+            onSuccessCb={() => props.setStepNumber((prev) => prev + 1)}
+            title={
+              <h3 className="text-black text-instill-h3">
+                Setup a new destination
+              </h3>
+            }
+            flex1={true}
+            padding="p-5"
+            marginBottom={null}
+            pipelineMode={values.pipeline.mode}
+          />
         </div>
       )}
     </FormikStep>