feat(dashboard): Add global search (#9504)

**What**
- Adds the ability to do global searches from cmd + k in the admin.
- The solution is temporary, until we have a proper search API.

**Note**
I have deviated a bit from the design, due to the constraints of this temporary solution:
- We don't have nested items, such as showing variants under a product (don't think having a proper search API will make this any easier, and not entirely sure how we would handle this for cases where a query returns multiple products, which is the only case that is designed)
- I have added a "Load {{count}} more" button instead of doing infinite scrolling, I am assuming the later is the intended behaviour based on the design file, but with 20+ sources of data changing so often it was resulting in some weird behaviours, so settled for the simpler approach for this temporary solution.
- Removed the "Details" label on search results as it seemed a bit repetitive
- I haven't added icons for the different types of search results, as there are only a couple of examples in the design doc, and I wasn't sure what to pick for all the different types of results. If we want to add icons, then I think it's something we can add when we revisit this later, but think its fine to omit, as each group of results is labeled, so they are easy to tell apart.

Resolves CC-574
This commit is contained in:
Kasper Fabricius Kristensen
2024-10-11 09:38:05 +02:00
committed by GitHub
parent 49a91fd40e
commit ccd40e6548
9 changed files with 1241 additions and 66 deletions

View File

@@ -1,13 +1,23 @@
import { Photo } from "@medusajs/icons"
import { clx } from "@medusajs/ui"
type ThumbnailProps = {
src?: string | null
alt?: string
size?: "small" | "base"
}
export const Thumbnail = ({ src, alt }: ThumbnailProps) => {
export const Thumbnail = ({ src, alt, size = "base" }: ThumbnailProps) => {
return (
<div className="bg-ui-bg-component flex h-8 w-6 items-center justify-center overflow-hidden rounded-[4px]">
<div
className={clx(
"bg-ui-bg-component flex items-center justify-center overflow-hidden rounded-[4px]",
{
"h-8 w-6": size === "base",
"h-5 w-4": size === "small",
}
)}
>
{src ? (
<img
src={src}