🪟 🧹 Display returned error messages on replication view (airbytehq#16280

) * display error messages if they exist * get it working with styled components first * migrate to scss module * use variables and text component * add data-id back for cypress * cleanup from pr review
robbinhan · Sep 29, 2022 · 241d334 · 241d334
1 parent cc79dc4
commit 241d334
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 51 deletions.
diff --git 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']";
 

diff --git 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 determineErrorMessage = (isValid: boolean) => {
+    return errorMessage ?? (!isValid ? formatMessage({ id: "connectionForm.validation.error" }) : null);
+  };
 
   return (
     <Formik
@@ -317,7 +320,7 @@ export const ConnectionForm: React.FC<ConnectionFormProps> = ({
                 onCancel?.();
               }}
               successMessage={successMessage}
-              errorMessage={errorMessage || !isValid ? formatMessage({ id: "connectionForm.validation.error" }) : null}
+              errorMessage={determineErrorMessage(isValid)}
               enableControls={canSubmitUntouchedForm}
             />
           )}
@@ -336,9 +339,7 @@ export const ConnectionForm: React.FC<ConnectionFormProps> = ({
               <CreateControls
                 isSubmitting={isSubmitting}
                 isValid={isValid && !editingTransformation}
-                errorMessage={
-                  errorMessage || !isValid ? formatMessage({ id: "connectionForm.validation.error" }) : null
-                }
+                errorMessage={determineErrorMessage(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
@@ -0,0 +1,25 @@
+@use "../../../../scss/colors";
+@use "../../../../scss/variables";
+
+.content {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-direction: row;
+  margin-top: variables.$spacing-lg;
+  gap: variables.$spacing-lg;
+  padding: variables.$spacing-sm;
+}
+
+.controlButton {
+  margin-left: variables.$spacing-md;
+}
+
+// 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: variables.$border-thin;
+  background: colors.$grey;
+  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
@@ -1,9 +1,11 @@
 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";
+import { ResponseMessage } from "./ResponseMessage";
+
 interface EditControlProps {
   isSubmitting: boolean;
   dirty: boolean;
@@ -15,35 +17,6 @@ interface EditControlProps {
   withLine?: boolean;
 }
 
-const Buttons = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-direction: row;
-  margin-top: 16px;
-`;
-
-const ControlButton = styled(LoadingButton)`
-  margin-left: 10px;
-`;
-
-const Success = styled.span`
-  color: ${({ theme }) => theme.successColor};
-  font-size: 14px;
-  line-height: 17px;
-`;
-
-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,
@@ -54,34 +27,25 @@ const EditControls: React.FC<EditControlProps> = ({
   enableControls,
   withLine,
 }) => {
-  const showStatusMessage = () => {
-    if (errorMessage) {
-      return <Error>{errorMessage}</Error>;
-    }
-    if (successMessage && !dirty) {
-      return <Success data-id="success-result">{successMessage}</Success>;
-    }
-    return null;
-  };
-
   return (
     <>
-      {withLine && <Line />}
-      <Buttons>
-        <div>{showStatusMessage()}</div>
+      {withLine && <div className={styles.line} />}
+      <div className={styles.content}>
+        <ResponseMessage dirty={dirty} successMessage={successMessage} errorMessage={errorMessage} />
         <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>
-      </Buttons>
+      </div>
     </>
   );
 };

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,16 @@
+@use "../../../../scss/colors";
+
+.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;
+};