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

airbyte-webapp/src/components/GroupControls/index.stories.tsx

@@ -3,8 +3,8 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { Card } from "components/ui/Card";
 
 import { FormBlock, FormConditionItem } from "core/form/types";
-import { GroupLabel } from "views/Connector/ServiceForm/components/Sections/GroupLabel";
-import { SectionContainer } from "views/Connector/ServiceForm/components/Sections/SectionContainer";
+import { GroupLabel } from "views/Connector/ConnectorForm/components/Sections/GroupLabel";
+import { SectionContainer } from "views/Connector/ConnectorForm/components/Sections/SectionContainer";
 
 import GroupControls from "./GroupControls";
 

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 { ConnectorCardValues, FrequentlyUsedDestinations, StartWithDestination } from "views/Connector/ConnectorForm";
 
 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: ConnectorCardValues) => {
     onSubmit({
       ...values,
       destinationDefinitionId: destinationDefinitionSpecification?.destinationDefinitionId,
@@ -75,19 +75,18 @@ export const DestinationForm: React.FC<DestinationFormProps> = ({
   return (
     <>
       <ConnectorCard
-        onServiceSelect={onDropDownSelect}
-        fetchingConnectorError={destinationDefinitionError instanceof Error ? destinationDefinitionError : null}
-        onSubmit={onSubmitForm}
         formType="destination"
-        additionalSelectorComponent={frequentlyUsedDestinationsComponent}
-        availableServices={destinationDefinitions}
-        selectedConnectorDefinitionSpecification={destinationDefinitionSpecification}
+        title={<FormattedMessage id="onboarding.destinationSetUp" />}
+        isLoading={isLoading}
         hasSuccess={hasSuccess}
         errorMessage={errorMessage}
-        isLoading={isLoading}
-        formValues={destinationDefinitionId ? { serviceType: destinationDefinitionId } : undefined}
-        title={<FormattedMessage id="onboarding.destinationSetUp" />}
+        fetchingConnectorError={destinationDefinitionError instanceof Error ? destinationDefinitionError : null}
+        availableConnectorDefinitions={destinationDefinitions}
+        onConnectorDefinitionSelect={onDropDownSelect}
+        selectedConnectorDefinitionSpecification={destinationDefinitionSpecification}
+        onSubmit={onSubmitForm}
         jobInfo={LogsRequestError.extractJobInfo(error)}
+        additionalSelectorComponent={frequentlyUsedDestinationsComponent}
       />
       {startWithDestinationComponent}
     </>

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

@@ -3,15 +3,14 @@ import { FormattedMessage } from "react-intl";
 
 import { DeleteBlock } from "components/common/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 { ConnectorCardValues } from "views/Connector/ConnectorForm";
 
 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: ConnectorCardValues) => {
     await updateDestination({
       values,
       destinationId: currentDestination.destinationId,
@@ -55,18 +50,14 @@ const DestinationsSettings: React.FC<DestinationsSettingsProps> = ({
   return (
     <div className={styles.content}>
       <ConnectorCard
-        formId={formId}
-        isEditMode
-        onSubmit={onSubmitForm}
         formType="destination"
-        availableServices={[destinationDefinition]}
-        formValues={{
-          ...currentDestination,
-          serviceType: Connector.id(destinationDefinition),
-        }}
-        connector={currentDestination}
-        selectedConnectorDefinitionSpecification={destinationSpecification}
         title={<FormattedMessage id="destination.destinationSettings" />}
+        isEditMode
+        formId={formId}
+        availableConnectorDefinitions={[destinationDefinition]}
+        selectedConnectorDefinitionSpecification={destinationSpecification}
+        connector={currentDestination}
+        onSubmit={onSubmitForm}
       />
       <DeleteBlock type="destination" onDelete={onDelete} />
     </div>

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 { ConnectorCardValues } from "views/Connector/ConnectorForm";
 
 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: ConnectorCardValues) => {
     await onSubmitDestinationStep({
       ...values,
       destinationDefinitionId: destinationDefinitionSpecification?.destinationDefinitionId,
@@ -80,14 +81,13 @@ const DestinationStep: React.FC<Props> = ({ onNextStep, onSuccess }) => {
     <ConnectorCard
       full
       formType="destination"
-      onServiceSelect={onDropDownSelect}
-      onSubmit={onSubmitForm}
+      isLoading={isLoading}
       hasSuccess={successRequest}
-      availableServices={destinationDefinitions}
       errorMessage={errorMessage}
+      availableConnectorDefinitions={destinationDefinitions}
+      onConnectorDefinitionSelect={onDropDownSelect}
       selectedConnectorDefinitionSpecification={destinationDefinitionSpecification}
-      isLoading={isLoading}
-      formValues={destinationDefinitionId ? { serviceType: destinationDefinitionId } : undefined}
+      onSubmit={onSubmitForm}
     />
   );
 };

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 { ConnectorCardValues } from "views/Connector/ConnectorForm";
 
 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: ConnectorCardValues) =>
     onSubmitSourceStep({
       ...values,
     });
@@ -81,16 +82,15 @@ const SourceStep: React.FC<SourcesStepProps> = ({ onNextStep, onSuccess }) => {
   return (
     <ConnectorCard
       full
-      jobInfo={LogsRequestError.extractJobInfo(error)}
-      onServiceSelect={onServiceSelect}
-      onSubmit={onSubmitForm}
       formType="source"
-      availableServices={sourceDefinitions}
+      isLoading={isLoading}
       hasSuccess={successRequest}
       errorMessage={errorMessage}
+      availableConnectorDefinitions={sourceDefinitions}
+      onConnectorDefinitionSelect={onServiceSelect}
       selectedConnectorDefinitionSpecification={sourceDefinitionSpecification}
-      isLoading={isLoading}
-      formValues={sourceDefinitionId ? { serviceType: sourceDefinitionId } : undefined}
+      onSubmit={onSubmitForm}
+      jobInfo={LogsRequestError.extractJobInfo(error)}
     />
   );
 };

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 { ConnectorCardValues } from "views/Connector/ConnectorForm/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: ConnectorCardValues) => {
     onSubmit({
       ...values,
       sourceDefinitionId: sourceDefinitionSpecification?.sourceDefinitionId,
@@ -58,17 +58,16 @@ export const SourceForm: React.FC<SourceFormProps> = ({ onSubmit, sourceDefiniti
 
   return (
     <ConnectorCard
-      onServiceSelect={onDropDownSelect}
-      onSubmit={onSubmitForm}
       formType="source"
-      availableServices={sourceDefinitions}
-      selectedConnectorDefinitionSpecification={sourceDefinitionSpecification}
+      title={<FormattedMessage id="onboarding.sourceSetUp" />}
+      isLoading={isLoading}
       hasSuccess={hasSuccess}
-      fetchingConnectorError={sourceDefinitionError instanceof Error ? sourceDefinitionError : null}
       errorMessage={errorMessage}
-      isLoading={isLoading}
-      formValues={sourceDefinitionId ? { serviceType: sourceDefinitionId, name: "" } : undefined}
-      title={<FormattedMessage id="onboarding.sourceSetUp" />}
+      fetchingConnectorError={sourceDefinitionError instanceof Error ? sourceDefinitionError : null}
+      availableConnectorDefinitions={sourceDefinitions}
+      onConnectorDefinitionSelect={onDropDownSelect}
+      selectedConnectorDefinitionSpecification={sourceDefinitionSpecification}
+      onSubmit={onSubmitForm}
       jobInfo={LogsRequestError.extractJobInfo(error)}
     />
   );

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

@@ -57,18 +57,14 @@ const SourceSettings: React.FC<SourceSettingsProps> = ({ currentSource, connecti
   return (
     <div className={styles.content}>
       <ConnectorCard
-        formId={formId}
+        formType="source"
         title={<FormattedMessage id="sources.sourceSettings" />}
         isEditMode
-        onSubmit={onSubmit}
-        formType="source"
-        connector={currentSource}
-        availableServices={[sourceDefinition]}
-        formValues={{
-          ...currentSource,
-          serviceType: currentSource.sourceDefinitionId,
-        }}
+        formId={formId}
+        availableConnectorDefinitions={[sourceDefinition]}
         selectedConnectorDefinitionSpecification={sourceDefinitionSpecification}
+        connector={currentSource}
+        onSubmit={onSubmit}
       />
       <DeleteBlock type="source" onDelete={onDelete} />
     </div>