keybinds: move help menu to global actions kebab

cockpit-project · Sep 24, 2024 · 84ce5a0 · 84ce5a0
1 parent 5ff28c6
commit 84ce5a0
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 15 deletions.
diff --git a/src/dialogs/keyboardShortcutsHelp.tsx b/src/dialogs/keyboardShortcutsHelp.tsx
@@ -9,15 +9,13 @@ import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/esm
 import { Flex, } from "@patternfly/react-core/dist/esm/layouts/Flex";
 
 import cockpit from 'cockpit';
-import { useDialogs } from 'dialogs';
+import { DialogResult, Dialogs } from 'dialogs';
 
 const _ = cockpit.gettext;
 
-export const KeyboardShortcutsHelp = () => {
-    const Dialogs = useDialogs();
-
+const KeyboardShortcutsHelp = ({ dialogResult } : { dialogResult: DialogResult<void> }) => {
     const footer = (
-        <Button variant="secondary" onClick={Dialogs.close}>{_("Close")}</Button>
+        <Button variant="secondary" onClick={() => dialogResult.resolve()}>{_("Close")}</Button>
     );
 
     const toDescriptionListGroups = (item: [React.JSX.Element, string, string]) => {
@@ -114,7 +112,7 @@ export const KeyboardShortcutsHelp = () => {
           title={_("Keyboard shortcuts")}
           variant={ModalVariant.large}
           className="shortcuts-dialog"
-          onClose={Dialogs.close}
+          onClose={() => dialogResult.resolve()}
           footer={footer}
           isOpen
         >
@@ -143,3 +141,7 @@ export const KeyboardShortcutsHelp = () => {
         </Modal>
     );
 };
+
+export function showKeyboardShortcuts(dialogs: Dialogs) {
+    dialogs.run(KeyboardShortcutsHelp, {});
+}
diff --git a/src/header.tsx b/src/header.tsx
@@ -34,7 +34,6 @@ import { KebabDropdown } from "cockpit-components-dropdown";
 import { useDialogs } from "dialogs";
 
 import { FolderFileInfo, useFilesContext } from "./app.tsx";
-import { KeyboardShortcutsHelp } from "./dialogs/keyboardShortcutsHelp.tsx";
 import { get_menu_items } from "./menu.tsx";
 import { UploadButton } from "./upload-button.tsx";
 
@@ -213,16 +212,13 @@ const ViewSelector = ({ isGrid, setIsGrid, sortBy, setSortBy, showHidden, setSho
     }) => {
     const [isOpen, setIsOpen] = useState<boolean>(false);
     const onToggleClick = (isOpen: boolean) => setIsOpen(!isOpen);
-    const dialogs = useDialogs();
 
     const onSelect = (_ev?: React.MouseEvent, itemId?: string | number) => {
         if (itemId === "hidden-toggle") {
             setShowHidden(prevShowHidden => {
                 localStorage.setItem("files:showHiddenFiles", !showHidden ? "true" : "false");
                 return !prevShowHidden;
             });
-        } else if (itemId === "shortcuts-help") {
-            dialogs.show(<KeyboardShortcutsHelp />);
         } else {
             const sort = as_sort(itemId);
             setSortBy(sort);
@@ -285,10 +281,6 @@ const ViewSelector = ({ isGrid, setIsGrid, sortBy, setSortBy, showHidden, setSho
                 <SelectOption icon={showHidden ? <EyeSlashIcon /> : <EyeIcon />} itemId="hidden-toggle">
                     {showHidden ? _("Hide hidden items") : _("Show hidden items")}
                 </SelectOption>
-                <Divider />
-                <SelectOption itemId="shortcuts-help">
-                    {_("Show keyboard shortcuts")}
-                </SelectOption>
             </SelectList>
         </Select>
     );

diff --git a/src/menu.tsx b/src/menu.tsx
@@ -29,6 +29,7 @@ import type { Dialogs } from 'dialogs';
 import type { FolderFileInfo } from "./app";
 import { confirm_delete } from './dialogs/delete.tsx';
 import { edit_file, MAX_EDITOR_FILE_SIZE } from './dialogs/editor.tsx';
+import { showKeyboardShortcuts } from "./dialogs/keyboardShortcutsHelp.tsx";
 import { show_create_directory_dialog } from './dialogs/mkdir.tsx';
 import { edit_permissions } from './dialogs/permissions.jsx';
 import { show_rename_dialog } from './dialogs/rename.tsx';
@@ -164,5 +165,14 @@ export function get_menu_items(
         );
     }
 
+    menuItems.push(
+        { type: "divider" },
+        {
+            id: "shortcuts-help",
+            title: _("Show keyboard shortcuts"),
+            onClick: () => showKeyboardShortcuts(dialogs)
+        }
+    );
+
     return menuItems;
 }
diff --git a/test/check-application b/test/check-application
@@ -1541,7 +1541,8 @@ class TestFiles(testlib.MachineCase):
         m.execute(create_files)
 
         # view shortcuts help dialog
-        b.select_PF("#sort-menu-toggle", "Show keyboard shortcuts")
+        b.click("#dropdown-menu")
+        b.click("#shortcuts-help")
         b.wait_in_text(".shortcuts-dialog .pf-v5-c-modal-box__title-text", "Keyboard shortcuts")
         b.click(".shortcuts-dialog button.pf-m-secondary")
         b.wait_not_present(".shortcuts-dialog")