command palette trigger in app bar search (#40747)

* command palette trigger in app bar search

* remove tabbing to the trigger button

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

@@ -21,12 +21,12 @@ describe("command palette", () => {
 
     cy.findByPlaceholderText("Search…").click();
 
-    cy.findByTestId("search-results-floating-container").should(
-      "contain.text",
-      "Open command palette",
-    );
+    //Not sure if this is the best way to target this button
+    cy.findByRole("button", { name: / \+ K/ }).should("exist").click();
 
-    cy.get("body").type("{esc}");
+    cy.findByTestId("search-results-floating-container").should("not.exist");
+    commandPalette().should("exist");
+    closeCommandPalette();
 
     cy.log("open the command palette with keybinding");
     openCommandPalette();
@@ -96,11 +96,7 @@ describe("command palette", () => {
     });
 
     cy.findByPlaceholderText("Search…").click();
-
-    cy.findByTestId("search-results-floating-container").should(
-      "not.contain.text",
-      "Open command palette",
-    );
+    cy.findByRole("button", { name: / \+ K/ }).should("not.exist");
 
     cy.get("body").type("{esc}");
 

frontend/src/metabase/nav/components/search/RecentsList/RecentsList.tsx

@@ -12,8 +12,6 @@ import {
 import { Paper, type IconName } from "metabase/ui";
 import type { RecentItem, UnrestrictedLinkEntity } from "metabase-types/api";
 
-import { CommandPaletteMessage } from "./CommandPaletteMessage";
-
 type RecentsListProps = {
   onClick?: (elem: UnrestrictedLinkEntity) => void;
   className?: string;
@@ -68,7 +66,6 @@ export const RecentsList = ({ onClick, className }: RecentsListProps) => {
         results={wrappedResults}
         onClick={onContainerClick}
       />
-      <CommandPaletteMessage />
     </Paper>
   );
 };

frontend/src/metabase/nav/components/search/RecentsList/CommandPaletteMessage.tsx → frontend/src/metabase/nav/components/search/SearchBar/CommandPaletteTrigger.tsx

+import type React from "react";
+import { t } from "ttag";
+
 import { isMac } from "metabase/lib/browser";
 import { color } from "metabase/lib/colors";
-import { isWithinIframe } from "metabase/lib/dom";
-import { Flex, Text } from "metabase/ui";
+import { Button, Tooltip } from "metabase/ui";
 
-const METAKEY = isMac() ? "⌘" : "Ctrl";
+export const CommandPaletteTrigger = ({
+  onClick,
+}: {
+  onClick: (e: React.MouseEvent) => void;
+}) => {
+  const METAKEY = isMac() ? "⌘" : "Ctrl";
 
-export const CommandPaletteMessage = () =>
-  isWithinIframe() ? null : (
-    <Flex
-      px="1rem"
-      py=".5rem"
-      gap=".5rem"
-      align="center"
-      bg="#f9fbfc"
-      style={{
-        borderBottomLeftRadius: ".5rem",
-        borderBottomRightRadius: ".5rem",
-        borderTop: "1px solid #f0f0f0",
-      }}
-    >
-      <Text
+  return (
+    <Tooltip label={t`Search and quickly jump to things`}>
+      <Button
+        tabIndex={-1}
+        onClick={onClick}
         p="0.25rem"
         bg={color("bg-light")}
         fw={700}
         fz="8pt"
         lh="8pt"
+        mr="0.5rem"
         style={{
           borderRadius: "0.25rem",
           border: `1px solid ${color("border")}`,
         }}
-      >{`${METAKEY} + K `}</Text>
-      <Text size="sm" c={color("text-light")} fw={700} tt="uppercase">
-        Open command palette
-      </Text>
-    </Flex>
+        styles={{
+          root: {
+            "&:active": { transform: "none" },
+            "&:hover": {
+              color: color("text-dark"),
+            },
+          },
+        }}
+      >{`${METAKEY} + K `}</Button>
+    </Tooltip>
   );
+};

frontend/src/metabase/nav/components/search/SearchBar/SearchBar.styled.tsx

@@ -87,7 +87,8 @@ export const SearchInput = styled.input<{
   font-weight: 700;
   font-size: 0.875rem;
 
-  width: 100%;
+  flex-basis: 0;
+  flex-grow: 1;
 
   &:focus {
     outline: none;
@@ -103,12 +104,13 @@ export const SearchInput = styled.input<{
 
   ${breakpointMaxSmall} {
     width: 0;
+    flex-grow: 0;
     padding: 0;
 
     ${props =>
       props.isActive &&
       css`
-        width: 100%;
+        flex-grow: 1;
         padding-top: 10px;
         padding-bottom: 10px;
       `}
@@ -120,6 +122,7 @@ const ICON_MARGIN = "10px";
 export const SearchIcon = styled(Icon)<{
   isActive: boolean;
 }>`
+  flex-basis: 1rem;
   ${breakpointMaxSmall} {
     transition: margin 0.3s;
 

frontend/src/metabase/nav/components/search/SearchBar/SearchBar.tsx

 import type { LocationDescriptorObject } from "history";
+import { useKBar } from "kbar";
 import type { MouseEvent } from "react";
 import { useEffect, useCallback, useRef, useState, useMemo } from "react";
 import { withRouter } from "react-router";
@@ -9,7 +10,7 @@ import { t } from "ttag";
 import { useKeyboardShortcut } from "metabase/hooks/use-keyboard-shortcut";
 import { useOnClickOutside } from "metabase/hooks/use-on-click-outside";
 import { useToggle } from "metabase/hooks/use-toggle";
-import { isSmallScreen } from "metabase/lib/dom";
+import { isSmallScreen, isWithinIframe } from "metabase/lib/dom";
 import { useDispatch, useSelector } from "metabase/lib/redux";
 import { RecentsList } from "metabase/nav/components/search/RecentsList";
 import { SearchResultsDropdown } from "metabase/nav/components/search/SearchResultsDropdown";
@@ -23,6 +24,7 @@ import {
 import { getSetting } from "metabase/selectors/settings";
 import { Icon } from "metabase/ui";
 
+import { CommandPaletteTrigger } from "./CommandPaletteTrigger";
 import {
   SearchInputContainer,
   SearchIcon,
@@ -173,6 +175,14 @@ function SearchBarView({ location, onSearchActive, onSearchInactive }: Props) {
     [setInactive],
   );
 
+  const { query } = useKBar();
+
+  const handleCommandPaletteTriggerClick = (e: React.MouseEvent) => {
+    query.toggle();
+    setInactive();
+    e.stopPropagation();
+  };
+
   return (
     <SearchBarRoot ref={container}>
       <SearchInputContainer isActive={isActive} onClick={onInputContainerClick}>
@@ -191,6 +201,9 @@ function SearchBarView({ location, onSearchActive, onSearchInactive }: Props) {
             <Icon name="close" />
           </CloseSearchButton>
         )}
+        {!isSmallScreen() && !isWithinIframe() && isActive && (
+          <CommandPaletteTrigger onClick={handleCommandPaletteTriggerClick} />
+        )}
       </SearchInputContainer>
       {isActive && isTypeaheadEnabled && (
         <SearchResultsFloatingContainer data-testid="search-results-floating-container">