feat(auto-gen-form): handle Airbyte form and instill data form separa…

…tely (#956) Because - handle Airbyte form and instill data form separately This commit - handle Airbyte form and instill data form separately
instill-ai · Feb 14, 2024 · 23ce0eb · 23ce0eb
1 parent 4028d53
commit 23ce0eb
Show file tree

Hide file tree

Showing 38 changed files with 221 additions and 98 deletions.
diff --git a/packages/toolkit/src/components/UploadAvatarFieldWithCrop.tsx b/packages/toolkit/src/components/UploadAvatarFieldWithCrop.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 import { Button, Dialog, Form, Input } from "@instill-ai/design-system";
-import { GeneralUseFormReturn } from "../lib";
 import { FormLabel } from "../view/settings/FormLabel";
 import AvatarEditor from "react-avatar-editor";
 import { UseFormReturn } from "react-hook-form";

diff --git a/packages/toolkit/src/lib/react-query-service/mgmt/useAuthenticatedUser.ts b/packages/toolkit/src/lib/react-query-service/mgmt/useAuthenticatedUser.ts
@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { getAuthenticatedUserQuery, type User } from "../../vdp-sdk";
+import { getAuthenticatedUserQuery } from "../../vdp-sdk";
 import type { Nullable } from "../../type";
 
 export function useAuthenticatedUser({

diff --git a/packages/toolkit/src/lib/react-query-service/mgmt/useUser.tsx b/packages/toolkit/src/lib/react-query-service/mgmt/useUser.tsx
@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { getUserQuery, type User } from "../../vdp-sdk";
+import { getUserQuery } from "../../vdp-sdk";
 import type { Nullable } from "../../type";
 
 export function useUser({

diff --git a/packages/toolkit/src/lib/use-instill-form/components/common/VideoPreview.tsx b/packages/toolkit/src/lib/use-instill-form/components/common/VideoPreview.tsx
@@ -1,7 +1,5 @@
 import cn from "clsx";
 import * as React from "react";
-import { FieldMode } from "../../types";
-import { Icons } from "@instill-ai/design-system";
 
 export const VideoPreview = ({
   src,

diff --git a/packages/toolkit/src/lib/use-instill-form/components/smart-hint/SmartHintInfoCard.tsx b/packages/toolkit/src/lib/use-instill-form/components/smart-hint/SmartHintInfoCard.tsx
@@ -4,7 +4,6 @@ import { Nullable } from "../../../type";
 import { Tag } from "@instill-ai/design-system";
 import { SmartHintWarning } from "../../types";
 import { SmartHint } from "../../../use-smart-hint";
-import { transformInstillFormatToHumanReadableFormat } from "../../transform";
 
 export const SmartHintInfoCard = ({
   className,

diff --git a/packages/toolkit/src/lib/use-instill-form/components/smart-hint/SmartHintList.tsx b/packages/toolkit/src/lib/use-instill-form/components/smart-hint/SmartHintList.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import cn from "clsx";
-import { ScrollArea, Tag } from "@instill-ai/design-system";
+import { ScrollArea } from "@instill-ai/design-system";
 import { SmartHint } from "../../../use-smart-hint";
 import { onClickSmartHint } from "./onClickSmartHint";
 import { ControllerRenderProps } from "react-hook-form";
@@ -19,7 +19,6 @@ export const SmartHintList = ({
   setHighlightedHintIndex,
   inputRef,
   smartHintEnabledPos,
-  instillUpstreamTypes,
   instillAcceptFormats,
 }: {
   field: ControllerRenderProps<
@@ -38,7 +37,6 @@ export const SmartHintList = ({
   setHighlightedHintIndex: React.Dispatch<React.SetStateAction<number>>;
   inputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement>;
   smartHintEnabledPos: Nullable<number>;
-  instillUpstreamTypes: string[];
   instillAcceptFormats: string[];
 }) => {
   const humanReadableAcceptFormatString = React.useMemo(() => {

diff --git a/packages/toolkit/src/lib/use-instill-form/components/smart-hint/TextArea.tsx b/packages/toolkit/src/lib/use-instill-form/components/smart-hint/TextArea.tsx
@@ -17,7 +17,6 @@ import { FieldDescriptionTooltip } from "../common";
 
 export const TextArea = ({
   form,
-  fieldKey,
   path,
   title,
   description,
@@ -29,16 +28,13 @@ export const TextArea = ({
   componentID,
   size,
   isHidden,
-  instillFormat,
 }: {
-  fieldKey: Nullable<string>;
   instillAcceptFormats: string[];
   shortDescription?: string;
   disabled?: boolean;
   isRequired?: boolean;
   instillUpstreamTypes: string[];
   componentID?: string;
-  instillFormat?: string;
 } & AutoFormFieldBaseProps) => {
   const smartHints = useInstillStore((s) => s.smartHints);
   const [smartHintsPopoverIsOpen, setSmartHintsPopoverIsOpen] =
@@ -208,7 +204,6 @@ export const TextArea = ({
                       setHighlightedHintIndex={setHighlightedHintIndex}
                       inputRef={inputRef}
                       smartHintEnabledPos={smartHintEnabledPos}
-                      instillUpstreamTypes={instillUpstreamTypes}
                       instillAcceptFormats={instillAcceptFormats}
                     />
                   </React.Fragment>

diff --git a/packages/toolkit/src/lib/use-instill-form/components/smart-hint/TextField.tsx b/packages/toolkit/src/lib/use-instill-form/components/smart-hint/TextField.tsx
@@ -16,7 +16,6 @@ import { getFieldPlaceholder } from "./getFieldPlaceholder";
 import { FieldDescriptionTooltip } from "../common";
 
 export const TextField = ({
-  fieldKey,
   form,
   path,
   title,
@@ -29,16 +28,13 @@ export const TextField = ({
   componentID,
   size,
   isHidden,
-  instillFormat,
 }: {
-  fieldKey: Nullable<string>;
   instillAcceptFormats: string[];
   shortDescription?: string;
   disabled?: boolean;
   isRequired?: boolean;
   instillUpstreamTypes: string[];
   componentID?: string;
-  instillFormat?: string;
 } & AutoFormFieldBaseProps) => {
   const smartHints = useInstillStore((s) => s.smartHints);
   const [smartHintsPopoverIsOpen, setSmartHintsPopoverIsOpen] =
@@ -216,7 +212,6 @@ export const TextField = ({
                       setHighlightedHintIndex={setHighlightedHintIndex}
                       inputRef={inputRef}
                       smartHintEnabledPos={smartHintEnabledPos}
-                      instillUpstreamTypes={instillUpstreamTypes}
                       instillAcceptFormats={instillAcceptFormats}
                     />
                   </React.Fragment>

diff --git a/...oolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/AudioField.tsx b/...oolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/AudioField.tsx
@@ -35,7 +35,6 @@ export const AudioField = ({
           <Form.Item className="w-full">
             <FieldHead
               mode={mode}
-              form={form}
               title={title}
               path={path}
               instillFormat={instillFormat}

diff --git a/...olkit/src/lib/use-instill-form/components/start-operator-free-form-fields/AudiosField.tsx b/...olkit/src/lib/use-instill-form/components/start-operator-free-form-fields/AudiosField.tsx
@@ -36,7 +36,6 @@ export const AudiosField = ({
           <Form.Item className="w-full">
             <FieldHead
               mode={mode}
-              form={form}
               title={title}
               path={path}
               instillFormat={instillFormat}

diff --git a/...lkit/src/lib/use-instill-form/components/start-operator-free-form-fields/BooleanField.tsx b/...lkit/src/lib/use-instill-form/components/start-operator-free-form-fields/BooleanField.tsx
@@ -27,7 +27,6 @@ export const BooleanField = ({
           <Form.Item className="w-full">
             <FieldHead
               mode={mode}
-              form={form}
               title={title}
               path={path}
               instillFormat={instillFormat}

diff --git a/...toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/FieldHead.tsx b/...toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/FieldHead.tsx
@@ -1,11 +1,5 @@
 import { useShallow } from "zustand/react/shallow";
-import {
-  FieldMode,
-  GeneralUseFormReturn,
-  InstillStore,
-  Nullable,
-  useInstillStore,
-} from "../../..";
+import { FieldMode, InstillStore, Nullable, useInstillStore } from "../../..";
 import { Icons, Tag, Tooltip } from "@instill-ai/design-system";
 import {
   ReferenceHintDataTypeTag,
@@ -19,7 +13,6 @@ const selector = (store: InstillStore) => ({
 
 export const FieldHead = ({
   mode,
-  form,
   title,
   path,
   instillFormat,
@@ -29,7 +22,6 @@ export const FieldHead = ({
   disabledReferenceHint,
 }: {
   mode: FieldMode;
-  form: GeneralUseFormReturn;
   title: Nullable<string>;
   path: string;
   instillFormat: string;

diff --git a/...toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/FileField.tsx b/...toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/FileField.tsx
@@ -35,7 +35,6 @@ export const FileField = ({
           <Form.Item className="w-full">
             <FieldHead
               mode={mode}
-              form={form}
               title={title}
               path={path}
               instillFormat={instillFormat}

diff --git a/...oolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/FilesField.tsx b/...oolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/FilesField.tsx
@@ -36,7 +36,6 @@ export const FilesField = ({
           <Form.Item className="w-full">
             <FieldHead
               mode={mode}
-              form={form}
               title={title}
               path={path}
               instillFormat={instillFormat}

diff --git a/...oolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/ImageField.tsx b/...oolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/ImageField.tsx
@@ -36,7 +36,6 @@ export const ImageField = ({
           <Form.Item className="w-full">
             <FieldHead
               mode={mode}
-              form={form}
               title={title}
               path={path}
               instillFormat={instillFormat}

diff --git a/...olkit/src/lib/use-instill-form/components/start-operator-free-form-fields/ImagesField.tsx b/...olkit/src/lib/use-instill-form/components/start-operator-free-form-fields/ImagesField.tsx
@@ -36,7 +36,6 @@ export const ImagesField = ({
           <Form.Item className="w-full">
             <FieldHead
               mode={mode}
-              form={form}
               title={title}
               path={path}
               instillFormat={instillFormat}

diff --git a/...kit/src/lib/use-instill-form/components/start-operator-free-form-fields/LongTextField.tsx b/...kit/src/lib/use-instill-form/components/start-operator-free-form-fields/LongTextField.tsx
@@ -61,7 +61,6 @@ export const LongTextField = ({
           <Form.Item className="w-full">
             <FieldHead
               mode={mode}
-              form={form}
               title={title}
               path={path}
               instillFormat={instillFormat}

diff --git a/...olkit/src/lib/use-instill-form/components/start-operator-free-form-fields/NumberField.tsx b/...olkit/src/lib/use-instill-form/components/start-operator-free-form-fields/NumberField.tsx
@@ -28,7 +28,6 @@ export const NumberField = ({
           <Form.Item className="w-full">
             <FieldHead
               mode={mode}
-              form={form}
               title={title}
               path={path}
               instillFormat={instillFormat}

diff --git a/...lkit/src/lib/use-instill-form/components/start-operator-free-form-fields/NumbersField.tsx b/...lkit/src/lib/use-instill-form/components/start-operator-free-form-fields/NumbersField.tsx
@@ -57,7 +57,6 @@ export const NumbersField = ({
           <div className="flex w-full flex-col gap-y-2">
             <FieldHead
               mode={mode}
-              form={form}
               title={title}
               path={path}
               instillFormat={instillFormat}

diff --git a/...olkit/src/lib/use-instill-form/components/start-operator-free-form-fields/ObjectField.tsx b/...olkit/src/lib/use-instill-form/components/start-operator-free-form-fields/ObjectField.tsx
@@ -28,7 +28,6 @@ export const ObjectField = ({
           <Form.Item className="w-full">
             <FieldHead
               mode={mode}
-              form={form}
               title={title}
               path={path}
               instillFormat={instillFormat}

diff --git a/...toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/TextField.tsx b/...toolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/TextField.tsx
@@ -28,7 +28,6 @@ export const TextField = ({
           <Form.Item className="w-full">
             <FieldHead
               mode={mode}
-              form={form}
               title={title}
               path={path}
               instillFormat={instillFormat}

diff --git a/...kit/src/lib/use-instill-form/components/start-operator-free-form-fields/TextareaField.tsx b/...kit/src/lib/use-instill-form/components/start-operator-free-form-fields/TextareaField.tsx
@@ -28,7 +28,6 @@ export const TextareaField = ({
           <Form.Item className="w-full">
             <FieldHead
               mode={mode}
-              form={form}
               title={title}
               path={path}
               instillFormat={instillFormat}

diff --git a/...oolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/TextsField.tsx b/...oolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/TextsField.tsx
@@ -55,7 +55,6 @@ export const TextsField = ({
           <Form.Item className="w-full">
             <FieldHead
               mode={mode}
-              form={form}
               title={title}
               path={path}
               instillFormat={instillFormat}

diff --git a/...oolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/VideoField.tsx b/...oolkit/src/lib/use-instill-form/components/start-operator-free-form-fields/VideoField.tsx
@@ -37,7 +37,6 @@ export const VideoField = ({
           <Form.Item className="w-full">
             <FieldHead
               mode={mode}
-              form={form}
               title={title}
               path={path}
               instillFormat={instillFormat}

diff --git a/...olkit/src/lib/use-instill-form/components/start-operator-free-form-fields/VideosField.tsx b/...olkit/src/lib/use-instill-form/components/start-operator-free-form-fields/VideosField.tsx
@@ -37,7 +37,6 @@ export const VideosField = ({
           <Form.Item className="w-full">
             <FieldHead
               mode={mode}
-              form={form}
               title={title}
               path={path}
               instillFormat={instillFormat}

diff --git a/packages/toolkit/src/lib/use-instill-form/pick/pickRegularFieldsFromInstillFormTree.tsx b/packages/toolkit/src/lib/use-instill-form/pick/pickRegularFieldsFromInstillFormTree.tsx
@@ -217,7 +217,6 @@ export function pickRegularFieldsFromInstillFormTree(
     if (enableSmartHint) {
       return (
         <SmartHintFields.TextArea
-          fieldKey={tree.fieldKey}
           key={tree.path}
           path={tree.path}
           form={form}
@@ -231,7 +230,6 @@ export function pickRegularFieldsFromInstillFormTree(
           componentID={componentID}
           size={size}
           isHidden={tree.isHidden}
-          instillFormat={tree.instillFormat}
         />
       );
     }
@@ -271,7 +269,6 @@ export function pickRegularFieldsFromInstillFormTree(
     return (
       <SmartHintFields.TextField
         key={tree.path}
-        fieldKey={tree.fieldKey}
         path={tree.path}
         form={form}
         title={title}
@@ -284,7 +281,6 @@ export function pickRegularFieldsFromInstillFormTree(
         componentID={componentID}
         size={size}
         isHidden={tree.isHidden}
-        instillFormat={tree.instillFormat}
       />
     );
   }

diff --git a/packages/toolkit/src/lib/use-instill-form/transform/transformInstillJSONSchemaToZod.ts b/packages/toolkit/src/lib/use-instill-form/transform/transformInstillJSONSchemaToZod.ts
@@ -218,10 +218,6 @@ export function transformInstillJSONSchemaToZod({
       (e) => e.instillUpstreamType === "reference"
     );
 
-    const acceptTemplate = targetSchema.anyOf.some(
-      (e) => e.instillUpstreamType === "template"
-    );
-
     if (instillUpstreamValue) {
       if (instillUpstreamValue.enum) {
         const enumValues = instillUpstreamValue.enum as [string, ...string[]];

diff --git a/packages/toolkit/src/lib/useEntity.ts b/packages/toolkit/src/lib/useEntity.ts
@@ -108,6 +108,7 @@ export function useEntity(): UseEntitySuccessReturn | UseEntityFailedReturn {
     connectorName,
     namespaceType.isSuccess,
     router,
+    namespaceType.data,
   ]);
 
   if (isSuccess) {

diff --git a/packages/toolkit/src/lib/vdp-sdk/organization/mutations.ts b/packages/toolkit/src/lib/vdp-sdk/organization/mutations.ts
@@ -1,4 +1,4 @@
-import { GeneralRecord, Nullable } from "../../type";
+import { Nullable } from "../../type";
 import { createInstillAxiosClient } from "../helper";
 import {
   Organization,

diff --git a/packages/toolkit/src/lib/vdp-sdk/organization/types.ts b/packages/toolkit/src/lib/vdp-sdk/organization/types.ts
@@ -1,4 +1,4 @@
-import { GeneralRecord, Nullable } from "../../type";
+import { Nullable } from "../../type";
 import { User } from "../mgmt";
 import { StripeSubscriptionDetail } from "../types";
 

diff --git a/packages/toolkit/src/view/airbyte/OneOfConditionSection.tsx b/packages/toolkit/src/view/airbyte/OneOfConditionSection.tsx
@@ -41,6 +41,7 @@ export const OneOfConditionSection = ({
   // We store the uiFields in formTree and pass it to this component to preserve
   // the state of UI fields
 
+  const [open, setOpen] = React.useState(false);
   const [selectedConditionOption, setSelectedConditionOption] =
     React.useState<Nullable<SelectOption>>(null);
 
@@ -207,6 +208,8 @@ export const OneOfConditionSection = ({
       if (setFormIsDirty) {
         setFormIsDirty(true);
       }
+
+      setOpen(false);
     },
     [
       formTree.path,
@@ -229,7 +232,11 @@ export const OneOfConditionSection = ({
             will cause a flashed UI issue.
 
           */}
-          <Select.Root disabled={disableAll}>
+          <Select.Root
+            open={open}
+            onOpenChange={(open) => setOpen(open)}
+            disabled={disableAll}
+          >
             <Select.Trigger className="w-full !rounded-none">
               <p className="text-semantic-fg-primary">
                 {selectedConditionOption?.value}

diff --git a/...oolkit/src/view/data/DataResourceForm.tsx → ...src/view/data/AirbyteDataResourceForm.tsx b/...oolkit/src/view/data/DataResourceForm.tsx → ...src/view/data/AirbyteDataResourceForm.tsx
@@ -35,7 +35,7 @@ import { AirbyteDestinationFields } from "../airbyte";
 import { LoadingSpin } from "../../components";
 import { InstillErrors } from "../../constant/errors";
 
-export type DataResourceFormProps = {
+export type AirbyteDataResourceFormProps = {
   dataResource: Nullable<ConnectorWithDefinition>;
   dataDefinition: ConnectorDefinition;
   accessToken: Nullable<string>;
@@ -53,7 +53,9 @@ type BackButtonProps =
       enableBackButton: false;
     };
 
-export const DataResourceForm = (props: DataResourceFormProps) => {
+export const AirbyteDataResourceForm = (
+  props: AirbyteDataResourceFormProps
+) => {
   const { amplitudeIsInit } = useAmplitudeCtx();
   const {
     disabledAll,