🪟 🎉 Simplify UI for non-breaking schema changes (#9271)

Dev-Sprouts · Oct 17, 2023 · 396f7f3 · 396f7f3
1 parent 84564eb
commit 396f7f3
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 10 deletions.
diff --git a/airbyte-webapp/src/components/EntityTable/components/ChangesStatusIcon.module.scss b/airbyte-webapp/src/components/EntityTable/components/ChangesStatusIcon.module.scss
@@ -16,6 +16,6 @@
   }
 
   &.nonBreaking {
-    color: colors.$yellow;
+    color: colors.$blue;
   }
 }
diff --git a/airbyte-webapp/src/components/EntityTable/components/ChangesStatusIcon.tsx b/airbyte-webapp/src/components/EntityTable/components/ChangesStatusIcon.tsx
@@ -1,4 +1,4 @@
-import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
+import { faExclamationCircle, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classnames from "classnames";
 import React from "react";
@@ -30,7 +30,7 @@ export const ChangesStatusIcon: React.FC<ChangesStatusIconProps> = ({ schemaChan
       control={
         <FontAwesomeIcon
           className={iconStyle}
-          icon={faExclamationCircle}
+          icon={schemaChange === "breaking" ? faExclamationCircle : faInfoCircle}
           size="2x"
           data-testid={`changesStatusIcon-${schemaChange}`}
         />

diff --git a/airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx b/airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx
@@ -38,7 +38,7 @@ export const StatusCell: React.FC<StatusCellProps> = ({
         hasBreakingChange={hasBreakingChange}
         connection={connection}
       />
-      {allowAutoDetectSchema && <ChangesStatusIcon schemaChange={schemaChange} />}
+      {allowAutoDetectSchema && hasBreakingChange && <ChangesStatusIcon schemaChange={schemaChange} />}
     </div>
   );
 };
diff --git a/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.tsx b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.tsx
@@ -77,7 +77,7 @@ const SchemaChangeMessage: React.FC<{ dirty: boolean; schemaChange: SchemaChange
   if (hasNonBreakingSchemaChange) {
     return (
       <Message
-        type="warning"
+        type="info"
         text={<FormattedMessage id="connection.schemaChange.nonBreaking" />}
         actionBtnText={<FormattedMessage id="connection.schemaChange.reviewAction" />}
         onAction={refreshSchema}

diff --git a/airbyte-webapp/src/pages/connections/StreamStatusPage/ErrorMessage.tsx b/airbyte-webapp/src/pages/connections/StreamStatusPage/ErrorMessage.tsx
@@ -82,7 +82,7 @@ export const ErrorMessage: React.FC = () => {
   const workspaceId = useCurrentWorkspaceId();
   const { connection } = useConnectionEditService();
   const { lastCompletedSyncJob } = useConnectionSyncContext();
-  const { hasSchemaChanges, hasBreakingSchemaChange } = useSchemaChanges(connection.schemaChange);
+  const { hasBreakingSchemaChange } = useSchemaChanges(connection.schemaChange);
   const sourceActorDefinitionVersion = useSourceDefinitionVersion(connection.sourceId);
   const destinationActorDefinitionVersion = useDestinationDefinitionVersion(connection.destinationId);
   const connectorBreakingChangeDeadlinesEnabled = useFeature(FeatureItem.ConnectorBreakingChangeDeadlines);
@@ -121,14 +121,14 @@ export const ErrorMessage: React.FC = () => {
     }
 
     // If we have schema changes, show the correct message
-    if (hasSchemaChanges) {
+    if (hasBreakingSchemaChange) {
       const schemaChangeWarning = {
         text: formatMessage({
-          id: `connection.schemaChange.${hasBreakingSchemaChange ? "breaking" : "nonBreaking"}`,
+          id: "connection.schemaChange.breaking",
         }),
         onAction: () => navigate(`../${ConnectionRoutePaths.Replication}`, { state: { triggerRefreshSchema: true } }),
         actionBtnText: formatMessage({ id: "connection.schemaChange.reviewAction" }),
-        type: hasBreakingSchemaChange ? "error" : "warning",
+        type: "error",
       } as const;
       errorMessages.push(schemaChangeWarning);
     }
@@ -211,7 +211,6 @@ export const ErrorMessage: React.FC = () => {
   }, [
     formatMessage,
     hasBreakingSchemaChange,
-    hasSchemaChanges,
     lastCompletedSyncJob,
     navigate,
     connection.sourceId,