WIP - drilldown

cockpit-project · Feb 4, 2025 · 9ba55bf · 9ba55bf
1 parent 77c4eb9
commit 9ba55bf
Showing 1 changed file with 25 additions and 5 deletions.
diff --git a/src/components/vm/consoles/vnc.jsx b/src/components/vm/consoles/vnc.jsx
@@ -19,10 +19,11 @@
 import React from 'react';
 import cockpit from 'cockpit';
 
-import { VncConsole } from '@patternfly/react-console';
+import { VncConsole } from '@patternfly/react-console/dist/esm/components/VncConsole'
 import { Popover } from "@patternfly/react-core/dist/esm/components/Popover";
 import { Dropdown, DropdownItem, DropdownList } from "@patternfly/react-core/dist/esm/components/Dropdown";
 import { MenuToggle } from "@patternfly/react-core/dist/esm/components/MenuToggle";
+import { MenuItem, DrilldownMenu } from "@patternfly/react-core/dist/esm/components/Menu";
 import { Button } from "@patternfly/react-core/dist/esm/components/Button";
 import { Divider } from "@patternfly/react-core/dist/esm/components/Divider";
 import { EmptyState, EmptyStateBody, EmptyStateFooter } from "@patternfly/react-core/dist/esm/components/EmptyState";
@@ -315,10 +316,28 @@ class Vnc extends React.Component {
             );
         };
         const dropdownItems = [
-            ...['Delete', 'Backspace'].map(key => renderDropdownItem(key)),
-            <Divider key="separator" />,
-            ...[...Array(12).keys()].map(key => renderDropdownItem(cockpit.format("F$0", key + 1))),
-            <Divider key="separator2" />,
+            <DropdownItem
+                key="sendkey"
+                itemId="drilldown:sendkey"
+                direction="down"
+                drilldownMenu={
+                    <DrilldownMenu id="sendkey-menu">
+                        {
+                            [
+                                <MenuItem key="back" itemId="drilldown:sendkey_back" direction="up">
+                                    {_("Send key")}
+                                </MenuItem>,
+                                <Divider key="divider" />,
+                                ...['Delete', 'Backspace'].map(key => renderDropdownItem(key)),
+                                <Divider key="separator" />,
+                                ...[...Array(12).keys()].map(key => renderDropdownItem(cockpit.format("F$0", key + 1))),
+                            ]
+                        }
+                    </DrilldownMenu>
+                }
+            >
+                {_("Send key")}
+            </DropdownItem>,
             <DropdownItem
                 id="vnc-edit"
                 key="edit"
@@ -356,6 +375,7 @@ class Vnc extends React.Component {
                         <KebabDropdown
                             toggleButtonId={"vnc-actions"}
                             position='right'
+                            direction='up'
                             dropdownItems={dropdownItems}
                         />
                     }