From dce42485f902d95fac3d684aacce92c4cb3e0285 Mon Sep 17 00:00:00 2001
From: Edmundo Ruiz Ghanem <edmundo@airbyte.io>
Date: Mon, 5 Dec 2022 09:49:20 -0500
Subject: [PATCH 1/3] Update Review changes button to dark variant Fix wording
 on schema change strings

---
 airbyte-webapp/src/locales/en.json                            | 4 ++--
 .../pages/ConnectionItemPage/SchemaChangesDetected.tsx        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
index 7c61a578b69f5..09dc65be647ba 100644
--- 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/SchemaChangesDetected.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaChangesDetected.tsx
index 4c44279ec0e54..772ba675c8455 100644
--- 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>

From 969357d1b81967b49b0084aef140da3e0bfbea7a Mon Sep 17 00:00:00 2001
From: Edmundo Ruiz Ghanem <edmundo@airbyte.io>
Date: Mon, 5 Dec 2022 09:54:18 -0500
Subject: [PATCH 2/3] Disable pointer from label in EnabledControl when switch
 is disabled

---
 .../ConnectionItemPage/EnabledControl.module.scss      |  5 ++++-
 .../pages/ConnectionItemPage/EnabledControl.tsx        | 10 ++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/EnabledControl.module.scss b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/EnabledControl.module.scss
index ac6d0e4a050c3..7c881807207f4 100644
--- 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
index 210ea47c71c56..73f2b03ae2846 100644
--- 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}

From fc559076995db728408cb80927ce424481275a9c Mon Sep 17 00:00:00 2001
From: Edmundo Ruiz Ghanem <edmundo@airbyte.io>
Date: Mon, 5 Dec 2022 09:56:58 -0500
Subject: [PATCH 3/3] Fix hover state for connector links when in breaking or
 non-breaking change

---
 .../pages/ConnectionItemPage/StatusMainInfo.module.scss   | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.module.scss b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.module.scss
index 6d072a9776dc7..5418431559b8f 100644
--- 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;
+    }
   }
 }