Improve collection search

src/components/Navigator/modes/catalog.ts

@@ -9,6 +9,7 @@ import { productUrl } from "@saleor/products/urls";
 import { SearchCatalog } from "../queries/types/SearchCatalog";
 import { QuickSearchAction, QuickSearchActionInput } from "../types";
 import messages from "./messages";
+import { sortScores } from "./utils";
 
 const threshold = 0.05;
 const maxActions = 5;
@@ -22,40 +23,65 @@ export function searchInCatalog(
   const categories: QuickSearchActionInput[] = maybe(
     () => catalog.categories.edges.map(edge => edge.node),
     []
-  ).map(category => ({
-    caption: intl.formatMessage(messages.category),
-    label: category.name,
-    onClick: () => navigate(categoryUrl(category.id)),
-    score: score(category.name, search),
-    text: category.name,
-    type: "catalog"
-  }));
+  )
+    .map<QuickSearchActionInput>(category => ({
+      caption: intl.formatMessage(messages.category),
+      label: category.name,
+      onClick: () => navigate(categoryUrl(category.id)),
+      score: score(category.name, search),
+      text: category.name,
+      type: "catalog"
+    }))
+    .sort(sortScores);
 
   const collections: QuickSearchActionInput[] = maybe(
     () => catalog.collections.edges.map(edge => edge.node),
     []
-  ).map(collection => ({
-    caption: intl.formatMessage(messages.collection),
-    label: collection.name,
-    onClick: () => navigate(collectionUrl(collection.id)),
-    score: score(collection.name, search),
-    text: collection.name,
-    type: "catalog"
-  }));
+  )
+    .map<QuickSearchActionInput>(collection => ({
+      caption: intl.formatMessage(messages.collection),
+      extraInfo: intl.formatMessage(
+        collection.isPublished
+          ? messages.collectionPublished
+          : messages.collectionUnpublished
+      ),
+      label: collection.name,
+      onClick: () => navigate(collectionUrl(collection.id)),
+      score: score(collection.name, search),
+      text: collection.name,
+      type: "catalog"
+    }))
+    .sort(sortScores);
 
   const products: QuickSearchActionInput[] = maybe(
     () => catalog.products.edges.map(edge => edge.node),
     []
-  ).map(product => ({
-    caption: intl.formatMessage(messages.product),
-    label: product.name,
-    onClick: () => navigate(productUrl(product.id)),
-    score: score(product.name, search),
-    text: product.name,
-    type: "catalog"
-  }));
+  )
+    .map<QuickSearchActionInput>(product => ({
+      caption: intl.formatMessage(messages.product),
+      extraInfo: product.category.name,
+      label: product.name,
+      onClick: () => navigate(productUrl(product.id)),
+      score: score(product.name, search),
+      text: product.name,
+      type: "catalog"
+    }))
+    .sort(sortScores);
 
-  return [...categories, ...collections, ...products];
+  const baseActions = [
+    ...categories.slice(0, 1),
+    ...collections.slice(0, 1),
+    ...products.slice(0, 1)
+  ];
+
+  return [
+    ...baseActions,
+    ...[
+      ...categories.slice(1),
+      ...collections.slice(1),
+      ...products.slice(1)
+    ].sort(sortScores)
+  ].sort(sortScores);
 }
 
 function getCatalogModeActions(

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

@@ -11,6 +11,7 @@ import { productAddUrl } from "@saleor/products/urls";
 import { MutationFunction } from "react-apollo";
 import { QuickSearchActionInput } from "../../types";
 import messages from "../messages";
+import { sortScores } from "../utils";
 
 const threshold = 0.05;
 const maxActions = 5;
@@ -69,7 +70,7 @@ function getCommandModeActions(
 ): QuickSearchActionInput[] {
   return [...searchInCommands(query, intl, navigate, createOrder)]
     .filter(action => action.score >= threshold)
-    .sort((a, b) => (a.score <= b.score ? 1 : -1))
+    .sort(sortScores)
     .slice(0, maxActions);
 }
 

src/components/Navigator/modes/default/default.ts

@@ -7,6 +7,7 @@ import { SearchCustomers_search_edges_node } from "@saleor/searches/types/Search
 import { QuickSearchAction } from "../../types";
 import { searchInCommands } from "../commands";
 import { searchInCustomers } from "../customers";
+import { sortScores } from "../utils";
 import searchInViews from "./views";
 
 const threshold = 0.05;
@@ -24,7 +25,7 @@ function getDefaultModeActions(
     ...searchInCommands(query, intl, navigate, createOrder)
   ]
     .filter(action => action.score >= threshold)
-    .sort((a, b) => (a.score <= b.score ? 1 : -1))
+    .sort(sortScores)
     .slice(0, maxActions);
 
   if (query !== "") {

src/components/Navigator/modes/messages.ts

@@ -29,6 +29,14 @@ const messages = defineMessages({
     defaultMessage: "Collection",
     description: "catalog item type"
   },
+  collectionPublished: {
+    defaultMessage: "Published",
+    description: "collection"
+  },
+  collectionUnpublished: {
+    defaultMessage: "Not Published",
+    description: "collection"
+  },
   createOrder: {
     defaultMessage: "Create Order",
     description: "button"

src/components/Navigator/modes/utils.ts

@@ -1,4 +1,4 @@
-import { QuickSearchAction } from "../types";
+import { QuickSearchAction, QuickSearchActionInput } from "../types";
 
 export function getActions(actions: QuickSearchAction[]): QuickSearchAction[] {
   return actions.filter(action => action.type === "action");
@@ -29,3 +29,10 @@ export function getCatalog(actions: QuickSearchAction[]): QuickSearchAction[] {
 export function hasCatalog(actions: QuickSearchAction[]): boolean {
   return getCatalog(actions).length > 0;
 }
+
+export function sortScores(
+  a: QuickSearchActionInput,
+  b: QuickSearchActionInput
+) {
+  return a.score <= b.score ? 1 : -1;
+}