Move global menu to the toolbar

relevant comment: cockpit-project#567 (comment)
tomasmatus · Sep 16, 2024 · 84cb34e · 84cb34e
1 parent d3abd3a
commit 84cb34e
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 32 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -204,8 +204,7 @@ export const Application = () => {
                                   path={path}
                                   selected={selected.map(s => files.find(f => f.name === s.name))
                                           .filter(s => s !== undefined)}
-                                  showHidden={showHidden} setSelected={setSelected}
-                                  clipboard={clipboard} setClipboard={setClipboard}
+                                  showHidden={showHidden}
                                   files={files}
                                 />
                             </SidebarPanel>

diff --git a/src/files-folder-view.tsx b/src/files-folder-view.tsx
@@ -69,6 +69,10 @@ export const FilesFolderView = ({
               path={path}
               showHidden={showHidden}
               setShowHidden={setShowHidden}
+              selected={selected}
+              setSelected={setSelected}
+              clipboard={clipboard}
+              setClipboard={setClipboard}
             />
             <FilesCardBody
               files={files}

diff --git a/src/header.tsx b/src/header.tsx
@@ -21,6 +21,7 @@ import React, { useState } from "react";
 
 import { CardHeader, CardTitle } from "@patternfly/react-core/dist/esm/components/Card";
 import { Divider } from "@patternfly/react-core/dist/esm/components/Divider";
+import { DropdownItem } from "@patternfly/react-core/dist/esm/components/Dropdown";
 import { MenuToggle, MenuToggleAction } from "@patternfly/react-core/dist/esm/components/MenuToggle";
 import { SearchInput } from "@patternfly/react-core/dist/esm/components/SearchInput";
 import { Select, SelectGroup, SelectList, SelectOption } from "@patternfly/react-core/dist/esm/components/Select";
@@ -30,7 +31,11 @@ import { EyeIcon, EyeSlashIcon, GripVerticalIcon, ListIcon } from "@patternfly/r
 import { SortByDirection } from '@patternfly/react-table';
 
 import cockpit from "cockpit";
+import { KebabDropdown } from "cockpit-components-dropdown";
+import { useDialogs } from "dialogs";
 
+import { FolderFileInfo, useFilesContext } from "./app.tsx";
+import { get_menu_items } from "./menu.tsx";
 import { UploadButton } from "./upload-button.tsx";
 
 const _ = cockpit.gettext;
@@ -130,15 +135,41 @@ export const FilesCardHeader = ({
     setSortBy,
     showHidden,
     setShowHidden,
+    selected,
+    setSelected,
+    clipboard,
+    setClipboard,
     path,
 }: {
     currentFilter: string,
     onFilterChange: (_event: React.FormEvent<HTMLInputElement>, value: string) => void,
     isGrid: boolean, setIsGrid: React.Dispatch<React.SetStateAction<boolean>>,
     sortBy: Sort, setSortBy: React.Dispatch<React.SetStateAction<Sort>>
     showHidden: boolean, setShowHidden: React.Dispatch<React.SetStateAction<boolean>>,
+    selected: FolderFileInfo[], setSelected: React.Dispatch<React.SetStateAction<FolderFileInfo[]>>,
+    clipboard: string[], setClipboard: React.Dispatch<React.SetStateAction<string[]>>
     path: string,
 }) => {
+    const { addAlert, cwdInfo } = useFilesContext();
+    const dialogs = useDialogs();
+
+    const menuItems = get_menu_items(
+        path, selected, setSelected, clipboard, setClipboard, cwdInfo, addAlert, dialogs
+    ).map((option, i) => {
+        if (option.type === 'divider')
+            return <Divider key={i} />;
+        return (
+            <DropdownItem
+              id={option.id} key={option.id}
+              {... option.className && { className: option.className }}
+              onClick={option.onClick}
+              isDisabled={option.isDisabled || false}
+            >
+                {option.title}
+            </DropdownItem>
+        );
+    });
+
     return (
         <CardHeader className="card-actionbar">
             <CardTitle component="h2" id="files-card-header">
@@ -163,6 +194,10 @@ export const FilesCardHeader = ({
                 <UploadButton
                   path={path}
                 />
+                <KebabDropdown
+                  toggleButtonId="dropdown-menu" dropdownItems={menuItems}
+                  isDisabled={cwdInfo === null}
+                />
             </Flex>
         </CardHeader>
     );

diff --git a/src/sidebar.tsx b/src/sidebar.tsx
@@ -27,19 +27,15 @@ import {
     DescriptionListGroup,
     DescriptionListTerm
 } from "@patternfly/react-core/dist/esm/components/DescriptionList";
-import { Divider } from "@patternfly/react-core/dist/esm/components/Divider";
-import { DropdownItem } from "@patternfly/react-core/dist/esm/components/Dropdown";
 import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/esm/components/Text";
 
 import cockpit from "cockpit";
-import { KebabDropdown } from "cockpit-components-dropdown";
 import { useDialogs } from "dialogs";
 import * as timeformat from "timeformat";
 
-import { FolderFileInfo, useFilesContext } from "./app.tsx";
+import { FolderFileInfo } from "./app.tsx";
 import { basename, get_permissions } from "./common.ts";
 import { edit_permissions } from "./dialogs/permissions.jsx";
-import { get_menu_items } from "./menu.tsx";
 
 const _ = cockpit.gettext;
 
@@ -91,15 +87,13 @@ function getDescriptionListItems(selected: FolderFileInfo) {
     ]);
 }
 
-export const SidebarPanelDetails = ({ files, path, selected, setSelected, showHidden, clipboard, setClipboard } : {
+export const SidebarPanelDetails = ({ files, path, selected, showHidden } : {
     files: FolderFileInfo[],
     path: string,
-    selected: FolderFileInfo[], setSelected: React.Dispatch<React.SetStateAction<FolderFileInfo[]>>,
+    selected: FolderFileInfo[],
     showHidden: boolean,
-    clipboard: string[], setClipboard: React.Dispatch<React.SetStateAction<string[]>>
 }) => {
     const [info, setInfo] = useState<string | null>(null);
-    const { addAlert, cwdInfo } = useFilesContext();
 
     useEffect(() => {
         if (selected.length === 1) {
@@ -118,23 +112,6 @@ export const SidebarPanelDetails = ({ files, path, selected, setSelected, showHi
     if (!showHidden)
         shown_items += " " + cockpit.format(cockpit.ngettext("($0 hidden)", "($0 hidden)", hidden_count), hidden_count);
 
-    const menuItems = get_menu_items(
-        path, selected, setSelected, clipboard, setClipboard, cwdInfo, addAlert, dialogs
-    ).map((option, i) => {
-        if (option.type === 'divider')
-            return <Divider key={i} />;
-        return (
-            <DropdownItem
-              id={option.id} key={option.id}
-              {... option.className && { className: option.className }}
-              onClick={option.onClick}
-              isDisabled={option.isDisabled || false}
-            >
-                {option.title}
-            </DropdownItem>
-        );
-    });
-
     return (
         <Card className="sidebar-card">
             <CardHeader>
@@ -158,10 +135,6 @@ export const SidebarPanelDetails = ({ files, path, selected, setSelected, showHi
                             </Text>}
                     </TextContent>
                 </CardTitle>
-                <KebabDropdown
-                  toggleButtonId="dropdown-menu" dropdownItems={menuItems}
-                  isDisabled={cwdInfo === null}
-                />
             </CardHeader>
             {selected.length === 1 &&
             <CardBody>