From bf98c908bc345d331e5f3831dfefaa29920d6b65 Mon Sep 17 00:00:00 2001
From: tealjulia <teal@airbyte.io>
Date: Fri, 2 Sep 2022 12:59:31 -0400
Subject: [PATCH 01/10] display error messages if they exist

---
 .../views/Connection/ConnectionForm/ConnectionForm.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
index 89147975a657..2f6db5b8375e 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
@@ -317,7 +317,9 @@ export const ConnectionForm: React.FC<ConnectionFormProps> = ({
                 onCancel?.();
               }}
               successMessage={successMessage}
-              errorMessage={errorMessage || !isValid ? formatMessage({ id: "connectionForm.validation.error" }) : null}
+              errorMessage={
+                errorMessage ? errorMessage : !isValid ? formatMessage({ id: "connectionForm.validation.error" }) : null
+              }
               enableControls={canSubmitUntouchedForm}
             />
           )}
@@ -337,7 +339,11 @@ export const ConnectionForm: React.FC<ConnectionFormProps> = ({
                 isSubmitting={isSubmitting}
                 isValid={isValid && !editingTransformation}
                 errorMessage={
-                  errorMessage || !isValid ? formatMessage({ id: "connectionForm.validation.error" }) : null
+                  errorMessage
+                    ? errorMessage
+                    : !isValid
+                    ? formatMessage({ id: "connectionForm.validation.error" })
+                    : null
                 }
               />
             </>

From e3212ffc482f897290a20c1311b399d3f9ee6921 Mon Sep 17 00:00:00 2001
From: tealjulia <teal@airbyte.io>
Date: Wed, 7 Sep 2022 17:31:11 -0400
Subject: [PATCH 02/10] get it working with styled components first

---
 .../ConnectionForm/components/EditControls.tsx      | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx
index 8fb8b4d83eb9..edc1d81d95a9 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx
@@ -15,12 +15,13 @@ interface EditControlProps {
   withLine?: boolean;
 }
 
-const Buttons = styled.div`
+const Content = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-direction: row;
   margin-top: 16px;
+  gap: 18px;
 `;
 
 const ControlButton = styled(LoadingButton)`
@@ -31,6 +32,10 @@ const Success = styled.span`
   color: ${({ theme }) => theme.successColor};
   font-size: 14px;
   line-height: 17px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
 `;
 
 const Error = styled(Success)`
@@ -67,8 +72,8 @@ const EditControls: React.FC<EditControlProps> = ({
   return (
     <>
       {withLine && <Line />}
-      <Buttons>
-        <div>{showStatusMessage()}</div>
+      <Content>
+        {showStatusMessage()}
         <div>
           <Button type="button" secondary disabled={isSubmitting || (!dirty && !enableControls)} onClick={resetForm}>
             <FormattedMessage id="form.cancel" />
@@ -81,7 +86,7 @@ const EditControls: React.FC<EditControlProps> = ({
             <FormattedMessage id="form.saveChanges" />
           </ControlButton>
         </div>
-      </Buttons>
+      </Content>
     </>
   );
 };

From 0cd400356883ba620f13c7eaabe7d53a1cf41551 Mon Sep 17 00:00:00 2001
From: tealjulia <teal@airbyte.io>
Date: Wed, 7 Sep 2022 18:10:32 -0400
Subject: [PATCH 03/10] migrate to scss module

---
 .../components/EditControls.module.scss       | 37 +++++++++++
 .../components/EditControls.tsx               | 62 ++++++-------------
 2 files changed, 57 insertions(+), 42 deletions(-)
 create mode 100644 airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.module.scss

diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.module.scss b/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.module.scss
new file mode 100644
index 000000000000..d911c0f61b3f
--- /dev/null
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.module.scss
@@ -0,0 +1,37 @@
+@use "../../../../scss/colors";
+
+.content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  margin-top: 16px;
+  gap: 18px;
+}
+
+.controlButton {
+  margin-left: 10px;
+}
+
+.message {
+  font-size: 14px;
+  line-height: 17px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+
+  & .success {
+    color: colors.$green;
+  }
+  & .error {
+    color: colors.$red;
+  }
+}
+
+.line {
+  min-width: 100%;
+  height: 1px;
+  background: colors.$grey;
+  margin: 16px -27px 0 -24px;
+}
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx
index edc1d81d95a9..528eedde42da 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx
@@ -1,9 +1,11 @@
+import classnames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
-import styled from "styled-components";
 
 import { Button, LoadingButton } from "components";
 
+import styles from "./EditControls.module.scss";
+
 interface EditControlProps {
   isSubmitting: boolean;
   dirty: boolean;
@@ -15,40 +17,6 @@ interface EditControlProps {
   withLine?: boolean;
 }
 
-const Content = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-direction: row;
-  margin-top: 16px;
-  gap: 18px;
-`;
-
-const ControlButton = styled(LoadingButton)`
-  margin-left: 10px;
-`;
-
-const Success = styled.span`
-  color: ${({ theme }) => theme.successColor};
-  font-size: 14px;
-  line-height: 17px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-`;
-
-const Error = styled(Success)`
-  color: ${({ theme }) => theme.dangerColor};
-`;
-
-const Line = styled.div`
-  min-width: 100%;
-  height: 1px;
-  background: ${({ theme }) => theme.greyColor20};
-  margin: 16px -27px 0 -24px;
-`;
-
 const EditControls: React.FC<EditControlProps> = ({
   isSubmitting,
   dirty,
@@ -60,33 +28,43 @@ const EditControls: React.FC<EditControlProps> = ({
   withLine,
 }) => {
   const showStatusMessage = () => {
+    const messageStyle = classnames(styles.message, {
+      [styles.success]: !!successMessage,
+      [styles.error]: !!errorMessage,
+    });
     if (errorMessage) {
-      return <Error>{errorMessage}</Error>;
+      return <div className={messageStyle}>{errorMessage}</div>;
     }
+
     if (successMessage && !dirty) {
-      return <Success data-id="success-result">{successMessage}</Success>;
+      return (
+        <div className={messageStyle} data-id="success-result">
+          {successMessage}
+        </div>
+      );
     }
     return null;
   };
 
   return (
     <>
-      {withLine && <Line />}
-      <Content>
+      {withLine && <div className={styles.line} />}
+      <div className={styles.content}>
         {showStatusMessage()}
         <div>
           <Button type="button" secondary disabled={isSubmitting || (!dirty && !enableControls)} onClick={resetForm}>
             <FormattedMessage id="form.cancel" />
           </Button>
-          <ControlButton
+          <LoadingButton
+            className={styles.controlButton}
             type="submit"
             isLoading={isSubmitting}
             disabled={submitDisabled || isSubmitting || (!dirty && !enableControls)}
           >
             <FormattedMessage id="form.saveChanges" />
-          </ControlButton>
+          </LoadingButton>
         </div>
-      </Content>
+      </div>
     </>
   );
 };

From 652b342400f2acad5b615c4e702dfb0f4b552af7 Mon Sep 17 00:00:00 2001
From: tealjulia <teal@airbyte.io>
Date: Wed, 7 Sep 2022 18:26:32 -0400
Subject: [PATCH 04/10] use variables and text component

---
 .../components/EditControls.module.scss       | 31 ++++++++++---------
 .../components/EditControls.tsx               | 15 ++++++---
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.module.scss b/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.module.scss
index d911c0f61b3f..1e720e0f904a 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.module.scss
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.module.scss
@@ -1,37 +1,40 @@
 @use "../../../../scss/colors";
+@use "../../../../scss/variables";
 
 .content {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
   flex-direction: row;
-  margin-top: 16px;
-  gap: 18px;
+  margin-top: variables.$spacing-lg;
+  gap: variables.$spacing-lg;
+  padding: variables.$spacing-sm;
 }
 
 .controlButton {
-  margin-left: 10px;
+  margin-left: variables.$spacing-md;
 }
 
 .message {
-  font-size: 14px;
-  line-height: 17px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   flex: 1;
+}
+
+.success {
+  color: colors.$green;
+}
 
-  & .success {
-    color: colors.$green;
-  }
-  & .error {
-    color: colors.$red;
-  }
+.error {
+  color: colors.$red;
 }
 
+// currently only implemented on transformation view form card, margins are specific to that implementation
+// todo: standardize the margin sizes here
 .line {
   min-width: 100%;
-  height: 1px;
+  height: variables.$border-thin;
   background: colors.$grey;
-  margin: 16px -27px 0 -24px;
+  margin: variables.$spacing-lg -27px 0 -24px;
 }
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx
index 528eedde42da..4d6f134ff37e 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { Button, LoadingButton } from "components";
+import { Text } from "components/base/Text";
 
 import styles from "./EditControls.module.scss";
 
@@ -29,18 +30,22 @@ const EditControls: React.FC<EditControlProps> = ({
 }) => {
   const showStatusMessage = () => {
     const messageStyle = classnames(styles.message, {
-      [styles.success]: !!successMessage,
-      [styles.error]: !!errorMessage,
+      [styles.success]: successMessage,
+      [styles.error]: errorMessage,
     });
     if (errorMessage) {
-      return <div className={messageStyle}>{errorMessage}</div>;
+      return (
+        <Text as="div" size="lg" className={messageStyle}>
+          {errorMessage}
+        </Text>
+      );
     }
 
     if (successMessage && !dirty) {
       return (
-        <div className={messageStyle} data-id="success-result">
+        <Text as="div" size="lg" className={messageStyle}>
           {successMessage}
-        </div>
+        </Text>
       );
     }
     return null;

From 6a0e4cb25ef004aed4dfc7e569a7a6a582c9d820 Mon Sep 17 00:00:00 2001
From: tealjulia <teal@airbyte.io>
Date: Fri, 9 Sep 2022 08:57:52 -0400
Subject: [PATCH 05/10] add data-id back for cypress

---
 .../views/Connection/ConnectionForm/components/EditControls.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx
index 4d6f134ff37e..e6f2679327b1 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx
@@ -43,7 +43,7 @@ const EditControls: React.FC<EditControlProps> = ({
 
     if (successMessage && !dirty) {
       return (
-        <Text as="div" size="lg" className={messageStyle}>
+        <Text as="div" size="lg" className={messageStyle} data-id="success-result">
           {successMessage}
         </Text>
       );

From 033148ba2e206119518e33635ca4266266647a81 Mon Sep 17 00:00:00 2001
From: tealjulia <teal@airbyte.io>
Date: Tue, 13 Sep 2022 10:15:19 -0400
Subject: [PATCH 06/10] cleanup from pr review

---
 .../ConnectionForm/ConnectionForm.tsx         | 15 +++------
 .../components/EditControls.module.scss       | 15 ---------
 .../components/EditControls.tsx               | 28 ++--------------
 .../components/ResponseMessage.module.scss    | 14 ++++++++
 .../components/ResponseMessage.tsx            | 33 +++++++++++++++++++
 5 files changed, 54 insertions(+), 51 deletions(-)
 create mode 100644 airbyte-webapp/src/views/Connection/ConnectionForm/components/ResponseMessage.module.scss
 create mode 100644 airbyte-webapp/src/views/Connection/ConnectionForm/components/ResponseMessage.tsx

diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
index 2f6db5b8375e..2f99de1feea1 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
@@ -185,6 +185,9 @@ export const ConnectionForm: React.FC<ConnectionFormProps> = ({
   );
 
   const errorMessage = submitError ? generateMessageFromError(submitError) : null;
+  const displayedErrorMessage = (isValid: boolean) => {
+    return errorMessage ?? !isValid ? formatMessage({ id: "connectionForm.validation.error" }) : null;
+  };
 
   return (
     <Formik
@@ -317,9 +320,7 @@ export const ConnectionForm: React.FC<ConnectionFormProps> = ({
                 onCancel?.();
               }}
               successMessage={successMessage}
-              errorMessage={
-                errorMessage ? errorMessage : !isValid ? formatMessage({ id: "connectionForm.validation.error" }) : null
-              }
+              errorMessage={displayedErrorMessage(isValid)}
               enableControls={canSubmitUntouchedForm}
             />
           )}
@@ -338,13 +339,7 @@ export const ConnectionForm: React.FC<ConnectionFormProps> = ({
               <CreateControls
                 isSubmitting={isSubmitting}
                 isValid={isValid && !editingTransformation}
-                errorMessage={
-                  errorMessage
-                    ? errorMessage
-                    : !isValid
-                    ? formatMessage({ id: "connectionForm.validation.error" })
-                    : null
-                }
+                errorMessage={displayedErrorMessage(isValid)}
               />
             </>
           )}
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.module.scss b/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.module.scss
index 1e720e0f904a..5bb1f4ed4dad 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.module.scss
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.module.scss
@@ -15,21 +15,6 @@
   margin-left: variables.$spacing-md;
 }
 
-.message {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-}
-
-.success {
-  color: colors.$green;
-}
-
-.error {
-  color: colors.$red;
-}
-
 // currently only implemented on transformation view form card, margins are specific to that implementation
 // todo: standardize the margin sizes here
 .line {
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx
index e6f2679327b1..395d3ef468a5 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/EditControls.tsx
@@ -1,11 +1,10 @@
-import classnames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { Button, LoadingButton } from "components";
-import { Text } from "components/base/Text";
 
 import styles from "./EditControls.module.scss";
+import { ResponseMessage } from "./ResponseMessage";
 
 interface EditControlProps {
   isSubmitting: boolean;
@@ -28,34 +27,11 @@ const EditControls: React.FC<EditControlProps> = ({
   enableControls,
   withLine,
 }) => {
-  const showStatusMessage = () => {
-    const messageStyle = classnames(styles.message, {
-      [styles.success]: successMessage,
-      [styles.error]: errorMessage,
-    });
-    if (errorMessage) {
-      return (
-        <Text as="div" size="lg" className={messageStyle}>
-          {errorMessage}
-        </Text>
-      );
-    }
-
-    if (successMessage && !dirty) {
-      return (
-        <Text as="div" size="lg" className={messageStyle} data-id="success-result">
-          {successMessage}
-        </Text>
-      );
-    }
-    return null;
-  };
-
   return (
     <>
       {withLine && <div className={styles.line} />}
       <div className={styles.content}>
-        {showStatusMessage()}
+        <ResponseMessage dirty={dirty} successMessage={successMessage} errorMessage={errorMessage} />
         <div>
           <Button type="button" secondary disabled={isSubmitting || (!dirty && !enableControls)} onClick={resetForm}>
             <FormattedMessage id="form.cancel" />
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/ResponseMessage.module.scss b/airbyte-webapp/src/views/Connection/ConnectionForm/components/ResponseMessage.module.scss
new file mode 100644
index 000000000000..89b5fd0aac9f
--- /dev/null
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/ResponseMessage.module.scss
@@ -0,0 +1,14 @@
+.message {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.success {
+  color: colors.$green;
+}
+
+.error {
+  color: colors.$red;
+}
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/ResponseMessage.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/components/ResponseMessage.tsx
new file mode 100644
index 000000000000..fc6ecc62b44e
--- /dev/null
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/ResponseMessage.tsx
@@ -0,0 +1,33 @@
+import classnames from "classnames";
+
+import { Text } from "components/base/Text";
+
+import styles from "./ResponseMessage.module.scss";
+
+interface ResponseMessageProps {
+  successMessage?: React.ReactNode;
+  errorMessage?: React.ReactNode;
+  dirty: boolean;
+}
+export const ResponseMessage: React.FC<ResponseMessageProps> = ({ successMessage, errorMessage, dirty }) => {
+  const messageStyle = classnames(styles.message, {
+    [styles.success]: successMessage,
+    [styles.error]: errorMessage,
+  });
+  if (errorMessage) {
+    return (
+      <Text as="div" size="lg" className={messageStyle}>
+        {errorMessage}
+      </Text>
+    );
+  }
+
+  if (successMessage && !dirty) {
+    return (
+      <Text as="div" size="lg" className={messageStyle} data-id="success-result">
+        {successMessage}
+      </Text>
+    );
+  }
+  return null;
+};

From b8e5085b75448ae4e142d097dc2b528e36940a15 Mon Sep 17 00:00:00 2001
From: tealjulia <teal@airbyte.io>
Date: Tue, 13 Sep 2022 10:18:19 -0400
Subject: [PATCH 07/10] add colors import

---
 .../ConnectionForm/components/ResponseMessage.module.scss       | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/components/ResponseMessage.module.scss b/airbyte-webapp/src/views/Connection/ConnectionForm/components/ResponseMessage.module.scss
index 89b5fd0aac9f..c25439ef2ed5 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/components/ResponseMessage.module.scss
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/components/ResponseMessage.module.scss
@@ -1,3 +1,5 @@
+@use "../../../../scss/colors";
+
 .message {
   overflow: hidden;
   text-overflow: ellipsis;

From f0c6c01e1331f41eddbeb4cb6572aae8fe1fbe66 Mon Sep 17 00:00:00 2001
From: tealjulia <teal@airbyte.io>
Date: Tue, 13 Sep 2022 14:49:12 -0400
Subject: [PATCH 08/10] fix cypress test

---
 airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
index 1c47973ccdb3..ec9fb8f93635 100644
--- a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
+++ b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
@@ -7,7 +7,7 @@ const destinationNamespaceCustom = "div[data-testid='namespaceDefinition-customf
 const destinationNamespaceSource = "div[data-testid='namespaceDefinition-source']";
 const destinationNamespaceCustomInput = "input[data-testid='input']";
 const syncModeDropdown = "div[data-testid='syncSettingsDropdown'] input";
-const successResult = "span[data-id='success-result']";
+const successResult = "div[data-id='success-result']";
 const saveStreamChangesButton = "button[data-testid='resetModal-save']";
 const connectionNameInput = "input[data-testid='connectionName']";
 

From 4cf8125798827c4c3a0bca7a1bb95d398133f968 Mon Sep 17 00:00:00 2001
From: tealjulia <teal@airbyte.io>
Date: Tue, 13 Sep 2022 15:13:02 -0400
Subject: [PATCH 09/10] fix ternary problem

---
 .../src/views/Connection/ConnectionForm/ConnectionForm.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
index 2f99de1feea1..a6699b2fad61 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
@@ -186,7 +186,7 @@ export const ConnectionForm: React.FC<ConnectionFormProps> = ({
 
   const errorMessage = submitError ? generateMessageFromError(submitError) : null;
   const displayedErrorMessage = (isValid: boolean) => {
-    return errorMessage ?? !isValid ? formatMessage({ id: "connectionForm.validation.error" }) : null;
+    return errorMessage ?? (!isValid ? formatMessage({ id: "connectionForm.validation.error" }) : null);
   };
 
   return (

From 02c7a0153a299927c7378586bab4b0038aab4125 Mon Sep 17 00:00:00 2001
From: tealjulia <teal@airbyte.io>
Date: Wed, 14 Sep 2022 12:52:00 -0400
Subject: [PATCH 10/10] rename for clarity

---
 .../src/views/Connection/ConnectionForm/ConnectionForm.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
index a6699b2fad61..40169ef03bc4 100644
--- a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
+++ b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
@@ -185,7 +185,7 @@ export const ConnectionForm: React.FC<ConnectionFormProps> = ({
   );
 
   const errorMessage = submitError ? generateMessageFromError(submitError) : null;
-  const displayedErrorMessage = (isValid: boolean) => {
+  const determineErrorMessage = (isValid: boolean) => {
     return errorMessage ?? (!isValid ? formatMessage({ id: "connectionForm.validation.error" }) : null);
   };
 
@@ -320,7 +320,7 @@ export const ConnectionForm: React.FC<ConnectionFormProps> = ({
                 onCancel?.();
               }}
               successMessage={successMessage}
-              errorMessage={displayedErrorMessage(isValid)}
+              errorMessage={determineErrorMessage(isValid)}
               enableControls={canSubmitUntouchedForm}
             />
           )}
@@ -339,7 +339,7 @@ export const ConnectionForm: React.FC<ConnectionFormProps> = ({
               <CreateControls
                 isSubmitting={isSubmitting}
                 isValid={isValid && !editingTransformation}
-                errorMessage={displayedErrorMessage(isValid)}
+                errorMessage={determineErrorMessage(isValid)}
               />
             </>
           )}