From 8f5516d5a05605b3b4c519eee44b60a87e43af1d Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Fri, 16 Dec 2022 10:59:05 +0100
Subject: [PATCH] show success message right away (#20354)

---
 .../destination/DestinationForm/DestinationForm.tsx |  9 +--------
 .../ConnectionCreateDestinationForm.tsx             | 13 ++-----------
 .../CreationFormPage/ConnectionCreateSourceForm.tsx |  7 ++-----
 .../pages/CreateSourcePage/CreateSourcePage.tsx     |  7 ++-----
 .../CreateSourcePage/components/SourceForm.tsx      |  4 +---
 .../CreateDestinationPage/CreateDestinationPage.tsx | 11 ++---------
 .../views/Connector/ConnectorCard/ConnectorCard.tsx | 11 +++++++++--
 .../views/Connector/ConnectorForm/ConnectorForm.tsx |  4 +---
 .../src/views/Connector/ConnectorForm/FormRoot.tsx  |  6 +++---
 .../ConnectorForm/components/CreateControls.tsx     |  6 +++---
 10 files changed, 26 insertions(+), 52 deletions(-)

diff --git a/airbyte-webapp/src/components/destination/DestinationForm/DestinationForm.tsx b/airbyte-webapp/src/components/destination/DestinationForm/DestinationForm.tsx
index 084bcfe71a611..c789172cabcc9 100644
--- a/airbyte-webapp/src/components/destination/DestinationForm/DestinationForm.tsx
+++ b/airbyte-webapp/src/components/destination/DestinationForm/DestinationForm.tsx
@@ -22,7 +22,6 @@ interface DestinationFormProps {
     connectionConfiguration?: ConnectionConfiguration;
   }) => Promise<void>;
   destinationDefinitions: DestinationDefinitionRead[];
-  hasSuccess?: boolean;
   error?: FormError | null;
 }
 
@@ -34,12 +33,7 @@ const hasDestinationDefinitionId = (state: unknown): state is { destinationDefin
   );
 };
 
