From a3b1d7958029e4845eaaac504f243e014379168e Mon Sep 17 00:00:00 2001
From: Ryan Laurie <30528226+iethree@users.noreply.github.com>
Date: Mon, 6 May 2024 15:53:25 -0600
Subject: [PATCH] Make bulk action bar reusable (#42296)
* Make bulk action bar reusable
* unify bulk action usage
* skip obsolete test
---
.../scenarios/collections/archive.cy.spec.js | 3 +-
.../archive/containers/ArchiveApp.tsx | 11 ++-
.../components/BulkActions.styled.tsx | 37 ---------
...kActions.tsx => CollectionBulkActions.tsx} | 83 +++++++------------
.../CollectionContentView.tsx | 4 +-
.../BulkActionBar/BulkActionBar.styled.tsx | 37 +++++++--
.../BulkActionBar/BulkActionBar.tsx | 77 ++++++++++-------
.../components/BulkActionBar/index.tsx | 3 +-
8 files changed, 115 insertions(+), 140 deletions(-)
delete mode 100644 frontend/src/metabase/collections/components/BulkActions.styled.tsx
rename frontend/src/metabase/collections/components/{BulkActions.tsx => CollectionBulkActions.tsx} (55%)
diff --git a/e2e/test/scenarios/collections/archive.cy.spec.js b/e2e/test/scenarios/collections/archive.cy.spec.js
index a55ce5556a8..f34783be41e 100644
--- a/e2e/test/scenarios/collections/archive.cy.spec.js
+++ b/e2e/test/scenarios/collections/archive.cy.spec.js
@@ -13,7 +13,8 @@ const getQuestionDetails = collectionId => ({
collection_id: collectionId,
});
-describe("scenarios > collections > archive", () => {
+// being deleted in #42226
+describe.skip("scenarios > collections > archive", () => {
beforeEach(() => {
restore();
cy.signInAsAdmin();
diff --git a/frontend/src/metabase/archive/containers/ArchiveApp.tsx b/frontend/src/metabase/archive/containers/ArchiveApp.tsx
index bc476c49375..65e1c8964c9 100644
--- a/frontend/src/metabase/archive/containers/ArchiveApp.tsx
+++ b/frontend/src/metabase/archive/containers/ArchiveApp.tsx
@@ -10,14 +10,12 @@ import { VirtualizedList } from "metabase/components/VirtualizedList";
import PageHeading from "metabase/components/type/PageHeading";
import Search from "metabase/entities/search";
import { useListSelect } from "metabase/hooks/use-list-select";
-import { useDispatch, useSelector } from "metabase/lib/redux";
-import { getIsNavbarOpen } from "metabase/selectors/app";
+import { useDispatch } from "metabase/lib/redux";
import { Button } from "metabase/ui";
import type { CollectionItem } from "metabase-types/api";
import {
ArchiveBarContent,
- ArchiveBarText,
ArchiveBody,
ArchiveEmptyState,
ArchiveHeader,
@@ -28,7 +26,6 @@ import {
export function ArchiveApp() {
const dispatch = useDispatch();
- const isNavbarOpen = useSelector(getIsNavbarOpen);
const { data, isLoading, error } = useSearchListQuery({
query: { archived: true },
@@ -103,7 +100,10 @@ export function ArchiveApp() {
</VirtualizedListWrapper>
)}
</ArchiveBody>
- <BulkActionBar isNavbarOpen={isNavbarOpen} showing={selected.length > 0}>
+ <BulkActionBar
+ opened={selected.length > 0}
+ message={t`${selected.length} items selected`}
+ >
<ArchiveBarContent>
<SelectionControls
allSelected={allSelected}
@@ -111,7 +111,6 @@ export function ArchiveApp() {
clear={clear}
/>
<BulkActionControls selected={selected} />
- <ArchiveBarText>{t`${selected.length} items selected`}</ArchiveBarText>
</ArchiveBarContent>
</BulkActionBar>
</ArchiveRoot>
diff --git a/frontend/src/metabase/collections/components/BulkActions.styled.tsx b/frontend/src/metabase/collections/components/BulkActions.styled.tsx
deleted file mode 100644
index 83a9cc07160..00000000000
--- a/frontend/src/metabase/collections/components/BulkActions.styled.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import styled from "@emotion/styled";
-
-import Card from "metabase/components/Card";
-import Button from "metabase/core/components/Button";
-import { alpha, color } from "metabase/lib/colors";
-import { space } from "metabase/styled-components/theme";
-
-export const BulkActionsToast = styled.div`
- position: fixed;
- bottom: 0;
- left: 50%;
- margin-bottom: ${space(2)};
- z-index: 400; // needed to put this over popovers (z-index: 300)
-`;
-
-export const ToastCard = styled(Card)`
- padding: 0.75rem ${space(2)};
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 2.5rem;
-`;
-
-export const CardSide = styled.div`
- display: flex;
- align-items: center;
- gap: ${space(2)};
-`;
-
-export const CardButton = styled(Button)`
- border-color: ${alpha(color("bg-white"), 0)};
- background-color: ${alpha(color("bg-white"), 0.1)};
- :hover {
- border-color: ${alpha(color("bg-white"), 0)};
- background-color: ${alpha(color("bg-white"), 0.3)};
- }
-`;
diff --git a/frontend/src/metabase/collections/components/BulkActions.tsx b/frontend/src/metabase/collections/components/CollectionBulkActions.tsx
similarity index 55%
rename from frontend/src/metabase/collections/components/BulkActions.tsx
rename to frontend/src/metabase/collections/components/CollectionBulkActions.tsx
index 19c028ad509..bf67845e2c3 100644
--- a/frontend/src/metabase/collections/components/BulkActions.tsx
+++ b/frontend/src/metabase/collections/components/CollectionBulkActions.tsx
@@ -4,9 +4,12 @@ import _ from "underscore";
import CollectionCopyEntityModal from "metabase/collections/components/CollectionCopyEntityModal";
import { canArchiveItem, canMoveItem } from "metabase/collections/utils";
+import {
+ BulkActionBar,
+ BulkActionButton,
+} from "metabase/components/BulkActionBar";
import Modal from "metabase/components/Modal";
import { BulkMoveModal } from "metabase/containers/MoveModal";
-import { Transition } from "metabase/ui";
import type { Collection, CollectionItem } from "metabase-types/api";
import type {
@@ -15,21 +18,7 @@ import type {
OnMoveWithOneItem,
} from "../types";
-import {
- BulkActionsToast,
- CardButton,
- CardSide,
- ToastCard,
-} from "./BulkActions.styled";
-
-const slideIn = {
- in: { opacity: 1, transform: "translate(-50%, 0)" },
- out: { opacity: 0, transform: "translate(-50%, 100px)" },
- common: { transformOrigin: "top" },
- transitionProperty: "transform, opacity",
-};
-
-type BulkActionsProps = {
+type CollectionBulkActionsProps = {
selected: any[];
collection: Collection;
selectedItems: CollectionItem[] | null;
@@ -41,7 +30,7 @@ type BulkActionsProps = {
onCopy: OnCopyWithoutArguments;
};
-const BulkActions = ({
+const CollectionBulkActions = ({
selected,
collection,
selectedItems,
@@ -51,51 +40,35 @@ const BulkActions = ({
onCloseModal,
onMove,
onCopy,
-}: BulkActionsProps) => {
+}: CollectionBulkActionsProps) => {
const canMove = selected.every(item => canMoveItem(item, collection));
const canArchive = selected.every(item => canArchiveItem(item, collection));
const isVisible = selected.length > 0;
const areSomeItemsSelected = !!selectedItems && !_.isEmpty(selectedItems);
+ const actionMessage = ngettext(
+ msgid`${selected.length} item selected`,
+ `${selected.length} items selected`,
+ selected.length,
+ );
+
return (
<>
- <Transition
- mounted={isVisible}
- transition={slideIn}
- duration={400}
- timingFunction="ease"
- >
- {styles => (
- <BulkActionsToast style={styles}>
- <ToastCard dark data-testid="toast-card">
- <CardSide>
- {ngettext(
- msgid`${selected.length} item selected`,
- `${selected.length} items selected`,
- selected.length,
- )}
- </CardSide>
- <CardSide>
- <CardButton
- medium
- purple
- disabled={!canMove}
- onClick={onMoveStart}
- >{t`Move`}</CardButton>
- <CardButton
- medium
- purple
- disabled={!canArchive}
- onClick={() => {
- onArchive?.();
- }}
- >{t`Archive`}</CardButton>
- </CardSide>
- </ToastCard>
- </BulkActionsToast>
- )}
- </Transition>
+ <BulkActionBar message={actionMessage} opened={isVisible}>
+ <BulkActionButton
+ disabled={!canMove}
+ onClick={onMoveStart}
+ >{t`Move`}</BulkActionButton>
+ <BulkActionButton
+ disabled={!canArchive}
+ onClick={() => {
+ onArchive?.();
+ }}
+ >
+ {t`Archive`}
+ </BulkActionButton>
+ </BulkActionBar>
{areSomeItemsSelected && selectedAction === "copy" && (
<Modal onClose={onCloseModal}>
<CollectionCopyEntityModal
@@ -121,4 +94,4 @@ const BulkActions = ({
};
// eslint-disable-next-line import/no-default-export
-export default memo(BulkActions);
+export default memo(CollectionBulkActions);
diff --git a/frontend/src/metabase/collections/components/CollectionContent/CollectionContentView.tsx b/frontend/src/metabase/collections/components/CollectionContent/CollectionContentView.tsx
index 3cd52d5bf12..3527d47b6b0 100644
--- a/frontend/src/metabase/collections/components/CollectionContent/CollectionContentView.tsx
+++ b/frontend/src/metabase/collections/components/CollectionContent/CollectionContentView.tsx
@@ -6,7 +6,7 @@ import { usePrevious } from "react-use";
import { t } from "ttag";
import ErrorBoundary from "metabase/ErrorBoundary";
-import BulkActions from "metabase/collections/components/BulkActions";
+import CollectionBulkActions from "metabase/collections/components/CollectionBulkActions";
import CollectionEmptyState from "metabase/collections/components/CollectionEmptyState";
import PinnedItemOverview from "metabase/collections/components/PinnedItemOverview";
import Header from "metabase/collections/containers/CollectionHeader";
@@ -387,7 +387,7 @@ export const CollectionContentView = ({
/>
)}
</div>
- <BulkActions
+ <CollectionBulkActions
selected={selected}
collection={collection}
onArchive={handleBulkArchive}
diff --git a/frontend/src/metabase/components/BulkActionBar/BulkActionBar.styled.tsx b/frontend/src/metabase/components/BulkActionBar/BulkActionBar.styled.tsx
index 2985724274b..41a9d9f6ced 100644
--- a/frontend/src/metabase/components/BulkActionBar/BulkActionBar.styled.tsx
+++ b/frontend/src/metabase/components/BulkActionBar/BulkActionBar.styled.tsx
@@ -1,13 +1,36 @@
import styled from "@emotion/styled";
-import { color } from "metabase/lib/colors";
-import { NAV_SIDEBAR_WIDTH } from "metabase/nav/constants";
+import Card from "metabase/components/Card";
+import { alpha, color } from "metabase/lib/colors";
+import { space } from "metabase/styled-components/theme";
+import { Button } from "metabase/ui";
-export const FixedBottomBar = styled.div<{ isNavbarOpen: boolean }>`
+export const BulkActionsToast = styled.div<{ isNavbarOpen: boolean }>`
position: fixed;
bottom: 0;
- left: ${props => (props.isNavbarOpen ? NAV_SIDEBAR_WIDTH : 0)};
- right: 0;
- border-top: 1px solid ${color("border")};
- background-color: ${color("white")};
+ left: 50%;
+ margin-bottom: ${space(2)};
+ z-index: 400; // needed to put this over popovers (z-index: 300)
`;
+
+export const ToastCard = styled(Card)`
+ color: ${color("white")};
+
+ padding: 0.75rem ${space(2)};
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 2.5rem;
+`;
+
+export const BulkActionButton = styled(Button)`
+ color: ${color("white")};
+
+ border-color: ${alpha(color("bg-white"), 0)};
+ background-color: ${alpha(color("bg-white"), 0.1)};
+ :hover {
+ color: ${color("white")};
+ border-color: ${alpha(color("bg-white"), 0)};
+ background-color: ${alpha(color("bg-white"), 0.3)};
+ }
+` as unknown as typeof Button;
diff --git a/frontend/src/metabase/components/BulkActionBar/BulkActionBar.tsx b/frontend/src/metabase/components/BulkActionBar/BulkActionBar.tsx
index aff43ff0999..227ca6fd993 100644
--- a/frontend/src/metabase/components/BulkActionBar/BulkActionBar.tsx
+++ b/frontend/src/metabase/components/BulkActionBar/BulkActionBar.tsx
@@ -1,41 +1,56 @@
-import type * as React from "react";
+import { useSelector } from "metabase/lib/redux";
+import { getIsNavbarOpen } from "metabase/selectors/app";
+import { Transition, Flex, Text } from "metabase/ui";
-import { Transition } from "metabase/ui";
-
-import { FixedBottomBar } from "./BulkActionBar.styled";
+import { BulkActionsToast, ToastCard } from "./BulkActionBar.styled";
const slideIn = {
- in: { opacity: 1, transform: "translateY(0)" },
- out: { opacity: 0, transform: "translateY(100px)" },
+ in: { opacity: 1, transform: "translate(-50%, 0)" },
+ out: { opacity: 0, transform: "translate(-50%, 100px)" },
common: { transformOrigin: "top" },
transitionProperty: "transform, opacity",
};
-interface BulkActionBarProps {
- children: React.ReactNode;
- showing: boolean;
- isNavbarOpen: boolean;
-}
+type BulkActionsProps = {
+ opened: boolean;
+ message: string;
+ children: React.ReactNode | React.ReactNode[];
+};
+/**
+ * A generic floating notification that appears at the bottom of the screen with a message and
+ * children that is generally used when multiple items have been selected and you need a UI element
+ * to perform actions on those items.
+ *
+ * @param {boolean} opened - Whether the notification is open or not
+ * @param {string} message - The message to display in the notification
+ * @param {any} children - The children to display in the notification, meant to be used with BulkActionButton components.
+ * @returns
+ */
export const BulkActionBar = ({
+ opened,
+ message,
children,
- showing,
- isNavbarOpen,
-}: BulkActionBarProps) => (
- <Transition
- mounted={showing}
- transition={slideIn}
- duration={400}
- timingFunction="ease"
- >
- {styles => (
- <FixedBottomBar
- data-testid="bulk-action-bar"
- isNavbarOpen={isNavbarOpen}
- style={styles}
- >
- {children}
- </FixedBottomBar>
- )}
- </Transition>
-);
+}: BulkActionsProps) => {
+ const isNavbarOpen = useSelector(getIsNavbarOpen);
+
+ return (
+ <Transition
+ mounted={opened}
+ transition={slideIn}
+ duration={400}
+ timingFunction="ease"
+ >
+ {styles => (
+ <BulkActionsToast style={styles} isNavbarOpen={isNavbarOpen}>
+ <ToastCard dark data-testid="toast-card">
+ {message && <Text color="white">{message}</Text>}
+ <Flex gap="sm" align="center">
+ {children}
+ </Flex>
+ </ToastCard>
+ </BulkActionsToast>
+ )}
+ </Transition>
+ );
+};
diff --git a/frontend/src/metabase/components/BulkActionBar/index.tsx b/frontend/src/metabase/components/BulkActionBar/index.tsx
index 3dd375fe04e..420e1869457 100644
--- a/frontend/src/metabase/components/BulkActionBar/index.tsx
+++ b/frontend/src/metabase/components/BulkActionBar/index.tsx
@@ -1 +1,2 @@
-export { BulkActionBar } from "./BulkActionBar";
+export * from "./BulkActionBar";
+export * from "./BulkActionBar.styled";
--
GitLab