Search for product variants by SKU in quick search, show media

.changeset/sharp-kangaroos-retire.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+In quick search you can now search for product variants with SKU. This means product variants are a new item added to the search catalogue. Catalogue items now show their media, if available. Category item display message if they don't have parents.

locale/defaultMessages.json

@@ -1401,6 +1401,9 @@
     "context": "tooltip, submit form",
     "string": "Transaction is non-refundable. You have to send refund manually."
   },
+  "6iaXL/": {
+    "string": "This is root category"
+  },
   "6iw4VR": {
     "context": "delete variant dialog title",
     "string": "Delete Product Variants"

src/components/NavigatorSearch/NavigatorSearch.tsx

@@ -140,10 +140,12 @@ const NavigatorSearch: React.FC = () => {
 
   return (
     <DashboardModal open={isNavigatorVisible} onChange={setNavigatorVisibility}>
-      <DashboardModal.Content size="sm" backgroundColor="default1" padding={0}>
+      <DashboardModal.Content size="sm" backgroundColor="default1" padding={0} paddingBottom={4}>
         <Box __height="500px" width="100%">
           <Downshift
-            itemToString={(item: QuickSearchAction) => (item ? item.label : "")}
+            itemToString={(item: QuickSearchAction) =>
+              item && typeof item.label === "string" ? item.label : ""
+            }
             onSelect={(item: QuickSearchAction) => {
               const shouldRemainVisible = item?.onClick();
 

src/components/NavigatorSearch/NavigatorSearchSection.tsx

@@ -2,6 +2,7 @@
 import { GetItemPropsOptions } from "downshift";
 import React from "react";
 
+import { NavigatorThumbnail } from "./NavigatorThumbnail";
 import { QuickSearchAction } from "./types";
 
 interface NavigatorSearchSectionProps {
@@ -28,6 +29,9 @@
           item,
         });
 
+        // 'thumbnail' is 'null' when the item is from Saleor API, 'undefined' if it's nav item
+        const shouldRenderThumbnail = typeof item.thumbnail !== "undefined";
+
         return (
           <Box
             {...itemProps}
@@ -43,28 +47,38 @@
               active: "accent1Pressed",
             }}
             selected={highlightedIndex === index}
-            key={[item.label, item.type].join(":")}
+            key={[typeof item.label === "string" ? item.label : item.searchValue, item.type].join(
+              ":",
+            )}
             cursor="pointer"
+            display="flex"
+            flexDirection="row"
           >
+            {shouldRenderThumbnail && (
+              <NavigatorThumbnail src={item.thumbnail?.url} alt={item.thumbnail?.alt} />
+            )}
+
             <Box as="span" display="inline-block">
-              {item.symbol && (
-                <Box as="span" display="inline-block" fontWeight="bold" width={6}>
-                  {item.symbol}
-                </Box>
-              )}
+              <Box as="span" display="inline-block">
+                {item.symbol && (
+                  <Box as="span" display="inline-block" fontWeight="bold" width={6}>
+                    {item.symbol}
+                  </Box>
+                )}
 
-              <Text size={3}>{item.label}</Text>
+                <Text size={3}>{item.label}</Text>
 
-              {item.caption && (
-                <Text size={2} marginLeft={2} color="default2">
-                  {item.caption}
-                </Text>
-              )}
-            </Box>
+                {item.caption && (
+                  <Text size={2} marginLeft={2} color="default2">
+                    {item.caption}
+                  </Text>
+                )}
+              </Box>
 
-            <Box __flex={1} />
+              <Box __flex={1} />
 
-            {item.extraInfo}
+              {item.extraInfo}
+            </Box>
           </Box>
         );
       })}

src/components/NavigatorSearch/NavigatorThumbnail.tsx

