cleanup from pr review

airbytehq · Sep 13, 2022 · 8b3a6ea · 8b3a6ea
1 parent 72699cf
commit 8b3a6ea
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 51 deletions.
diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/ConnectionForm.tsx
@@ -195,6 +195,10 @@ 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;
+  };
+
   const frequencies = useFrequencyDropdownData(connection.scheduleData);
 
   return (
@@ -356,9 +360,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}
             />
           )}
@@ -377,13 +379,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
@@ -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
@@ -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
@@ -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
@@ -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;
+};