refactor: replace <ScrollContainer /> with <ScrollParent /> component (#14613)

Author: dizel852

airbyte-webapp/src/components/ScrollableContainer/ScrollableContainer.module.scss

@@ -6,6 +6,7 @@ import { useNavigate } from "react-router-dom";
 
 import { Form } from "components/forms";
 import LoadingSchema from "components/LoadingSchema";
+import { ScrollParent } from "components/ui/ScrollParent";
 
 import { useGetDestinationFromSearchParams, useGetSourceFromSearchParams } from "area/connector/utils";
 import { connectionsKeys, HttpError, HttpProblem, useCreateConnection, useDiscoverSchema } from "core/api";
@@ -23,7 +24,6 @@ import { SchemaError } from "./SchemaError";
 import { SimplifiedConnectionConfiguration } from "./SimplifiedConnectionCreation/SimplifiedConnectionConfiguration";
 import { I18N_KEY_UNDER_ONE_HOUR_NOT_ALLOWED } from "./SimplifiedConnectionCreation/SimplifiedConnectionScheduleFormField";
 import { useAnalyticsTrackFunctions } from "./useAnalyticsTrackFunctions";
-import { ScrollableContainer } from "../../ScrollableContainer";
 import {
   FormConnectionFormValues,
   useConnectionValidationSchema,
@@ -152,9 +152,9 @@ export const CreateConnectionForm: React.FC = () => {
 
   if (schemaErrorStatus) {
     return (
-      <ScrollableContainer>
+      <ScrollParent>
         <SchemaError schemaError={schemaErrorStatus} refreshSchema={onDiscoverSchema} />
-      </ScrollableContainer>
+      </ScrollParent>
     );
   }
   if (!schema) {

airbyte-webapp/src/components/ScrollableContainer/ScrollableContainer.tsx

@@ -2,11 +2,6 @@
 @use "scss/variables";
 @use "scss/mixins";
 
-.container {
-  height: 100%;
-  padding: variables.$spacing-xl;
-}
-
 .nextLink {
   @include mixins.base-button;
 

airbyte-webapp/src/components/ScrollableContainer/index.ts

@@ -27,7 +27,6 @@ import { ConnectionRoutePaths, RoutePaths } from "pages/routePaths";
 import styles from "./SimplifiedConnectionConfiguration.module.scss";
 import { SimplifiedConnectionsSettingsCard } from "./SimplifiedConnectionSettingsCard";
 import { SimplifiedSchemaQuestionnaire } from "./SimplifiedSchemaQuestionnaire";
-import { ScrollableContainer } from "../../../ScrollableContainer";
 import { SyncCatalogTable } from "../../SyncCatalogTable";
 import { CREATE_CONNECTION_FORM_ID } from "../CreateConnectionForm";
 
@@ -69,7 +68,7 @@ const SimplifiedConnectionCreationReplication: React.FC = () => {
   });
 
   return (
-    <ScrollParent props={{ className: styles.container }}>
+    <ScrollParent>
       <FlexContainer direction="column" gap="lg">
         <Card
           title={formatMessage({ id: "connectionForm.selectSyncMode" })}
@@ -102,14 +101,14 @@ const SimplifiedConnectionCreationConfigureConnection: React.FC = () => {
   });
 
   return (
-    <ScrollableContainer className={styles.container}>
+    <ScrollParent>
       <SimplifiedConnectionsSettingsCard
         title={formatMessage({ id: "connectionForm.configureConnection" })}
         source={source}
         destination={destination}
         isCreating
       />
-    </ScrollableContainer>
+    </ScrollParent>
   );
 };
 

airbyte-webapp/src/components/connection/CreateConnectionForm/CreateConnectionForm.tsx

@@ -0,0 +1,3 @@
+.container {
+  padding-top: 0;
+}

airbyte-webapp/src/components/connection/CreateConnectionForm/SimplifiedConnectionCreation/SimplifiedConnectionConfiguration.module.scss

@@ -2,23 +2,22 @@ import React from "react";
 
 import { ConnectionTable } from "components/EntityTable";
 import { getConnectionTableData } from "components/EntityTable/utils";
-import { Box } from "components/ui/Box";
 import { ScrollParent } from "components/ui/ScrollParent";
 
 import { WebBackendConnectionListItem } from "core/api/types/AirbyteClient";
 
-interface IProps {
+import styles from "./DestinationConnectionTable.module.scss";
+
+interface DestinationConnectionTableProps {
   connections: WebBackendConnectionListItem[];
 }
 
-export const DestinationConnectionTable: React.FC<IProps> = ({ connections }) => {
+export const DestinationConnectionTable: React.FC<DestinationConnectionTableProps> = ({ connections }) => {
   const data = getConnectionTableData(connections, "destination");
 
   return (
-    <ScrollParent>
-      <Box m="xl" mt="none">
-        <ConnectionTable data={data} entity="destination" />
-      </Box>
+    <ScrollParent props={{ className: styles.container }}>
+      <ConnectionTable data={data} entity="destination" />
     </ScrollParent>
   );
 };

airbyte-webapp/src/components/connection/CreateConnectionForm/SimplifiedConnectionCreation/SimplifiedConnectionConfiguration.tsx

@@ -1,3 +1,7 @@
+@use "scss/variables";
+
 .container {
+  height: 100%;
   overflow-y: auto;
+  padding: variables.$spacing-xl;
 }

airbyte-webapp/src/components/destination/DestinationConnectionTable/DestinationConnectionTable.module.scss

@@ -7,7 +7,7 @@
 
 .pageBody {
   grid-area: page-content;
-  overflow-y: auto;
+  padding-top: 0;
 }
 
 .alignSelfStart {

airbyte-webapp/src/components/destination/DestinationConnectionTable/DestinationConnectionTable.tsx

@@ -5,7 +5,6 @@ import { useNavigate } from "react-router-dom";
 import { LoadingPage } from "components";
 import { ConnectionOnboarding } from "components/connection/ConnectionOnboarding";
 import { HeadTitle } from "components/HeadTitle";
-import { Box } from "components/ui/Box";
 import { Button } from "components/ui/Button";
 import { FlexContainer, FlexItem } from "components/ui/Flex";
 import { Heading } from "components/ui/Heading";
@@ -72,9 +71,7 @@ export const AllConnectionsPage: React.FC = () => {
               }
             />
             <ScrollParent props={{ className: styles.pageBody }}>
-              <Box m="xl" mt="none">
-                <ConnectionsListCard />
-              </Box>
+              <ConnectionsListCard />
             </ScrollParent>
           </PageGridContainer>
         ) : (

airbyte-webapp/src/components/ui/ScrollParent/ScrollParent.module.scss

@@ -1,5 +1,5 @@
 import { PageContainer } from "components/PageContainer";
-import { ScrollableContainer } from "components/ScrollableContainer";
+import { ScrollParent } from "components/ui/ScrollParent";
 
 import { FeatureItem, IfFeatureDisabled, IfFeatureEnabled } from "core/services/features";
 
@@ -10,7 +10,7 @@ export const ConnectionMappingsPage = () => {
   const existingMappings = [];
 
   return (
-    <ScrollableContainer>
+    <ScrollParent>
       <PageContainer centered>
         {existingMappings.length === 0 && (
           <>
@@ -23,6 +23,6 @@ export const ConnectionMappingsPage = () => {
           </>
         )}
       </PageContainer>
-    </ScrollableContainer>
+    </ScrollParent>
   );
 };

airbyte-webapp/src/pages/connections/AllConnectionsPage/AllConnectionsPage.module.scss

@@ -13,8 +13,3 @@
     height: 100%;
   }
 }
-
-.scrollableContainer {
-  height: 100%;
-  padding: variables.$spacing-xl;
-}

airbyte-webapp/src/pages/connections/AllConnectionsPage/AllConnectionsPage.tsx

@@ -239,7 +239,7 @@ export const ConnectionReplicationPage: React.FC = () => {
 
   return (
     <div className={styles.container}>
-      <ScrollParent props={{ className: styles.scrollableContainer }}>
+      <ScrollParent>
         <Form<RelevantConnectionValues>
           defaultValues={initialValues}
           reinitializeDefaultValues

airbyte-webapp/src/pages/connections/ConnectionMappingsPage/ConnectionMappingsPage.tsx

@@ -13,9 +13,9 @@ import { ConnectionSyncContextProvider } from "components/connection/ConnectionS
 import { I18N_KEY_UNDER_ONE_HOUR_NOT_ALLOWED } from "components/connection/CreateConnectionForm/SimplifiedConnectionCreation/SimplifiedConnectionScheduleFormField";
 import { SimplifiedConnectionsSettingsCard } from "components/connection/CreateConnectionForm/SimplifiedConnectionCreation/SimplifiedConnectionSettingsCard";
 import { Form } from "components/forms";
-import { ScrollableContainer } from "components/ScrollableContainer";
 import { Button } from "components/ui/Button";
 import { FlexContainer } from "components/ui/Flex";
+import { ScrollParent } from "components/ui/ScrollParent";
 import { Spinner } from "components/ui/Spinner";
 
 import { ConnectionActionsBlock } from "area/connection/components/ConnectionActionsBlock";
@@ -85,7 +85,7 @@ export const ConnectionSettingsPage: React.FC = () => {
     connection.geography !== Geography.auto;
 
   return (
-    <ScrollableContainer>
+    <ScrollParent>
       <FlexContainer direction="column">
         <Form<FormConnectionFormValues>
           trackDirtyChanges
@@ -140,6 +140,6 @@ export const ConnectionSettingsPage: React.FC = () => {
           )}
         </Disclosure>
       </FlexContainer>
-    </ScrollableContainer>
+    </ScrollParent>
   );
 };

airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.module.scss

@@ -1,4 +1,4 @@
-import { HTMLAttributes, Ref, forwardRef, useEffect, useMemo } from "react";
+import { HTMLAttributes, Ref, forwardRef, useContext, useEffect, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 import { Virtuoso } from "react-virtuoso";
 import { InferType } from "yup";
@@ -9,6 +9,7 @@ import { EmptyState } from "components/EmptyState";
 import { Box } from "components/ui/Box";
 import { FlexContainer } from "components/ui/Flex";
 import { LoadingSpinner } from "components/ui/LoadingSpinner";
+import { ScrollParentContext } from "components/ui/ScrollParent";
 
 import { useCurrentConnection, useGetConnectionSyncProgress, useListConnectionEventsInfinite } from "core/api";
 import { ConnectionEvent, ConnectionSyncStatus } from "core/api/types/AirbyteClient";
@@ -135,8 +136,8 @@ UlList.displayName = "UlList";
 
 export const ConnectionTimelineAllEventsList: React.FC<{
   filterValues: TimelineFilterValues;
-  scrollElement: HTMLDivElement | null;
-}> = ({ filterValues, scrollElement }) => {
+}> = ({ filterValues }) => {
+  const customScrollParent = useContext(ScrollParentContext);
   const connection = useCurrentConnection();
   const { status } = useConnectionStatus(connection.connectionId);
   const { data: syncProgressData } = useGetConnectionSyncProgress(
@@ -243,7 +244,7 @@ export const ConnectionTimelineAllEventsList: React.FC<{
     <>
       <Virtuoso
         data={validatedEvents}
-        customScrollParent={scrollElement ?? undefined}
+        customScrollParent={customScrollParent ?? undefined}
         useWindowScroll
         endReached={handleEndReached}
         components={{

airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.tsx

@@ -1,13 +1,12 @@
-import { useState } from "react";
 import { FormattedMessage } from "react-intl";
 
 import { ConnectionSyncContextProvider } from "components/connection/ConnectionSync/ConnectionSyncContext";
 import { PageContainer } from "components/PageContainer";
-import { ScrollableContainer } from "components/ScrollableContainer";
 import { Box } from "components/ui/Box";
 import { Card } from "components/ui/Card";
 import { FlexContainer } from "components/ui/Flex";
 import { Heading } from "components/ui/Heading";
+import { ScrollParent } from "components/ui/ScrollParent";
 
 import { useCurrentConnection, useFilters, useGetConnectionEvent } from "core/api";
 import { PageTrackingCodes, useTrackPage } from "core/services/analytics";
@@ -29,7 +28,6 @@ const OneEventItem: React.FC<{ eventId: string; connectionId: string }> = ({ eve
 };
 
 export const ConnectionTimelinePage = () => {
-  const [scrollElement, setScrollElement] = useState<HTMLDivElement | null>(null);
   useTrackPage(PageTrackingCodes.CONNECTIONS_ITEM_TIMELINE);
   const connection = useCurrentConnection();
   const { openModal } = useModalService();
@@ -61,7 +59,7 @@ export const ConnectionTimelinePage = () => {
   }
 
   return (
-    <ScrollableContainer ref={setScrollElement}>
+    <ScrollParent>
       <PageContainer centered>
         <ConnectionSyncContextProvider>
           <Box pb="xl">
@@ -84,12 +82,12 @@ export const ConnectionTimelinePage = () => {
               {filterValues.eventId ? (
                 <OneEventItem eventId={filterValues.eventId} connectionId={connection.connectionId} />
               ) : (
-                <ConnectionTimelineAllEventsList filterValues={filterValues} scrollElement={scrollElement} />
+                <ConnectionTimelineAllEventsList filterValues={filterValues} />
               )}
             </Card>
           </Box>
         </ConnectionSyncContextProvider>
       </PageContainer>
-    </ScrollableContainer>
+    </ScrollParent>
   );
 };

airbyte-webapp/src/pages/connections/ConnectionSettingsPage/ConnectionSettingsPage.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
 import { PageContainer } from "components/PageContainer";
-import { ScrollableContainer } from "components/ScrollableContainer";
 import { FlexContainer } from "components/ui/Flex";
+import { ScrollParent } from "components/ui/ScrollParent";
 
 import { useTrackPage, PageTrackingCodes } from "core/services/analytics";
 
@@ -12,12 +12,12 @@ export const ConnectionTransformationPage: React.FC = () => {
   useTrackPage(PageTrackingCodes.CONNECTIONS_ITEM_TRANSFORMATION);
 
   return (
-    <ScrollableContainer>
+    <ScrollParent>
       <PageContainer centered>
         <FlexContainer direction="column" gap="lg">
           <DbtCloudTransformations />
         </FlexContainer>
       </PageContainer>
-    </ScrollableContainer>
+    </ScrollParent>
   );
 };

airbyte-webapp/src/pages/connections/ConnectionTimelinePage/ConnectionTimelineAllEventsList.tsx

@@ -2,9 +2,7 @@
 
 .container {
   grid-area: connection-page-content;
-  overflow-y: auto;
   display: flex;
   gap: variables.$spacing-md;
   flex-direction: column;
-  padding: variables.$spacing-xl;
 }

airbyte-webapp/src/pages/connections/ConnectionTimelinePage/ConnectionTimelinePage.tsx

@@ -12,6 +12,7 @@ $filters-fixed-height: 108px;
 .pageBody {
   grid-area: page-content;
   overflow-y: auto;
+  padding-top: 0;
 }
 
 .card {