From 55a87bf2917e18c16cf68e4b7a50c9eaec5d5326 Mon Sep 17 00:00:00 2001
From: Tim Roes <tim@airbyte.io>
Date: Fri, 25 Mar 2022 11:50:55 +0100
Subject: [PATCH] Select connector type before name (#11388)

* Select connector type before name

* Fix typos

* Fix e2e tests

* Shorten SetDefaultName
---
 .../cypress/support/commands/common.js        |  6 ++---
 .../cypress/support/commands/source.js        |  8 +++---
 .../Connector/ServiceForm/ServiceForm.tsx     | 25 +++++++++++++++++--
 3 files changed, 30 insertions(+), 9 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");
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx
index 58793dcf8bf4..9d08757cd0fd 100644
--- a/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx
+++ b/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx
@@ -83,6 +83,25 @@ const PatchInitialValuesWithWidgetConfig: React.FC<{ schema: JSONSchema7 }> = ({
   return null;
 };
 
+/**
+ * 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 = () => {
+  const { setFieldValue } = useFormikContext();
+  const { selectedService } = useServiceForm();
+
+  useEffect(() => {
+    // 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", selectedService?.name ?? "");
+    });
+  }, [selectedService, setFieldValue]);
+
+  return null;
+};
+
 const ServiceForm: React.FC<ServiceFormProps> = (props) => {
   const [isOpenRequestModal, toggleOpenRequestModal] = useToggle(false);
   const [initialRequestName, setInitialRequestName] = useState<string>();
@@ -101,8 +120,8 @@ const ServiceForm: React.FC<ServiceFormProps> = (props) => {
     () => ({
       type: "object",
       properties: {
-        name: { type: "string" },
         serviceType: { type: "string" },
+        ...(selectedConnector ? { name: { type: "string" } } : {}),
         ...Object.fromEntries(
           Object.entries({
             connectionConfiguration: isLoading ? null : specifications,
@@ -111,7 +130,7 @@ const ServiceForm: React.FC<ServiceFormProps> = (props) => {
       },
       required: ["name", "serviceType"],
     }),
-    [isLoading, specifications]
+    [isLoading, selectedConnector, specifications]
   );
 
   const { formFields, initialValues } = useBuildForm(jsonSchema, formValues);
@@ -209,7 +228,9 @@ const ServiceForm: React.FC<ServiceFormProps> = (props) => {
           availableServices={props.availableServices}
           isEditMode={props.isEditMode}
           isLoadingSchema={props.isLoading}
+          serviceType={values.serviceType}
         >
+          <SetDefaultName />
           <FormikPatch />
           <PatchInitialValuesWithWidgetConfig schema={jsonSchema} />
           <FormRoot