From dd08d70df75481a7c066da4d47aba8cc603fab11 Mon Sep 17 00:00:00 2001
From: maxiadlovskii <maksym.yadlovskyi@graylog.com>
Date: Tue, 17 Oct 2023 08:20:23 +0200
Subject: [PATCH] Hotkey improvements: Add scratchpad support, add multiple
 hotkeys for actions. (#16925)

* Fix displayInOverview flag. Add hotkeys to Scratchpad

* Refactoring. Add option to use multiple hotkeys for the same action. Get displayInOverview and splitKey from hotkeys options instead of hardcoded values

* Change scratchpad shortcut

* Fix hotkey to copy scratchpad content.

* Cleanup

* Only execute scratchpad related logic, when scratchpad is visible.

* Remove not needed useCallbacks.

* Add missing types for scratchpad

* Only show and do not toggle hotkeys overview when pressing related hotkey.

---------

Co-authored-by: Linus Pahl <linus@graylog.com>
---
 .../src/components/hotkeys/HotkeysModal.tsx   |  81 +++--
 .../hotkeys/HotkeysModalContainer.tsx         |   2 +-
 .../src/components/scratchpad/Scratchpad.tsx  | 236 +--------------
 .../components/scratchpad/ScratchpadModal.tsx | 279 ++++++++++++++++++
 .../src/contexts/HotkeysContext.tsx           |   7 +-
 .../src/contexts/HotkeysProvider.tsx          |   9 +
 .../src/contexts/ScratchpadProvider.tsx       |   9 +
 .../src/hooks/useHotkey.tsx                   |  18 +-
 graylog2-web-interface/src/routing/App.tsx    |  10 +-
 9 files changed, 382 insertions(+), 269 deletions(-)
 create mode 100644 graylog2-web-interface/src/components/scratchpad/ScratchpadModal.tsx

diff --git a/graylog2-web-interface/src/components/hotkeys/HotkeysModal.tsx b/graylog2-web-interface/src/components/hotkeys/HotkeysModal.tsx
index e716a186fb98..3f832ddcb794 100644
--- a/graylog2-web-interface/src/components/hotkeys/HotkeysModal.tsx
+++ b/graylog2-web-interface/src/components/hotkeys/HotkeysModal.tsx
@@ -17,6 +17,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import pick from 'lodash/pick';
+import isArray from 'lodash/isArray';
+import flattenDeep from 'lodash/flattenDeep';
 
 import { KeyboardKey, Modal, Button } from 'components/bootstrap';
 import useHotkeysContext from 'hooks/useHotkeysContext';
@@ -54,6 +56,7 @@ const KeysList = styled.div`
   display: inline-flex;
   gap: 5px;
   justify-content: right;
+  flex-wrap: wrap;
 `;
 
 const KeySeparator = styled.div`
@@ -74,31 +77,57 @@ type KeyProps = {
   description: string,
   isEnabled: boolean,
   isMacOS: boolean,
-  keys: string,
+  keys: string | Array<string>,
+  splitKey: string,
 }
 
-const Key = ({ description, keys, combinationKey, isEnabled, isMacOS }: KeyProps) => {
-  const keysArray = keys.split(combinationKey);
+type ShortcutKeysProps = {
+  keys: string | Array<string>,
+  splitKey: string,
+  combinationKey: string,
+  isEnabled: boolean,
+  isMacOS: boolean
+}
 
-  return (
-    <ShortcutListItem>
-      {description}
-      <KeysList>
-        {keysArray.map((key, index) => {
-          const isLast = index === keysArray.length - 1;
+const ShortcutKeys = ({ keys, splitKey, combinationKey, isEnabled, isMacOS }: ShortcutKeysProps) => {
+  const shortcutsArray = isArray(keys) ? keys : [keys];
+  const splitShortcutsArray = flattenDeep(shortcutsArray.map((key) => key.split(splitKey)));
 
-          return (
-            <React.Fragment key={key}>
-              <KeyboardKey bsStyle={isEnabled ? 'info' : 'default'}>{keyMapper(key, isMacOS)}</KeyboardKey>
-              {!isLast && <KeySeparator>{combinationKey}</KeySeparator>}
-            </React.Fragment>
-          );
-        })}
-      </KeysList>
-    </ShortcutListItem>
+  return (
+    <>
+      {splitShortcutsArray.map((keysStr, keysStrIndex) => {
+        const keysArray = keysStr.split(combinationKey);
+        const isLastSplit = keysStrIndex === splitShortcutsArray.length - 1;
+
+        return (
+          <React.Fragment key={keysStr}>
+            {keysArray.map((key, index) => {
+              const isLast = index === keysArray.length - 1;
+
+              return (
+                <React.Fragment key={key}>
+                  <KeyboardKey bsStyle={isEnabled ? 'info' : 'default'}>{keyMapper(key, isMacOS)}</KeyboardKey>
+                  {!isLast && <KeySeparator>{combinationKey}</KeySeparator>}
+                </React.Fragment>
+              );
+            })}
+            {!isLastSplit && <KeySeparator>or</KeySeparator>}
+          </React.Fragment>
+        );
+      })}
+    </>
   );
 };
 
+const Key = ({ description, keys, combinationKey, splitKey, isEnabled, isMacOS }: KeyProps) => (
+  <ShortcutListItem>
+    {description}
+    <KeysList>
+      <ShortcutKeys keys={keys} combinationKey={combinationKey} splitKey={splitKey} isEnabled={isEnabled} isMacOS={isMacOS} />
+    </KeysList>
+  </ShortcutListItem>
+);
+
 type HotkeyCollectionSectionProps = {
   collection: HotkeyCollection,
   scope: ScopeName,
@@ -108,7 +137,11 @@ type HotkeyCollectionSectionProps = {
 const HotkeyCollectionSection = ({ collection, scope, isMacOS }: HotkeyCollectionSectionProps) => {
   const { activeHotkeys } = useHotkeysContext();
   const { title, description, actions } = collection;
-  const filtratedActions = Object.entries(actions).filter(([actionKey]) => activeHotkeys.has(`${scope}.${actionKey}`));
+  const filtratedActions = Object.entries(actions).filter(([actionKey]) => {
+    const key: `${ScopeName}.${string}` = `${scope}.${actionKey}`;
+
+    return activeHotkeys.has(key) && activeHotkeys.get(key).options.displayInOverview !== false;
+  });
 
   if (!filtratedActions.length) {
     return null;
@@ -119,15 +152,19 @@ const HotkeyCollectionSection = ({ collection, scope, isMacOS }: HotkeyCollectio
       <p className="description">{description}</p>
       <ShortcutList>
         {filtratedActions.map(([actionKey, { description: keyDescription, keys, displayKeys }]) => {
-          const isEnabled = activeHotkeys.get(`${scope}.${actionKey}`)?.options?.enabled !== false;
+          const isEnabled = !!activeHotkeys.get(`${scope}.${actionKey}`)?.options?.enabled;
+          const splitKey = activeHotkeys.get(`${scope}.${actionKey}`)?.options?.splitKey;
+          const combinationKey = activeHotkeys.get(`${scope}.${actionKey}`)?.options?.combinationKey;
+          const reactKey = isArray(keys) ? keys.join(',') : keys;
 
           return (
             <Key description={keyDescription}
                  keys={displayKeys ?? keys}
-                 combinationKey="+"
+                 combinationKey={combinationKey}
+                 splitKey={splitKey}
                  isEnabled={isEnabled}
                  isMacOS={isMacOS}
-                 key={keys} />
+                 key={reactKey} />
           );
         })}
       </ShortcutList>
diff --git a/graylog2-web-interface/src/components/hotkeys/HotkeysModalContainer.tsx b/graylog2-web-interface/src/components/hotkeys/HotkeysModalContainer.tsx
index 049453561681..bceacfe8ffdf 100644
--- a/graylog2-web-interface/src/components/hotkeys/HotkeysModalContainer.tsx
+++ b/graylog2-web-interface/src/components/hotkeys/HotkeysModalContainer.tsx
@@ -26,7 +26,7 @@ const HotkeysModalContainer = () => {
 
   useHotkey({
     actionKey: 'show-hotkeys-modal',
-    callback: toggleModal,
+    callback: () => setShow(true),
     scope: 'general',
   });
 
diff --git a/graylog2-web-interface/src/components/scratchpad/Scratchpad.tsx b/graylog2-web-interface/src/components/scratchpad/Scratchpad.tsx
index e09ea4033a11..f3e1d492f165 100644
--- a/graylog2-web-interface/src/components/scratchpad/Scratchpad.tsx
+++ b/graylog2-web-interface/src/components/scratchpad/Scratchpad.tsx
@@ -14,245 +14,17 @@
  * along with this program. If not, see
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
-import React, { useContext, useState, useEffect, useRef } from 'react';
-import styled, { css } from 'styled-components';
-import chroma from 'chroma-js';
-import ClipboardJS from 'clipboard';
-import debounce from 'lodash/debounce';
+import React, { useContext } from 'react';
 
-import { OverlayTrigger } from 'components/common';
-import { Alert, Button, ButtonGroup, Tooltip, BootstrapModalConfirm } from 'components/bootstrap';
 import { ScratchpadContext } from 'contexts/ScratchpadProvider';
-import InteractableModal from 'components/common/InteractableModal';
-import Icon from 'components/common/Icon';
-import Store from 'logic/local-storage/Store';
-
-const DEFAULT_SCRATCHDATA = '';
-const TEXTAREA_ID = 'scratchpad-text-content';
-const STATUS_CLEARED = 'Cleared.';
-const STATUS_COPIED = 'Copied!';
-const STATUS_AUTOSAVED = 'Auto saved.';
-const STATUS_DEFAULT = '';
-
-const ContentArea = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-`;
-
-const Textarea = styled.textarea<{ $copied: boolean }>(({ $copied, theme }) => css`
-  width: 100%;
-  padding: 3px;
-  resize: none;
-  flex: 1;
-  margin: 15px 0 7px;
-  border: 1px solid ${$copied ? theme.colors.variant.success : theme.colors.variant.lighter.default};
-  box-shadow: inset 1px 1px 1px rgb(0 0 0 / 7.5%)${$copied && `, 0 0 8px ${chroma(theme.colors.variant.success).alpha(0.4).css()}`};
-  transition: border 150ms ease-in-out, box-shadow 150ms ease-in-out;
-  font-family: ${theme.fonts.family.monospace};
-  font-size: ${theme.fonts.size.body};
-
-  &:focus {
-    border-color: ${theme.colors.variant.light.info};
-    outline: none;
-  }
-`);
-
-const StyledAlert = styled(Alert)`
-  && {
-    padding: 6px 12px;
-    margin: 6px 0 0;
-    display: flex;
-    align-items: center;
-  }
-`;
-
-const AlertNote = styled.em`
-  margin-left: 6px;
-  flex: 1;
-`;
-
-const Footer = styled.footer(({ theme }) => css`
-  display: flex;
-  align-items: center;
-  padding: 7px 0 9px;
-  border-top: 1px solid ${theme.colors.gray[80]};
-`);
-
-const StatusMessage = styled.span<{ $visible: boolean }>(({ theme, $visible }) => css`
-  flex: 1;
-  color: ${theme.colors.variant.success};
-  font-style: italic;
-  opacity: ${$visible ? '1' : '0'};
-  transition: opacity 150ms ease-in-out;
-`);
+import ScratchpadModal from 'components/scratchpad/ScratchpadModal';
 
 const Scratchpad = () => {
-  const clipboard = useRef<ClipboardJS>();
-  const textareaRef = useRef<HTMLTextAreaElement>();
-  const statusTimeout = useRef<ReturnType<typeof setTimeout>>();
-  const { isScratchpadVisible, setScratchpadVisibility, localStorageItem } = useContext(ScratchpadContext);
-  const scratchpadStore = Store.get(localStorageItem) || {};
-  const [isSecurityWarningConfirmed, setSecurityWarningConfirmed] = useState<boolean>(scratchpadStore.securityConfirmed || false);
-  const [scratchData, setScratchData] = useState<string>(scratchpadStore.value || DEFAULT_SCRATCHDATA);
-  const [size, setSize] = useState<{ width: string, height: string } | undefined>(scratchpadStore.size || undefined);
-  const [position, setPosition] = useState<{ x:number, y:number } | undefined>(scratchpadStore.position || undefined);
-  const [statusMessage, setStatusMessage] = useState<string>(STATUS_DEFAULT);
-  const [showStatusMessage, setShowStatusMessage] = useState<boolean>(false);
-  const [showModal, setShowModal] = useState<boolean>(false);
-
-  const writeData = (newData) => {
-    const currentStorage = Store.get(localStorageItem);
-
-    Store.set(localStorageItem, { ...currentStorage, ...newData });
-  };
-
-  const resetStatusTimer = () => {
-    if (statusTimeout.current) {
-      clearTimeout(statusTimeout.current);
-    }
-
-    statusTimeout.current = setTimeout(() => {
-      setShowStatusMessage(false);
-    }, 1000);
-  };
-
-  const updateStatusMessage = (message) => {
-    setStatusMessage(message);
-    setShowStatusMessage(true);
-    resetStatusTimer();
-  };
-
-  const handleChange = debounce(() => {
-    const { value } = textareaRef.current;
-
-    setScratchData(value);
-    updateStatusMessage(STATUS_AUTOSAVED);
-    writeData({ value });
-  }, 500);
-
-  const handleDrag = (newPosition) => {
-    setPosition(newPosition);
-    writeData({ position: newPosition });
-  };
-
-  const handleSize = (newSize) => {
-    setSize(newSize);
-    writeData({ size: newSize });
-  };
-
-  const handleGotIt = () => {
-    setSecurityWarningConfirmed(true);
-    writeData({ securityConfirmed: true });
-  };
-
-  const openConfirmClear = () => {
-    setShowModal(true);
-  };
-
-  const handleCancelClear = () => {
-    setShowModal(false);
-  };
-
-  const handleClearText = () => {
-    setScratchData(DEFAULT_SCRATCHDATA);
-    writeData({ value: DEFAULT_SCRATCHDATA });
-    handleCancelClear();
-    updateStatusMessage(STATUS_CLEARED);
-  };
-
-  useEffect(() => {
-    clipboard.current = new ClipboardJS('[data-clipboard-button]', {});
-
-    clipboard.current.on('success', () => {
-      updateStatusMessage(STATUS_COPIED);
-    });
-
-    return () => {
-      clipboard.current.destroy();
-
-      if (statusTimeout.current) {
-        clearTimeout(statusTimeout.current);
-      }
-    };
-  });
-
-  useEffect(() => {
-    if (textareaRef.current && isScratchpadVisible) {
-      textareaRef.current.focus();
-      textareaRef.current.value = scratchData;
-    }
-  }, [scratchData, isScratchpadVisible]);
+  const { isScratchpadVisible } = useContext(ScratchpadContext);
 
   if (!isScratchpadVisible) return null;
 
-  return (
-    <InteractableModal title="Scratchpad"
-                       onClose={() => setScratchpadVisibility(false)}
-                       onDrag={handleDrag}
-                       onResize={handleSize}
-                       size={size}
-                       position={position}>
-      <ContentArea>
-        {!isSecurityWarningConfirmed && (
-          <StyledAlert bsStyle="warning" bsSize="sm">
-            <AlertNote>
-              We recommend you do <strong>not</strong> store any sensitive information, such as passwords, in
-              this area.
-            </AlertNote>
-            <Button bsStyle="link" bsSize="sm" onClick={handleGotIt}>Got It!</Button>
-          </StyledAlert>
-        )}
-
-        <Textarea ref={textareaRef}
-                  onChange={handleChange}
-                  id={TEXTAREA_ID}
-                  $copied={statusMessage === STATUS_COPIED}
-                  spellCheck={false} />
-
-        <Footer>
-          <OverlayTrigger placement="right"
-                          trigger={['hover', 'focus']}
-                          overlay={(
-                            <Tooltip id="scratchpad-help" show>
-                              You can use this space to store personal notes and other information while interacting with
-                              Graylog, without leaving your browser window. For example, store timestamps, user IDs, or IP
-                              addresses you need in various investigations.
-                            </Tooltip>
-                          )}>
-            <Button bsStyle="link">
-              <Icon name="question-circle" />
-            </Button>
-          </OverlayTrigger>
-
-          <StatusMessage $visible={showStatusMessage}>
-            <Icon name={statusMessage === STATUS_COPIED ? 'copy' : 'hdd'} type="regular" /> {statusMessage}
-          </StatusMessage>
-
-          <ButtonGroup>
-            <Button data-clipboard-button
-                    data-clipboard-target={`#${TEXTAREA_ID}`}
-                    id="scratchpad-actions"
-                    title="Copy">
-              <Icon name="copy" />
-            </Button>
-            <Button onClick={openConfirmClear} title="Clear">
-              <Icon name="trash-alt" />
-            </Button>
-          </ButtonGroup>
-
-        </Footer>
-
-      </ContentArea>
-
-      <BootstrapModalConfirm showModal={showModal}
-                             title="Are you sure?"
-                             onConfirm={handleClearText}
-                             onCancel={handleCancelClear}>
-        This will clear out your Scratchpad content, do you wish to proceed?
-      </BootstrapModalConfirm>
-    </InteractableModal>
-  );
+  return <ScratchpadModal />;
 };
 
 export default Scratchpad;
diff --git a/graylog2-web-interface/src/components/scratchpad/ScratchpadModal.tsx b/graylog2-web-interface/src/components/scratchpad/ScratchpadModal.tsx
new file mode 100644
index 000000000000..ebf6cda88698
--- /dev/null
+++ b/graylog2-web-interface/src/components/scratchpad/ScratchpadModal.tsx
@@ -0,0 +1,279 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import React, { useContext, useState, useEffect, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import chroma from 'chroma-js';
+import ClipboardJS from 'clipboard';
+import debounce from 'lodash/debounce';
+
+import { OverlayTrigger } from 'components/common';
+import { Alert, Button, ButtonGroup, Tooltip, BootstrapModalConfirm } from 'components/bootstrap';
+import { ScratchpadContext } from 'contexts/ScratchpadProvider';
+import InteractableModal from 'components/common/InteractableModal';
+import Icon from 'components/common/Icon';
+import Store from 'logic/local-storage/Store';
+import useHotkey from 'hooks/useHotkey';
+import copyToClipboard from 'util/copyToClipboard';
+
+const DEFAULT_SCRATCHDATA = '';
+const TEXTAREA_ID = 'scratchpad-text-content';
+const STATUS_CLEARED = 'Cleared.';
+const STATUS_COPIED = 'Copied!';
+const STATUS_AUTOSAVED = 'Auto saved.';
+const STATUS_DEFAULT = '';
+
+type Position = { x: number, y: number };
+type ScratchpadSize = { width: string, height: string }
+
+const ContentArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+const Textarea = styled.textarea<{ $copied: boolean }>(({ $copied, theme }) => css`
+  width: 100%;
+  padding: 3px;
+  resize: none;
+  flex: 1;
+  margin: 15px 0 7px;
+  border: 1px solid ${$copied ? theme.colors.variant.success : theme.colors.variant.lighter.default};
+  box-shadow: inset 1px 1px 1px rgb(0 0 0 / 7.5%)${$copied && `, 0 0 8px ${chroma(theme.colors.variant.success).alpha(0.4).css()}`};
+  transition: border 150ms ease-in-out, box-shadow 150ms ease-in-out;
+  font-family: ${theme.fonts.family.monospace};
+  font-size: ${theme.fonts.size.body};
+
+  &:focus {
+    border-color: ${theme.colors.variant.light.info};
+    outline: none;
+  }
+`);
+
+const StyledAlert = styled(Alert)`
+  && {
+    padding: 6px 12px;
+    margin: 6px 0 0;
+    display: flex;
+    align-items: center;
+  }
+`;
+
+const AlertNote = styled.em`
+  margin-left: 6px;
+  flex: 1;
+`;
+
+const Footer = styled.footer(({ theme }) => css`
+  display: flex;
+  align-items: center;
+  padding: 7px 0 9px;
+  border-top: 1px solid ${theme.colors.gray[80]};
+`);
+
+const StatusMessage = styled.span<{ $visible: boolean }>(({ theme, $visible }) => css`
+  flex: 1;
+  color: ${theme.colors.variant.success};
+  font-style: italic;
+  opacity: ${$visible ? '1' : '0'};
+  transition: opacity 150ms ease-in-out;
+`);
+
+const Scratchpad = () => {
+  const clipboard = useRef<ClipboardJS>();
+  const textareaRef = useRef<HTMLTextAreaElement>();
+  const statusTimeout = useRef<ReturnType<typeof setTimeout>>();
+  const { setScratchpadVisibility, localStorageItem } = useContext(ScratchpadContext);
+  const scratchpadStore = Store.get(localStorageItem) || {};
+  const [isSecurityWarningConfirmed, setSecurityWarningConfirmed] = useState<boolean>(scratchpadStore.securityConfirmed || false);
+  const [scratchData, setScratchData] = useState<string>(scratchpadStore.value || DEFAULT_SCRATCHDATA);
+  const [size, setSize] = useState<ScratchpadSize | undefined>(scratchpadStore.size || undefined);
+  const [position, setPosition] = useState<Position | undefined>(scratchpadStore.position || undefined);
+  const [statusMessage, setStatusMessage] = useState<string>(STATUS_DEFAULT);
+  const [showStatusMessage, setShowStatusMessage] = useState<boolean>(false);
+  const [showModal, setShowModal] = useState<boolean>(false);
+
+  const writeData = (newData: Record<string, unknown>) => {
+    const currentStorage = Store.get(localStorageItem);
+
+    Store.set(localStorageItem, { ...currentStorage, ...newData });
+  };
+
+  const resetStatusTimer = () => {
+    if (statusTimeout.current) {
+      clearTimeout(statusTimeout.current);
+    }
+
+    statusTimeout.current = setTimeout(() => {
+      setShowStatusMessage(false);
+    }, 1000);
+  };
+
+  const updateStatusMessage = (message: string) => {
+    setStatusMessage(message);
+    setShowStatusMessage(true);
+    resetStatusTimer();
+  };
+
+  const handleChange = debounce(() => {
+    const { value } = textareaRef.current;
+
+    setScratchData(value);
+    updateStatusMessage(STATUS_AUTOSAVED);
+    writeData({ value });
+  }, 500);
+
+  const handleDrag = (newPosition: Position) => {
+    setPosition(newPosition);
+    writeData({ position: newPosition });
+  };
+
+  const handleSize = (newSize: ScratchpadSize) => {
+    setSize(newSize);
+    writeData({ size: newSize });
+  };
+
+  const handleGotIt = () => {
+    setSecurityWarningConfirmed(true);
+    writeData({ securityConfirmed: true });
+  };
+
+  const openConfirmClear = () => {
+    setShowModal(true);
+  };
+
+  const handleCancelClear = () => {
+    setShowModal(false);
+  };
+
+  const handleClearText = () => {
+    setScratchData(DEFAULT_SCRATCHDATA);
+    writeData({ value: DEFAULT_SCRATCHDATA });
+    handleCancelClear();
+    updateStatusMessage(STATUS_CLEARED);
+  };
+
+  useEffect(() => {
+    clipboard.current = new ClipboardJS('[data-clipboard-button]', {});
+
+    clipboard.current.on('success', () => {
+      updateStatusMessage(STATUS_COPIED);
+    });
+
+    return () => {
+      clipboard.current.destroy();
+
+      if (statusTimeout.current) {
+        clearTimeout(statusTimeout.current);
+      }
+    };
+  });
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.focus();
+      textareaRef.current.value = scratchData;
+    }
+  }, [scratchData]);
+
+  useHotkey({
+    actionKey: 'clear',
+    scope: 'scratchpad',
+    callback: openConfirmClear,
+    options: { enableOnFormTags: true, preventDefault: true },
+  });
+
+  const copyCallback = () => {
+    copyToClipboard(scratchData).then(() => updateStatusMessage(STATUS_COPIED));
+  };
+
+  useHotkey({
+    actionKey: 'copy',
+    scope: 'scratchpad',
+    callback: copyCallback,
+    options: { enableOnFormTags: true },
+  });
+
+  return (
+    <InteractableModal title="Scratchpad"
+                       onClose={() => setScratchpadVisibility(false)}
+                       onDrag={handleDrag}
+                       onResize={handleSize}
+                       size={size}
+                       position={position}>
+      <ContentArea>
+        {!isSecurityWarningConfirmed && (
+          <StyledAlert bsStyle="warning" bsSize="sm">
+            <AlertNote>
+              We recommend you do <strong>not</strong> store any sensitive information, such as passwords, in
+              this area.
+            </AlertNote>
+            <Button bsStyle="link" bsSize="sm" onClick={handleGotIt}>Got It!</Button>
+          </StyledAlert>
+        )}
+
+        <Textarea ref={textareaRef}
+                  onChange={handleChange}
+                  id={TEXTAREA_ID}
+                  $copied={statusMessage === STATUS_COPIED}
+                  spellCheck={false} />
+
+        <Footer>
+          <OverlayTrigger placement="right"
+                          trigger={['hover', 'focus']}
+                          overlay={(
+                            <Tooltip id="scratchpad-help" show>
+                              You can use this space to store personal notes and other information while interacting with
+                              Graylog, without leaving your browser window. For example, store timestamps, user IDs, or IP
+                              addresses you need in various investigations.
+                            </Tooltip>
+                          )}>
+            <Button bsStyle="link">
+              <Icon name="question-circle" />
+            </Button>
+          </OverlayTrigger>
+
+          <StatusMessage $visible={showStatusMessage}>
+            <Icon name={statusMessage === STATUS_COPIED ? 'copy' : 'hdd'} type="regular" /> {statusMessage}
+          </StatusMessage>
+
+          <ButtonGroup>
+            <Button data-clipboard-button
+                    data-clipboard-target={`#${TEXTAREA_ID}`}
+                    id="scratchpad-actions"
+                    title="Copy">
+              <Icon name="copy" />
+            </Button>
+            <Button onClick={openConfirmClear} title="Clear">
+              <Icon name="trash-alt" />
+            </Button>
+          </ButtonGroup>
+
+        </Footer>
+
+      </ContentArea>
+
+      <BootstrapModalConfirm showModal={showModal}
+                             title="Are you sure?"
+                             onConfirm={handleClearText}
+                             onCancel={handleCancelClear}>
+        This will clear out your Scratchpad content, do you wish to proceed?
+      </BootstrapModalConfirm>
+    </InteractableModal>
+  );
+};
+
+export default Scratchpad;
diff --git a/graylog2-web-interface/src/contexts/HotkeysContext.tsx b/graylog2-web-interface/src/contexts/HotkeysContext.tsx
index 6177da978c85..2381cabf2175 100644
--- a/graylog2-web-interface/src/contexts/HotkeysContext.tsx
+++ b/graylog2-web-interface/src/contexts/HotkeysContext.tsx
@@ -20,7 +20,7 @@ import type Immutable from 'immutable';
 import { singleton } from 'logic/singleton';
 
 export type DefaultScopeName = '*';
