From d2ed7628a3f2b1decd07ef31d3c17db212ea3509 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Mon, 5 Dec 2022 11:06:46 +0100 Subject: [PATCH 01/51] improve some types --- airbyte-webapp/src/core/form/types.ts | 14 +++++++++++--- .../src/core/jsonSchema/schemaToUiWidget.ts | 8 ++++---- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/airbyte-webapp/src/core/form/types.ts b/airbyte-webapp/src/core/form/types.ts index 658d5e267884..48ee62ab6953 100644 --- a/airbyte-webapp/src/core/form/types.ts +++ b/airbyte-webapp/src/core/form/types.ts @@ -2,7 +2,16 @@ import { JSONSchema7Type, JSONSchema7TypeName } from "json-schema"; import { AirbyteJSONSchema } from "core/jsonSchema"; -interface FormItem { +/** + * When turning the JSON schema into `FormBlock`s, + * some often used props are copied over for easy access. + */ +type FormRelevantJSONSchema = Pick< + AirbyteJSONSchema, + "default" | "examples" | "description" | "pattern" | "order" | "const" | "title" | "airbyte_hidden" | "enum" +>; + +interface FormItem extends FormRelevantJSONSchema { fieldKey: string; path: string; isRequired: boolean; @@ -12,7 +21,7 @@ interface FormItem { airbyte_hidden?: boolean; } -export interface FormBaseItem extends FormItem, AirbyteJSONSchema { +export interface FormBaseItem extends FormItem { _type: "formItem"; type: JSONSchema7TypeName; isSecret?: boolean; @@ -24,7 +33,6 @@ export interface FormGroupItem extends FormItem { _type: "formGroup"; jsonSchema: AirbyteJSONSchema; properties: FormBlock[]; - isLoading?: boolean; examples?: JSONSchema7Type; } diff --git a/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.ts b/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.ts index 67ba062d869d..3e8f3cd78dd0 100644 --- a/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.ts +++ b/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.ts @@ -108,7 +108,7 @@ function isKeyRequired(key: string, parentSchema?: AirbyteJSONSchemaDefinition): return isRequired; } -const defaultFields: Array = [ +const defaultFields = [ "default", "examples", "description", @@ -119,11 +119,11 @@ const defaultFields: Array = [ // airbyte specific fields "airbyte_hidden", -]; +] as const; -const pickDefaultFields = (schema: AirbyteJSONSchema): Partial => { +const pickDefaultFields = (schema: AirbyteJSONSchema): Pick => { const partialSchema: Partial = { - ...Object.fromEntries(Object.entries(schema).filter(([k]) => defaultFields.includes(k as keyof AirbyteJSONSchema))), + ...Object.fromEntries(Object.entries(schema).filter(([k]) => (defaultFields as readonly string[]).includes(k))), }; if (typeof schema.items === "object" && !Array.isArray(schema.items) && schema.items.enum) { From 5b0521f5ab16b613492700278f28c14185248a6f Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Mon, 5 Dec 2022 15:59:28 +0100 Subject: [PATCH 02/51] improve further --- airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.ts b/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.ts index 3e8f3cd78dd0..8764130a620d 100644 --- a/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.ts +++ b/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.ts @@ -1,3 +1,5 @@ +import pick from "lodash/pick"; + import { FormBlock } from "core/form/types"; import { isDefined } from "utils/common"; @@ -121,10 +123,10 @@ const defaultFields = [ "airbyte_hidden", ] as const; -const pickDefaultFields = (schema: AirbyteJSONSchema): Pick => { - const partialSchema: Partial = { - ...Object.fromEntries(Object.entries(schema).filter(([k]) => (defaultFields as readonly string[]).includes(k))), - }; +type DefaultFields = Pick; + +const pickDefaultFields = (schema: AirbyteJSONSchema): DefaultFields => { + const partialSchema: DefaultFields = pick(schema, defaultFields); if (typeof schema.items === "object" && !Array.isArray(schema.items) && schema.items.enum) { partialSchema.enum = schema.items.enum; From 1cd3bbbb9e3d76a70291df949b2f9fd08123c2bf Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Tue, 6 Dec 2022 11:50:57 +0100 Subject: [PATCH 03/51] clean up a bit more --- airbyte-webapp/src/core/form/types.ts | 8 +-- .../core/jsonSchema/schemaToUiWidget.test.ts | 51 +++++++++++++++++++ .../src/core/jsonSchema/schemaToUiWidget.ts | 17 +++---- 3 files changed, 59 insertions(+), 17 deletions(-) diff --git a/airbyte-webapp/src/core/form/types.ts b/airbyte-webapp/src/core/form/types.ts index 48ee62ab6953..f72e5630f087 100644 --- a/airbyte-webapp/src/core/form/types.ts +++ b/airbyte-webapp/src/core/form/types.ts @@ -1,4 +1,4 @@ -import { JSONSchema7Type, JSONSchema7TypeName } from "json-schema"; +import { JSONSchema7TypeName } from "json-schema"; import { AirbyteJSONSchema } from "core/jsonSchema"; @@ -15,10 +15,6 @@ interface FormItem extends FormRelevantJSONSchema { fieldKey: string; path: string; isRequired: boolean; - order?: number; - title?: string; - description?: string; - airbyte_hidden?: boolean; } export interface FormBaseItem extends FormItem { @@ -26,14 +22,12 @@ export interface FormBaseItem extends FormItem { type: JSONSchema7TypeName; isSecret?: boolean; multiline?: boolean; - default?: JSONSchema7Type; } export interface FormGroupItem extends FormItem { _type: "formGroup"; jsonSchema: AirbyteJSONSchema; properties: FormBlock[]; - examples?: JSONSchema7Type; } export interface FormConditionItem extends FormItem { diff --git a/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.test.ts b/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.test.ts index 2677b69e5025..a53dc531cb32 100644 --- a/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.test.ts +++ b/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.test.ts @@ -1,3 +1,5 @@ +import { FormGroupItem } from "core/form/types"; + import { jsonSchemaToUiWidget } from "./schemaToUiWidget"; import { AirbyteJSONSchemaDefinition } from "./types"; @@ -115,6 +117,55 @@ it("should reformat jsonSchema to internal widget representation", () => { expect(builtSchema).toEqual(expected); }); +it("should turn single enum into const but keep multi value enum", () => { + const schema: AirbyteJSONSchemaDefinition = { + type: "object", + required: ["a", "b", "c"], + properties: { + a: { type: "string", enum: ["val1", "val2"] }, + b: { type: "string", enum: ["val1"], default: "val1" }, + c: { type: "string", const: "val3" }, + }, + }; + + const builtSchema = jsonSchemaToUiWidget(schema, "key"); + + const expectedProperties = [ + { + _type: "formItem", + enum: ["val1", "val2"], + fieldKey: "a", + isRequired: true, + isSecret: false, + multiline: false, + path: "key.a", + type: "string", + }, + { + _type: "formItem", + const: "val1", + default: "val1", + fieldKey: "b", + isRequired: true, + isSecret: false, + multiline: false, + path: "key.b", + type: "string", + }, + { + _type: "formItem", + const: "val3", + fieldKey: "c", + isRequired: true, + isSecret: false, + multiline: false, + path: "key.c", + type: "string", + }, + ]; + expect((builtSchema as FormGroupItem).properties).toEqual(expectedProperties); +}); + it("should reformat jsonSchema to internal widget representation with parent schema", () => { const schema: AirbyteJSONSchemaDefinition = { type: "object", diff --git a/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.ts b/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.ts index 8764130a620d..22a7d0d1dcf6 100644 --- a/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.ts +++ b/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.ts @@ -118,24 +118,21 @@ const defaultFields = [ "order", "const", "title", + "enum", // airbyte specific fields "airbyte_hidden", ] as const; -type DefaultFields = Pick; - -const pickDefaultFields = (schema: AirbyteJSONSchema): DefaultFields => { - const partialSchema: DefaultFields = pick(schema, defaultFields); +const pickDefaultFields = (schema: AirbyteJSONSchema) => { + const partialSchema = pick(schema, defaultFields); if (typeof schema.items === "object" && !Array.isArray(schema.items) && schema.items.enum) { partialSchema.enum = schema.items.enum; - } else if (schema.enum) { - if (schema.enum?.length === 1 && isDefined(schema.default)) { - partialSchema.const = schema.default; - } else { - partialSchema.enum = schema.enum; - } + } else if (schema.enum && schema.enum?.length === 1 && isDefined(schema.default)) { + partialSchema.const = schema.default; + // remove enum key as it has been "picked" already above + delete partialSchema.enum; } return partialSchema; From 807c436a89a98de92597de9a8439a7410c8bc049 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Tue, 6 Dec 2022 12:13:35 +0100 Subject: [PATCH 04/51] refactor loading state --- .../ConnectorCard/ConnectorCard.module.scss | 12 +++++ .../Connector/ConnectorCard/ConnectorCard.tsx | 49 ++++++++++++------- .../components/ShowLoadingMessage.tsx | 0 .../ConnectorForm/FormRoot.module.scss | 13 ----- .../Connector/ConnectorForm/FormRoot.tsx | 15 +----- 5 files changed, 43 insertions(+), 46 deletions(-) rename airbyte-webapp/src/views/Connector/{ConnectorForm => ConnectorCard}/components/ShowLoadingMessage.tsx (100%) delete mode 100644 airbyte-webapp/src/views/Connector/ConnectorForm/FormRoot.module.scss diff --git a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.module.scss b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.module.scss index 9fd2925ea579..641e10e0bb1a 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.module.scss +++ b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.module.scss @@ -7,3 +7,15 @@ .connectorSelectControl { margin-bottom: vars.$spacing-xl; } + +.loaderContainer { + display: flex; + justify-content: center; + align-items: center; + padding: vars.$spacing-2xl 0 vars.$spacing-2xl; +} + +.loadingMessage { + margin-top: vars.$spacing-md; + margin-left: vars.$spacing-lg; +} diff --git a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx index 8162ef054f29..321e9338dad9 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx @@ -3,6 +3,7 @@ import { FormattedMessage } from "react-intl"; import { JobItem } from "components/JobItem/JobItem"; import { Card } from "components/ui/Card"; +import { Spinner } from "components/ui/Spinner"; import { Connector, @@ -19,6 +20,7 @@ import { ConnectorCardValues, ConnectorForm, ConnectorFormValues } from "views/C import { useDocumentationPanelContext } from "../ConnectorDocumentationLayout/DocumentationPanelContext"; import { ConnectorDefinitionTypeControl } from "../ConnectorForm/components/Controls/ConnectorServiceTypeControl"; +import ShowLoadingMessage from "./components/ShowLoadingMessage"; import styles from "./ConnectorCard.module.scss"; import { useAnalyticsTrackFunctions } from "./useAnalyticsTrackFunctions"; import { useTestConnector } from "./useTestConnector"; @@ -173,25 +175,34 @@ export const ConnectorCard: React.FC {additionalSelectorComponent}
- ) - } - connectorId={isEditMode ? getConnectorId(props.connector) : undefined} - /> + {props.isLoading ? ( +
+ +
+ +
+
+ ) : ( + ) + } + connectorId={isEditMode ? getConnectorId(props.connector) : undefined} + /> + )} {/* Show the job log only if advanced mode is turned on or the actual job failed (not the check inside the job) */} {job && (advancedMode || !job.succeeded) && }
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/ShowLoadingMessage.tsx b/airbyte-webapp/src/views/Connector/ConnectorCard/components/ShowLoadingMessage.tsx similarity index 100% rename from airbyte-webapp/src/views/Connector/ConnectorForm/components/ShowLoadingMessage.tsx rename to airbyte-webapp/src/views/Connector/ConnectorCard/components/ShowLoadingMessage.tsx diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/FormRoot.module.scss b/airbyte-webapp/src/views/Connector/ConnectorForm/FormRoot.module.scss deleted file mode 100644 index 462908584ee3..000000000000 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/FormRoot.module.scss +++ /dev/null @@ -1,13 +0,0 @@ -@use "scss/variables" as vars; - -.loaderContainer { - display: flex; - justify-content: center; - align-items: center; - padding: 22px 0 23px; -} - -.loadingMessage { - margin-top: vars.$spacing-md; - margin-left: vars.$spacing-lg; -} diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/FormRoot.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/FormRoot.tsx index 5d872ca1cfb1..b5994be6705c 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/FormRoot.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/FormRoot.tsx @@ -1,17 +1,13 @@ import { Form, useFormikContext } from "formik"; import React from "react"; -import { Spinner } from "components/ui/Spinner"; - import { ConnectorDefinitionSpecification } from "core/domain/connector"; import { FormBlock } from "core/form/types"; import CreateControls from "./components/CreateControls"; import EditControls from "./components/EditControls"; import { FormSection } from "./components/Sections/FormSection"; -import ShowLoadingMessage from "./components/ShowLoadingMessage"; import { useConnectorForm } from "./connectorFormContext"; -import styles from "./FormRoot.module.scss"; import { ConnectorFormValues } from "./types"; interface FormRootProps { @@ -38,20 +34,11 @@ export const FormRoot: React.FC = ({ selectedConnector, }) => { const { dirty, isSubmitting, isValid } = useFormikContext(); - const { resetConnectorForm, isLoadingSchema, selectedConnectorDefinition, isEditMode, formType } = useConnectorForm(); + const { resetConnectorForm, isLoadingSchema, isEditMode, formType } = useConnectorForm(); return (
- {isLoadingSchema && ( -
- -
- -
-
- )} - {isEditMode ? ( Date: Tue, 6 Dec 2022 12:29:10 +0100 Subject: [PATCH 05/51] move loading state up --- .../destination/DestinationForm/DestinationForm.tsx | 1 + .../pages/CreateSourcePage/components/SourceForm.tsx | 1 + .../src/views/Connector/ConnectorCard/ConnectorCard.tsx | 8 +++++++- 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/airbyte-webapp/src/components/destination/DestinationForm/DestinationForm.tsx b/airbyte-webapp/src/components/destination/DestinationForm/DestinationForm.tsx index e5979698ab07..a57bd3efe674 100644 --- a/airbyte-webapp/src/components/destination/DestinationForm/DestinationForm.tsx +++ b/airbyte-webapp/src/components/destination/DestinationForm/DestinationForm.tsx @@ -96,6 +96,7 @@ export const DestinationForm: React.FC = ({ availableConnectorDefinitions={destinationDefinitions} onConnectorDefinitionSelect={onDropDownSelect} selectedConnectorDefinitionSpecification={destinationDefinitionSpecification} + selectedConnectorDefinitionId={destinationDefinitionId} onSubmit={onSubmitForm} jobInfo={LogsRequestError.extractJobInfo(error)} additionalSelectorComponent={frequentlyUsedDestinationsComponent} diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx index 3a36bd080e36..77204ecc91fc 100644 --- a/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx +++ b/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx @@ -68,6 +68,7 @@ export const SourceForm: React.FC = ({ onSubmit, sourceDefiniti availableConnectorDefinitions={sourceDefinitions} onConnectorDefinitionSelect={onDropDownSelect} selectedConnectorDefinitionSpecification={sourceDefinitionSpecification} + selectedConnectorDefinitionId={sourceDefinitionId} onSubmit={onSubmitForm} jobInfo={LogsRequestError.extractJobInfo(error)} /> diff --git a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx index 04f4a3f33e50..26576aef328e 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx @@ -40,6 +40,10 @@ interface ConnectorCardBaseProps { // used in ConnectorCard and ConnectorForm formType: "source" | "destination"; + /** + * id of the selected connector definition id - might be available even if the specification is not loaded yet + * */ + selectedConnectorDefinitionId?: string | null; selectedConnectorDefinitionSpecification?: ConnectorDefinitionSpecification; isEditMode?: boolean; @@ -72,6 +76,7 @@ export const ConnectorCard: React.FC { const [saved, setSaved] = useState(false); @@ -98,7 +103,8 @@ export const ConnectorCard: React.FC availableConnectorDefinitions.find((s) => Connector.id(s) === selectedConnectorDefinitionSpecificationId), From eee43037f820469cd5e945e1fbc2f95d2f9ed6be Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Tue, 6 Dec 2022 12:34:10 +0100 Subject: [PATCH 06/51] remove isLoading references --- .../src/views/Connector/ConnectorForm/ConnectorForm.tsx | 7 ++----- .../src/views/Connector/ConnectorForm/FormRoot.tsx | 3 +-- .../Connector/ConnectorForm/components/CreateControls.tsx | 4 +--- .../views/Connector/ConnectorForm/connectorFormContext.tsx | 5 ----- 4 files changed, 4 insertions(+), 15 deletions(-) diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx index 5c3d739bf8b5..3399a4efeac4 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx @@ -90,7 +90,6 @@ export interface ConnectorFormProps { selectedConnectorDefinition?: ConnectorDefinition; selectedConnectorDefinitionSpecification?: ConnectorDefinitionSpecification; onSubmit: (values: ConnectorFormValues) => Promise; - isLoading?: boolean; isEditMode?: boolean; formValues?: Partial; hasSuccess?: boolean; @@ -112,7 +111,6 @@ export const ConnectorForm: React.FC = (props) => { formType, formValues, onSubmit, - isLoading, isEditMode, isTestConnectionInProgress, onStopTesting, @@ -132,13 +130,13 @@ export const ConnectorForm: React.FC = (props) => { ...(selectedConnectorDefinitionSpecification ? { name: { type: "string" } } : {}), ...Object.fromEntries( Object.entries({ - connectionConfiguration: isLoading ? null : specifications, + connectionConfiguration: specifications, }).filter(([, v]) => !!v) ), }, required: ["name"], }), - [isLoading, selectedConnectorDefinitionSpecification, specifications] + [selectedConnectorDefinitionSpecification, specifications] ); const { formFields, initialValues } = useBuildForm(jsonSchema, formValues); @@ -199,7 +197,6 @@ export const ConnectorForm: React.FC = (props) => { selectedConnectorDefinition={selectedConnectorDefinition} selectedConnectorDefinitionSpecification={selectedConnectorDefinitionSpecification} isEditMode={isEditMode} - isLoadingSchema={isLoading} validationSchema={validationSchema} connectorId={connectorId} > diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/FormRoot.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/FormRoot.tsx index b5994be6705c..ae9de9e33ed4 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/FormRoot.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/FormRoot.tsx @@ -34,7 +34,7 @@ export const FormRoot: React.FC = ({ selectedConnector, }) => { const { dirty, isSubmitting, isValid } = useFormikContext(); - const { resetConnectorForm, isLoadingSchema, isEditMode, formType } = useConnectorForm(); + const { resetConnectorForm, isEditMode, formType } = useConnectorForm(); return ( @@ -62,7 +62,6 @@ export const FormRoot: React.FC = ({ isSubmitting={isSubmitting || isTestConnectionInProgress} errorMessage={errorMessage} formType={formType} - isLoadSchema={isLoadingSchema} fetchingConnectorError={fetchingConnectorError} hasSuccess={hasSuccess} /> diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/CreateControls.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/CreateControls.tsx index be4a6267d4eb..b5d0d20b20fe 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/CreateControls.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/CreateControls.tsx @@ -14,7 +14,6 @@ interface CreateControlProps { isSubmitting: boolean; errorMessage?: React.ReactNode; hasSuccess?: boolean; - isLoadSchema?: boolean; fetchingConnectorError?: Error | null; isTestConnectionInProgress: boolean; @@ -35,7 +34,6 @@ const CreateControls: React.FC = ({ hasSuccess, errorMessage, fetchingConnectorError, - isLoadSchema, onCancelTesting, }) => { if (isSubmitting) { @@ -50,7 +48,7 @@ const CreateControls: React.FC = ({ {errorMessage && !fetchingConnectorError && } {fetchingConnectorError && } - diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/connectorFormContext.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/connectorFormContext.tsx index 1e08861f0963..c2beb590fed1 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/connectorFormContext.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/connectorFormContext.tsx @@ -18,7 +18,6 @@ interface ConnectorFormContext { resetConnectorForm: () => void; selectedConnectorDefinition?: ConnectorDefinition; selectedConnectorDefinitionSpecification?: ConnectorDefinitionSpecification; - isLoadingSchema?: boolean; isEditMode?: boolean; validationSchema: AnySchema; connectorId?: string; @@ -40,7 +39,6 @@ interface ConnectorFormContextProviderProps { setUiWidgetsInfo: (path: string, value: Record) => void; resetUiWidgetsInfo: () => void; formType: "source" | "destination"; - isLoadingSchema?: boolean; isEditMode?: boolean; getValues: (values: ConnectorFormValues) => ConnectorFormValues; selectedConnectorDefinitionSpecification?: ConnectorDefinitionSpecification; @@ -57,7 +55,6 @@ export const ConnectorFormContextProvider: React.FC Date: Tue, 6 Dec 2022 14:25:18 +0100 Subject: [PATCH 07/51] remove unused props and make fetch connector error work --- .../DestinationForm/DestinationForm.tsx | 5 +-- .../components/SourceForm.tsx | 5 +-- .../Connector/ConnectorCard/ConnectorCard.tsx | 16 ++++----- .../ConnectorForm/ConnectorForm.test.tsx | 35 ++++++------------- .../Connector/ConnectorForm/ConnectorForm.tsx | 5 ++- .../Connector/ConnectorForm/FormRoot.tsx | 3 -- .../components/CreateControls.tsx | 7 ++-- .../components/Sections/auth/AuthButton.tsx | 4 +-- .../ConnectorForm/connectorFormContext.tsx | 8 ++--- 9 files changed, 30 insertions(+), 58 deletions(-) diff --git a/airbyte-webapp/src/components/destination/DestinationForm/DestinationForm.tsx b/airbyte-webapp/src/components/destination/DestinationForm/DestinationForm.tsx index a57bd3efe674..084bcfe71a61 100644 --- a/airbyte-webapp/src/components/destination/DestinationForm/DestinationForm.tsx +++ b/airbyte-webapp/src/components/destination/DestinationForm/DestinationForm.tsx @@ -8,7 +8,7 @@ import { LogsRequestError } from "core/request/LogsRequestError"; import { useExperiment } from "hooks/services/Experiment"; import { useGetDestinationDefinitionSpecificationAsync } from "services/connector/DestinationDefinitionSpecificationService"; import { ConnectorIds } from "utils/connectors"; -import { generateMessageFromError, FormError } from "utils/errorStatusMessage"; +import { FormError } from "utils/errorStatusMessage"; import { ConnectorCard } from "views/Connector/ConnectorCard"; import { ConnectorCardValues, FrequentlyUsedConnectors, StartWithDestination } from "views/Connector/ConnectorForm"; @@ -63,8 +63,6 @@ export const DestinationForm: React.FC = ({ }); }; - const errorMessage = error ? generateMessageFromError(error) : null; - const frequentlyUsedDestinationIds = useExperiment("connector.frequentlyUsedDestinationIds", [ ConnectorIds.Destinations.BigQuery, ConnectorIds.Destinations.Snowflake, @@ -91,7 +89,6 @@ export const DestinationForm: React.FC = ({ description={} isLoading={isLoading} hasSuccess={hasSuccess} - errorMessage={errorMessage} fetchingConnectorError={destinationDefinitionError instanceof Error ? destinationDefinitionError : null} availableConnectorDefinitions={destinationDefinitions} onConnectorDefinitionSelect={onDropDownSelect} diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx index 77204ecc91fc..adec7e12d0af 100644 --- a/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx +++ b/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx @@ -6,7 +6,7 @@ import { ConnectionConfiguration } from "core/domain/connection"; import { LogsRequestError } from "core/request/LogsRequestError"; import { SourceDefinitionReadWithLatestTag } from "services/connector/SourceDefinitionService"; import { useGetSourceDefinitionSpecificationAsync } from "services/connector/SourceDefinitionSpecificationService"; -import { generateMessageFromError, FormError } from "utils/errorStatusMessage"; +import { FormError } from "utils/errorStatusMessage"; import { ConnectorCard } from "views/Connector/ConnectorCard"; import { ConnectorCardValues } from "views/Connector/ConnectorForm/types"; @@ -54,8 +54,6 @@ export const SourceForm: React.FC = ({ onSubmit, sourceDefiniti }); }; - const errorMessage = error ? generateMessageFromError(error) : null; - return ( = ({ onSubmit, sourceDefiniti description={} isLoading={isLoading} hasSuccess={hasSuccess} - errorMessage={errorMessage} fetchingConnectorError={sourceDefinitionError instanceof Error ? sourceDefinitionError : null} availableConnectorDefinitions={sourceDefinitions} onConnectorDefinitionSelect={onDropDownSelect} diff --git a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx index 26576aef328e..42f4e23efe20 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx @@ -20,6 +20,7 @@ import { ConnectorCardValues, ConnectorForm, ConnectorFormValues } from "views/C import { useDocumentationPanelContext } from "../ConnectorDocumentationLayout/DocumentationPanelContext"; import { ConnectorDefinitionTypeControl } from "../ConnectorForm/components/Controls/ConnectorServiceTypeControl"; +import { FetchingConnectorError } from "../ConnectorForm/components/TestingConnectionError"; import ShowLoadingMessage from "./components/ShowLoadingMessage"; import styles from "./ConnectorCard.module.scss"; import { useAnalyticsTrackFunctions } from "./useAnalyticsTrackFunctions"; @@ -50,8 +51,6 @@ interface ConnectorCardBaseProps { // used in ConnectorForm formId?: string; fetchingConnectorError?: Error | null; - errorMessage?: React.ReactNode; - successMessage?: React.ReactNode; hasSuccess?: boolean; isLoading?: boolean; } @@ -77,6 +76,7 @@ export const ConnectorCard: React.FC { const [saved, setSaved] = useState(false); @@ -183,14 +183,16 @@ export const ConnectorCard: React.FC {additionalSelectorComponent}
- {props.isLoading ? ( + {props.isLoading && (
- ) : ( + )} + {fetchingConnectorError && } + {selectedConnectorDefinition && selectedConnectorDefinitionSpecification && ( ) - } + errorMessage={error && generateMessageFromError(error)} + successMessage={saved && props.isEditMode && } connectorId={isEditMode ? getConnectorId(props.connector) : undefined} /> )} diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.test.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.test.tsx index 8872bb038ec2..0edfe7867991 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.test.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.test.tsx @@ -5,6 +5,7 @@ import React from "react"; import selectEvent from "react-select-event"; import { render, useMockIntersectionObserver } from "test-utils/testutils"; +import { ConnectorDefinition } from "core/domain/connector"; import { AirbyteJSONSchema } from "core/jsonSchema"; import { DestinationDefinitionSpecificationRead } from "core/request/AirbyteClient"; import { ConnectorForm, ConnectorFormProps } from "views/Connector/ConnectorForm"; @@ -37,6 +38,11 @@ jest.mock("../ConnectorDocumentationLayout/DocumentationPanelContext", () => { jest.setTimeout(10000); +const connectorDefinition = { + sourceDefinitionId: "1", + documentationUrl: "", +} as ConnectorDefinition; + const useAddPriceListItem = (container: HTMLElement) => { const priceList = getByTestId(container, "connectionConfiguration.priceList"); let index = 0; @@ -162,6 +168,7 @@ describe("Service Form", () => { { onSubmit={async (values) => { result = values; }} + selectedConnectorDefinition={connectorDefinition} selectedConnectorDefinitionSpecification={ // @ts-expect-error Partial objects for testing { @@ -390,6 +398,7 @@ describe("Service Form", () => { it("should render if connector is selected", async () => { const { getByText } = await renderConnectorForm({ + selectedConnectorDefinition: connectorDefinition, selectedConnectorDefinitionSpecification: // @ts-expect-error Partial objects for testing connectorDefSpec as DestinationDefinitionSpecificationRead, @@ -399,20 +408,9 @@ describe("Service Form", () => { expect(getByText(/Set up destination/)).toBeInTheDocument(); }); - it("should not render if connector is not selected", async () => { - const { container } = await renderConnectorForm({ - selectedConnectorDefinitionSpecification: undefined, - formType: "destination", - onSubmit: onSubmitClb, - }); - - const submitBtn = container.querySelector('button[type="submit"]'); - - expect(submitBtn).toBeNull(); - }); - it("should render if connector is selected", async () => { const { getByText } = await renderConnectorForm({ + selectedConnectorDefinition: connectorDefinition, selectedConnectorDefinitionSpecification: // @ts-expect-error Partial objects for testing connectorDefSpec as DestinationDefinitionSpecificationRead, @@ -423,18 +421,5 @@ describe("Service Form", () => { expect(getByText(/Save changes and test/)).toBeInTheDocument(); }); - - it("should render if connector is not selected", async () => { - const { container } = await renderConnectorForm({ - selectedConnectorDefinitionSpecification: undefined, - formType: "destination", - onSubmit: onSubmitClb, - isEditMode: true, - }); - - const submitBtn = container.querySelector('button[type="submit"]'); - - expect(submitBtn).toBeInTheDocument(); - }); }); }); diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx index 3399a4efeac4..46a0a6af04d1 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx @@ -87,13 +87,12 @@ const RevalidateOnValidationSchemaChange: React.FC<{ validationSchema: unknown } export interface ConnectorFormProps { formType: "source" | "destination"; formId?: string; - selectedConnectorDefinition?: ConnectorDefinition; - selectedConnectorDefinitionSpecification?: ConnectorDefinitionSpecification; + selectedConnectorDefinition: ConnectorDefinition; + selectedConnectorDefinitionSpecification: ConnectorDefinitionSpecification; onSubmit: (values: ConnectorFormValues) => Promise; isEditMode?: boolean; formValues?: Partial; hasSuccess?: boolean; - fetchingConnectorError?: Error | null; errorMessage?: React.ReactNode; successMessage?: React.ReactNode; connectorId?: string; diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/FormRoot.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/FormRoot.tsx index ae9de9e33ed4..1ec6f6a93671 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/FormRoot.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/FormRoot.tsx @@ -15,7 +15,6 @@ interface FormRootProps { hasSuccess?: boolean; isTestConnectionInProgress?: boolean; errorMessage?: React.ReactNode; - fetchingConnectorError?: Error | null; successMessage?: React.ReactNode; onRetest?: () => void; onStopTestingConnector?: () => void; @@ -28,7 +27,6 @@ export const FormRoot: React.FC = ({ formFields, successMessage, errorMessage, - fetchingConnectorError, hasSuccess, onStopTestingConnector, selectedConnector, @@ -62,7 +60,6 @@ export const FormRoot: React.FC = ({ isSubmitting={isSubmitting || isTestConnectionInProgress} errorMessage={errorMessage} formType={formType} - fetchingConnectorError={fetchingConnectorError} hasSuccess={hasSuccess} /> ) diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/CreateControls.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/CreateControls.tsx index b5d0d20b20fe..83ec70e28db2 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/CreateControls.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/CreateControls.tsx @@ -5,7 +5,7 @@ import styled from "styled-components"; import { Button } from "components/ui/Button"; import styles from "./CreateControls.module.scss"; -import { TestingConnectionError, FetchingConnectorError } from "./TestingConnectionError"; +import { TestingConnectionError } from "./TestingConnectionError"; import { TestingConnectionSpinner } from "./TestingConnectionSpinner"; import TestingConnectionSuccess from "./TestingConnectionSuccess"; @@ -14,7 +14,6 @@ interface CreateControlProps { isSubmitting: boolean; errorMessage?: React.ReactNode; hasSuccess?: boolean; - fetchingConnectorError?: Error | null; isTestConnectionInProgress: boolean; onCancelTesting?: () => void; @@ -33,7 +32,6 @@ const CreateControls: React.FC = ({ formType, hasSuccess, errorMessage, - fetchingConnectorError, onCancelTesting, }) => { if (isSubmitting) { @@ -46,8 +44,7 @@ const CreateControls: React.FC = ({ return ( - {errorMessage && !fetchingConnectorError && } - {fetchingConnectorError && } + {errorMessage && } diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/auth/AuthButton.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/auth/AuthButton.tsx index 5aa0899c16c5..ed93c3bff8d8 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/auth/AuthButton.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Sections/auth/AuthButton.tsx @@ -52,7 +52,7 @@ export const AuthButton: React.FC = () => { const authRequiredError = Object.values(hiddenAuthFieldErrors).includes("form.empty.error"); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const { loading, done, run, hasRun } = useFormikOauthAdapter(selectedConnectorDefinitionSpecification!); + const { loading, done, run, hasRun } = useFormikOauthAdapter(selectedConnectorDefinitionSpecification); if (!selectedConnectorDefinitionSpecification) { console.error("Entered non-auth flow while no connector is selected"); @@ -71,7 +71,7 @@ export const AuthButton: React.FC = () => { ) : ( ); return ( diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/connectorFormContext.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/connectorFormContext.tsx index c2beb590fed1..aa6051625ef5 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/connectorFormContext.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/connectorFormContext.tsx @@ -16,8 +16,8 @@ interface ConnectorFormContext { addUnfinishedFlow: (key: string, info?: Record) => void; removeUnfinishedFlow: (key: string) => void; resetConnectorForm: () => void; - selectedConnectorDefinition?: ConnectorDefinition; - selectedConnectorDefinitionSpecification?: ConnectorDefinitionSpecification; + selectedConnectorDefinition: ConnectorDefinition; + selectedConnectorDefinitionSpecification: ConnectorDefinitionSpecification; isEditMode?: boolean; validationSchema: AnySchema; connectorId?: string; @@ -34,14 +34,14 @@ export const useConnectorForm = (): ConnectorFormContext => { }; interface ConnectorFormContextProviderProps { - selectedConnectorDefinition?: ConnectorDefinition; + selectedConnectorDefinition: ConnectorDefinition; widgetsInfo: WidgetConfigMap; setUiWidgetsInfo: (path: string, value: Record) => void; resetUiWidgetsInfo: () => void; formType: "source" | "destination"; isEditMode?: boolean; getValues: (values: ConnectorFormValues) => ConnectorFormValues; - selectedConnectorDefinitionSpecification?: ConnectorDefinitionSpecification; + selectedConnectorDefinitionSpecification: ConnectorDefinitionSpecification; validationSchema: AnySchema; connectorId?: string; } From 0fe11f05098387990cd4049cb2e7dbaeaf77e992 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Tue, 6 Dec 2022 14:52:46 +0100 Subject: [PATCH 08/51] remove special component for name --- airbyte-webapp/src/locales/en.json | 2 - .../Connector/ConnectorForm/ConnectorForm.tsx | 51 +++---------------- .../Controls/ConnectorNameControl.tsx | 50 ------------------ .../Connector/ConnectorForm/useBuildForm.tsx | 49 +++++++++++------- 4 files changed, 39 insertions(+), 113 deletions(-) delete mode 100644 airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorNameControl.tsx diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json index 7c61a578b69f..194a9af3e857 100644 --- a/airbyte-webapp/src/locales/en.json +++ b/airbyte-webapp/src/locales/en.json @@ -34,8 +34,6 @@ "form.searchName": "search by name...", "form.noResult": "No result", "form.noConnectorFound": "No matching connector found", - "form.sourceName.placeholder": "Your source name", - "form.destinationName.placeholder": "Your destination name", "form.connectionName": "Connection name*", "form.connectionName.placeholder": "Name", "form.sourceName": "Source name", diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx index 46a0a6af04d1..34953a3dd2b7 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx @@ -1,27 +1,19 @@ import { Formik, getIn, setIn, useFormikContext } from "formik"; import { JSONSchema7 } from "json-schema"; -import React, { useCallback, useEffect, useMemo } from "react"; +import React, { useCallback, useEffect } from "react"; import { useDeepCompareEffect } from "react-use"; import { FormChangeTracker } from "components/common/FormChangeTracker"; import { ConnectorDefinition, ConnectorDefinitionSpecification } from "core/domain/connector"; -import { FormBaseItem, FormComponentOverrideProps } from "core/form/types"; import { CheckConnectionRead } from "core/request/AirbyteClient"; import { useFormChangeTrackerService, useUniqueFormId } from "hooks/services/FormChangeTracker"; import { isDefined } from "utils/common"; -import { ConnectorNameControl } from "./components/Controls/ConnectorNameControl"; import { ConnectorFormContextProvider, useConnectorForm } from "./connectorFormContext"; import { FormRoot } from "./FormRoot"; import { ConnectorCardValues, ConnectorFormValues } from "./types"; -import { - useBuildForm, - useBuildInitialSchema, - useBuildUiWidgetsContext, - useConstructValidationSchema, - usePatchFormik, -} from "./useBuildForm"; +import { useBuildForm, useBuildUiWidgetsContext, useConstructValidationSchema, usePatchFormik } from "./useBuildForm"; const FormikPatch: React.FC = () => { usePatchFormik(); @@ -120,42 +112,13 @@ export const ConnectorForm: React.FC = (props) => { connectorId, } = props; - const specifications = useBuildInitialSchema(selectedConnectorDefinitionSpecification); - - const jsonSchema: JSONSchema7 = useMemo( - () => ({ - type: "object", - properties: { - ...(selectedConnectorDefinitionSpecification ? { name: { type: "string" } } : {}), - ...Object.fromEntries( - Object.entries({ - connectionConfiguration: specifications, - }).filter(([, v]) => !!v) - ), - }, - required: ["name"], - }), - [selectedConnectorDefinitionSpecification, specifications] + const { formFields, initialValues, jsonSchema } = useBuildForm( + formType, + selectedConnectorDefinitionSpecification, + formValues ); - const { formFields, initialValues } = useBuildForm(jsonSchema, formValues); - - // Overrides default field label(i.e "Source name", "Destination name") - const uiOverrides = useMemo(() => { - return { - name: { - component: (property: FormBaseItem, componentProps: FormComponentOverrideProps) => ( - - ), - }, - }; - }, [formType]); - - const { uiWidgetsInfo, setUiWidgetsInfo, resetUiWidgetsInfo } = useBuildUiWidgetsContext( - formFields, - initialValues, - uiOverrides - ); + const { uiWidgetsInfo, setUiWidgetsInfo, resetUiWidgetsInfo } = useBuildUiWidgetsContext(formFields, initialValues); const validationSchema = useConstructValidationSchema(jsonSchema, uiWidgetsInfo); diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorNameControl.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorNameControl.tsx deleted file mode 100644 index 1773d7fb0ce8..000000000000 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Controls/ConnectorNameControl.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { useField } from "formik"; -import React from "react"; -import { FormattedMessage, useIntl } from "react-intl"; - -import { Input } from "components/ui/Input"; - -import { FormBaseItem } from "core/form/types"; - -import { PropertyError } from "../Property/PropertyError"; -import { PropertyLabel } from "../Property/PropertyLabel"; - -interface ConnectorNameControlProps { - property: FormBaseItem; - formType: "source" | "destination"; - disabled?: boolean; -} - -export const ConnectorNameControl: React.FC = ({ property, formType, disabled }) => { - const { formatMessage } = useIntl(); - const [field, fieldMeta] = useField(property.path); - - const hasError = !!fieldMeta.error && fieldMeta.touched; - - return ( - } - description={formatMessage({ - id: `form.${formType}Name.message`, - })} - > - - {hasError && ( - - {formatMessage({ - id: fieldMeta.error, - })} - - )} - - ); -}; diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/useBuildForm.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/useBuildForm.tsx index 1f41f7ef850e..362e9d8ae800 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/useBuildForm.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/useBuildForm.tsx @@ -3,6 +3,7 @@ import { useFormikContext } from "formik"; import { JSONSchema7, JSONSchema7Definition } from "json-schema"; import merge from "lodash/merge"; import { useCallback, useEffect, useMemo, useState } from "react"; +import { useIntl } from "react-intl"; import { AnySchema } from "yup"; import { ConnectorDefinitionSpecification } from "core/domain/connector"; @@ -13,21 +14,35 @@ import { buildYupFormForJsonSchema } from "core/jsonSchema/schemaToYup"; import { ConnectorFormValues } from "./types"; -export function useBuildInitialSchema( - connectorSpecification?: ConnectorDefinitionSpecification -): JSONSchema7Definition | undefined { - return useMemo(() => { - return connectorSpecification?.connectionSpecification as JSONSchema7Definition | undefined; - }, [connectorSpecification]); -} - -// useBuildForm hook export interface BuildFormHook { initialValues: ConnectorFormValues; formFields: FormBlock; + jsonSchema: JSONSchema7; } -export function useBuildForm(jsonSchema: JSONSchema7, initialValues?: Partial): BuildFormHook { +export function useBuildForm( + formType: "source" | "destination", + selectedConnectorDefinitionSpecification: ConnectorDefinitionSpecification, + initialValues?: Partial +): BuildFormHook { + const { formatMessage } = useIntl(); + + const jsonSchema: JSONSchema7 = useMemo( + () => ({ + type: "object", + properties: { + name: { + type: "string", + title: formatMessage({ id: `form.${formType}Name` }), + description: formatMessage({ id: `form.${formType}Name.message` }), + }, + connectionConfiguration: + selectedConnectorDefinitionSpecification.connectionSpecification as JSONSchema7Definition, + }, + required: ["name"], + }), + [formType, formatMessage, selectedConnectorDefinitionSpecification.connectionSpecification] + ); const startValues = useMemo( () => ({ name: "", @@ -42,6 +57,7 @@ export function useBuildForm(jsonSchema: JSONSchema7, initialValues?: Partial { - const [overriddenWidgetState, setUiWidgetsInfo] = useState(uiOverrides ?? {}); + const [overriddenWidgetState, setUiWidgetsInfo] = useState({}); // As schema is dynamic, it is possible, that new updated values, will differ from one stored. const mergedState = useMemo( () => merge( buildPathInitialState(Array.isArray(formFields) ? formFields : [formFields], formValues), - merge(overriddenWidgetState, uiOverrides) + merge(overriddenWidgetState) ), - [formFields, formValues, overriddenWidgetState, uiOverrides] + [formFields, formValues, overriddenWidgetState] ); const setUiWidgetsInfoSubState = useCallback( @@ -75,8 +90,8 @@ export const useBuildUiWidgetsContext = ( ); const resetUiWidgetsInfo = useCallback(() => { - setUiWidgetsInfo(uiOverrides ?? {}); - }, [uiOverrides]); + setUiWidgetsInfo({}); + }, []); return { uiWidgetsInfo: mergedState, From 34d48145fb601850a52efe1e9da19076a0bce233 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Tue, 6 Dec 2022 15:37:15 +0100 Subject: [PATCH 09/51] remove top level state for unifinished flows --- .../ConnectorForm/components/EditControls.tsx | 5 +- .../Property/ConfirmationControl.tsx | 71 ----------- .../components/Property/Control.tsx | 55 +-------- .../Property/SecretConfirmationControl.tsx | 114 ++++++++++++++++++ .../components/Sections/PropertySection.tsx | 12 +- .../ConnectorForm/connectorFormContext.tsx | 15 --- 6 files changed, 122 insertions(+), 150 deletions(-) delete mode 100644 airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/ConfirmationControl.tsx create mode 100644 airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/SecretConfirmationControl.tsx diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/EditControls.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/EditControls.tsx index 46f921fa2ff8..dcd665062561 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/EditControls.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/EditControls.tsx @@ -4,7 +4,6 @@ import styled from "styled-components"; import { Button } from "components/ui/Button"; -import { useConnectorForm } from "../connectorFormContext"; import styles from "./EditControls.module.scss"; import { TestingConnectionError } from "./TestingConnectionError"; import { TestingConnectionSpinner } from "./TestingConnectionSpinner"; @@ -42,8 +41,6 @@ const EditControls: React.FC = ({ errorMessage, onCancelTesting, }) => { - const { unfinishedFlows } = useConnectorForm(); - if (isSubmitting) { return ; } @@ -63,7 +60,7 @@ const EditControls: React.FC = ({ {renderStatusMessage()}
- - - - ) : ( - - )} - - ); -}; - -export default ConfirmationControl; diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/Control.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/Control.tsx index 669ebdbbf253..7a9ed40b0e57 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/Control.tsx +++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/Property/Control.tsx @@ -4,34 +4,22 @@ import React from "react"; import { DropDown } from "components/ui/DropDown"; import { Input } from "components/ui/Input"; import { Multiselect } from "components/ui/Multiselect"; -import { SecretTextArea } from "components/ui/SecretTextArea"; import { TagInput } from "components/ui/TagInput/TagInput"; import { TextArea } from "components/ui/TextArea"; import { FormBaseItem } from "core/form/types"; import { isDefined } from "utils/common"; -import ConfirmationControl from "./ConfirmationControl"; +import SecretConfirmationControl from "./SecretConfirmationControl"; interface ControlProps { property: FormBaseItem; name: string; - unfinishedFlows: Record; - addUnfinishedFlow: (key: string, info?: Record) => void; - removeUnfinishedFlow: (key: string) => void; disabled?: boolean; error?: boolean; } -export const Control: React.FC = ({ - property, - name, - addUnfinishedFlow, - removeUnfinishedFlow, - unfinishedFlows, - disabled, - error, -}) => { +export const Control: React.FC = ({ property, name, disabled, error }) => { const [field, meta, helpers] = useField(name); if (property.type === "array" && !property.enum) { @@ -84,45 +72,12 @@ export const Control: React.FC = ({ } else if (property.multiline && !property.isSecret) { return