Misc Improvements to assist Connection Form Refactor (#16303)

* Move exports to declaration for formConfig

* Add ConnectionOrPartialConnection, move ConnectionForm exports

* Removing additionBottomControls as it was unused

* Create and use FormError, test createFormErrorMessage

* Remove unnecessary eslint ignore, remove unnecessary async/await

* rename createFormErrorMessage

airbyte-webapp/src/components/CreateConnectionContent/CreateConnectionContent.tsx

@@ -2,7 +2,6 @@ import { faRedoAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { Suspense, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
-import styled from "styled-components";
 
 import { Button, ContentCard } from "components";
 import { IDataItem } from "components/base/DropDown/components/Option";
@@ -13,25 +12,14 @@ import { Action, Namespace } from "core/analytics";
 import { LogsRequestError } from "core/request/LogsRequestError";
 import { useAnalyticsService } from "hooks/services/Analytics";
 import { useCreateConnection, ValuesProps } from "hooks/services/useConnectionHook";
-import ConnectionForm from "views/Connection/ConnectionForm";
-import { ConnectionFormProps } from "views/Connection/ConnectionForm/ConnectionForm";
+import { ConnectionForm, ConnectionFormProps } from "views/Connection/ConnectionForm";
 
 import { DestinationRead, SourceRead, WebBackendConnectionRead } from "../../core/request/AirbyteClient";
 import { useDiscoverSchema } from "../../hooks/services/useSourceHook";
 import TryAfterErrorBlock from "./components/TryAfterErrorBlock";
 import styles from "./CreateConnectionContent.module.scss";
 
-const SkipButton = styled.div`
-  margin-top: 6px;
-
-  & > button {
-    min-width: 239px;
-    margin-left: 9px;
-  }
-`;
-
 interface CreateConnectionContentProps {
-  additionBottomControls?: React.ReactNode;
   source: SourceRead;
   destination: DestinationRead;
   afterSubmitConnection?: (connection: WebBackendConnectionRead) => void;
@@ -41,7 +29,6 @@ const CreateConnectionContent: React.FC<CreateConnectionContentProps> = ({
   source,
   destination,
   afterSubmitConnection,
-  additionBottomControls,
 }) => {
   const { mutateAsync: createConnection } = useCreateConnection();
   const analyticsService = useAnalyticsService();
@@ -104,10 +91,7 @@ const CreateConnectionContent: React.FC<CreateConnectionContentProps> = ({
     const job = LogsRequestError.extractJobInfo(schemaErrorStatus);
     return (
       <ContentCard>
-        <TryAfterErrorBlock
-          onClick={onDiscoverSchema}
-          additionControl={<SkipButton>{additionBottomControls}</SkipButton>}
-        />
+        <TryAfterErrorBlock onClick={onDiscoverSchema} />
         {job && <JobItem job={job} />}
       </ContentCard>
     );
@@ -120,7 +104,6 @@ const CreateConnectionContent: React.FC<CreateConnectionContentProps> = ({
       <ConnectionForm
         mode="create"
         connection={connection}
-        additionBottomControls={additionBottomControls}
         onDropDownSelect={onSelectFrequency}
         onSubmit={onSubmitConnectionStep}
         additionalSchemaControl={

airbyte-webapp/src/hooks/services/useSourceHook.tsx

@@ -180,15 +180,12 @@ const useDiscoverSchema = (
     } finally {
       setIsLoading(false);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sourceId]);
+  }, [disableCache, service, sourceId]);
 
   useEffect(() => {
-    (async () => {
-      if (sourceId) {
-        await onDiscoverSchema();
-      }
-    })();
+    if (sourceId) {
+      onDiscoverSchema();
+    }
   }, [onDiscoverSchema, sourceId]);
 
   return { schemaErrorStatus, isLoading, schema, catalogId, onDiscoverSchema };

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ReplicationView.tsx

@@ -21,8 +21,7 @@ import {
 } from "hooks/services/useConnectionHook";
 import { equal } from "utils/objects";
 import { CatalogDiffModal } from "views/Connection/CatalogDiffModal/CatalogDiffModal";
-import ConnectionForm from "views/Connection/ConnectionForm";
-import { ConnectionFormSubmitResult } from "views/Connection/ConnectionForm/ConnectionForm";
+import { ConnectionForm, ConnectionFormSubmitResult } from "views/Connection/ConnectionForm";
 
 interface ReplicationViewProps {
   onAfterSaveSchema: () => void;

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

@@ -8,7 +8,7 @@ import { LogsRequestError } from "core/request/LogsRequestError";
 import { useAnalyticsService } from "hooks/services/Analytics";
 import useRouter from "hooks/useRouter";
 import { useGetDestinationDefinitionSpecificationAsync } from "services/connector/DestinationDefinitionSpecificationService";
-import { createFormErrorMessage } from "utils/errorStatusMessage";
+import { generateMessageFromError, FormError } from "utils/errorStatusMessage";
 import { ConnectorCard } from "views/Connector/ConnectorCard";
 
 interface DestinationFormProps {
@@ -21,7 +21,7 @@ interface DestinationFormProps {
   afterSelectConnector?: () => void;
   destinationDefinitions: DestinationDefinitionRead[];
   hasSuccess?: boolean;
-  error?: { message?: string; status?: number } | null;
+  error?: FormError | null;
 }
 
 const hasDestinationDefinitionId = (state: unknown): state is { destinationDefinitionId: string } => {
@@ -75,7 +75,7 @@ export const DestinationForm: React.FC<DestinationFormProps> = ({
     });
   };
 
-  const errorMessage = error ? createFormErrorMessage(error) : null;
+  const errorMessage = error ? generateMessageFromError(error) : null;
 
   return (
     <ConnectorCard

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

@@ -2,12 +2,11 @@ import React, { useEffect, useState } from "react";
 
 import { Action, Namespace } from "core/analytics";
 import { ConnectionConfiguration } from "core/domain/connection";
-import { JobInfo } from "core/domain/job";
 import { useAnalyticsService } from "hooks/services/Analytics";
 import { useCreateDestination } from "hooks/services/useDestinationHook";
 import { useDestinationDefinitionList } from "services/connector/DestinationDefinitionService";
 import { useGetDestinationDefinitionSpecificationAsync } from "services/connector/DestinationDefinitionSpecificationService";
-import { createFormErrorMessage } from "utils/errorStatusMessage";
+import { generateMessageFromError, FormError } from "utils/errorStatusMessage";
 import { ConnectorCard } from "views/Connector/ConnectorCard";
 import { useDocumentationPanelContext } from "views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext";
 
@@ -23,11 +22,7 @@ const DestinationStep: React.FC<Props> = ({ onNextStep, onSuccess }) => {
     useGetDestinationDefinitionSpecificationAsync(destinationDefinitionId);
   const { destinationDefinitions } = useDestinationDefinitionList();
   const [successRequest, setSuccessRequest] = useState(false);
-  const [error, setError] = useState<{
-    status: number;
-    response: JobInfo;
-    message: string;
-  } | null>(null);
+  const [error, setError] = useState<FormError | null>(null);
 
   const { mutateAsync: createDestination } = useCreateDestination();
 
@@ -89,7 +84,7 @@ const DestinationStep: React.FC<Props> = ({ onNextStep, onSuccess }) => {
     });
   };
 
-  const errorMessage = error ? createFormErrorMessage(error) : null;
+  const errorMessage = error ? generateMessageFromError(error) : null;
 
   return (
     <ConnectorCard

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

@@ -2,13 +2,12 @@ import React, { useEffect, useState } from "react";
 
 import { Action, Namespace } from "core/analytics";
 import { ConnectionConfiguration } from "core/domain/connection";
-import { JobInfo } from "core/domain/job";
 import { LogsRequestError } from "core/request/LogsRequestError";
 import { useAnalyticsService } from "hooks/services/Analytics";
 import { useCreateSource } from "hooks/services/useSourceHook";
 import { useSourceDefinitionList } from "services/connector/SourceDefinitionService";
 import { useGetSourceDefinitionSpecificationAsync } from "services/connector/SourceDefinitionSpecificationService";
-import { createFormErrorMessage } from "utils/errorStatusMessage";
+import { generateMessageFromError, FormError } from "utils/errorStatusMessage";
 import { ConnectorCard } from "views/Connector/ConnectorCard";
 import { useDocumentationPanelContext } from "views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext";
 
@@ -21,11 +20,7 @@ const SourceStep: React.FC<SourcesStepProps> = ({ onNextStep, onSuccess }) => {
   const { sourceDefinitions } = useSourceDefinitionList();
   const [sourceDefinitionId, setSourceDefinitionId] = useState<string | null>(null);
   const [successRequest, setSuccessRequest] = useState(false);
-  const [error, setError] = useState<{
-    status: number;
-    response: JobInfo;
-    message: string;
-  } | null>(null);
+  const [error, setError] = useState<FormError | null>(null);
 
   const { setDocumentationUrl, setDocumentationPanelOpen } = useDocumentationPanelContext();
   const { mutateAsync: createSource } = useCreateSource();
@@ -91,7 +86,7 @@ const SourceStep: React.FC<SourcesStepProps> = ({ onNextStep, onSuccess }) => {
       ...values,
     });
 
-  const errorMessage = error ? createFormErrorMessage(error) : "";
+  const errorMessage = error ? generateMessageFromError(error) : "";
 
   return (
     <ConnectorCard

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

@@ -8,7 +8,7 @@ import { useAnalyticsService } from "hooks/services/Analytics";
 import useRouter from "hooks/useRouter";
 import { SourceDefinitionReadWithLatestTag } from "services/connector/SourceDefinitionService";
 import { useGetSourceDefinitionSpecificationAsync } from "services/connector/SourceDefinitionSpecificationService";
-import { createFormErrorMessage } from "utils/errorStatusMessage";
+import { generateMessageFromError, FormError } from "utils/errorStatusMessage";
 import { ConnectorCard } from "views/Connector/ConnectorCard";
 import { ServiceFormValues } from "views/Connector/ServiceForm/types";
 
@@ -22,7 +22,7 @@ interface SourceFormProps {
   afterSelectConnector?: () => void;
   sourceDefinitions: SourceDefinitionReadWithLatestTag[];
   hasSuccess?: boolean;
-  error?: { message?: string; status?: number } | null;
+  error?: FormError | null;
 }
 
 const hasSourceDefinitionId = (state: unknown): state is { sourceDefinitionId: string } => {
@@ -76,7 +76,7 @@ export const SourceForm: React.FC<SourceFormProps> = ({
     });
   };
 
-  const errorMessage = error ? createFormErrorMessage(error) : null;
+  const errorMessage = error ? generateMessageFromError(error) : null;
 
   return (
     <ConnectorCard

airbyte-webapp/src/utils/errorStatusMessage.test.tsx

@@ -0,0 +1,35 @@
+import { generateMessageFromError, FormError } from "./errorStatusMessage";
+
+describe("#errorStatusMessage", () => {
+  it("should return a provided error message", () => {
+    const errMsg = "test";
+    expect(generateMessageFromError(new Error(errMsg))).toBe(errMsg);
+  });
+
+  it("should return null if no error message and no status, or status is 0", () => {
+    expect(generateMessageFromError(new Error())).toBe(null);
+    const fakeStatusError = new FormError();
+    fakeStatusError.status = 0;
+    expect(generateMessageFromError(fakeStatusError)).toBe(null);
+  });
+
+  it("should return a validation error message if status is 400", () => {
+    const fakeStatusError = new FormError();
+    fakeStatusError.status = 400;
+    expect(generateMessageFromError(fakeStatusError)).toMatchInlineSnapshot(`
+      <Memo(MemoizedFormattedMessage)
+        id="form.validationError"
+      />
+    `);
+  });
+
+  it("should return a 'some error' message if status is > 0 and not 400", () => {
+    const fakeStatusError = new FormError();
+    fakeStatusError.status = 401;
+    expect(generateMessageFromError(fakeStatusError)).toMatchInlineSnapshot(`
+      <Memo(MemoizedFormattedMessage)
+        id="form.someError"
+      />
+    `);
+  });
+});

airbyte-webapp/src/utils/errorStatusMessage.tsx

@@ -1,6 +1,10 @@
 import { FormattedMessage } from "react-intl";
 
-export const createFormErrorMessage = (error: { status?: number; message?: string }): JSX.Element | string | null => {
+export class FormError extends Error {
+  status?: number;
+}
+
+export const generateMessageFromError = (error: FormError): JSX.Element | string | null => {
   if (error.message) {
     return error.message;
   }

airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.test.tsx

@@ -11,7 +11,7 @@ import {
 import { ConfirmationModalService } from "hooks/services/ConfirmationModal/ConfirmationModalService";
 import { render } from "utils/testutils";
 
-import ConnectionForm, { ConnectionFormProps } from "./ConnectionForm";
+import { ConnectionForm, ConnectionFormProps } from "./ConnectionForm";
 
 const mockSource: SourceRead = {
   sourceId: "test-source",

airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx

@@ -16,7 +16,7 @@ import {
 import { useFormChangeTrackerService, useUniqueFormId } from "hooks/services/FormChangeTracker";
 import { useGetDestinationDefinitionSpecification } from "services/connector/DestinationDefinitionSpecificationService";
 import { useCurrentWorkspace } from "services/workspaces/WorkspacesService";
-import { createFormErrorMessage } from "utils/errorStatusMessage";
+import { generateMessageFromError } from "utils/errorStatusMessage";
 
 import CreateControls from "./components/CreateControls";
 import EditControls from "./components/EditControls";
@@ -118,10 +118,13 @@ const DirtyChangeTracker: React.FC<DirtyChangeTrackerProps> = ({ dirty, onChange
   return null;
 };
 
-interface ConnectionFormProps {
+export type ConnectionOrPartialConnection =
+  | WebBackendConnectionRead
+  | (Partial<WebBackendConnectionRead> & Pick<WebBackendConnectionRead, "syncCatalog" | "source" | "destination">);
+
+export interface ConnectionFormProps {
   onSubmit: (values: ConnectionFormValues) => Promise<ConnectionFormSubmitResult | void>;
   className?: string;
-  additionBottomControls?: React.ReactNode;
   successMessage?: React.ReactNode;
   onDropDownSelect?: (item: DropDownRow.IDataItem) => void;
   onCancel?: () => void;
@@ -132,19 +135,16 @@ interface ConnectionFormProps {
   mode: ConnectionFormMode;
   additionalSchemaControl?: React.ReactNode;
 
-  connection:
-    | WebBackendConnectionRead
-    | (Partial<WebBackendConnectionRead> & Pick<WebBackendConnectionRead, "syncCatalog" | "source" | "destination">);
+  connection: ConnectionOrPartialConnection;
 }
 
-const ConnectionForm: React.FC<ConnectionFormProps> = ({
+export const ConnectionForm: React.FC<ConnectionFormProps> = ({
   onSubmit,
   onCancel,
   className,
   onDropDownSelect,
   mode,
   successMessage,
-  additionBottomControls,
   canSubmitUntouchedForm,
   additionalSchemaControl,
   connection,
@@ -194,7 +194,7 @@ const ConnectionForm: React.FC<ConnectionFormProps> = ({
     [connection.operations, workspace.workspaceId, onSubmit, clearFormChange, formId]
   );
 
-  const errorMessage = submitError ? createFormErrorMessage(submitError) : null;
+  const errorMessage = submitError ? generateMessageFromError(submitError) : null;
   const frequencies = useFrequencyDropdownData(connection.scheduleData);
 
   return (
@@ -373,7 +373,6 @@ const ConnectionForm: React.FC<ConnectionFormProps> = ({
                 onEndEditTransformation={toggleEditingTransformation}
               />
               <CreateControls
-                additionBottomControls={additionBottomControls}
                 isSubmitting={isSubmitting}
                 isValid={isValid && !editingTransformation}
                 errorMessage={
@@ -387,6 +386,3 @@ const ConnectionForm: React.FC<ConnectionFormProps> = ({
     </Formik>
   );
 };
-
-export type { ConnectionFormProps };
-export default ConnectionForm;

airbyte-webapp/src/views/Connection/ConnectionForm/components/CreateControls.tsx

@@ -8,7 +8,6 @@ interface CreateControlsProps {
   isSubmitting: boolean;
   isValid: boolean;
   errorMessage?: React.ReactNode;
-  additionBottomControls?: React.ReactNode;
 }
 
 const ButtonContainer = styled.div`
@@ -59,12 +58,7 @@ const ErrorText = styled.div`
   max-width: 400px;
 `;
 
-const CreateControls: React.FC<CreateControlsProps> = ({
-  isSubmitting,
-  errorMessage,
-  additionBottomControls,
-  isValid,
-}) => {
+const CreateControls: React.FC<CreateControlsProps> = ({ isSubmitting, errorMessage, isValid }) => {
   if (isSubmitting) {
     return (
       <LoadingContainer>
@@ -90,7 +84,6 @@ const CreateControls: React.FC<CreateControlsProps> = ({
         <div />
       )}
       <div>
-        {additionBottomControls || null}
         <Button type="submit" disabled={isSubmitting || !isValid}>
           <FormattedMessage id="onboarding.setUpConnection" />
         </Button>