fix: show VNC console dialogs in full screen and restore deleting custom shortcut keys (#1222)

* fix: show the VNC console's dialogs in full screen

Only the console went full screen and dialogs render outside of it, so the
Ctrl+Alt+Del and Soft Reboot confirmations, among others, stayed hidden behind
it until full screen was left. Put the whole page in full screen instead.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: bring back deleting saved VNC console shortcut keys

The Vue 3 migration dropped the close button from the list of saved shortcuts,
which left no way to delete one. Restore it, and remove by position in the list:
the old code parsed the displayed HTML to find the shortcut, which cannot match
one with the Space key in it, such as Ctrl+Space.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

* fix: tidy the VNC console's custom shortcut keys

Give the saved shortcuts in the menu the same space as the separator above
them, and name the dialog's buttons Cancel and Save, which say what they do.

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>

---------

Signed-off-by: Marcelo Fukumoto <marcelo.fukumoto@suse.com>
(cherry picked from commit 73eaccc2ad)

pkg/harvester/components/novnc/NovncConsoleWrapper.vue

@@ -428,7 +428,8 @@ export default {
         if (document.fullscreenElement) {
           await document.exitFullscreen();
         } else {
-          await this.$refs.consoleContainer.requestFullscreen();
+          // The whole page and not only the console, because dialogs render outside of it.
+          await document.documentElement.requestFullscreen();
           // Keyboard lock lets shortcuts such as Ctrl+W and F11 reach the guest.
           await navigator.keyboard?.lock?.(['KeyW', 'F11']);
         }
@@ -454,10 +455,7 @@ export default {
 
 <template>
   <div id="app">
-    <div
-      ref="consoleContainer"
-      class="vm-console"
-    >
+    <div class="vm-console">
       <div class="combination-keys">
         <div class="toolbar-group">
           <v-dropdown
@@ -518,6 +516,7 @@ export default {
               <div
                 v-for="(keys, index) in preferredShortcutKeys"
                 :key="index"
+                class="custom-shortcut"
               >
                 <button
                   class="btn btn-sm bg-primary"
@@ -735,6 +734,11 @@ export default {
     width: 100%;
   }
 
+  // The space around the separator above the list.
+  .custom-shortcut + .custom-shortcut {
+    margin-top: 7px;
+  }
+
   .console-status {
     color: #fff;
     font-size: 12px;