fix: [SyncCatalog V2] wrong "breaking changes message" position (#13993)

airbytehq · Sep 18, 2024 · ab5be73 · ab5be73
1 parent f9e7607
commit ab5be73
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 29 deletions.
diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/SchemaChangeBackdrop.module.scss b/airbyte-webapp/src/components/connection/ConnectionForm/SchemaChangeBackdrop.module.scss
@@ -7,35 +7,26 @@
   height: 100%;
 }
 
-.schemaChangeBackdropContainer {
+.schemaBreakingChanges {
   @extend %cover;
 
   position: relative;
 
-  .backdrop {
+  &__backdrop {
     @extend %cover;
 
+    display: block;
     position: absolute;
-    background: linear-gradient(180deg, rgba(248, 248, 250, 50% /* grey-50 50% */) 0%, colors.$foreground 92.54%);
     z-index: z-indices.$schemaChangesBackdrop;
     border-radius: variables.$border-radius-lg;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    background: colors.$gradient-light-background;
     backdrop-filter: blur(2px);
   }
 
-  .contentContainer {
-    @extend %cover;
-
-    position: fixed;
-    margin-top: 200px;
-    display: flex;
-    z-index: z-indices.$schemaChangesBackdropContent;
-    width: variables.$width-modal-sm;
-    max-width: 40%;
-    flex-direction: column;
-    align-items: center;
-    gap: variables.$spacing-lg;
+  &__message {
+    position: sticky;
+    top: 50%;
+    bottom: 50%;
+    padding-bottom: variables.$spacing-2xl;
   }
 }
diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/SchemaChangeBackdrop.tsx b/airbyte-webapp/src/components/connection/ConnectionForm/SchemaChangeBackdrop.tsx
@@ -1,6 +1,7 @@
 import { FormattedMessage } from "react-intl";
 
 import { Button } from "components/ui/Button";
+import { FlexContainer } from "components/ui/Flex";
 import { Text } from "components/ui/Text";
 
 import { FeatureItem, useFeature } from "core/services/features";
@@ -28,17 +29,23 @@ export const SchemaChangeBackdrop: React.FC<React.PropsWithChildren<unknown>> =
   }
 
   return (
-    <div className={styles.schemaChangeBackdropContainer} data-testid="schemaChangesBackdrop">
-      <div className={styles.backdrop}>
-        <div className={styles.contentContainer}>
+    <div className={styles.schemaBreakingChanges} data-testid="schemaChangesBackdrop">
+      <FlexContainer justifyContent="center" alignItems="center" className={styles.schemaBreakingChanges__backdrop}>
+        <FlexContainer
+          justifyContent="center"
+          alignItems="center"
+          direction="column"
+          gap="lg"
+          className={styles.schemaBreakingChanges__message}
+        >
           <Text align="center" size="lg">
             <FormattedMessage id="connectionForm.schemaChangesBackdrop.message" />
           </Text>
           <Button variant="primaryDark" type="button" onClick={refreshSchema}>
             <FormattedMessage id="connection.schemaChange.reviewAction" />
           </Button>
-        </div>
-      </div>
+        </FlexContainer>
+      </FlexContainer>
       {children}
     </div>
   );

diff --git a/airbyte-webapp/src/components/connection/ConnectionForm/SchemaRefreshing.module.scss b/airbyte-webapp/src/components/connection/ConnectionForm/SchemaRefreshing.module.scss
@@ -13,10 +13,8 @@
     width: 100%;
     height: 100%;
     z-index: z-indices.$schemaChangesBackdrop;
-    align-items: center;
-    justify-content: center;
     border-radius: variables.$border-radius-lg;
-    background: linear-gradient(180deg, rgba(248, 248, 250, 50% /* grey-50 50% */) 0%, colors.$foreground 92.54%);
+    background: colors.$gradient-light-background;
 
     &--visible {
       display: block;

diff --git a/...rc/components/connection/ConnectionForm/__snapshots__/SchemaChangesBackdrop.test.tsx.snap b/...rc/components/connection/ConnectionForm/__snapshots__/SchemaChangesBackdrop.test.tsx.snap
@@ -2,14 +2,14 @@
 
 exports[`SchemaChangesBackdrop renders with breaking changes and prevents background interaction 1`] = `
 <div
-  class="schemaChangeBackdropContainer"
+  class="schemaBreakingChanges"
   data-testid="schemaChangesBackdrop"
 >
   <div
-    class="backdrop"
+    class="directionRow gapMd alignItemsCenter justifyContentCenter wrapNowrap container schemaBreakingChanges__backdrop"
   >
     <div
-      class="contentContainer"
+      class="directionColumn gapLg alignItemsCenter justifyContentCenter wrapNowrap container schemaBreakingChanges__message"
     >
       <p
         class="text lg darkBlue center"

diff --git a/airbyte-webapp/src/scss/_colors.scss b/airbyte-webapp/src/scss/_colors.scss
@@ -125,6 +125,8 @@ $gradient-secondary-start: #{var(--color-blue-50)};
 $gradient-secondary-stop: #{var(--color-orange-50)};
 $gradient-secondary: linear-gradient(90deg, $gradient-secondary-start, $gradient-secondary-stop);
 
+$gradient-light-background: linear-gradient(180deg, rgba(248, 248, 250, 50% /* grey-50 50% */) 0%, $foreground 90%);
+
 // LEGACY - DEPRECATED
 
 $primaryColor12: rgba(103, 87, 255, 12%);