-export const DestinationForm: React.FC<DestinationFormProps> = ({
-  onSubmit,
-  destinationDefinitions,
-  error,
-  hasSuccess,
-}) => {
+export const DestinationForm: React.FC<DestinationFormProps> = ({ onSubmit, destinationDefinitions, error }) => {
   const location = useLocation();
 
   const [destinationDefinitionId, setDestinationDefinitionId] = useState(
@@ -88,7 +82,6 @@ export const DestinationForm: React.FC<DestinationFormProps> = ({
         title={<FormattedMessage id="onboarding.destinationSetUp" />}
         description={<FormattedMessage id="destinations.description" />}
         isLoading={isLoading}
-        hasSuccess={hasSuccess}
         fetchingConnectorError={destinationDefinitionError instanceof Error ? destinationDefinitionError : null}
         availableConnectorDefinitions={destinationDefinitions}
         onConnectorDefinitionSelect={onDropDownSelect}
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/ConnectionCreateDestinationForm.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/ConnectionCreateDestinationForm.tsx
index baf4831bd5b01..516b1c0e94c7c 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/ConnectionCreateDestinationForm.tsx
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/ConnectionCreateDestinationForm.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 // TODO: create separate component for source and destinations forms
 import { useLocation, useNavigate } from "react-router-dom";
 
@@ -16,7 +16,6 @@ interface ConnectionCreateDestinationFormProps {
 export const ConnectionCreateDestinationForm: React.FC<ConnectionCreateDestinationFormProps> = ({ afterSubmit }) => {
   const navigate = useNavigate();
   const location = useLocation();
-  const [successRequest, setSuccessRequest] = useState(false);
 
   const { destinationDefinitions } = useDestinationDefinitionList();
   const { mutateAsync: createDestination } = useCreateDestination();
@@ -31,9 +30,7 @@ export const ConnectionCreateDestinationForm: React.FC<ConnectionCreateDestinati
       values,
       destinationConnector: connector,
     });
-    setSuccessRequest(true);
     setTimeout(() => {
-      setSuccessRequest(false);
       navigate(
         {},
         {
@@ -55,11 +52,5 @@ export const ConnectionCreateDestinationForm: React.FC<ConnectionCreateDestinati
     };
   }, [setDocumentationPanelOpen]);
 
-  return (
-    <DestinationForm
-      onSubmit={onSubmitDestinationForm}
-      destinationDefinitions={destinationDefinitions}
-      hasSuccess={successRequest}
-    />
-  );
+  return <DestinationForm onSubmit={onSubmitDestinationForm} destinationDefinitions={destinationDefinitions} />;
 };
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/ConnectionCreateSourceForm.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/ConnectionCreateSourceForm.tsx
index db6a8de8ee89e..d0c0aba97abe7 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/ConnectionCreateSourceForm.tsx
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/ConnectionCreateSourceForm.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 
 import { ConnectionConfiguration } from "core/domain/connection";
@@ -14,7 +14,6 @@ interface ConnectionCreateSourceFormProps {
 export const ConnectionCreateSourceForm: React.FC<ConnectionCreateSourceFormProps> = ({ afterSubmit }) => {
   const location = useLocation();
   const navigate = useNavigate();
-  const [successRequest, setSuccessRequest] = useState(false);
   const { sourceDefinitions } = useSourceDefinitionList();
   const { mutateAsync: createSource } = useCreateSource();
 
@@ -29,9 +28,7 @@ export const ConnectionCreateSourceForm: React.FC<ConnectionCreateSourceFormProp
       throw new Error("No Connector Found");
     }
     const result = await createSource({ values, sourceConnector });
-    setSuccessRequest(true);
     setTimeout(() => {
-      setSuccessRequest(false);
       navigate(
         {},
         {
@@ -53,5 +50,5 @@ export const ConnectionCreateSourceForm: React.FC<ConnectionCreateSourceFormProp
     };
   }, [setDocumentationPanelOpen]);
 
-  return <SourceForm onSubmit={onSubmitSourceStep} sourceDefinitions={sourceDefinitions} hasSuccess={successRequest} />;
+  return <SourceForm onSubmit={onSubmitSourceStep} sourceDefinitions={sourceDefinitions} />;
 };
diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/CreateSourcePage.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/CreateSourcePage.tsx
index 6ba95a10107bb..01c582ec834a8 100644
--- a/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/CreateSourcePage.tsx
+++ b/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/CreateSourcePage.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
 
@@ -18,7 +18,6 @@ import { SourceForm } from "./components/SourceForm";
 const CreateSourcePage: React.FC = () => {
   useTrackPage(PageTrackingCodes.SOURCE_NEW);
   const navigate = useNavigate();
-  const [successRequest, setSuccessRequest] = useState(false);
 
   const { sourceDefinitions } = useSourceDefinitionList();
   const { mutateAsync: createSource } = useCreateSource();
@@ -34,9 +33,7 @@ const CreateSourcePage: React.FC = () => {
       throw new Error("No Connector Found");
     }
     const result = await createSource({ values, sourceConnector: connector });
-    setSuccessRequest(true);
     setTimeout(() => {
-      setSuccessRequest(false);
       navigate(`../${result.sourceId}`);
     }, 2000);
   };
@@ -47,7 +44,7 @@ const CreateSourcePage: React.FC = () => {
       <ConnectorDocumentationWrapper>
         <PageHeader title={null} middleTitleBlock={<FormattedMessage id="sources.newSourceTitle" />} />
         <FormPageContent>
-          <SourceForm onSubmit={onSubmitSourceStep} sourceDefinitions={sourceDefinitions} hasSuccess={successRequest} />
+          <SourceForm onSubmit={onSubmitSourceStep} sourceDefinitions={sourceDefinitions} />
           <CloudInviteUsersHint connectorType="source" />
         </FormPageContent>
       </ConnectorDocumentationWrapper>
diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx
index adec7e12d0af9..136f644265009 100644
--- a/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx
+++ b/airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/components/SourceForm.tsx
@@ -18,7 +18,6 @@ interface SourceFormProps {
     connectionConfiguration?: ConnectionConfiguration;
   }) => Promise<void>;
   sourceDefinitions: SourceDefinitionReadWithLatestTag[];
-  hasSuccess?: boolean;
   error?: FormError | null;
 }
 
@@ -30,7 +29,7 @@ const hasSourceDefinitionId = (state: unknown): state is { sourceDefinitionId: s
   );
 };
 
-export const SourceForm: React.FC<SourceFormProps> = ({ onSubmit, sourceDefinitions, error, hasSuccess }) => {
+export const SourceForm: React.FC<SourceFormProps> = ({ onSubmit, sourceDefinitions, error }) => {
   const location = useLocation();
 
   const [sourceDefinitionId, setSourceDefinitionId] = useState<string | null>(
@@ -60,7 +59,6 @@ export const SourceForm: React.FC<SourceFormProps> = ({ onSubmit, sourceDefiniti
       title={<FormattedMessage id="onboarding.sourceSetUp" />}
       description={<FormattedMessage id="sources.description" />}
       isLoading={isLoading}
-      hasSuccess={hasSuccess}
       fetchingConnectorError={sourceDefinitionError instanceof Error ? sourceDefinitionError : null}
       availableConnectorDefinitions={sourceDefinitions}
       onConnectorDefinitionSelect={onDropDownSelect}
diff --git a/airbyte-webapp/src/pages/destination/CreateDestinationPage/CreateDestinationPage.tsx b/airbyte-webapp/src/pages/destination/CreateDestinationPage/CreateDestinationPage.tsx
index 1f929feceea45..7232fbc91b304 100644
--- a/airbyte-webapp/src/pages/destination/CreateDestinationPage/CreateDestinationPage.tsx
+++ b/airbyte-webapp/src/pages/destination/CreateDestinationPage/CreateDestinationPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
 
@@ -18,7 +18,6 @@ export const CreateDestinationPage: React.FC = () => {
   useTrackPage(PageTrackingCodes.DESTINATION_NEW);
 
   const navigate = useNavigate();
-  const [successRequest, setSuccessRequest] = useState(false);
   const { destinationDefinitions } = useDestinationDefinitionList();
   const { mutateAsync: createDestination } = useCreateDestination();
 
@@ -32,9 +31,7 @@ export const CreateDestinationPage: React.FC = () => {
       values,
       destinationConnector: connector,
     });
-    setSuccessRequest(true);
     setTimeout(() => {
-      setSuccessRequest(false);
       navigate(`../${result.destinationId}`);
     }, 2000);
   };
@@ -45,11 +42,7 @@ export const CreateDestinationPage: React.FC = () => {
       <ConnectorDocumentationWrapper>
         <PageHeader title={null} middleTitleBlock={<FormattedMessage id="destinations.newDestinationTitle" />} />
         <FormPageContent>
-          <DestinationForm
-            onSubmit={onSubmitDestinationForm}
-            destinationDefinitions={destinationDefinitions}
-            hasSuccess={successRequest}
-          />
+          <DestinationForm onSubmit={onSubmitDestinationForm} destinationDefinitions={destinationDefinitions} />
           <CloudInviteUsersHint connectorType="destination" />
         </FormPageContent>
       </ConnectorDocumentationWrapper>
diff --git a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx
index c8ab073a074be..18b2aeacb8ac5 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx
@@ -51,7 +51,6 @@ interface ConnectorCardBaseProps {
   // used in ConnectorForm
   formId?: string;
   fetchingConnectorError?: Error | null;
-  hasSuccess?: boolean;
   isLoading?: boolean;
 }
 
@@ -85,7 +84,14 @@ export const ConnectorCard: React.FC<ConnectorCardCreateProps | ConnectorCardEdi
   const [advancedMode] = useAdvancedModeSetting();
 
   const { setDocumentationUrl, setDocumentationPanelOpen } = useDocumentationPanelContext();
-  const { testConnector, isTestConnectionInProgress, onStopTesting, error, reset } = useTestConnector(props);
+  const {
+    testConnector,
+    isTestConnectionInProgress,
+    onStopTesting,
+    error,
+    reset,
+    isSuccess: connectionTestSuccess,
+  } = useTestConnector(props);
   const { trackTestConnectorFailure, trackTestConnectorSuccess, trackTestConnectorStarted } =
     useAnalyticsTrackFunctions(props.formType);
 
@@ -202,6 +208,7 @@ export const ConnectorCard: React.FC<ConnectorCardCreateProps | ConnectorCardEdi
               selectedConnectorDefinition={selectedConnectorDefinition}
               selectedConnectorDefinitionSpecification={selectedConnectorDefinitionSpecification}
               isTestConnectionInProgress={isTestConnectionInProgress}
+              connectionTestSuccess={connectionTestSuccess}
               onStopTesting={onStopTesting}
               testConnector={testConnector}
               onSubmit={onHandleSubmit}
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx
index 46b5f492ce83d..a684eb6f5dfe2 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.tsx
@@ -80,7 +80,7 @@ export interface ConnectorFormProps {
   onSubmit: (values: ConnectorFormValues) => Promise<void>;
   isEditMode?: boolean;
   formValues?: Partial<ConnectorFormValues>;
-  hasSuccess?: boolean;
+  connectionTestSuccess?: boolean;
   errorMessage?: React.ReactNode;
   successMessage?: React.ReactNode;
   connectorId?: string;
@@ -99,7 +99,6 @@ export const ConnectorForm: React.FC<ConnectorFormProps> = (props) => {
     formValues,
     onSubmit,
     isEditMode,
-    isTestConnectionInProgress,
     onStopTesting,
     testConnector,
     selectedConnectorDefinition,
@@ -166,7 +165,6 @@ export const ConnectorForm: React.FC<ConnectorFormProps> = (props) => {
             {...props}
             formFields={formFields}
             errorMessage={errorMessage}
-            isTestConnectionInProgress={isTestConnectionInProgress}
             onStopTestingConnector={onStopTesting ? () => onStopTesting() : undefined}
             onRetest={testConnector ? async () => await testConnector() : undefined}
           />
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/FormRoot.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/FormRoot.tsx
index b88b7b6fa5567..d11cb3684cd06 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/FormRoot.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorForm/FormRoot.tsx
@@ -11,7 +11,7 @@ import { ConnectorFormValues } from "./types";
 
 interface FormRootProps {
   formFields: FormBlock;
-  hasSuccess?: boolean;
+  connectionTestSuccess?: boolean;
   isTestConnectionInProgress?: boolean;
   errorMessage?: React.ReactNode;
   successMessage?: React.ReactNode;
@@ -25,7 +25,7 @@ export const FormRoot: React.FC<FormRootProps> = ({
   formFields,
   successMessage,
   errorMessage,
-  hasSuccess,
+  connectionTestSuccess,
   onStopTestingConnector,
 }) => {
   const { dirty, isSubmitting, isValid } = useFormikContext<ConnectorFormValues>();
@@ -56,7 +56,7 @@ export const FormRoot: React.FC<FormRootProps> = ({
           isSubmitting={isSubmitting || isTestConnectionInProgress}
           errorMessage={errorMessage}
           formType={formType}
-          hasSuccess={hasSuccess}
+          connectionTestSuccess={connectionTestSuccess}
         />
       )}
     </Form>
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/CreateControls.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/CreateControls.tsx
index 83ec70e28db20..689bf4fdca4f0 100644
--- a/airbyte-webapp/src/views/Connector/ConnectorForm/components/CreateControls.tsx
+++ b/airbyte-webapp/src/views/Connector/ConnectorForm/components/CreateControls.tsx
@@ -13,7 +13,7 @@ interface CreateControlProps {
   formType: "source" | "destination";
   isSubmitting: boolean;
   errorMessage?: React.ReactNode;
-  hasSuccess?: boolean;
+  connectionTestSuccess?: boolean;
 
   isTestConnectionInProgress: boolean;
   onCancelTesting?: () => void;
@@ -30,7 +30,7 @@ const CreateControls: React.FC<CreateControlProps> = ({
   isTestConnectionInProgress,
   isSubmitting,
   formType,
-  hasSuccess,
+  connectionTestSuccess,
   errorMessage,
   onCancelTesting,
 }) => {
@@ -38,7 +38,7 @@ const CreateControls: React.FC<CreateControlProps> = ({
     return <TestingConnectionSpinner isCancellable={isTestConnectionInProgress} onCancelTesting={onCancelTesting} />;
   }
 
-  if (hasSuccess) {
+  if (connectionTestSuccess) {
     return <TestingConnectionSuccess />;
   }