Close GraphiQL Playground on escape button (#4982)

* fix

* close playground on escape

* changesets

* add comment

.changeset/green-horses-itch.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+You can now close GraphiQL Playground with Escape key

.changeset/tiny-paws-nail.md

@@ -2,4 +2,4 @@
 "saleor-dashboard": patch
 ---
 
-GraphQL Playground now no longer uses additional variables when using `shift + cmd + '` keyboard shortcut as the shortcut was removed. You can now only use one shortcut `cmd + '`, simplifying your workflow.
+GraphQL Playground now no longer uses additional variables when using `shift + cmd + '` keyboard shortcut as the shortcut was removed. You can now only use `cmd + '`, simplifying your workflow.

src/components/DevModePanel/DevModePanel.tsx

@@ -7,7 +7,7 @@ import { createFetch } from "@saleor/sdk";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import GraphiQL from "../GraphiQLPlain";
+import PlainGraphiQL from "../GraphiQLPlain";
 import { useDevModeContext } from "./hooks";
 import { messages } from "./messages";
 
@@ -50,7 +50,7 @@ export const DevModePanel: React.FC = () => {
         {intl.formatMessage(messages.title)}
       </DialogHeader>
       <DialogContent style={{ padding: 0, margin: 1, overflowY: "auto" }}>
-        <GraphiQL
+        <PlainGraphiQL
           query={devModeContent}
           variables={variables}
           fetcher={fetcher}

src/components/DevModePanel/DevModeProvider.tsx

@@ -12,14 +12,18 @@ export function DevModeProvider({ children }) {
   const [devModeContent, setDevModeContent] = useState("");
   const [isDevModeVisible, setDevModeVisibility] = useState(false);
 
-  const triggerHandler = () => {
+  const handleOpen = () => {
     setDevModeContent("");
     setVariables("");
 
     setDevModeVisibility(!isDevModeVisible);
   };
 
-  useDevModeKeyTrigger(triggerHandler);
+  const handleClose = () => {
+    setDevModeVisibility(false);
+  };
+
+  useDevModeKeyTrigger(handleOpen, handleClose);
 
   return (
     <DevModeContext.Provider

src/components/DevModePanel/useDevModeKeyTrigger.ts

@@ -1,18 +1,32 @@
 import { useEffect } from "react";
 
-type DevModeKeyTriggerCallback = () => void;
+type HandleOpen = () => void;
+type HandleClose = () => void;
 
 export const useDevModeKeyTrigger = (
-  callbackHandler: DevModeKeyTriggerCallback,
+  handleOpen: HandleOpen,
+  handleClose: HandleClose,
 ) => {
   useEffect(() => {
-    const handler = (event: KeyboardEvent) => {
+    const keyDownHandler = (event: KeyboardEvent) => {
       if ((event.metaKey || event.ctrlKey) && event.code === "Quote") {
-        callbackHandler();
+        handleOpen();
       }
     };
 
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [callbackHandler]);
+    const keyUpHandler = (event: KeyboardEvent) => {
+      if (event.code === "Escape") {
+        handleClose();
+      }
+    };
+
+    document.addEventListener("keydown", keyDownHandler);
+    // GraphiQL Playground stops propagation of keydown event for Escape key
+    document.addEventListener("keyup", keyUpHandler);
+
+    return () => {
+      document.removeEventListener("keydown", keyDownHandler);
+      document.removeEventListener("keyup", keyUpHandler);
+    };
+  }, [handleOpen, handleClose]);
 };