Sort dashboard cards for mobile (#32185)

* sort dashboard cards for mobile

* unit test sorting logic

frontend/src/metabase/dashboard/components/grid/utils.js

@@ -5,13 +5,25 @@ function sumVerticalSpace(layout) {
   return layout.reduce((sum, current) => sum + current.h, 0);
 }
 
+export function sortCardsForMobile(a, b) {
+  const yDiff = a.y - b.y;
+
+  // sort by y position first
+  if (yDiff !== 0) {
+    return yDiff;
+  }
+
+  // for items on the same row, sort by x position
+  return a.x - b.x;
+}
+
 export function generateMobileLayout({
   desktopLayout,
   defaultCardHeight,
   heightByDisplayType = {},
 }) {
   const mobile = [];
-  desktopLayout.forEach(item => {
+  desktopLayout.sort(sortCardsForMobile).forEach(item => {
     const card = item.dashcard.card;
     const height = heightByDisplayType[card.display] || defaultCardHeight;
     mobile.push({

frontend/src/metabase/dashboard/components/grid/utils.unit.spec.js

+import { sortCardsForMobile } from "./utils";
+
+describe("Dashcard > grid > utils", () => {
+  describe("sortCardsForMobile", () => {
+    it("should sort cards by y position first", () => {
+      const a = { id: "top", y: 1, x: 3 };
+      const b = { id: "middle", y: 2, x: 2 };
+      const c = { id: "bottom", y: 3, x: 1 };
+
+      const result = [b, a, c].sort(sortCardsForMobile);
+      expect(result).toEqual([a, b, c]);
+    });
+
+    it("should sort cards by x position if y position is the same", () => {
+      const a = { id: "left", y: 5, x: 1 };
+      const b = { id: "middle", y: 5, x: 2 };
+      const c = { id: "right", y: 5, x: 3 };
+
+      const result = [c, a, b].sort(sortCardsForMobile);
+      expect(result).toEqual([a, b, c]);
+    });
+
+    it("should sort cards by x and y positions", () => {
+      const a = { id: "top", y: 1, x: 3 };
+      const b = { id: "middle", y: 2, x: 2 };
+      const c = { id: "bottom", y: 3, x: 1 };
+
+      const d = { id: "left", y: 5, x: 1 };
+      const e = { id: "middle", y: 5, x: 2 };
+      const f = { id: "right", y: 5, x: 3 };
+
+      const result = [f, d, c, a, b, e].sort(sortCardsForMobile);
+      expect(result).toEqual([a, b, c, d, e, f]);
+    });
+  });
+});