X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/47e0dc87fa82bac593c53518e556ba7c55410288..ef8fb604ad4a868cae8ed6ad31c1fd1520dd73e0:/src/components/context-menu/context-menu.tsx

diff --git a/src/components/context-menu/context-menu.tsx b/src/components/context-menu/context-menu.tsx
index 2103a2a0..a44e8b7b 100644
--- a/src/components/context-menu/context-menu.tsx
+++ b/src/components/context-menu/context-menu.tsx
@@ -1,14 +1,19 @@
 // Copyright (C) The Arvados Authors. All rights reserved.
 //
 // SPDX-License-Identifier: AGPL-3.0
-import * as React from "react";
+import React from "react";
 import { Popover, List, ListItem, ListItemIcon, ListItemText, Divider } from "@material-ui/core";
 import { DefaultTransformOrigin } from "../popover/helpers";
 import { IconType } from "../icon/icon";
+import { RootState } from "store/store";
+import { ContextMenuResource } from "store/context-menu/context-menu-actions";
 
 export interface ContextMenuItem {
-    name: string;
-    icon: IconType;
+    name?: string | React.ComponentType;
+    icon?: IconType;
+    component?: React.ComponentType<any>;
+    adminOnly?: boolean;
+    filters?: ((state: RootState, resource: ContextMenuResource) => boolean)[]
 }
 
 export type ContextMenuItemGroup = ContextMenuItem[];
@@ -16,36 +21,47 @@ export type ContextMenuItemGroup = ContextMenuItem[];
 export interface ContextMenuProps {
     anchorEl?: HTMLElement;
     items: ContextMenuItemGroup[];
+    open: boolean;
     onItemClick: (action: ContextMenuItem) => void;
     onClose: () => void;
 }
 
 export class ContextMenu extends React.PureComponent<ContextMenuProps> {
     render() {
-        const { anchorEl, items, onClose, onItemClick} = this.props;
+        const { anchorEl, items, open, onClose, onItemClick } = this.props;
         return <Popover
             anchorEl={anchorEl}
-            open={!!anchorEl}
+            open={open}
             onClose={onClose}
             transformOrigin={DefaultTransformOrigin}
             anchorOrigin={DefaultTransformOrigin}
             onContextMenu={this.handleContextMenu}>
-            <List dense>
+            <List data-cy='context-menu' dense>
                 {items.map((group, groupIndex) =>
                     <React.Fragment key={groupIndex}>
                         {group.map((item, actionIndex) =>
-                            <ListItem
-                                button
-                                key={actionIndex}
-                                onClick={() => onItemClick(item)}>
-                                <ListItemIcon>
-                                    <item.icon/>
-                                </ListItemIcon>
-                                <ListItemText>
-                                    {item.name}
-                                </ListItemText>
-                            </ListItem>)}
-                        {groupIndex < items.length - 1 && <Divider />}
+                            item.component
+                                ? <item.component
+                                    key={actionIndex}
+                                    onClick={() => onItemClick(item)} />
+                                : <ListItem
+                                    button
+                                    key={actionIndex}
+                                    onClick={() => onItemClick(item)}>
+                                    {item.icon &&
+                                        <ListItemIcon>
+                                            <item.icon />
+                                        </ListItemIcon>}
+                                    {item.name &&
+                                        <ListItemText>
+                                            {item.name}
+                                        </ListItemText>}
+                                </ListItem>)}
+                        {
+                            items[groupIndex + 1] &&
+                            items[groupIndex + 1].length > 0 &&
+                            <Divider />
+                        }
                     </React.Fragment>)}
             </List>
         </Popover>;