From 9a3505354b26f1baa9bc6ca574a899ef1e0a158e Mon Sep 17 00:00:00 2001
From: Jelle van der Waa <jvanderwaa@redhat.com>
Date: Thu, 1 Feb 2024 14:32:23 +0100
Subject: [PATCH] Move onContextMenu to the Card body

The context menu handling is Card body specific and does not have to
live in the app code.
---
 src/app.jsx                 | 10 ++--------
 src/navigator-card-body.jsx | 16 +++++++++++++---
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/app.jsx b/src/app.jsx
index 360f3e79e..4575c08aa 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -49,7 +49,6 @@ export const Application = () => {
     const [isGrid, setIsGrid] = useState(true);
     const [sortBy, setSortBy] = useState(localStorage.getItem("cockpit-navigator.sort") || "az");
     const [selected, setSelected] = useState([]);
-    const [selectedContext, setSelectedContext] = useState(null);
     const [showHidden, setShowHidden] = useState(localStorage.getItem("cockpit-navigator.showHiddenFiles") === "true");
     const [history, setHistory] = useState([]);
     const [historyIndex, setHistoryIndex] = useState(0);
@@ -122,11 +121,7 @@ export const Application = () => {
               setHistory={setHistory} history={history}
               historyIndex={historyIndex} setHistoryIndex={setHistoryIndex}
             />
-            <PageSection onContextMenu={() => {
-                setSelectedContext(null);
-                setSelected([{ name: sel }]);
-            }}
-            >
+            <PageSection>
                 <Sidebar isPanelRight hasGutter>
                     <SidebarContent>
                         <Card>
@@ -142,8 +137,7 @@ export const Application = () => {
                               currentDir={currentDir}
                               isGrid={isGrid} sortBy={sortBy}
                               selected={selected} setSelected={setSelected}
-                              selectedContext={selectedContext}
-                              setSelectedContext={setSelectedContext} setHistory={setHistory}
+                              setHistory={setHistory}
                               setHistoryIndex={setHistoryIndex} historyIndex={historyIndex}
                               loadingFiles={loadingFiles}
                               clipboard={clipboard}
diff --git a/src/navigator-card-body.jsx b/src/navigator-card-body.jsx
index b70378014..ec333a7fe 100644
--- a/src/navigator-card-body.jsx
+++ b/src/navigator-card-body.jsx
@@ -176,17 +176,16 @@ export const NavigatorCardBody = ({
     setHistory,
     setHistoryIndex,
     setSelected,
-    setSelectedContext,
     sortBy,
     loadingFiles,
     clipboard,
     setClipboard,
     addAlert,
     allFiles,
-    selectedContext,
     rootInfo,
 }) => {
     const [boxPerRow, setBoxPerRow] = useState(0);
+    const [selectedContext, setSelectedContext] = useState(null);
     const Dialogs = useDialogs();
     const sortedFiles = useMemo(() => {
         const compareFunc = compare(sortBy);
@@ -319,6 +318,12 @@ export const NavigatorCardBody = ({
         }
     };
 
+    const handleContextMenu = () => {
+        setSelectedContext(null);
+        const sel = path ? path[path.length - 1] : undefined;
+        setSelected([{ name: sel }]);
+    };
+
     const Item = ({ file }) => {
         const getFileType = (file) => {
             if (file.type === "dir") {
@@ -405,7 +410,11 @@ export const NavigatorCardBody = ({
         return (
             <>
                 {contextMenu}
-                <CardBody onClick={resetSelected} id="navigator-card-body">
+                <CardBody
+                  id="navigator-card-body"
+                  onClick={resetSelected}
+                  onContextMenu={handleContextMenu}
+                >
                     <Gallery id="folder-view">
                         {sortedFiles.map(file => <Item file={file} key={file.name} />)}
                     </Gallery>
@@ -422,6 +431,7 @@ export const NavigatorCardBody = ({
                   variant="compact"
                   columns={[_("Name")]}
                   rows={sortedFiles.map(file => ({ columns: [{ title: <Item file={file} key={file.name} /> }] }))}
+                  onContextMenu={handleContextMenu}
                 />
             </>
         );