Add notification about navigator

package-lock.json

@@ -3286,6 +3286,11 @@
       "integrity": "sha512-YesPanU1+WCigC/Aj1Mga8UCOjHIfMNHZ3zzDsUY7lI8GlKnh/Kv2QwJOQ+jNQ36Ru7IfzSedlG14hppYaN13A==",
       "dev": true
     },
+    "@types/semver-compare": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/semver-compare/-/semver-compare-1.0.1.tgz",
+      "integrity": "sha512-wx2LQVvKlEkhXp/HoKIZ/aSL+TvfJdKco8i0xJS3aR877mg4qBHzNT6+B5a61vewZHo79EdZavskGnRXEC2H6A=="
+    },
     "@types/shallowequal": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/shallowequal/-/shallowequal-1.1.1.tgz",
@@ -18055,8 +18060,7 @@
     "semver-compare": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
-      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
-      "dev": true
+      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w="
     },
     "send": {
       "version": "0.17.1",

package.json

@@ -63,6 +63,7 @@
     "react-sortable-hoc": "^0.6.8",
     "react-sortable-tree": "^2.6.2",
     "react-svg": "^2.2.11",
+    "semver-compare": "^1.0.0",
     "slugify": "^1.3.4",
     "typescript": "^3.6.4",
     "url-join": "^4.0.1",
@@ -98,6 +99,7 @@
     "@types/react-sortable-hoc": "^0.6.5",
     "@types/react-sortable-tree": "^0.3.6",
     "@types/react-test-renderer": "^16.8.2",
+    "@types/semver-compare": "^1.0.1",
     "@types/storybook__addon-storyshots": "^3.4.9",
     "@types/storybook__react": "^4.0.2",
     "@types/url-join": "^0.8.3",

src/components/Navigator/Navigator.tsx

@@ -3,7 +3,11 @@ import Downshift from "downshift";
 import hotkeys from "hotkeys-js";
 import React from "react";
 import { useIntl } from "react-intl";
+import cmp from "semver-compare";
 
+import { APP_VERSION } from "@saleor/config";
+import useLocalStorage from "@saleor/hooks/useLocalStorage";
+import useNotifier from "@saleor/hooks/useNotifier";
 import {
   getActions,
   getCatalog,
@@ -20,6 +24,7 @@ import { QuickSearchAction } from "./types";
 import useQuickSearch from "./useQuickSearch";
 
 const navigatorHotkey = "ctrl+k, command+k";
+const navigatorNotificationStorageKey = "notifiedAboutNavigator";
 
 function getItemOffset(
   actions: QuickSearchAction[],
@@ -33,6 +38,11 @@ const Navigator: React.FC = () => {
   const input = React.useRef(null);
   const [query, mode, change, actions] = useQuickSearch(visible, input);
   const intl = useIntl();
+  const notify = useNotifier();
+  const [notifiedAboutNavigator, setNotifiedAboutNavigator] = useLocalStorage(
+    navigatorNotificationStorageKey,
+    false
+  );
 
   React.useEffect(() => {
     hotkeys(navigatorHotkey, event => {
@@ -40,6 +50,21 @@ const Navigator: React.FC = () => {
       setVisible(!visible);
     });
 
+    if (cmp(APP_VERSION, "2.1.0") !== 1 && !notifiedAboutNavigator) {
+      notify({
+        text: intl.formatMessage({
+          defaultMessage:
+            "Our new feature to help you with your daily task. Run Navigator using Ctrl+K shortcut. (Cmd+K for Mac users)",
+          description: "navigator notification"
+        }),
+        title: intl.formatMessage({
+          defaultMessage: "Navigator is here to help",
+          description: "navigator notification title"
+        })
+      });
+      setNotifiedAboutNavigator(true);
+    }
+
     return () => hotkeys.unbind(navigatorHotkey);
   }, []);
 

src/components/Navigator/modes/index.ts

@@ -31,13 +31,7 @@ function getModeActions(
     case "orders":
       return getOrdersModeActions(query, intl, cbs.navigate, queries.order);
     default:
-      return getDefaultModeActions(
-        query,
-        intl,
-        cbs.navigate,
-        queries.customers,
-        cbs.createOrder
-      );
+      return getDefaultModeActions(query, intl, cbs.navigate, cbs.createOrder);
   }
 }
 

src/components/messages/MessageManager.tsx

@@ -1,6 +1,7 @@
 import Button from "@material-ui/core/Button";
 import IconButton from "@material-ui/core/IconButton";
 import Snackbar from "@material-ui/core/Snackbar";
+import Typography from "@material-ui/core/Typography";
 import CloseIcon from "@material-ui/icons/Close";
 import React from "react";
 
@@ -15,7 +16,7 @@ interface MessageManagerState {
 }
 
 export class MessageManager extends React.Component<{}, MessageManagerState> {
-  state = {
+  state: MessageManagerState = {
     message: { text: "", key: "0", onUndo: undefined },
     opened: false
   };
@@ -55,7 +56,7 @@ export class MessageManager extends React.Component<{}, MessageManagerState> {
   };
 
   render() {
-    const { text, key, onUndo } = this.state.message;
+    const { title, text, key, onUndo } = this.state.message;
     return (
       <>
         <Snackbar
@@ -73,9 +74,15 @@ export class MessageManager extends React.Component<{}, MessageManagerState> {
           }}
           message={
             <span id="message-id" data-tc="notification">
+              {title && (
+                <Typography variant="h5" style={{ marginBottom: "1rem" }}>
+                  {title}
+                </Typography>
+              )}
               {text}
             </span>
           }
+          title={title}
           action={[
             !!onUndo ? (
               <Button

src/components/messages/index.ts

@@ -1,6 +1,7 @@
 import { createContext } from "react";
 
 export interface IMessage {
+  title?: string;
   text: string;
   onUndo?: () => void;
 }

src/config.ts

@@ -1,3 +1,4 @@
+import packageInfo from "../package.json";
 import { SearchVariables } from "./hooks/makeSearch";
 import { ListSettings, ListViews } from "./types";
 
@@ -74,3 +75,5 @@ export const defaultListSettings: AppListViewSettings = {
     rowNumber: PAGINATE_BY
   }
 };
+
+export const APP_VERSION = packageInfo.version;

src/theme.ts

@@ -340,7 +340,8 @@ export default (colors: IThemeColors): Theme =>
             "& svg": {
               color: colors.font.default
             }
-          }
+          },
+          alignSelf: "baseline"
         },
         message: {
           fontSize: 16
@@ -349,7 +350,10 @@ export default (colors: IThemeColors): Theme =>
           backgroundColor: colors.background.paper,
           boxShadow:
             "0 6px 10px 0px rgba(0, 0, 0, 0.15), 0 1px 18px 0px rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.10)",
-          color: colors.font.default
+          color: colors.font.default,
+          display: "grid",
+          gridTemplateColumns: "1fr 56px",
+          maxWidth: 480
         }
       },
       MuiSwitch: {