Add shortcuts at bottom of sidebar (#4705)

* Add shortcuts at bottom of sidebar

* Navigator context

* Style sidebar

* Remove menu back to cloud tests

* Add changeset

* Add condtion to back to cloud btn

* Style improvents, show cmd base on os

* Show playground on ctrl + '

* Test sidebar go to cloud and shortcuts

* Update changeset

* Improve naming

* Rename Navigator to NavigatorSearch

* Move context outside AppLayout

* Memoize shortcuts

* Update tests

* Fix typo

* Refactor dev panel

.changeset/serious-beans-try.md

@@ -0,0 +1,6 @@
+---
+"saleor-dashboard": minor
+---
+
+Introduce menu items with sortcuts for GraphQL playground and search actions in sidebar.
+Move "Go to Saleor Cloud" button at bottom of sidebar

locale/defaultMessages.json

@@ -2145,6 +2145,10 @@
     "context": "window title",
     "string": "Grant refund"
   },
+  "Cn6l5R": {
+    "context": "playground shortcut",
+    "string": "Playground"
+  },
   "Co2U4u": {
     "string": "No plugins found"
   },
@@ -6568,6 +6572,10 @@
     "context": "swatch attribute type",
     "string": "Swatch"
   },
+  "gx6b6x": {
+    "context": "search shortcut",
+    "string": "Search"
+  },
   "gxPjIQ": {
     "string": "Are you sure you want to delete {email} from staff members?"
   },

src/components/AppLayout/AppLayout.tsx

@@ -1,19 +1,13 @@
 import useAppState from "@dashboard/hooks/useAppState";
-import { DevModeQuery } from "@dashboard/orders/queries";
-import { getFilterVariables } from "@dashboard/orders/views/OrderList/filters";
 import { LinearProgress } from "@material-ui/core";
 import { useActionBar } from "@saleor/macaw-ui";
 import { Box } from "@saleor/macaw-ui-next";
-import React, { useState } from "react";
-import { useLocation } from "react-router";
+import React from "react";
 
 import { DevModePanel } from "../DevModePanel/DevModePanel";
-import { useDevModeContext } from "../DevModePanel/hooks";
-import { useDevModeKeyTrigger } from "../DevModePanel/useDevModeKeyTrigger";
-import Navigator from "../Navigator";
+import NavigatorSearch from "../NavigatorSearch";
 import { Sidebar } from "../Sidebar";
 import { useStyles } from "./styles";
