Select connector type before name

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");
 })
 

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");

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