Prevent database sync status element to overlap pagination (metabase#66225)

Author: andsalves

frontend/src/metabase/collections/components/CollectionContent/CollectionItemsTable.tsx

@@ -272,7 +272,14 @@ const CollectionItemsTableContentInner = ({
         onClick={onClick}
         visibleColumnsMap={visibleColumnsMap}
       />
-      <div className={cx(CS.flex, CS.justifyEnd, CS.my3)}>
+      <div
+        className={cx(
+          CS.flex,
+          CS.justifyEnd,
+          CS.my3,
+          CS.syncStatusAwarePagination,
+        )}
+      >
         {hasPagination && (
           <PaginationControls
             showTotal

frontend/src/metabase/common/components/UserCollectionList.tsx

@@ -79,7 +79,7 @@ export const UserCollectionList = () => {
           </Grid>
         )}
       </Box>
-      <Flex justify="end">
+      <Flex justify="end" className={CS.syncStatusAwarePagination}>
         <PaginationControls
           page={page}
           pageSize={PAGE_SIZE}

frontend/src/metabase/css/core/base.module.css

@@ -19,3 +19,8 @@
 .circle {
   border-radius: 99px;
 }
+
+:global(.sync-status-visible) .syncStatusAwarePagination {
+  /* move pagination component up when database sync is in progress to avoid overlapping */
+  margin-bottom: 6.5rem;
+}

frontend/src/metabase/status/components/DatabaseStatus/DatabaseStatus.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { isSyncInProgress } from "metabase/lib/syncing";
 import type Database from "metabase-lib/v1/metadata/Database";
@@ -18,6 +18,14 @@ const DatabaseStatus = (props: DatabaseStatusProps): JSX.Element | null => {
   const isActive = databases.some(isSyncInProgress);
   const isVisible = useStatusVisibility(isActive);
 
+  useEffect(() => {
+    if (isVisible) {
+      document.body.classList.add("sync-status-visible");
+    } else {
+      document.body.classList.remove("sync-status-visible");
+    }
+  }, [isVisible]);
+
   if (isVisible) {
     return <DatabaseStatusContent databases={databases} />;
   } else {

frontend/src/metabase/status/components/DatabaseStatus/DatabaseStatus.unit.spec.tsx

@@ -72,4 +72,18 @@ describe("DatabaseStatus", () => {
 
     expect(screen.queryByText("Syncing…")).not.toBeInTheDocument();
   });
+
+  it("assigns 'sync-status-visible' class to body element when database is in sync", () => {
+    setup({
+      user: createMockUser({ id: 1 }),
+      databases: [
+        createMockDatabase({
+          creator_id: 1,
+          initial_sync_status: "incomplete",
+        }),
+      ],
+    });
+
+    expect(document.body).toHaveClass("sync-status-visible");
+  });
 });