Put bulk actions above popovers in collections (#42512)

* q * Restore margin-left adjustment
metabase · May 10, 2024 · 1175ee6 · 1175ee6
1 parent ef15d0e
commit 1175ee6
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 41 deletions.
diff --git a/frontend/src/metabase/collections/components/CollectionContent/CollectionContent.styled.tsx b/frontend/src/metabase/collections/components/CollectionContent/CollectionContent.styled.tsx
@@ -4,11 +4,6 @@ export const CollectionRoot = styled.div`
   height: 100%;
   overflow: hidden;
   position: relative;
-  container-name: ItemsTableContainer;
-  container-type: inline-size;
-  // NOTE: The BulkActionsToast is centered within this container.
-  // If this div ever ceases to be a container one day, let's restore the previously
-  // existing margin-left fix for the toast so it is still centered when the nav sidebar is open
 `;
 
 export const CollectionMain = styled.div`
@@ -24,6 +19,9 @@ export interface CollectionTableProps {
 
 export const CollectionTable = styled.div<CollectionTableProps>`
   margin-top: ${props => (props.hasPinnedItems ? "2rem" : "")};
+
+  container-name: ItemsTableContainer;
+  container-type: inline-size;
 `;
 
 export const CollectionEmptyContent = styled.div`

diff --git a/frontend/src/metabase/collections/components/CollectionContent/CollectionContentView.tsx b/frontend/src/metabase/collections/components/CollectionContent/CollectionContentView.tsx
@@ -350,41 +350,43 @@ export const CollectionContentView = ({
                     }
 
                     return (
-                      <CollectionTable data-testid="collection-table">
-                        <ItemsTable
-                          databases={databases}
-                          bookmarks={bookmarks}
-                          createBookmark={createBookmark}
-                          deleteBookmark={deleteBookmark}
-                          items={unpinnedItems}
-                          collection={collection}
-                          sortingOptions={unpinnedItemsSorting}
-                          onSortingOptionsChange={
-                            handleUnpinnedItemsSortingChange
-                          }
-                          selectedItems={selected}
-                          hasUnselected={hasUnselected}
-                          getIsSelected={getIsSelected}
-                          onToggleSelected={toggleItem}
-                          onDrop={clear}
-                          onMove={handleMove}
-                          onCopy={handleCopy}
-                          onSelectAll={handleSelectAll}
-                          onSelectNone={clear}
-                        />
-                        <div className={cx(CS.flex, CS.justifyEnd, CS.my3)}>
-                          {hasPagination && (
-                            <PaginationControls
-                              showTotal
-                              page={page}
-                              pageSize={PAGE_SIZE}
-                              total={metadata.total}
-                              itemsLength={unpinnedItems.length}
-                              onNextPage={handleNextPage}
-                              onPreviousPage={handlePreviousPage}
-                            />
-                          )}
-                        </div>
+                      <>
+                        <CollectionTable data-testid="collection-table">
+                          <ItemsTable
+                            databases={databases}
+                            bookmarks={bookmarks}
+                            createBookmark={createBookmark}
+                            deleteBookmark={deleteBookmark}
+                            items={unpinnedItems}
+                            collection={collection}
+                            sortingOptions={unpinnedItemsSorting}
+                            onSortingOptionsChange={
+                              handleUnpinnedItemsSortingChange
+                            }
+                            selectedItems={selected}
+                            hasUnselected={hasUnselected}
+                            getIsSelected={getIsSelected}
+                            onToggleSelected={toggleItem}
+                            onDrop={clear}
+                            onMove={handleMove}
+                            onCopy={handleCopy}
+                            onSelectAll={handleSelectAll}
+                            onSelectNone={clear}
+                          />
+                          <div className={cx(CS.flex, CS.justifyEnd, CS.my3)}>
+                            {hasPagination && (
+                              <PaginationControls
+                                showTotal
+                                page={page}
+                                pageSize={PAGE_SIZE}
+                                total={metadata.total}
+                                itemsLength={unpinnedItems.length}
+                                onNextPage={handleNextPage}
+                                onPreviousPage={handlePreviousPage}
+                              />
+                            )}
+                          </div>
+                        </CollectionTable>
                         <CollectionBulkActions
                           selected={selected}
                           collection={collection}
@@ -396,7 +398,7 @@ export const CollectionContentView = ({
                           selectedItems={selectedItems}
                           selectedAction={selectedAction}
                         />
-                      </CollectionTable>
+                      </>
                     );
                   }}
                 </Search.ListLoader>

diff --git a/frontend/src/metabase/components/BulkActionBar/BulkActionBar.styled.tsx b/frontend/src/metabase/components/BulkActionBar/BulkActionBar.styled.tsx
@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 
 import Card from "metabase/components/Card";
 import { alpha, color } from "metabase/lib/colors";
+import { NAV_SIDEBAR_WIDTH } from "metabase/nav/constants";
 import { space } from "metabase/styled-components/theme";
 import { Button, DEFAULT_POPOVER_Z_INDEX } from "metabase/ui";
 
@@ -12,6 +13,8 @@ export const BulkActionsToast = styled.div<{ isNavbarOpen: boolean }>`
   position: fixed;
   bottom: 0;
   left: 50%;
+  margin-left: ${props =>
+    props.isNavbarOpen ? `${parseInt(NAV_SIDEBAR_WIDTH) / 2}px` : "0"};
   margin-bottom: ${space(2)};
   z-index: ${BULK_ACTIONS_Z_INDEX};
 `;