refactor(ui): Selected job details

pando85 · Jan 26, 2024 · c85b121 · c85b121
1 parent d846870
commit c85b121
Showing 1 changed file with 14 additions and 10 deletions.
diff --git a/server/web/ui/src/JobTable.tsx b/server/web/ui/src/JobTable.tsx
@@ -112,7 +112,7 @@ const renderPath = (isSmallScreen: boolean, path: string) => {
 const JobTable: React.FC<JobTableProps> = ({ token, setShowJobTable }) => {
   const [filteredJobs, setFilteredJobs] = useState<Job[]>([]);
   const [selectedJob, setSelectedJob] = useState<Job | null>(null);
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null); // For menu anchor
+  const [buttonsMenu, setButtonsMenu] = useState<null | HTMLElement>(null); // For menu anchor
   const [nameFilter, setNameFilter] = useState<string>(''); // State for name filter
   const [selectedStatusFilter, setSelectedStatus] = useState<string | string[]>([]);
   const [selectedDateFilter, setSelectedDateFilter] = useState<string>('');
@@ -173,13 +173,17 @@ const JobTable: React.FC<JobTableProps> = ({ token, setShowJobTable }) => {
   };
 
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
+    setButtonsMenu(event.currentTarget);
   };
 
   const handleClose = () => {
-    setAnchorEl(null);
+    setButtonsMenu(null);
   };
 
+  const handleCloseDetailsMenu = () => {
+    setDetailsMenuAnchor(null);
+  }
+
   const handleMenuOptionClick = (job: Job | null, option: string) => {
     if (job !== null) {
       if (['delete', 'recreate'].includes(option)) {
@@ -383,20 +387,20 @@ const JobTable: React.FC<JobTableProps> = ({ token, setShowJobTable }) => {
                   <div className="row-menu">
                     {formatDateShort(job.last_update)}
                     <Button
-                      className="simple-menu"
-                      aria-controls="simple-menu"
+                      className="buttons-menu"
+                      aria-controls="buttons-menu"
                       aria-haspopup="true"
                       onClick={handleClick}
                       size="small"
                     >
                       <MoreVert />
                     </Button>
                     <Menu
-                      id="simple-menu"
-                      className="simple-menu"
-                      anchorEl={anchorEl}
+                      id="buttons-menu"
+                      className="buttons-menu"
+                      anchorEl={buttonsMenu}
                       keepMounted
-                      open={Boolean(anchorEl)}
+                      open={Boolean(buttonsMenu)}
                       onClose={handleClose}
                     >
                       <MenuItem title="Details" onClick={(event) => handleDetailedViewClick(event)}>
@@ -415,7 +419,7 @@ const JobTable: React.FC<JobTableProps> = ({ token, setShowJobTable }) => {
                       anchorEl={detailsMenuAnchor}
                       keepMounted
                       open={Boolean(detailsMenuAnchor)}
-                      onClose={() => setDetailsMenuAnchor(null)}
+                      onClose={handleCloseDetailsMenu}
                     >
                       {selectedJob && [
                         <MenuItem key="job-details">