From 05a559c207bca3c726072d805df1753cc6449720 Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Thu, 24 Mar 2022 12:16:58 +0100 Subject: [PATCH 1/4] Select connector type before name --- .../Connector/ServiceForm/ServiceForm.tsx | 39 +++++++++++++++++-- 1 file changed, 36 insertions(+), 3 deletions(-) diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx index 1143d0fbe9ed..98e78f01f6c2 100644 --- a/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx +++ b/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useMemo } from "react"; -import { Formik, getIn, setIn, useFormikContext } from "formik"; +import { Formik, getIn, setIn, useField, useFormikContext } from "formik"; import { JSONSchema7 } from "json-schema"; import { useToggle } from "react-use"; @@ -21,6 +21,7 @@ import { FormBaseItem } from "core/form/types"; import { ConnectorNameControl } from "./components/Controls/ConnectorNameControl"; import { ConnectorServiceTypeControl } from "./components/Controls/ConnectorServiceTypeControl"; import { + Connector, ConnectorDefinition, ConnectorDefinitionSpecification, } from "core/domain/connector"; @@ -83,9 +84,40 @@ const PatchInitialValuesWithWidgetConfig: React.FC<{ schema: JSONSchema7 }> = ({ return null; }; +/** + * A componen that will observe whenever the serviceType (selected connector) + * changes and changes the name of the connector to match the connector definition name. + */ +const SetDefaultName: React.FC<{ + availableConnectors: ConnectorDefinition[]; +}> = ({ availableConnectors }) => { + const { setFieldValue, setFieldTouched } = useFormikContext(); + const [serviceTypeField] = useField("serviceType"); + + useEffect(() => { + const name = + availableConnectors.find( + (service) => Connector.id(service) === serviceTypeField.value + )?.name ?? ""; + // Formik has an issue, that prevents us from setting a field value directly in code here + // It won't change the value at all, unless we push it one execution slot further with setTimeout + setTimeout(() => { + setFieldValue("name", name); + }); + }, [ + availableConnectors, + serviceTypeField.value, + setFieldTouched, + setFieldValue, + ]); + + return null; +}; + const ServiceForm: React.FC = (props) => { const [isOpenRequestModal, toggleOpenRequestModal] = useToggle(false); const { + availableServices, formType, formValues, onSubmit, @@ -100,8 +132,8 @@ const ServiceForm: React.FC = (props) => { () => ({ type: "object", properties: { - name: { type: "string" }, serviceType: { type: "string" }, + ...(selectedConnector ? { name: { type: "string" } } : {}), ...Object.fromEntries( Object.entries({ connectionConfiguration: isLoading ? null : specifications, @@ -110,7 +142,7 @@ const ServiceForm: React.FC = (props) => { }, required: ["name", "serviceType"], }), - [isLoading, specifications] + [isLoading, selectedConnector, specifications] ); const { formFields, initialValues } = useBuildForm(jsonSchema, formValues); @@ -206,6 +238,7 @@ const ServiceForm: React.FC = (props) => { isEditMode={props.isEditMode} isLoadingSchema={props.isLoading} > + Date: Thu, 24 Mar 2022 12:19:39 +0100 Subject: [PATCH 2/4] Fix typos --- .../src/views/Connector/ServiceForm/ServiceForm.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx index 98e78f01f6c2..98f144894370 100644 --- a/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx +++ b/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx @@ -85,8 +85,8 @@ const PatchInitialValuesWithWidgetConfig: React.FC<{ schema: JSONSchema7 }> = ({ }; /** - * A componen that will observe whenever the serviceType (selected connector) - * changes and changes the name of the connector to match the connector definition name. + * A component that will observe whenever the serviceType (selected connector) + * changes and set the name of the connector to match the connector definition name. */ const SetDefaultName: React.FC<{ availableConnectors: ConnectorDefinition[]; From b4d6b29fe3416e14013abb05d8cd79affcdb0cc2 Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Thu, 24 Mar 2022 12:36:52 +0100 Subject: [PATCH 3/4] Fix e2e tests --- .../cypress/support/commands/common.js | 6 +++--- .../cypress/support/commands/source.js | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/airbyte-webapp-e2e-tests/cypress/support/commands/common.js b/airbyte-webapp-e2e-tests/cypress/support/commands/common.js index c305c6f4c444..ef2386c50fdc 100644 --- a/airbyte-webapp-e2e-tests/cypress/support/commands/common.js +++ b/airbyte-webapp-e2e-tests/cypress/support/commands/common.js @@ -9,12 +9,12 @@ Cypress.Commands.add("fillEmail", (email) => { Cypress.Commands.add("fillTestLocalJsonForm", (name) => { cy.intercept("/api/v1/destination_definition_specifications/get").as("getDestinationSpecifications"); - cy.get("input[name=name]").type(name); cy.get("div[data-testid='serviceType']").click(); cy.get("div").contains("Local JSON").click(); - + cy.wait("@getDestinationSpecifications"); - + + cy.get("input[name=name]").type(name); cy.get("input[name='connectionConfiguration.destination_path']").type("/local"); }) diff --git a/airbyte-webapp-e2e-tests/cypress/support/commands/source.js b/airbyte-webapp-e2e-tests/cypress/support/commands/source.js index feefd0594ee8..72bc1a959569 100644 --- a/airbyte-webapp-e2e-tests/cypress/support/commands/source.js +++ b/airbyte-webapp-e2e-tests/cypress/support/commands/source.js @@ -2,13 +2,13 @@ Cypress.Commands.add("fillPgSourceForm", (name) => { cy.intercept("/api/v1/source_definition_specifications/get").as( "getSourceSpecifications" ); - - cy.get("input[name=name]").type(name); + cy.get("div[data-testid='serviceType']").click(); cy.get("div").contains("Postgres").click(); - + cy.wait("@getSourceSpecifications"); - + + cy.get("input[name=name]").type(name); cy.get("input[name='connectionConfiguration.host']").type("localhost"); cy.get("input[name='connectionConfiguration.port']").type("{selectAll}{del}5433"); cy.get("input[name='connectionConfiguration.database']").type("airbyte_ci"); From dd1f0b4e7c76bc2f2f812f260f6cde9e53ac9ba5 Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Fri, 25 Mar 2022 09:38:04 +0100 Subject: [PATCH 4/4] Shorten SetDefaultName --- .../Connector/ServiceForm/ServiceForm.tsx | 28 ++++++------------- 1 file changed, 8 insertions(+), 20 deletions(-) diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx index 705c6c8de1ce..9d08757cd0fd 100644 --- a/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx +++ b/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useMemo, useState } from "react"; -import { Formik, getIn, setIn, useFormikContext, useField } from "formik"; +import { Formik, getIn, setIn, useFormikContext } from "formik"; import { JSONSchema7 } from "json-schema"; import { useToggle } from "react-use"; @@ -21,7 +21,6 @@ import { FormBaseItem } from "core/form/types"; import { ConnectorNameControl } from "./components/Controls/ConnectorNameControl"; import { ConnectorServiceTypeControl } from "./components/Controls/ConnectorServiceTypeControl"; import { - Connector, ConnectorDefinition, ConnectorDefinitionSpecification, } from "core/domain/connector"; @@ -88,28 +87,17 @@ const PatchInitialValuesWithWidgetConfig: React.FC<{ schema: JSONSchema7 }> = ({ * A component that will observe whenever the serviceType (selected connector) * changes and set the name of the connector to match the connector definition name. */ -const SetDefaultName: React.FC<{ - availableConnectors: ConnectorDefinition[]; -}> = ({ availableConnectors }) => { - const { setFieldValue, setFieldTouched } = useFormikContext(); - const [serviceTypeField] = useField("serviceType"); +const SetDefaultName: React.FC = () => { + const { setFieldValue } = useFormikContext(); + const { selectedService } = useServiceForm(); useEffect(() => { - const name = - availableConnectors.find( - (service) => Connector.id(service) === serviceTypeField.value - )?.name ?? ""; // Formik has an issue, that prevents us from setting a field value directly in code here // It won't change the value at all, unless we push it one execution slot further with setTimeout setTimeout(() => { - setFieldValue("name", name); + setFieldValue("name", selectedService?.name ?? ""); }); - }, [ - availableConnectors, - serviceTypeField.value, - setFieldTouched, - setFieldValue, - ]); + }, [selectedService, setFieldValue]); return null; }; @@ -118,7 +106,6 @@ const ServiceForm: React.FC = (props) => { const [isOpenRequestModal, toggleOpenRequestModal] = useToggle(false); const [initialRequestName, setInitialRequestName] = useState(); const { - availableServices, formType, formValues, onSubmit, @@ -241,8 +228,9 @@ const ServiceForm: React.FC = (props) => { availableServices={props.availableServices} isEditMode={props.isEditMode} isLoadingSchema={props.isLoading} + serviceType={values.serviceType} > - +