Fix not possible to select pinned collection items using checkbox (#15826)

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

@@ -16,7 +16,15 @@ import NormalItem from "metabase/collections/components/NormalItem";
 import CollectionSectionHeading from "metabase/collections/components/CollectionSectionHeading";
 import { ANALYTICS_CONTEXT } from "metabase/collections/constants";
 
-const PinnedItem = ({ item, index, collection, onCopy, onMove }) => (
+const PinnedItem = ({
+  item,
+  index,
+  collection,
+  selection,
+  onToggleSelected,
+  onCopy,
+  onMove,
+}) => (
   <Link
     key={index}
     to={item.getUrl()}
@@ -27,7 +35,9 @@ const PinnedItem = ({ item, index, collection, onCopy, onMove }) => (
     <NormalItem
       item={item}
       collection={collection}
+      selection={selection}
       onPin={() => item.setPinned(false)}
+      onToggleSelected={onToggleSelected}
       onMove={onMove}
       onCopy={onCopy}
       pinned
@@ -35,7 +45,14 @@ const PinnedItem = ({ item, index, collection, onCopy, onMove }) => (
   </Link>
 );
 
-export default function PinnedItems({ items, collection, onMove, onCopy }) {
+export default function PinnedItems({
+  items,
+  collection,
+  selection,
+  onToggleSelected,
+  onMove,
+  onCopy,
+}) {
   if (items.length === 0) {
     return (
       <PinDropTarget pinIndex={1} hideUntilDrag>
@@ -64,12 +81,18 @@ export default function PinnedItems({ items, collection, onMove, onCopy }) {
       >
         {items.map((item, index) => (
           <Box w={[1]} className="relative" key={index}>
-            <ItemDragSource item={item} collection={collection}>
+            <ItemDragSource
+              item={item}
+              selection={selection}
+              collection={collection}
+            >
               <PinnedItem
                 key={`${item.model}:${item.id}`}
                 index={index}
                 item={item}
                 collection={collection}
+                selection={selection}
+                onToggleSelected={onToggleSelected}
                 onMove={onMove}
                 onCopy={onCopy}
               />

frontend/src/metabase/collections/containers/CollectionContent.jsx

@@ -28,27 +28,28 @@ import ItemsDragLayer from "metabase/containers/dnd/ItemsDragLayer";
   reload: true,
 })
 @connect((state, props) => {
-  // split out collections, pinned, and unpinned since bulk actions only apply to unpinned
+  // split out collections, since bulk actions are not applied to them
   const [collections, items] = _.partition(
     props.list,
     item => item.model === "collection",
   );
+  items.sort((a, b) => a.collection_position - b.collection_position);
+
   const [pinned, unpinned] = _.partition(
     items,
     item => item.collection_position != null,
   );
-  // sort the pinned items by collection_position
-  pinned.sort((a, b) => a.collection_position - b.collection_position);
+
   return {
     collections,
+    items,
     pinned,
     unpinned,
     isAdmin: getUserIsAdmin(state),
   };
 })
-// only apply bulk actions to unpinned items
 @listSelect({
-  listProp: "unpinned",
+  listProp: "items",
   keyForItem: item => `${item.model}:${item.id}`,
 })
 @withRouter
@@ -68,6 +69,20 @@ export default class CollectionContent extends React.Component {
     }
   };
 
+  handleMove = selectedItems => {
+    this.setState({
+      selectedItems,
+      selectedAction: "move",
+    });
+  };
+
+  handleCopy = selectedItems => {
+    this.setState({
+      selectedItems,
+      selectedAction: "copy",
+    });
+  };
+
   handleBulkMoveStart = () => {
     this.setState({
       selectedItems: this.props.selected,
@@ -125,8 +140,8 @@ export default class CollectionContent extends React.Component {
 
     const collectionHasPins = pinned.length > 0;
 
-    const avaliableTypes = _.uniq(unpinned.map(u => u.model));
-    const showFilters = unpinned.length > 5 && avaliableTypes.length > 1;
+    const availableTypes = _.uniq(unpinned.map(u => u.model));
+    const showFilters = unpinned.length > 5 && availableTypes.length > 1;
 
     return (
       <Box pt={2}>
@@ -140,24 +155,14 @@ export default class CollectionContent extends React.Component {
             collection={collection}
             unpinnedItems={unpinnedItems}
           />
-          {collectionHasPins && (
-            <PinnedItems
-              items={pinned}
-              collection={collection}
-              onMove={selectedItems =>
-                this.setState({
-                  selectedItems,
-                  selectedAction: "move",
-                })
-              }
-              onCopy={selectedItems =>
-                this.setState({
-                  selectedItems,
-                  selectedAction: "copy",
-                })
-              }
-            />
-          )}
+          <PinnedItems
+            items={pinned}
+            collection={collection}
+            selection={selection}
+            onToggleSelected={onToggleSelected}
+            onMove={this.handleMove}
+            onCopy={this.handleCopy}
+          />
           <ItemList
             scrollElement={scrollElement}
             items={unpinnedItems}
@@ -167,18 +172,8 @@ export default class CollectionContent extends React.Component {
             collection={collection}
             onToggleSelected={onToggleSelected}
             collectionHasPins={collectionHasPins}
-            onMove={selectedItems =>
-              this.setState({
-                selectedItems,
-                selectedAction: "move",
-              })
-            }
-            onCopy={selectedItems =>
-              this.setState({
-                selectedItems,
-                selectedAction: "copy",
-              })
-            }
+            onMove={this.handleMove}
+            onCopy={this.handleCopy}
           />
         </Box>
         <BulkActions

frontend/test/metabase/scenarios/collections/collections.cy.spec.js

@@ -512,29 +512,37 @@ describe("scenarios > collection_defaults", () => {
       cy.findByText("First Collection");
     });
 
-    it("should be possible to apply bulk selection to items (metabase#14705)", () => {
-      cy.visit("/collection/root");
-      selectItemUsingCheckbox("Orders");
-      cy.findByText("1 item selected").should("be.visible");
-      // Select all
-      cy.icon("dash").click();
-      cy.icon("dash").should("not.exist");
-      cy.findByText("4 items selected");
-      // Deselect all
-      cy.findByTestId("bulk-action-bar").within(() => {
-        cy.icon("check").click();
+    describe("bulk actions", () => {
+      beforeEach(() => {
+        cy.visit("/collection/root");
+        openEllipsisMenuFor("Orders in a dashboard");
+        cy.findByText("Pin this item").click();
       });
-      cy.icon("check").should("not.exist");
-      cy.findByTestId("bulk-action-bar").should("not.be.visible");
-    });
 
-    it.skip("should be possible to select pinned item using checkbox (metabase#15338)", () => {
-      cy.visit("/collection/root");
-      openEllipsisMenuFor("Orders");
-      cy.findByText("Pin this item").click();
-      cy.findByText(/Pinned items/i);
-      selectItemUsingCheckbox("Orders");
-      cy.findByText("1 item selected");
+      it("should be possible to apply bulk selection to items (metabase#14705)", () => {
+        selectItemUsingCheckbox("Orders");
+        cy.findByText("1 item selected").should("be.visible");
+        selectItemUsingCheckbox("Orders in a dashboard", "dashboard");
+        cy.findByText("2 items selected").should("be.visible");
+
+        // Select all
+        cy.icon("dash").click();
+        cy.icon("dash").should("not.exist");
+        cy.findByText("4 items selected");
+
+        // Deselect all
+        cy.findByTestId("bulk-action-bar").within(() => {
+          cy.icon("check").click();
+        });
+        cy.icon("check").should("not.exist");
+        cy.findByTestId("bulk-action-bar").should("not.be.visible");
+      });
+
+      it("should be possible to select pinned item using checkbox (metabase#15338)", () => {
+        cy.findByText(/Pinned items/i);
+        selectItemUsingCheckbox("Orders in a dashboard", "dashboard");
+        cy.findByText("1 item selected");
+      });
     });
   });
 });