@@ -0,0 +1,70 @@
+import { Box, Skeleton } from "@saleor/macaw-ui-next";
+import React, { useState } from "react";
+
+const defaultProps = {
+  __height: "40px",
+  __width: "40px",
+  __minWidth: "40px",
+};
+
+export const NavigatorThumbnail = ({
+  src,
+  alt,
+}: {
+  src: string | undefined;
+  alt: string | undefined;
+}) => {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false || !src);
+
+  if (error) {
+    return (
+      <Box
+        {...defaultProps}
+        backgroundColor="default2"
+        borderRadius={4}
+        borderStyle="solid"
+        borderColor="default1"
+        borderWidth={1}
+        marginRight={2}
+      />
+    );
+  }
+
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      __padding="2px"
+      borderRadius={4}
+      borderStyle="solid"
+      borderWidth={1}
+      borderColor="default1"
+      overflow="hidden"
+      marginRight={2}
+      position="relative"
+      {...defaultProps}
+    >
+      {loading && (
+        <Skeleton {...defaultProps} position="absolute" left={0} right={0} top={0} bottom={0} />
+      )}
+      <Box
+        as="img"
+        width="100%"
+        height="100%"
+        objectFit="contain"
+        src={src}
+        alt={alt || ""}
+        borderRadius={2}
+        backgroundColor="default2"
+        onError={() => {
+          setError(true);
+        }}
+        onLoad={() => {
+          setLoading(false);
+        }}
+      />
+    </Box>
+  );
+};

src/components/NavigatorSearch/modes/catalog.test.ts

@@ -0,0 +1,90 @@
+import { SearchCatalogQuery } from "@dashboard/graphql";
+import { IntlShape } from "react-intl";
+
+import { searchInCatalog } from "./catalog";
+
+describe("searchInCatalog", () => {
+  const intl = {
+    formatMessage: ({ defaultMessage }) => defaultMessage,
+  } as IntlShape;
+  const navigate = jest.fn();
+
+  it("should return variants if search is a sku", () => {
+    // Arrange
+    const mockCatalog: SearchCatalogQuery = {
+      productVariants: {
+        edges: [
+          {
+            node: {
+              id: "1",
+              name: "Small",
+              sku: "PROD-SMALL",
+              product: {
+                id: "prod1",
+                name: "T-Shirt",
+                thumbnail: null,
+                category: {
+                  name: "Apparel",
+                },
+              },
+            },
+          },
+        ],
+      },
+    } as SearchCatalogQuery;
+
+    // Act
+    const results = searchInCatalog("PROD-SMALL", intl, navigate, mockCatalog);
+
+    // Assert
+    expect(results).toHaveLength(1);
+    expect(results[0].searchValue).toContain("PROD-SMALL");
+  });
+
+  it("should return both product and its variant", () => {
+    // Arrange
+    const mockCatalog: SearchCatalogQuery = {
+      products: {
+        edges: [
+          {
+            node: {
+              id: "prod1",
+              name: "T-Shirt",
+              thumbnail: null,
+              category: {
+                name: "Apparel",
+              },
+            },
+          },
+        ],
+      },
+      productVariants: {
+        edges: [
+          {
+            node: {
+              id: "1",
+              name: "Small",
+              sku: "PROD-SMALL",
+              product: {
+                id: "prod1",
+                name: "T-Shirt",
+                thumbnail: null,
+                category: {
+                  name: "Apparel",
+                },
+              },
+            },
+          },
+        ],
+      },
+    } as SearchCatalogQuery;
+
+    // Act
+    const results = searchInCatalog("T-Shirt", intl, navigate, mockCatalog);
+
+    // Assert
+    expect(results).toHaveLength(2);
+    expect(results[0].label).toBe("T-Shirt");
+    expect(results[1].searchValue).toContain("PROD-SMALL");
+  });
+});

src/components/NavigatorSearch/modes/catalog.ts

@@ -4,11 +4,12 @@
 import { SearchCatalogQuery } from "@dashboard/graphql";
 import { UseNavigatorResult } from "@dashboard/hooks/useNavigator";
 import { fuzzySearch } from "@dashboard/misc";
