Command Palette - Prioritize recent items, do not filter search results (#41854)

* prioritize recent items, do not filter search results

* fixing unit test

e2e/test/scenarios/onboarding/command-palette.cy.spec.js

@@ -70,6 +70,11 @@ describe("command palette", () => {
 
       commandPaletteSearch().clear().type("Uploads");
       cy.findByRole("option", { name: "Settings - Uploads" }).should("exist");
+
+      //Check that we are not filtering search results by action name
+      commandPaletteSearch().clear().type("Company");
+      cy.findByRole("option", { name: "REVIEWS" }).should("exist");
+      cy.findByRole("option", { name: "PRODUCTS" }).should("exist");
       commandPaletteSearch().clear();
     });
 
@@ -85,33 +90,33 @@ describe("command palette", () => {
 
     pressPageDown();
     commandPalette()
-      .findByRole("option", { name: "New model" })
+      .findByRole("option", { name: "New dashboard" })
       .should("have.attr", "aria-selected", "true");
 
     pressPageDown();
     commandPalette()
-      .findByRole("option", { name: "Orders in a dashboard" })
+      .findByRole("option", { name: "New model" })
       .should("have.attr", "aria-selected", "true");
 
     pressPageUp();
     commandPalette()
-      .findByRole("option", { name: "New dashboard" })
+      .findByRole("option", { name: "New question" })
       .should("have.attr", "aria-selected", "true");
 
     pressPageUp();
     commandPalette()
-      .findByRole("option", { name: "New question" })
+      .findByRole("option", { name: "Orders in a dashboard" })
       .should("have.attr", "aria-selected", "true");
 
     pressEnd();
 
     commandPalette()
-      .findByRole("option", { name: "Orders in a dashboard" })
+      .findByRole("option", { name: "New model" })
       .should("have.attr", "aria-selected", "true");
 
     pressHome();
     commandPalette()
-      .findByRole("option", { name: "New question" })
+      .findByRole("option", { name: "Orders in a dashboard" })
       .should("have.attr", "aria-selected", "true");
   });
 

frontend/src/metabase/palette/components/PaletteResults.unit.spec.tsx

@@ -13,6 +13,7 @@ import {
   mockGetBoundingClientRect,
   within,
   waitFor,
+  mockOffsetHeightAndWidth,
 } from "__support__/ui";
 import { getAdminPaths } from "metabase/admin/app/reducers";
 import {
@@ -93,6 +94,7 @@ const recents_2 = createMockRecentItem({
 });
 
 mockGetBoundingClientRect();
+mockOffsetHeightAndWidth(10); // This is absurdley small, but it allows all the items to render in the "virtual list"
 
 const setup = ({ query }: { query?: string } = {}) => {
   setupDatabasesEndpoints([DATABASE]);
@@ -116,6 +118,10 @@ const setup = ({ query }: { query?: string } = {}) => {
 };
 
 describe("PaletteResults", () => {
+  afterAll(() => {
+    jest.resetAllMocks();
+  });
+
   it("should show default actions", async () => {
     setup();
     expect(await screen.findByText("New dashboard")).toBeInTheDocument();

frontend/src/metabase/palette/hooks/useCommandPalette.tsx

@@ -118,6 +118,7 @@ export const useCommandPalette = ({
             name: result.name,
             icon: wrappedResult.getIcon().name,
             section: "search",
+            keywords: debouncedSearchText,
             perform: () => {
               dispatch(closeModal());
               dispatch(push(wrappedResult.getUrl()));

frontend/src/metabase/palette/utils.ts

@@ -16,7 +16,7 @@ export const processResults = (
   const admin = processSection(t`Admin`, groupedResults["admin"]);
   const docs = processSection(t`Documentation`, groupedResults["docs"]);
 
-  return [...actions.slice(0, 6), ...recent, ...admin, ...search, ...docs];
+  return [...recent, ...actions.slice(0, 6), ...admin, ...search, ...docs];
 };
 
 export const processSection = (sectionName: string, items?: ActionImpl[]) => {

frontend/src/metabase/palette/utils.unit.spec.ts

@@ -96,7 +96,7 @@ describe("command palette utils", () => {
       );
       const adminIndex = results.findIndex(action => action === "Admin");
 
-      [actionsIndex, recentsIndex, adminIndex, searchIndex].forEach(
+      [recentsIndex, actionsIndex, adminIndex, searchIndex].forEach(
         (val, i, arr) => {
           expect(val).not.toBe(-1);
           const next = arr[i + 1] || Infinity; //can't call expect in an if, so this lets us do the last comparison

frontend/test/__support__/ui.tsx

@@ -273,6 +273,18 @@ export const waitForLoaderToBeRemoved = async () => {
   });
 };
 
+/**
+ * jsdom doesn't have offsetHeight and offsetWidth, so we need to mock it
+ */
+export const mockOffsetHeightAndWidth = (value = 50) => {
+  jest
+    .spyOn(HTMLElement.prototype, "offsetHeight", "get")
+    .mockReturnValue(value);
+  jest
+    .spyOn(HTMLElement.prototype, "offsetWidth", "get")
+    .mockReturnValue(value);
+};
+
 /**
  * jsdom doesn't have getBoundingClientRect, so we need to mock it
  */