🪟 🔧 Move the serviceType prop out from Formik form (<ServiceForm/> refactoring part 2)

airbyte-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/components/DestinationForm.tsx

@@ -8,7 +8,7 @@ import { LogsRequestError } from "core/request/LogsRequestError";
 import { useGetDestinationDefinitionSpecificationAsync } from "services/connector/DestinationDefinitionSpecificationService";
 import { generateMessageFromError, FormError } from "utils/errorStatusMessage";
 import { ConnectorCard } from "views/Connector/ConnectorCard";
-import { FrequentlyUsedDestinations, StartWithDestination } from "views/Connector/ServiceForm";
+import { ConnectorFormValues, FrequentlyUsedDestinations, StartWithDestination } from "views/Connector/ServiceForm";
 
 import styles from "./DestinationForm.module.scss";
 
@@ -54,7 +54,7 @@ export const DestinationForm: React.FC<DestinationFormProps> = ({
     setDestinationDefinitionId(destinationDefinitionId);
   };
 
-  const onSubmitForm = async (values: { name: string; serviceType: string }) => {
+  const onSubmitForm = async (values: ConnectorFormValues) => {
     onSubmit({
       ...values,
       destinationDefinitionId: destinationDefinitionSpecification?.destinationDefinitionId,
@@ -85,7 +85,6 @@ export const DestinationForm: React.FC<DestinationFormProps> = ({
         hasSuccess={hasSuccess}
         errorMessage={errorMessage}
         isLoading={isLoading}
-        formValues={destinationDefinitionId ? { serviceType: destinationDefinitionId } : undefined}
         title={<FormattedMessage id="onboarding.destinationSetUp" />}
         jobInfo={LogsRequestError.extractJobInfo(error)}
       />

airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/components/DestinationSettings.tsx

@@ -3,15 +3,14 @@ import { FormattedMessage } from "react-intl";
 
 import DeleteBlock from "components/DeleteBlock";
 
-import { ConnectionConfiguration } from "core/domain/connection";
-import { Connector } from "core/domain/connector";
 import { DestinationRead, WebBackendConnectionListItem } from "core/request/AirbyteClient";
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useFormChangeTrackerService, useUniqueFormId } from "hooks/services/FormChangeTracker";
 import { useDeleteDestination, useUpdateDestination } from "hooks/services/useDestinationHook";
 import { useDestinationDefinition } from "services/connector/DestinationDefinitionService";
 import { useGetDestinationDefinitionSpecification } from "services/connector/DestinationDefinitionSpecificationService";
 import { ConnectorCard } from "views/Connector/ConnectorCard";
+import { ConnectorFormValues } from "views/Connector/ServiceForm";
 
 import styles from "./DestinationSettings.module.scss";
 
@@ -33,11 +32,7 @@ const DestinationsSettings: React.FC<DestinationsSettingsProps> = ({
 
   useTrackPage(PageTrackingCodes.DESTINATION_ITEM_SETTINGS);
 
-  const onSubmitForm = async (values: {
-    name: string;
-    serviceType: string;
-    connectionConfiguration?: ConnectionConfiguration;
-  }) => {
+  const onSubmitForm = async (values: ConnectorFormValues) => {
     await updateDestination({
       values,
       destinationId: currentDestination.destinationId,
@@ -60,10 +55,6 @@ const DestinationsSettings: React.FC<DestinationsSettingsProps> = ({
         onSubmit={onSubmitForm}
         formType="destination"
         availableServices={[destinationDefinition]}
-        formValues={{
-          ...currentDestination,
-          serviceType: Connector.id(destinationDefinition),
-        }}
         connector={currentDestination}
         selectedConnectorDefinitionSpecification={destinationSpecification}
         title={<FormattedMessage id="destination.destinationSettings" />}

airbyte-webapp/src/pages/OnboardingPage/components/DestinationStep.tsx

@@ -7,6 +7,7 @@ import { useGetDestinationDefinitionSpecificationAsync } from "services/connecto
 import { generateMessageFromError, FormError } from "utils/errorStatusMessage";
 import { ConnectorCard } from "views/Connector/ConnectorCard";
 import { useDocumentationPanelContext } from "views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext";
+import { ConnectorFormValues } from "views/Connector/ServiceForm";
 
 interface Props {
   onNextStep: () => void;
@@ -67,7 +68,7 @@ const DestinationStep: React.FC<Props> = ({ onNextStep, onSuccess }) => {
     setError(null);
     setDestinationDefinitionId(destinationDefinitionId);
   };
-  const onSubmitForm = async (values: { name: string; serviceType: string }) => {
+  const onSubmitForm = async (values: ConnectorFormValues) => {
     await onSubmitDestinationStep({
       ...values,
       destinationDefinitionId: destinationDefinitionSpecification?.destinationDefinitionId,
@@ -87,7 +88,6 @@ const DestinationStep: React.FC<Props> = ({ onNextStep, onSuccess }) => {
       errorMessage={errorMessage}
       selectedConnectorDefinitionSpecification={destinationDefinitionSpecification}
       isLoading={isLoading}
-      formValues={destinationDefinitionId ? { serviceType: destinationDefinitionId } : undefined}
     />
   );
 };

airbyte-webapp/src/pages/OnboardingPage/components/SourceStep.tsx

@@ -8,6 +8,7 @@ import { useGetSourceDefinitionSpecificationAsync } from "services/connector/Sou
 import { generateMessageFromError, FormError } from "utils/errorStatusMessage";
 import { ConnectorCard } from "views/Connector/ConnectorCard";
 import { useDocumentationPanelContext } from "views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext";
+import { ConnectorFormValues } from "views/Connector/ServiceForm";
 
 interface SourcesStepProps {
   onSuccess: () => void;
@@ -71,7 +72,7 @@ const SourceStep: React.FC<SourcesStepProps> = ({ onNextStep, onSuccess }) => {
     setSourceDefinitionId(sourceId);
   };
 
-  const onSubmitForm = async (values: { name: string; serviceType: string }) =>
+  const onSubmitForm = async (values: ConnectorFormValues) =>
     onSubmitSourceStep({
       ...values,
     });
@@ -90,7 +91,6 @@ const SourceStep: React.FC<SourcesStepProps> = ({ onNextStep, onSuccess }) => {
       errorMessage={errorMessage}
       selectedConnectorDefinitionSpecification={sourceDefinitionSpecification}
       isLoading={isLoading}
-      formValues={sourceDefinitionId ? { serviceType: sourceDefinitionId } : undefined}
     />
   );
 };

airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx

@@ -8,7 +8,7 @@ import { SourceDefinitionReadWithLatestTag } from "services/connector/SourceDefi
 import { useGetSourceDefinitionSpecificationAsync } from "services/connector/SourceDefinitionSpecificationService";
 import { generateMessageFromError, FormError } from "utils/errorStatusMessage";
 import { ConnectorCard } from "views/Connector/ConnectorCard";
-import { ServiceFormValues } from "views/Connector/ServiceForm/types";
+import { ConnectorFormValues } from "views/Connector/ServiceForm/types";
 
 interface SourceFormProps {
   onSubmit: (values: {
@@ -47,7 +47,7 @@ export const SourceForm: React.FC<SourceFormProps> = ({ onSubmit, sourceDefiniti
     setSourceDefinitionId(sourceDefinitionId);
   };
 
-  const onSubmitForm = (values: ServiceFormValues) => {
+  const onSubmitForm = (values: ConnectorFormValues) => {
     onSubmit({
       ...values,
       sourceDefinitionId: sourceDefinitionSpecification?.sourceDefinitionId,
@@ -67,7 +67,6 @@ export const SourceForm: React.FC<SourceFormProps> = ({ onSubmit, sourceDefiniti
       fetchingConnectorError={sourceDefinitionError instanceof Error ? sourceDefinitionError : null}
       errorMessage={errorMessage}
       isLoading={isLoading}
-      formValues={sourceDefinitionId ? { serviceType: sourceDefinitionId, name: "" } : undefined}
       title={<FormattedMessage id="onboarding.sourceSetUp" />}
       jobInfo={LogsRequestError.extractJobInfo(error)}
     />

airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceSettings.tsx

@@ -64,10 +64,6 @@ const SourceSettings: React.FC<SourceSettingsProps> = ({ currentSource, connecti
         formType="source"
         connector={currentSource}
         availableServices={[sourceDefinition]}
-        formValues={{
-          ...currentSource,
-          serviceType: currentSource.sourceDefinitionId,
-        }}
         selectedConnectorDefinitionSpecification={sourceDefinitionSpecification}
       />
       <DeleteBlock type="source" onDelete={onDelete} />

airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx

@@ -1,31 +1,51 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
 import { JobItem } from "components/JobItem/JobItem";
 import { Card } from "components/ui/Card";
 
-import { Connector, ConnectorSpecification, ConnectorT } from "core/domain/connector";
+import {
+  Connector,
+  ConnectorDefinition,
+  ConnectorDefinitionSpecification,
+  ConnectorSpecification,
+  ConnectorT,
+} from "core/domain/connector";
 import { SynchronousJobRead } from "core/request/AirbyteClient";
 import { LogsRequestError } from "core/request/LogsRequestError";
 import { useAdvancedModeSetting } from "hooks/services/useAdvancedModeSetting";
 import { generateMessageFromError } from "utils/errorStatusMessage";
-import { ServiceForm, ServiceFormProps, ServiceFormValues } from "views/Connector/ServiceForm";
+import { ConnectorFormValues, ServiceForm, ServiceFormValues } from "views/Connector/ServiceForm";
 
+import { useDocumentationPanelContext } from "../ConnectorDocumentationLayout/DocumentationPanelContext";
 import { ConnectorServiceTypeControl } from "../ServiceForm/components/Controls/ConnectorServiceTypeControl";
 import styles from "./ConnectorCard.module.scss";
 import { useAnalyticsTrackFunctions } from "./useAnalyticsTrackFunctions";
 import { useTestConnector } from "./useTestConnector";
 
-type ConnectorCardProvidedProps = Omit<
-  ServiceFormProps,
-  "isKeyConnectionInProgress" | "isSuccess" | "onStopTesting" | "testConnector"
->;
-
-interface ConnectorCardBaseProps extends ConnectorCardProvidedProps {
+// TODO: need to clean up the ConnectorCard and ServiceForm props,
+// since some of props are used in both components, and some of them used just as a prop-drill
+interface ConnectorCardBaseProps {
   title?: React.ReactNode;
   full?: boolean;
   jobInfo?: SynchronousJobRead | null;
   additionalSelectorComponent?: React.ReactNode;
+  onSubmit: (values: ConnectorFormValues) => Promise<void> | void;
+  onServiceSelect?: (id: string) => void;
+  availableServices: ConnectorDefinition[];
+
+  // used in ConnectorCard and ServiceForm
+  formType: "source" | "destination";
+  selectedConnectorDefinitionSpecification?: ConnectorDefinitionSpecification;
+  isEditMode?: boolean;
+
+  // used in ServiceForm
+  formId?: string;
+  fetchingConnectorError?: Error | null;
+  errorMessage?: React.ReactNode;
+  successMessage?: React.ReactNode;
+  hasSuccess?: boolean;
+  isLoading?: boolean;
 }
 
 interface ConnectorCardCreateProps extends ConnectorCardBaseProps {
@@ -50,6 +70,7 @@ export const ConnectorCard: React.FC<ConnectorCardCreateProps | ConnectorCardEdi
   const [isFormSubmitting, setIsFormSubmitting] = useState(false);
   const [advancedMode] = useAdvancedModeSetting();
 
+  const { setDocumentationUrl, setDocumentationPanelOpen } = useDocumentationPanelContext();
   const { testConnector, isTestConnectionInProgress, onStopTesting, error, reset } = useTestConnector(props);
   const { trackTestConnectorFailure, trackTestConnectorSuccess, trackTestConnectorStarted } =
     useAnalyticsTrackFunctions(props.formType);
@@ -60,26 +81,50 @@ export const ConnectorCard: React.FC<ConnectorCardCreateProps | ConnectorCardEdi
     setErrorStatusRequest(null);
   }, [props.selectedConnectorDefinitionSpecification, reset]);
 
+  const { selectedConnectorDefinitionSpecification, onServiceSelect, availableServices, isEditMode } = props;
+
+  const selectedConnectorDefinitionSpecificationId =
+    selectedConnectorDefinitionSpecification && ConnectorSpecification.id(selectedConnectorDefinitionSpecification);
+
+  const selectedService = useMemo(
+    () => availableServices.find((s) => Connector.id(s) === selectedConnectorDefinitionSpecificationId),
+    [availableServices, selectedConnectorDefinitionSpecificationId]
+  );
+
+  // Handle Doc panel
+  useEffect(() => {
+    if (!selectedService) {
+      return;
+    }
+
+    setDocumentationUrl(selectedService?.documentationUrl ?? "");
+    setDocumentationPanelOpen(true);
+  }, [selectedConnectorDefinitionSpecification, selectedService, setDocumentationPanelOpen, setDocumentationUrl]);
+
   const onHandleSubmit = async (values: ServiceFormValues) => {
+    if (!selectedService) {
+      return;
+    }
     setErrorStatusRequest(null);
     setIsFormSubmitting(true);
 
-    const connector = props.availableServices.find((item) => Connector.id(item) === values.serviceType);
+    //  combine the "ServiceFormValues" and serviceType to make "ConnectorFormValues"
+    const connectorFormValues: ConnectorFormValues = { ...values, serviceType: Connector.id(selectedService) };
 
     const testConnectorWithTracking = async () => {
-      trackTestConnectorStarted(connector);
+      trackTestConnectorStarted(selectedService);
       try {
-        await testConnector(values);
-        trackTestConnectorSuccess(connector);
+        await testConnector(connectorFormValues);
+        trackTestConnectorSuccess(selectedService);
       } catch (e) {
-        trackTestConnectorFailure(connector);
+        trackTestConnectorFailure(selectedService);
         throw e;
       }
     };
 
     try {
       await testConnectorWithTracking();
-      onSubmit(values);
+      onSubmit(connectorFormValues);
       setSaved(true);
     } catch (e) {
       setErrorStatusRequest(e);
@@ -89,9 +134,8 @@ export const ConnectorCard: React.FC<ConnectorCardCreateProps | ConnectorCardEdi
 
   const job = jobInfo || LogsRequestError.extractJobInfo(errorStatusRequest);
 
-  const { selectedConnectorDefinitionSpecification, onServiceSelect, availableServices, isEditMode } = props;
-  const selectedConnectorDefinitionSpecificationId =
-    selectedConnectorDefinitionSpecification && ConnectorSpecification.id(selectedConnectorDefinitionSpecification);
+  // Fill form with existing connector values otherwise set the default service name
+  const formValues = isEditMode ? props.connector : { name: selectedService?.name };
 
   return (
     <Card title={title} fullWidth={full}>
@@ -110,11 +154,13 @@ export const ConnectorCard: React.FC<ConnectorCardCreateProps | ConnectorCardEdi
         <div>
           <ServiceForm
             {...props}
-            errorMessage={props.errorMessage || (error && generateMessageFromError(error))}
+            selectedService={selectedService}
             isTestConnectionInProgress={isTestConnectionInProgress}
             onStopTesting={onStopTesting}
             testConnector={testConnector}
             onSubmit={onHandleSubmit}
+            formValues={formValues}
+            errorMessage={props.errorMessage || (error && generateMessageFromError(error))}
             successMessage={
               props.successMessage || (saved && props.isEditMode && <FormattedMessage id="form.changesSaved" />)
             }

airbyte-webapp/src/views/Connector/ConnectorCard/useTestConnector.tsx

@@ -2,11 +2,11 @@ import { useRef } from "react";
 
 import { ConnectorHelper } from "core/domain/connector";
 import { ConnectorT } from "core/domain/connector/types";
+import { CheckConnectionRead } from "core/request/AirbyteClient";
 import { CheckConnectorParams, useCheckConnector } from "hooks/services/useConnector";
 import { useCurrentWorkspace } from "services/workspaces/WorkspacesService";
-import { ServiceFormValues } from "views/Connector/ServiceForm";
 
-import { CheckConnectionRead } from "../../../core/request/AirbyteClient";
+import { ConnectorFormValues } from "../ServiceForm";
 
 export const useTestConnector = (
   props: {
@@ -21,7 +21,7 @@ export const useTestConnector = (
   isTestConnectionInProgress: boolean;
   isSuccess: boolean;
   onStopTesting: () => void;
-  testConnector: (v?: ServiceFormValues) => Promise<CheckConnectionRead>;
+  testConnector: (v?: ConnectorFormValues) => Promise<CheckConnectionRead>;
   error: Error | null;
   reset: () => void;
 } => {