fix selecting pinned items in collections (#30653)

* fix selecting pinned items in collections

* update e2e test

e2e/support/helpers/e2e-collection-helpers.js

@@ -50,3 +50,27 @@ export function openCollectionItemMenu(item, index = 0) {
     .closest("tr")
     .within(() => cy.icon("ellipsis").click());
 }
+
+export const getPinnedSection = () => {
+  return cy.findByTestId("pinned-items");
+};
+
+export const getUnpinnedSection = () => {
+  return cy.findByRole("table");
+};
+
+export const openPinnedItemMenu = name => {
+  getPinnedSection().within(() => {
+    cy.findByText(name)
+      .closest("a")
+      .within(() => cy.icon("ellipsis").click({ force: true }));
+  });
+};
+
+export const openUnpinnedItemMenu = name => {
+  getUnpinnedSection().within(() => {
+    cy.findByText(name)
+      .closest("tr")
+      .within(() => cy.icon("ellipsis").click());
+  });
+};

e2e/test/scenarios/collections/collection-pinned-overview.cy.spec.js

-import { popover, restore } from "e2e/support/helpers";
+import {
+  popover,
+  restore,
+  getPinnedSection,
+  openPinnedItemMenu,
+  openUnpinnedItemMenu,
+} from "e2e/support/helpers";
 import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
 
 const { ORDERS, ORDERS_ID } = SAMPLE_DATABASE;
@@ -204,31 +210,7 @@ describe("scenarios > collection pinned items overview", () => {
   });
 });
 
-const getPinnedSection = () => {
-  return cy.findByTestId("pinned-items");
-};
-
-const getUnpinnedSection = () => {
-  return cy.findByRole("table");
-};
-
 const openRootCollection = () => {
   cy.visit("/collection/root");
   cy.wait("@getPinnedItems");
 };
-
-const openPinnedItemMenu = name => {
-  getPinnedSection().within(() => {
-    cy.findByText(name)
-      .closest("a")
-      .within(() => cy.icon("ellipsis").click({ force: true }));
-  });
-};
-
-const openUnpinnedItemMenu = name => {
-  getUnpinnedSection().within(() => {
-    cy.findByText(name)
-      .closest("tr")
-      .within(() => cy.icon("ellipsis").click());
-  });
-};

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

@@ -11,6 +11,8 @@ import {
   closeNavigationSidebar,
   openCollectionMenu,
   visitCollection,
+  openUnpinnedItemMenu,
+  getPinnedSection,
 } from "e2e/support/helpers";
 import { USERS, USER_GROUPS } from "e2e/support/cypress_data";
 import { displaySidebarChildOf } from "./helpers/e2e-collections-sidebar.js";
@@ -22,6 +24,7 @@ describe("scenarios > collection defaults", () => {
   beforeEach(() => {
     restore();
     cy.signInAsAdmin();
+    cy.intercept("GET", "/api/**/items?pinned_state*").as("getPinnedItems");
   });
 
   describe("new collection modal", () => {
@@ -447,6 +450,13 @@ describe("scenarios > collection defaults", () => {
         it("should be possible to apply bulk selection to all items (metabase#14705)", () => {
           cy.visit("/collection/root");
 
+          // Pin one item
+          openUnpinnedItemMenu("Orders, Count");
+          popover().findByText("Pin this").click();
+          getPinnedSection().within(() => {
+            cy.findByText("18,760");
+          });
+
           // Select one
           selectItemUsingCheckbox("Orders");
           // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
@@ -458,7 +468,7 @@ describe("scenarios > collection defaults", () => {
           cy.findByLabelText("Select all items").click();
           cy.icon("dash").should("not.exist");
           // eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
-          cy.findByText("5 items selected");
+          cy.findByText("4 items selected");
 
           // Deselect all
           cy.findByLabelText("Select all items").click();

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

@@ -279,10 +279,9 @@ function CollectionContent({
                   }) => {
                     const hasPagination = metadata.total > PAGE_SIZE;
 
-                    const unselected = [
-                      ...pinnedItems,
-                      ...unpinnedItems,
-                    ].filter(item => !getIsSelected(item));
+                    const unselected = unpinnedItems.filter(
+                      item => !getIsSelected(item),
+                    );
                     const hasUnselected = unselected.length > 0;
 
                     const handleSelectAll = () => {