Improve labels

src/components/Navigator/NavigatorSection.tsx

@@ -22,8 +22,12 @@ const useStyles = makeStyles(
         color: theme.palette.text.secondary,
         fontWeight: 400
       },
+      display: "flex",
       margin: theme.spacing(1, 0)
     },
+    itemLabel: {
+      display: "inline-block"
+    },
     label: {
       paddingLeft: theme.spacing(2),
       textTransform: "uppercase"
@@ -34,6 +38,9 @@ const useStyles = makeStyles(
       },
       margin: theme.spacing(2, 0),
       padding: theme.spacing(0, 1)
+    },
+    spacer: {
+      flex: 1
     }
   }),
   {
@@ -70,7 +77,14 @@ const NavigatorSection: React.FC<NavigatorSectionProps> = props => {
             selected={highlightedIndex === index}
             key={[item.label, item.type].join(":")}
           >
-            {item.label}
+            <span className={classes.itemLabel}>
+              <span>{item.label}</span>
+              {item.caption && (
+                <Typography variant="caption">{item.caption}</Typography>
+              )}
+            </span>
+            <span className={classes.spacer} />
+            {item.extraInfo}
           </MenuItem>
         );
       })}

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

@@ -9,7 +9,7 @@ import { UseNavigatorResult } from "@saleor/hooks/useNavigator";
 import { OrderDraftCreate } from "@saleor/orders/types/OrderDraftCreate";
 import { productAddUrl } from "@saleor/products/urls";
 import { MutationFunction } from "react-apollo";
-import { QuickSearchAction } from "../../types";
+import { QuickSearchActionInput } from "../../types";
 import messages from "../messages";
 
 const threshold = 0.05;
@@ -24,7 +24,7 @@ export function searchInCommands(
   intl: IntlShape,
   navigate: UseNavigatorResult,
   createOrder: MutationFunction<OrderDraftCreate, {}>
-): QuickSearchAction[] {
+): QuickSearchActionInput[] {
   const actions: Command[] = [
     {
       label: intl.formatMessage(messages.addCategory),
@@ -56,6 +56,7 @@ export function searchInCommands(
     label: action.label,
     onClick: action.onClick,
     score: score(action.label, search),
+    text: action.label,
     type: "action"
   }));
 }
@@ -65,7 +66,7 @@ function getCommandModeActions(
   intl: IntlShape,
   navigate: UseNavigatorResult,
   createOrder: MutationFunction<OrderDraftCreate, {}>
-): QuickSearchAction[] {
+): QuickSearchActionInput[] {
   return [...searchInCommands(query, intl, navigate, createOrder)]
     .filter(action => action.score >= threshold)
     .sort((a, b) => (a.score <= b.score ? 1 : -1))

src/components/Navigator/modes/customers.ts

@@ -12,6 +12,7 @@ export function searchInCustomers(
   customers: SearchCustomers_search_edges_node[]
 ): QuickSearchAction[] {
   return customers.map(customer => ({
+    caption: customer.email,
     label:
       customer.firstName && customer.lastName
         ? intl.formatMessage(messages.customerWithName, {

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

@@ -21,7 +21,7 @@ import { staffListUrl } from "@saleor/staff/urls";
 import { countryListUrl } from "@saleor/taxes/urls";
 import { languageListUrl } from "@saleor/translations/urls";
 import { webhooksListUrl } from "@saleor/webhooks/urls";
-import { QuickSearchAction } from "../../types";
+import { QuickSearchActionInput } from "../../types";
 
 interface View {
   label: string;
@@ -31,7 +31,7 @@ function searchInViews(
   search: string,
   intl: IntlShape,
   navigate: UseNavigatorResult
-): QuickSearchAction[] {
+): QuickSearchActionInput[] {
   const views: View[] = [
     {
       label: intl.formatMessage(sectionNames.attributes),
@@ -123,6 +123,7 @@ function searchInViews(
     label: view.label,
     onClick: () => navigate(view.url),
     score: score(view.label, search),
+    text: view.label,
     type: "view"
   }));
 }

src/components/Navigator/modes/orders.ts

@@ -1,7 +1,7 @@
 import { IntlShape } from "react-intl";
 
 import { UseNavigatorResult } from "@saleor/hooks/useNavigator";
-import { maybe } from "@saleor/misc";
+import { maybe, transformOrderStatus } from "@saleor/misc";
 import { orderUrl } from "@saleor/orders/urls";
 import { CheckIfOrderExists_order } from "../queries/types/CheckIfOrderExists";
 import { QuickSearchAction } from "../types";
@@ -26,11 +26,11 @@ function getOrdersModeActions(
   if (isQueryValidOrderNumber(query) && maybe(() => order.id === gqlId)) {
     return [
       {
+        extraInfo: transformOrderStatus(order.status, intl).localized,
         label: intl.formatMessage(messages.goToOrder, {
           orderNumber: query
         }),
         onClick: () => navigate(orderUrl(gqlId)),
-        score: 1,
         type: "action"
       }
     ];

src/components/Navigator/types.ts

@@ -1,10 +1,17 @@
 export type QuickSearchActionType = "action" | "customer" | "view";
 
 export interface QuickSearchAction {
+  caption?: string;
+  extraInfo?: string;
   label: string;
-  score: number;
+  price?: number;
   type: QuickSearchActionType;
   onClick: () => void;
 }
 
+export interface QuickSearchActionInput extends QuickSearchAction {
+  score: number;
+  text: string;
+}
+
 export type QuickSearchMode = "default" | "commands" | "orders" | "customers";