-import { extractQueryParams } from "./util";
 
 interface AppLayoutProps {
   children: React.ReactNode;
@@ -24,45 +18,12 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   const classes = useStyles();
   const { anchor: appActionAnchor } = useActionBar();
   const [appState] = useAppState();
-  const [isNavigatorVisible, setNavigatorVisibility] = useState(false);
-
-  const {
-    isDevModeVisible,
-    setDevModeVisibility,
-    setDevModeContent,
-    setVariables,
-  } = useDevModeContext();
-
-  const params = extractQueryParams(useLocation().search);
-
-  useDevModeKeyTrigger((_err, { shift }) => {
-    if (shift) {
-      setDevModeContent(DevModeQuery);
-      const variables = JSON.stringify(
-        {
-          filter: getFilterVariables(params),
-        },
-        null,
-        2,
-      );
-      setVariables(variables);
-    } else {
-      setDevModeContent("");
-      setVariables("");
-    }
-    setDevModeVisibility(!isDevModeVisible);
-  });
 
   return (
     <>
-      <DevModePanel
-        isDevModeVisible={isDevModeVisible}
-        setDevModeVisibility={setDevModeVisibility}
-      />
-      <Navigator
-        visible={isNavigatorVisible}
-        setVisibility={setNavigatorVisibility}
-      />
+      <DevModePanel />
+      <NavigatorSearch />
+
       <Box display="grid" __gridTemplateColumns="auto 1fr">
         {appState.loading && (
           <LinearProgress className={classes.appLoader} color="primary" />

src/components/DevModePanel/DevModePanel.tsx

@@ -13,25 +13,18 @@ import { messages } from "./messages";
 
 const authorizedFetch = createFetch();
 
-interface DevModePanelProps {
-  isDevModeVisible: boolean;
-  setDevModeVisibility: (value: boolean) => void;
-}
+export const DevModePanel: React.FC = () => {
+  const intl = useIntl();
+  const { rootStyle } = useDashboardTheme();
+
+  const { isDevModeVisible, variables, devModeContent, setDevModeVisibility } =
+    useDevModeContext();
 
-export const DevModePanel: React.FC<DevModePanelProps> = ({
-  isDevModeVisible,
-  setDevModeVisibility,
-}) => {
   const fetcher = createGraphiQLFetcher({
     url: process.env.API_URI,
     fetch: authorizedFetch,
   });
 
-  const intl = useIntl();
-  const { rootStyle } = useDashboardTheme();
-
-  const { devModeContent, variables } = useDevModeContext();
-
   const overwriteCodeMirrorCSSVariables = {
     __html: `
       .graphiql-container, .CodeMirror-info, .CodeMirror-lint-tooltip, reach-portal{

src/components/DevModePanel/DevModeProvider.tsx

@@ -1,7 +1,12 @@
 // @ts-strict-ignore
+import { DevModeQuery } from "@dashboard/orders/queries";
+import { getFilterVariables } from "@dashboard/orders/views/OrderList/filters";
 import React, { useState } from "react";
+import { useLocation } from "react-router";
 
+import { extractQueryParams } from "../AppLayout/util";
 import { DevModeContext } from "./hooks";
+import { useDevModeKeyTrigger } from "./useDevModeKeyTrigger";
 
 export function DevModeProvider({ children }) {
   // stringified variables (as key/value) passed along with the query
@@ -11,6 +16,28 @@ export function DevModeProvider({ children }) {
   const [devModeContent, setDevModeContent] = useState("");
   const [isDevModeVisible, setDevModeVisibility] = useState(false);
 
+  const params = extractQueryParams(useLocation().search);
+
+  const triggerHandler = ({ shift }: { shift: boolean }) => {
+    if (shift) {
+      setDevModeContent(DevModeQuery);
+      const variables = JSON.stringify(
+        {
+          filter: getFilterVariables(params),
+        },
+        null,
+        2,
+      );
+      setVariables(variables);
+    } else {
+      setDevModeContent("");
+      setVariables("");
+    }
+    setDevModeVisibility(!isDevModeVisible);
+  };
+
+  useDevModeKeyTrigger(triggerHandler);
+
   return (
     <DevModeContext.Provider
       value={{

src/components/DevModePanel/useDevModeKeyTrigger.ts

@@ -1,21 +1,22 @@
 import { useEffect } from "react";
 
-type DevModeKeyTriggerCallback = (
-  err: Error | null,
-  { shift }: { shift: boolean },
-) => void;
+type DevModeKeyTriggerCallback = ({ shift }: { shift: boolean }) => void;
 
-export const useDevModeKeyTrigger = (callback: DevModeKeyTriggerCallback) => {
+export const useDevModeKeyTrigger = (
+  callbackHandler: DevModeKeyTriggerCallback,
+) => {
   useEffect(() => {
     const handler = (event: KeyboardEvent) => {
       if (event.shiftKey && event.metaKey && event.code === "Quote") {
-        callback(null, { shift: true });
+        callbackHandler({ shift: true });
       } else if (event.metaKey && event.code === "Quote") {
-        callback(null, { shift: false });
+        callbackHandler({ shift: false });
+      } else if (event.ctrlKey && event.code === "Quote") {
+        callbackHandler({ shift: false });
       }
     };
 
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
-  }, [callback]);
+  }, [callbackHandler]);
 };