🪟 🎨 Auto-detect schema changes UI fixes (#20070)

* Update Review changes button to dark variant Fix wording on schema change strings * Disable pointer from label in EnabledControl when switch is disabled * Fix hover state for connector links when in breaking or non-breaking change
airbytehq · Dec 6, 2022 · e93f8aa · e93f8aa
1 parent 39c8801
commit e93f8aa
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 6 deletions.
diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -371,8 +371,8 @@
   "connection.linkedJobNotFound": "Job not found",
   "connection.returnToSyncHistory": "Return to Sync History",
 
-  "connection.schemaChange.breaking": "Breaking schema updates detected.",
-  "connection.schemaChange.nonBreaking": "Non-breaking schema updates detected.",
+  "connection.schemaChange.breaking": "Breaking schema updates detected",
+  "connection.schemaChange.nonBreaking": "Non-breaking schema updates detected",
   "connection.schemaChange.reviewAction": "Review changes",
 
   "form.frequency": "Replication frequency*",

diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/EnabledControl.module.scss b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/EnabledControl.module.scss
@@ -15,5 +15,8 @@
   color: colors.$grey-300;
   display: inline-block;
   text-align: left;
-  cursor: pointer;
+
+  &:not(.disabled) {
+    cursor: pointer;
+  }
 }
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/EnabledControl.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/EnabledControl.tsx
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 import { useAsyncFn } from "react-use";
@@ -48,13 +49,18 @@ export const EnabledControl: React.FC<EnabledControlProps> = ({ disabled }) => {
     updateConnection,
   ]);
 
+  const isSwitchDisabled = disabled || connectionUpdating;
+
   return (
     <div className={styles.container} data-testid="enabledControl">
-      <label htmlFor="toggle-enabled-source" className={styles.label}>
+      <label
+        htmlFor="toggle-enabled-source"
+        className={classNames(styles.label, { [styles.disabled]: isSwitchDisabled })}
+      >
         <FormattedMessage id={connection.status === ConnectionStatus.active ? "tables.enabled" : "tables.disabled"} />
       </label>
       <Switch
-        disabled={disabled || connectionUpdating}
+        disabled={isSwitchDisabled}
         onChange={onChangeStatus}
         checked={connection.status === ConnectionStatus.active}
         loading={loading}

diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaChangesDetected.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaChangesDetected.tsx
@@ -48,7 +48,7 @@ export const SchemaChangesDetected: React.FC = () => {
       <Text size="lg">
         <FormattedMessage id={`connection.schemaChange.${hasBreakingSchemaChange ? "breaking" : "nonBreaking"}`} />
       </Text>
-      <Button onClick={onReviewActionButtonClick} isLoading={schemaRefreshing}>
+      <Button variant="dark" onClick={onReviewActionButtonClick} isLoading={schemaRefreshing}>
         <FormattedMessage id="connection.schemaChange.reviewAction" />
       </Button>
     </div>

diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.module.scss b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.module.scss
@@ -8,6 +8,14 @@
 
   &:hover {
     background-color: colors.$grey-50;
+
+    &.breaking {
+      background-color: colors.$red-100;
+    }
+
+    &.nonBreaking {
+      background-color: colors.$yellow-100;
+    }
   }
 }