Remove react-motion - Bulk Actions (#39729)

* removes react motion usage from bulk action related components and replaces with mantine transition component

* removes unused eslint disable comment

* fixes e2e tests

e2e/test/scenarios/collections/collections.cy.spec.js

@@ -480,7 +480,7 @@ describe("scenarios > collection defaults", () => {
 
           cy.icon("check").should("not.exist");
           // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-          cy.findByText(/item(s)? selected/).should("not.be.visible");
+          cy.findByText(/item(s)? selected/).should("not.exist");
         });
 
         it("should clean up selection when opening another collection (metabase#16491)", () => {
@@ -498,7 +498,7 @@ describe("scenarios > collection defaults", () => {
           // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
           cy.findByText("Our analytics").click();
           // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-          cy.findByText(/item(s)? selected/).should("not.be.visible");
+          cy.findByText(/item(s)? selected/).should("not.exist");
         });
       });
 
@@ -516,7 +516,7 @@ describe("scenarios > collection defaults", () => {
           // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
           cy.findByText("Orders").should("not.exist");
           // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-          cy.findByText(/item(s)? selected/).should("not.be.visible");
+          cy.findByText(/item(s)? selected/).should("not.exist");
         });
       });
 
@@ -539,7 +539,7 @@ describe("scenarios > collection defaults", () => {
           // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
           cy.findByText("Orders").should("not.exist");
           // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-          cy.findByText(/item(s)? selected/).should("not.be.visible");
+          cy.findByText(/item(s)? selected/).should("not.exist");
 
           // Check that items were actually moved
           navigationSidebar().findByText("First collection").click();

frontend/src/metabase/archive/containers/ArchiveApp.tsx

@@ -3,7 +3,7 @@ import { t } from "ttag";
 
 import { useSearchListQuery } from "metabase/common/hooks";
 import { ArchivedItem } from "metabase/components/ArchivedItem/ArchivedItem";
-import BulkActionBar from "metabase/components/BulkActionBar";
+import { BulkActionBar } from "metabase/components/BulkActionBar";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper/LoadingAndErrorWrapper";
 import { StackedCheckBox } from "metabase/components/StackedCheckBox";
 import { VirtualizedList } from "metabase/components/VirtualizedList";

frontend/src/metabase/collections/components/BulkActions.jsx

 /* eslint-disable react/prop-types */
 import { memo } from "react";
-import { Motion, spring } from "react-motion";
 import { t, msgid, ngettext } from "ttag";
 import _ from "underscore";
 
@@ -8,6 +7,7 @@ import CollectionCopyEntityModal from "metabase/collections/components/Collectio
 import { canArchiveItem, canMoveItem } from "metabase/collections/utils";
 import Modal from "metabase/components/Modal";
 import { CollectionMoveModal } from "metabase/containers/CollectionMoveModal";
+import { Transition } from "metabase/ui";
 
 import {
   BulkActionsToast,
@@ -16,6 +16,13 @@ import {
   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",
+};
+
 function BulkActions({
   selected,
   collection,
@@ -34,18 +41,14 @@ function BulkActions({
 
   return (
     <>
-      <Motion
-        defaultStyle={{
-          opacity: 0,
-          translateY: 100,
-        }}
-        style={{
-          opacity: isVisible ? spring(1) : spring(0),
-          translateY: isVisible ? spring(0) : spring(100),
-        }}
+      <Transition
+        mounted={isVisible}
+        transition={slideIn}
+        duration={400}
+        timingFunction="ease"
       >
-        {({ translateY }) => (
-          <BulkActionsToast translateY={translateY} isNavbarOpen={isNavbarOpen}>
+        {styles => (
+          <BulkActionsToast style={styles} isNavbarOpen={isNavbarOpen}>
             <ToastCard dark>
               <CardSide>
                 {ngettext(
@@ -71,7 +74,7 @@ function BulkActions({
             </ToastCard>
           </BulkActionsToast>
         )}
-      </Motion>
+      </Transition>
       {!_.isEmpty(selectedItems) && selectedAction === "copy" && (
         <Modal onClose={onCloseModal}>
           <CollectionCopyEntityModal

frontend/src/metabase/collections/components/BulkActions.styled.tsx

@@ -6,14 +6,10 @@ import { alpha, color } from "metabase/lib/colors";
 import { NAV_SIDEBAR_WIDTH } from "metabase/nav/constants";
 import { space } from "metabase/styled-components/theme";
 
-export const BulkActionsToast = styled.div<{
-  isNavbarOpen: boolean;
-  translateY: number;
-}>`
+export const BulkActionsToast = styled.div<{ isNavbarOpen: boolean }>`
   position: fixed;
   bottom: 0;
   left: 50%;
-  transform: ${props => `translate(-50%, ${props.translateY}px)`};
   margin-left: ${props =>
     props.isNavbarOpen ? `${parseInt(NAV_SIDEBAR_WIDTH) / 2}px` : "0"};
   margin-bottom: ${space(2)};

frontend/src/metabase/components/BulkActionBar/BulkActionBar.tsx

 import type * as React from "react";
-import { Motion, spring } from "react-motion";
+
+import { Transition } from "metabase/ui";
 
 import { FixedBottomBar } from "./BulkActionBar.styled";
 
+const slideIn = {
+  in: { opacity: 1, transform: "translateY(0)" },
+  out: { opacity: 0, transform: "translateY(100px)" },
+  common: { transformOrigin: "top" },
+  transitionProperty: "transform, opacity",
+};
+
 interface BulkActionBarProps {
   children: React.ReactNode;
   showing: boolean;
   isNavbarOpen: boolean;
 }
 
-const BulkActionBar = ({
+export const BulkActionBar = ({
   children,
   showing,
   isNavbarOpen,
 }: BulkActionBarProps) => (
-  <Motion
-    defaultStyle={{
-      opacity: 0,
-      translateY: 100,
-    }}
-    style={{
-      opacity: showing ? spring(1) : spring(0),
-      translateY: showing ? spring(0) : spring(100),
-    }}
+  <Transition
+    mounted={showing}
+    transition={slideIn}
+    duration={400}
+    timingFunction="ease"
   >
-    {({ translateY }) => (
+    {styles => (
       <FixedBottomBar
-        style={{
-          transform: `translateY(${translateY}px)`,
-        }}
         data-testid="bulk-action-bar"
         isNavbarOpen={isNavbarOpen}
+        style={styles}
       >
         {children}
       </FixedBottomBar>
     )}
-  </Motion>
+  </Transition>
 );
-
-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export default BulkActionBar;

frontend/src/metabase/components/BulkActionBar/index.tsx

-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export { default } from "./BulkActionBar";
+export { BulkActionBar } from "./BulkActionBar";

frontend/src/metabase/ui/components/utils/Transition/index.ts

+export { Transition } from "@mantine/core";
+export type { TransitionProps } from "@mantine/core";

frontend/src/metabase/ui/components/utils/index.ts

@@ -3,3 +3,4 @@ export * from "./DelayGroup";
 export * from "./Divider";
 export * from "./FocusTrap";
 export * from "./Paper";
+export * from "./Transition";