From 18acc385dc3c94b62cfd4744e7fcaaef6265db28 Mon Sep 17 00:00:00 2001
From: David Edler <david.edler@canonical.com>
Date: Fri, 9 Jun 2023 19:09:20 +0200
Subject: [PATCH] feat(console) add shortcuts for common keyboard combinations
 #381

---
 src/lib/spice/src/inputs.js             | 43 +++++++++++++++++++-----
 src/pages/instances/InstanceConsole.tsx | 44 +++++++++++++++++++++----
 2 files changed, 71 insertions(+), 16 deletions(-)

diff --git a/src/lib/spice/src/inputs.js b/src/lib/spice/src/inputs.js
index c6fd3f7f2b..c0046bbbfa 100644
--- a/src/lib/spice/src/inputs.js
+++ b/src/lib/spice/src/inputs.js
@@ -190,22 +190,45 @@ function handle_keyup(e)
     e.preventDefault();
 }
 
+function send_key(sc, keyCode)
+{
+    var msg = new Messages.SpiceMiniData();
+    var key = new Messages.SpiceMsgcKeyDown();
+
+    key.code = keyCode;
+    msg.build_msg(Constants.SPICE_MSGC_INPUTS_KEY_DOWN, key);
+    sc.inputs.send_msg(msg);
+
+    key.code = 0x80|keyCode;
+    msg.build_msg(Constants.SPICE_MSGC_INPUTS_KEY_UP, key);
+    sc.inputs.send_msg(msg);
+}
+
 function sendCtrlAltDel(sc)
 {
     if (sc && sc.inputs && sc.inputs.state === "ready"){
-        var key = new Messages.SpiceMsgcKeyDown();
-        var msg = new Messages.SpiceMiniData();
-
         update_modifier(true, KeyNames.KEY_LCtrl, sc);
         update_modifier(true, KeyNames.KEY_Alt, sc);
+        send_key(sc, KeyNames.KEY_KP_Decimal);
+        if(Ctrl_state == false) update_modifier(false, KeyNames.KEY_LCtrl, sc);
+        if(Alt_state == false) update_modifier(false, KeyNames.KEY_Alt, sc);
+    }
+}
 
-        key.code = KeyNames.KEY_KP_Decimal;
-        msg.build_msg(Constants.SPICE_MSGC_INPUTS_KEY_DOWN, key);
-        sc.inputs.send_msg(msg);
-        msg.build_msg(Constants.SPICE_MSGC_INPUTS_KEY_UP, key);
-        sc.inputs.send_msg(msg);
+function sendAltF4(sc)
+{
+    if (sc && sc.inputs && sc.inputs.state === "ready"){
+        update_modifier(true, KeyNames.KEY_Alt, sc);
+        send_key(sc, KeyNames.KEY_F4);
+        if(Alt_state == false) update_modifier(false, KeyNames.KEY_Alt, sc);
+    }
+}
 
-        if(Ctrl_state == false) update_modifier(false, KeyNames.KEY_LCtrl, sc);
+function sendAltTab(sc)
+{
+    if (sc && sc.inputs && sc.inputs.state === "ready"){
+        update_modifier(true, KeyNames.KEY_Alt, sc);
+        send_key(sc, KeyNames.KEY_Tab);
         if(Alt_state == false) update_modifier(false, KeyNames.KEY_Alt, sc);
     }
 }
@@ -295,4 +318,6 @@ export {
   handle_keydown,
   handle_keyup,
   sendCtrlAltDel,
+  sendAltTab,
+  sendAltF4,
 };
diff --git a/src/pages/instances/InstanceConsole.tsx b/src/pages/instances/InstanceConsole.tsx
index 403f7685f3..e7d57d9515 100644
--- a/src/pages/instances/InstanceConsole.tsx
+++ b/src/pages/instances/InstanceConsole.tsx
@@ -1,5 +1,9 @@
 import React, { FC, useState } from "react";
-import { Button, RadioInput } from "@canonical/react-components";
+import {
+  Button,
+  ContextualMenu,
+  RadioInput,
+} from "@canonical/react-components";
 import { Notification } from "types/notification";
 import NotificationRowLegacy from "components/NotificationRowLegacy";
 import InstanceGraphicConsole from "./InstanceGraphicConsole";
@@ -9,6 +13,11 @@ import { failure, info } from "context/notify";
 import EmptyState from "components/EmptyState";
 import SubmitButton from "components/SubmitButton";
 import { useInstanceStart } from "util/instanceStart";
+import {
+  sendAltF4,
+  sendAltTab,
+  sendCtrlAltDel,
+} from "../../lib/spice/src/inputs";
 
 interface Props {
   instance: LxdInstance;
@@ -68,12 +77,33 @@ const InstanceConsole: FC<Props> = ({ instance }) => {
             />
           </div>
           {isGraphic && isRunning && (
-            <Button
-              className="u-no-margin--bottom"
-              onClick={() => handleFullScreen()}
-            >
-              <span>Fullscreen</span>
-            </Button>
+            <div>
+              <Button
+                className="u-no-margin--bottom"
+                onClick={() => handleFullScreen()}
+              >
+                <span>Fullscreen</span>
+              </Button>
+              <ContextualMenu
+                hasToggleIcon
+                toggleLabel="Shortcuts"
+                toggleClassName="u-no-margin--bottom"
+                links={[
+                  {
+                    children: "Send Ctrl + Alt + Del",
+                    onClick: () => sendCtrlAltDel(window.spice_connection),
+                  },
+                  {
+                    children: "Send Alt + TAB",
+                    onClick: () => sendAltTab(window.spice_connection),
+                  },
+                  {
+                    children: "Send Alt + F4",
+                    onClick: () => sendAltF4(window.spice_connection),
+                  },
+                ]}
+              />
+            </div>
           )}
         </div>
       )}