MWB-906: update table actions

mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js

@@ -1,17 +1,16 @@
 import {Button} from '@mui/material';
 
-
 import {usePopover} from 'src/hooks/use-popover';
 import {useCallback, useState} from "react";
 import {paths} from 'src/paths';
-import {useRouter} from "../../../hooks/use-router";
+import {useRouter} from "next/router";
+import {MenuActionButton} from '../../menu-actions';
 import ConfirmDialog from "../dialog/confirm-dialog";
 
 export const ListFileCollectionActions = (props) => {
     const router = useRouter();
 
     const {itemctx} = props;
-    const popover = usePopover();
 
     const handleResourceManagerAction = useCallback(async () => {
         router.push({
@@ -48,116 +47,30 @@ export const ListFileCollectionActions = (props) => {
 
     return (
         <>
-            <div
-                className='newActionButtons'
-                sx={{display: "flex", flexDirection: "inline", justifyContent: "space-evenly"}}
-            >
-                {/*<Button
-                    variant="text"
-                    size="small"
-                    color="secondary"
-                    onClick={handleViewAction}
-                >
-                View
-                </Button>*/}
-                <Button
-                    id="resources_button"
-                    variant="text"
-                    size="small"
-                    color="info"
-                    onClick={handleResourceManagerAction}
-                >
-                    Resources
-                </Button>
-                <Button
-                    id="edit_button"
-                    variant="text"
-                    size="small"
-                    color="success"
-                    onClick={handleEditAction}
-                >
-                    Edit
-                </Button>
-                <Button
-                    id="delete_button"
-                    variant="text"
-                    size="small"
-                    color="error"
-                    onClick={() => setConfirmOpen(true)}
-                >
-                    Delete
-                </Button>
-                <ConfirmDialog
-                    title="Delete It?"
-                    open={confirmOpen}
-                    setOpen={setConfirmOpen}
-                    onConfirm={handleDeleteAction}
-                >
-                    Are you sure you want to delete it?
-                </ConfirmDialog>
-            </div>
-            {/* <Tooltip title="More options">
-                <IconButton
-                    onClick={popover.handleOpen}
-                    ref={popover.anchorRef}
-                    {...props}>
-                    <SvgIcon>
-                        <DotsHorizontalIcon/>
-                    </SvgIcon>
-                </IconButton>
-            </Tooltip>
-            <Menu
-                anchorEl={popover.anchorRef.current}
-                anchorOrigin={{
-                    horizontal: 'right',
-                    vertical: 'bottom'
-                }}
-                onClose={popover.handleClose}
-                open={popover.open}
-                PaperProps={{
-                    sx: {
-                        maxWidth: '100%',
-                        width: 200
-                    }
-                }}
-                transformOrigin={{
-                    horizontal: 'right',
-                    vertical: 'top'
-                }}
+            <MenuActionButton
+                id="resources_button"
+                action={handleResourceManagerAction}
+                text='Resources'
+            />
+            <MenuActionButton
+                id="edit_button"
+                action={handleEditAction}
+                text='Edit'
+            />
+            <MenuActionButton
+                id="delete_button"
+                action={() => setConfirmOpen(true)}
+                text='Delete'
+            />
+            <ConfirmDialog
+                title="Delete It?"
+                open={confirmOpen}
+                setOpen={setConfirmOpen}
+                onConfirm={handleDeleteAction}
+                last
             >
-                <MenuItem onClick={handleResourceManagerAction}>
-                    <ListItemIcon>
-                        <SvgIcon>
-                            <FileAttachment04/>
-                        </SvgIcon>
-                    </ListItemIcon>
-                    <ListItemText primary="File Manager"/>
-                </MenuItem>
-                <MenuItem onClick={handleViewAction}>
-                    <ListItemIcon>
-                        <SvgIcon>
-                            <Eye/>
-                        </SvgIcon>
-                    </ListItemIcon>
-                    <ListItemText primary="View"/>
-                </MenuItem>
-                <MenuItem onClick={handleEditAction}>
-                    <ListItemIcon>
-                        <SvgIcon>
-                            <EditIcon/>
-                        </SvgIcon>
-                    </ListItemIcon>
-                    <ListItemText primary="Edit"/>
-                </MenuItem>
-                <MenuItem onClick={handleDeleteAction}>
-                    <ListItemIcon>
-                        <SvgIcon>
-                            <DeleteIcon/>
-                        </SvgIcon>
-                    </ListItemIcon>
-                    <ListItemText primary="Delete"/>
-                </MenuItem>
-            </Menu> */}
+                Are you sure you want to delete it?
+            </ConfirmDialog>
         </>
     );
 };

mapping_workbench/frontend/src/components/app/list/list-item-actions.js

@@ -6,23 +6,16 @@ import VisibilityIcon from '@mui/icons-material/Visibility';
 import BorderColorIcon from '@mui/icons-material/BorderColor';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 
-import {useTheme} from '@mui/material/styles';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 
 import {paths} from 'src/paths';
 import {ACTION} from "../../../api/section";
-import {MenuActionButton} from '../../menu-action-button';
+import {MenuActionButton} from '../../menu-actions';
+
 import ConfirmDialog from "../dialog/confirm-dialog";
 import {toastError} from "../../app-toast";
 
 export const ListItemActions = (props) => {
     const router = useRouter();
-    const theme = useTheme()
-
-    console.log(theme)
-
     const {itemctx, pathnames, onDeleteAction, confirmDialogContent, confirmDialogFooter} = props;
 
     const handleViewAction = () => {
@@ -81,7 +74,7 @@ export const ListItemActions = (props) => {
                     id="delete_button"
                     last
                     action={() => setConfirmOpen(true)}
-                    icon={<DeleteOutlineIcon color='primary'/>}
+                    icon={<DeleteOutlineIcon/>}
                     text='Delete'
                 />
                 <ConfirmDialog

mapping_workbench/frontend/src/components/menu-action-button.js → mapping_workbench/frontend/src/components/menu-actions.js

@@ -1,10 +1,28 @@
-import {cloneElement} from 'react';
+import {cloneElement, useState} from 'react';
 
-import {useTheme} from '@mui/material/styles';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+
+import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import {useTheme} from '@mui/material/styles';
+import IconButton from '@mui/material/IconButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 
+export const MenuActions = ({children}) => {
+    const [anchor, setAnchor] = useState(null)
+    return <>
+        <IconButton onClick={e => setAnchor(e.target)}>
+            <MoreHorizIcon/>
+        </IconButton>
+        <Menu anchorEl={anchor}
+              open={!!anchor}
+              onClose={() => setAnchor(null)}>
+            {children}
+        </Menu>
+    </>
+}
+
 export const MenuActionButton = ({id, icon, text, action, last}) => {
     const theme = useTheme()
     return <MenuItem id={id}

mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/overview/index.js

@@ -34,8 +34,8 @@ import {TableSearchBar} from 'src/sections/components/table-search-bar';
 import {toastError, toastLoad, toastSuccess} from 'src/components/app-toast';
 import {ListTable} from "src/sections/app/conceptual-mapping-rule/list-table";
 import {conceptualMappingRulesApi as sectionApi} from 'src/api/conceptual-mapping-rules';
+import {ConceptualMappingTabs} from 'src/sections/app/conceptual-mapping-rule/conceptual-mapping-tabs';
 import {MappingPackageFormSelect} from 'src/sections/app/mapping-package/components/mapping-package-form-select';
-import {ConceptualMappingTabs} from '../../../../sections/app/conceptual-mapping-rule/conceptual-mapping-tabs';
 
 const FILTER_VALUES = [{label: 'All', value: ''},
     {label: 'Valid', value: 'valid'},

mapping_workbench/frontend/src/pages/app/triple-map-fragments/index.js

@@ -1,10 +1,10 @@
-import Paper from '@mui/material/Paper';
 import {useFormik} from "formik";
 import * as Yup from "yup";
 
 import AddIcon from '@mui/icons-material/Add';
 import UploadIcon from '@mui/icons-material/Upload';
 
+import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 

mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js

@@ -1,3 +1,5 @@
+import BorderColorIcon from '@mui/icons-material/BorderColor';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import {useState} from "react";
 import {Prism as SyntaxHighlighter} from "react-syntax-highlighter";
 
@@ -21,6 +23,7 @@ import {useHighlighterTheme} from "src/hooks/use-highlighter-theme";
 import ConfirmDialog from "src/components/app/dialog/confirm-dialog";
 import TablePagination from "src/sections/components/table-pagination";
 import TableSorterHeader from "src/sections/components/table-sorter-header";
+import {MenuActionButton, MenuActions} from '../../../../components/menu-actions';
 
 export const ListTableRow = (props) => {
     const {
@@ -76,25 +79,18 @@ export const ListTableRow = (props) => {
                     {item.target_property_path}
                 </TableCell>
                 <TableCell align="right">
-                    <Button
-                        id="edit_button"
-                        variant="text"
-                        size="small"
-                        color="primary"
-                        onClick={() => onEdit(item)}
-                    >
-                        Edit
-                    </Button>
-                    <Button
-                        id="delete_button"
-                        variant="text"
-                        size="small"
-                        color="error"
-                        onClick={() => setConfirmOpen(true)}
-                        sx={{whiteSpace: "nowrap"}}
-                    >
-                        Delete
-                    </Button>
+                    <MenuActions>
+                        <MenuActionButton
+                            id="edit_button"
+                            text='Edit'
+                            icon={<BorderColorIcon/>}
+                            action={() => onEdit(item)}/>
+                        <MenuActionButton
+                            id="delete_button"
+                            icon={<DeleteOutlineIcon/>}
+                            action={() => setConfirmOpen(true)}
+                            text='Delete'/>
+                    </MenuActions>
                     <ConfirmDialog
                         title="Delete It?"
                         open={confirmOpen}

mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/list-table.js

@@ -46,13 +46,16 @@ import {sessionApi} from "src/api/session";
 import {useDialog} from "src/hooks/use-dialog";
 import {Scrollbar} from 'src/components/scrollbar';
 import {toastSuccess} from "src/components/app-toast";
+import {MenuActions} from 'src/components/menu-actions';
 import {PropertyList} from 'src/components/property-list';
 import {mappingPackagesApi} from "src/api/mapping-packages";
 import {PropertyListItem} from 'src/components/property-list-item';
 import {useHighlighterTheme} from "src/hooks/use-highlighter-theme";
+import {ChevronButton} from 'src/sections/components/chevron-button';
 import {FormCodeTextArea} from "src/components/app/form/code-text-area";
 import TablePagination from "src/sections/components/table-pagination";
 import {ListItemActions} from 'src/components/app/list/list-item-actions';
+import TableSorterHeader from 'src/sections/components/table-sorter-header';
 import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action';
 import {genericTripleMapFragmentsApi} from "src/api/triple-map-fragments/generic";
 import {sparqlTestFileResourcesApi} from "src/api/sparql-test-suites/file-resources";
@@ -61,8 +64,6 @@ import {ListSelectorSelect as ResourceListSelector} from "src/components/app/lis
 import {
     MappingPackageCheckboxList
 } from 'src/sections/app/mapping-package/components/mapping-package-real-checkbox-list';
-import {ChevronButton} from '../../components/chevron-button';
-import TableSorterHeader from '../../components/table-sorter-header';
 
 
 export const ListTableTripleMapFragment = (props) => {
@@ -810,12 +811,14 @@ export const ListTableRow = (props) => {
                 </TableCell>
 
                 <TableCell align="right">
-                    <ListItemActions
-                        itemctx={new ForListItemAction(item_id, sectionApi)}
-                        pathnames={{
-                            delete_after_path: () => paths.app.conceptual_mapping_rules.overview
-                        }}
-                    />
+                    <MenuActions>
+                        <ListItemActions
+                            itemctx={new ForListItemAction(item_id, sectionApi)}
+                            pathnames={{
+                                delete_after_path: () => paths.app.conceptual_mapping_rules.overview
+                            }}
+                        />
+                    </MenuActions>
                 </TableCell>
             </TableRow>
             {isCurrent && (<TableRow>
@@ -1029,9 +1032,7 @@ export const ListTable = (props) => {
                                            sx={{
                                                whiteSpace: "nowrap"
                                            }}
-                                >
-                                    Actions
-                                </TableCell>
+                                />
                             </TableRow>
                         </TableHead>
                         <TableBody>