-export type ScopeName = 'general' | 'search' | 'dashboard';
+export type ScopeName = 'general' | 'search' | 'dashboard' | 'scratchpad';
 export type ScopeParam = Array<ScopeName> | ScopeName
 
 export type KeyboardModifiers = {
@@ -48,7 +48,8 @@ export type Options = {
   enableOnFormTags?: readonly FormTags[] | boolean // Enable hotkeys on a list of tags. (Default: false)
   enableOnContentEditable?: boolean // Enable hotkeys on tags with contentEditable props. (Default: false)
   preventDefault?: Trigger // Prevent default browser behavior? (Default: false)
-  displayInOverview?: boolean
+  displayInOverview?: boolean,
+  splitKey?: string,
 }
 export type ActiveHotkey = {
   options?: Options & { scope: ScopeName },
@@ -57,7 +58,7 @@ export type ActiveHotkeys = Immutable.Map<`${ScopeName}.${string}`, ActiveHotkey
 export type HotkeyCollection = {
   title: string,
   description: string,
-  actions: Record<string, { keys: string, description: string, displayKeys?: string }>,
+  actions: Record<string, { keys: string | Array<string>, description: string, displayKeys?: string }>,
 }
 export type HotkeyCollections = Record<ScopeName, HotkeyCollection>
 
diff --git a/graylog2-web-interface/src/contexts/HotkeysProvider.tsx b/graylog2-web-interface/src/contexts/HotkeysProvider.tsx
index 0cc12239b1fd..01a2ed57e550 100644
--- a/graylog2-web-interface/src/contexts/HotkeysProvider.tsx
+++ b/graylog2-web-interface/src/contexts/HotkeysProvider.tsx
@@ -40,6 +40,7 @@ export const hotKeysCollections: HotkeyCollections = {
       'show-hotkeys-modal': { keys: 'shift+?', displayKeys: '?', description: 'Show available keyboard shorts' },
       'submit-form': { keys: 'enter', description: 'Submit form' },
       'close-modal': { keys: 'esc', description: 'Close modal' },
+      'show-scratchpad-modal': { keys: 'mod+/', description: 'Show scratchpad' },
     },
   },
   search: {
@@ -60,6 +61,14 @@ export const hotKeysCollections: HotkeyCollections = {
       'save-as': { keys: 'mod+shift+s', description: 'Save dashboard as' },
     },
   },
+  scratchpad: {
+    title: 'Scratchpad',
+    description: 'Scratchpad shortcuts',
+    actions: {
+      clear: { keys: ['mod+backspace', 'mod+del'], description: 'Clear scratchpad' },
+      copy: { keys: 'shift+mod+c', description: 'Copy scratchpad' },
+    },
+  },
 };
 
 const CustomHotkeysProvider = ({ children }: PropsWithChildren) => {
diff --git a/graylog2-web-interface/src/contexts/ScratchpadProvider.tsx b/graylog2-web-interface/src/contexts/ScratchpadProvider.tsx
index 49df768cf1c2..ea54786a5e32 100644
--- a/graylog2-web-interface/src/contexts/ScratchpadProvider.tsx
+++ b/graylog2-web-interface/src/contexts/ScratchpadProvider.tsx
@@ -19,6 +19,7 @@ import { createContext, useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import Store from 'logic/local-storage/Store';
+import useHotkey from 'hooks/useHotkey';
 
 export const ScratchpadContext = createContext(undefined);
 
@@ -58,6 +59,14 @@ export const ScratchpadProvider = ({ children, loginName }: Props) => {
     localStorageItem,
   ]);
 
+  useHotkey({
+    actionKey: 'show-scratchpad-modal',
+    callback: () => {
+      setVisibility(true);
+    },
+    scope: 'general',
+  });
+
   return (
     <ScratchpadContext.Provider value={scratchpadContextValue}>
       {children}
diff --git a/graylog2-web-interface/src/hooks/useHotkey.tsx b/graylog2-web-interface/src/hooks/useHotkey.tsx
index 27cad04dcaaf..9cc4f321bb30 100644
--- a/graylog2-web-interface/src/hooks/useHotkey.tsx
+++ b/graylog2-web-interface/src/hooks/useHotkey.tsx
@@ -27,7 +27,7 @@ import useLocation from 'routing/useLocation';
 import { getPathnameWithoutId } from 'util/URLUtils';
 import { TELEMETRY_EVENT_TYPE } from 'logic/telemetry/Constants';
 
-const defaultOptions: ReactHotKeysHookOptions = {
+const defaultOptions: ReactHotKeysHookOptions & Options = {
   preventDefault: true,
   enabled: true,
   enableOnFormTags: false,
@@ -39,6 +39,7 @@ const defaultOptions: ReactHotKeysHookOptions = {
   description: undefined,
   document: undefined,
   ignoreModifiers: false,
+  displayInOverview: undefined,
 };
 
 const catchErrors = (hotKeysCollections: HotkeyCollections, actionKey: string, scope: ScopeName) => {
@@ -113,16 +114,21 @@ const useHotkey = <T extends HTMLElement>({
       options: {
         scope,
         enabled: mergedOptions.enabled,
+        displayInOverview: mergedOptions.displayInOverview,
         combinationKey: mergedOptions.combinationKey,
+        splitKey: mergedOptions.splitKey,
       },
     });
 
     return () => removeActiveHotkey({ scope, actionKey });
-  }, [actionKey, addActiveHotkey, scope, removeActiveHotkey, mergedOptions.combinationKey, mergedOptions.enabled]);
-
-  const keys = hotKeysCollections?.[scope]?.actions?.[actionKey]?.keys;
-
-  return originalUseHotkeys<T>(keys, callbackWithTelemetry, mergedOptions, dependencies);
+  }, [actionKey, addActiveHotkey, scope, removeActiveHotkey, mergedOptions.combinationKey, mergedOptions.enabled, mergedOptions.displayInOverview, mergedOptions.splitKey]);
+
+  return originalUseHotkeys<T>(
+    hotKeysCollections?.[scope]?.actions?.[actionKey]?.keys,
+    callbackWithTelemetry,
+    mergedOptions,
+    dependencies,
+  );
 };
 
 export default useHotkey;
diff --git a/graylog2-web-interface/src/routing/App.tsx b/graylog2-web-interface/src/routing/App.tsx
index 22b2f0433903..89a284087205 100644
--- a/graylog2-web-interface/src/routing/App.tsx
+++ b/graylog2-web-interface/src/routing/App.tsx
@@ -72,9 +72,9 @@ const App = () => (
         }
 
         return (
-          <ScratchpadProvider loginName={currentUser.username}>
-            <NavigationTelemetry />
-            <HotkeysProvider>
+          <HotkeysProvider>
+            <ScratchpadProvider loginName={currentUser.username}>
+              <NavigationTelemetry />
               <>
                 <AppLayout>
                   <Navigation />
@@ -92,8 +92,8 @@ const App = () => (
                 </AppLayout>
                 <HotkeysModalContainer />
               </>
-            </HotkeysProvider>
-          </ScratchpadProvider>
+            </ScratchpadProvider>
+          </HotkeysProvider>
         );
       }}
     </CurrentUserContext.Consumer>