-import { productUrl } from "@dashboard/products/urls";
+import { productUrl, productVariantEditUrl } from "@dashboard/products/urls";
 import { mapEdgesToItems } from "@dashboard/utils/maps";
 import { IntlShape } from "react-intl";
 
 import { QuickSearchAction, QuickSearchActionInput } from "../types";
+import { getProductVariantLabel } from "./labels";
 import messages from "./messages";
 
 export function searchInCatalog(
@@ -22,45 +23,69 @@
   ).map<QuickSearchActionInput>(category => ({
     caption: intl.formatMessage(messages.category),
     label: category.name,
+    searchValue: category.name,
     onClick: () => {
       navigate(categoryUrl(category.id));
 
       return false;
     },
     text: category.name,
     type: "catalog",
+    thumbnail: category.backgroundImage,
+    extraInfo: category.level === 0 ? intl.formatMessage(messages.root) : undefined,
   }));
   const collections: QuickSearchActionInput[] = (
     mapEdgesToItems(catalog?.collections) || []
   ).map<QuickSearchActionInput>(collection => ({
     caption: intl.formatMessage(messages.collection),
     label: collection.name,
+    searchValue: collection.name,
     onClick: () => {
       navigate(collectionUrl(collection.id));
 
       return false;
     },
     text: collection.name,
     type: "catalog",
+    thumbnail: collection.backgroundImage,
   }));
   const products: QuickSearchActionInput[] = (
     mapEdgesToItems(catalog?.products) || []
   ).map<QuickSearchActionInput>(product => ({
     caption: intl.formatMessage(messages.product),
     extraInfo: product.category.name,
     label: product.name,
+    searchValue: product.name,
     onClick: () => {
       navigate(productUrl(product.id));
 
       return false;
     },
     text: product.name,
     type: "catalog",
+    thumbnail: product.thumbnail,
+  }));
+  const variants: QuickSearchActionInput[] = (
+    mapEdgesToItems(catalog?.productVariants) || []
+  ).map<QuickSearchActionInput>(variant => ({
+    caption: intl.formatMessage(messages.variant),
+    extraInfo: variant.product.category.name,
+    label: getProductVariantLabel(variant),
+    searchValue: `${variant.product.name} ${variant.name} ${variant.sku}`,
+    onClick: () => {
+      navigate(productVariantEditUrl(variant.product.id, variant.id));
+
+      return false;
+    },
+    text: variant.name,
+    type: "catalog",
+    thumbnail: variant.product.thumbnail,
   }));
 
-  const searchableItems = [...categories, ...collections, ...products];
+  const searchableItems = [...categories, ...collections, ...products, ...variants];
+  const searchResults = fuzzySearch(searchableItems, search, ["searchValue"], 0.8);
 
-  return fuzzySearch(searchableItems, search, ["label"]);
+  return searchResults;
 }
 
 function getCatalogModeActions(

src/components/NavigatorSearch/modes/commands/actions.ts

@@ -95,6 +95,7 @@ export function searchInCommands(
 
   return fuzzySearch(actions, search, ["label"]).map(action => ({
     label: action.label,
+    searchValue: action.label,
     onClick: action.onClick,
     text: action.label,
     type: "action",

src/components/NavigatorSearch/modes/customers.ts

@@ -22,6 +22,10 @@
             lastName: customer.lastName,
           })
         : customer.email,
+    searchValue:
+      customer.firstName && customer.lastName
+        ? `${customer.firstName} ${customer.lastName}`
+        : customer.email,
     onClick: () => {
       navigate(customerUrl(customer.id));
 

src/components/NavigatorSearch/modes/default/views.ts

@@ -126,6 +126,7 @@ function searchInViews(
 
   return fuzzySearch(views, search, ["label"]).map(view => ({
     label: view.label,
+    searchValue: view.label,
     onClick: () => {
       navigate(view.url);