warn on navigating away from unsaved connector form with error (#20072)

airbytehq · Dec 6, 2022 · 4ea4417 · 4ea4417
1 parent f1c9d8d
commit 4ea4417
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 6 deletions.
diff --git a/airbyte-webapp/src/components/destination/DestinationForm/DestinationForm.tsx b/airbyte-webapp/src/components/destination/DestinationForm/DestinationForm.tsx
@@ -20,7 +20,7 @@ interface DestinationFormProps {
     serviceType: string;
     destinationDefinitionId?: string;
     connectionConfiguration?: ConnectionConfiguration;
-  }) => void;
+  }) => Promise<void>;
   destinationDefinitions: DestinationDefinitionRead[];
   hasSuccess?: boolean;
   error?: FormError | null;

diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx
@@ -16,7 +16,7 @@ interface SourceFormProps {
     serviceType: string;
     sourceDefinitionId?: string;
     connectionConfiguration?: ConnectionConfiguration;
-  }) => void;
+  }) => Promise<void>;
   sourceDefinitions: SourceDefinitionReadWithLatestTag[];
   hasSuccess?: boolean;
   error?: FormError | null;

diff --git a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx
@@ -149,6 +149,8 @@ export const ConnectorCard: React.FC<ConnectorCardCreateProps | ConnectorCardEdi
     } catch (e) {
       setErrorStatusRequest(e);
       setIsFormSubmitting(false);
+      // keep throwing the exception to inform the component the submit did not go through
+      throw e;
     }
   };
 

diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.test.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.test.tsx
@@ -242,7 +242,7 @@ describe("Service Form", () => {
         <ConnectorForm
           formType="source"
           formValues={{ name: "test-name" }}
-          onSubmit={(values) => {
+          onSubmit={async (values) => {
             result = values;
           }}
           selectedConnectorDefinitionSpecification={
@@ -381,7 +381,7 @@ describe("Service Form", () => {
     const renderConnectorForm = (props: ConnectorFormProps) =>
       render(<ConnectorForm {...props} formValues={{ name: "test-name" }} />);
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    const onSubmitClb = () => {};
+    const onSubmitClb = async () => {};
     const connectorDefSpec = {
       connectionSpecification: schema,
       sourceDefinitionId: "test-service-type",

diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx
@@ -89,7 +89,7 @@ export interface ConnectorFormProps {
   formId?: string;
   selectedConnectorDefinition?: ConnectorDefinition;
   selectedConnectorDefinitionSpecification?: ConnectorDefinitionSpecification;
-  onSubmit: (values: ConnectorFormValues) => Promise<void> | void;
+  onSubmit: (values: ConnectorFormValues) => Promise<void>;
   isLoading?: boolean;
   isEditMode?: boolean;
   formValues?: Partial<ConnectorFormValues>;

diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/index.stories.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/index.stories.tsx
@@ -39,7 +39,7 @@ export default {
     formValues: {
       serviceType: TempConnector.sourceDefinitionId,
     },
-    onSubmit: (v) => console.log(v),
+    onSubmit: async (v) => console.log(v),
     availableServices: [TempConnector],
   },
   decorators: [withMock],