changing location of context-menu

Feature #13694

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 09a327268b76073b3bc92f90db91e4ea9ab8e5d9..ce285fa656622bd04e599598f90c7501574fb1b7 100644 (file)
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -30,6 +30,8 @@ interface DataExplorerProps<T> {
     onFiltersChange: (filters: DataTableFilterItem[], column: DataColumn<T>) => void;
     onChangePage: (page: number) => void;
     onChangeRowsPerPage: (rowsPerPage: number) => void;
+    openContextMenu: (event: React.MouseEvent<HTMLElement>, item: T) => void;
+    closeContextMenu: () => void;
 }
 
 interface DataExplorerState<T> {

diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx
index 099263d9599f44616ccc4301ee349d142352b109..cb2478826816d43d6409d81acc7405fb5d7e039b 100644 (file)
--- a/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@ -17,6 +17,7 @@ import { DataTableFilterItem } from '../../components/data-table-filters/data-ta
 import { ContainerRequestState } from '../../models/container-request';
 import { SortDirection } from '../../components/data-table/data-column';
 import DialogProjectCreate from '../../components/dialog-create/dialog-project-create';
+import { mockAnchorFromMouseEvent } from "../../components/popover/helpers";
 
 export const PROJECT_PANEL_ID = "projectPanel";
 
@@ -24,6 +25,14 @@ export interface ProjectPanelFilter extends DataTableFilterItem {
     type: ResourceKind | ContainerRequestState;
 }
 
+interface DataExplorerState<T> {
+    contextMenu: {
+        anchorEl?: HTMLElement;
+        item?: T;
+    };
+    open?: boolean;
+}
+
 type ProjectPanelProps = {
     currentItemId: string,
     onItemClick: (item: ProjectPanelItem) => void,
@@ -35,11 +44,13 @@ type ProjectPanelProps = {
     & DispatchProp
     & WithStyles<CssRules>
     & RouteComponentProps<{ id: string }>;
-class ProjectPanel extends React.Component<ProjectPanelProps> {
-    state = {
+
+class ProjectPanel extends React.Component<ProjectPanelProps, DataExplorerState<any>> {
+    state: DataExplorerState<any> = {
+        contextMenu: {},
         open: false,
     };
-
+    
     render() {
         return <div>
             <div className={this.props.classes.toolbar}>
@@ -58,7 +69,9 @@ class ProjectPanel extends React.Component<ProjectPanelProps> {
                 id={PROJECT_PANEL_ID}
                 contextActions={contextMenuActions}
                 onRowClick={this.props.onItemClick}
-                onContextAction={this.executeAction} />;
+                onContextAction={this.executeAction}
+                openContextMenu={this.openContextMenu}
+                closeContextMenu={this.closeContextMenu} />;
         </div>;
     }
 
@@ -72,6 +85,21 @@ class ProjectPanel extends React.Component<ProjectPanelProps> {
         alert(`Executing ${action.name} on ${item.name}`);
     }
 
+    openContextMenu = (event: React.MouseEvent<HTMLElement>, item: any) => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.setState({
+            contextMenu: {
+                anchorEl: mockAnchorFromMouseEvent(event),
+                item
+            }
+        });
+    }
+
+    closeContextMenu = () => {
+        this.setState({ contextMenu: {} });
+    }
+
 }
 
 type CssRules = "toolbar" | "button";
@@ -228,6 +256,9 @@ export const columns: DataColumns<ProjectPanelItem, ProjectPanelFilter> = [{
 }];
 
 const contextMenuActions = [[{
+    icon: "fas fa-plus fa-fw",
+    name: "New project"
+}, {
     icon: "fas fa-users fa-fw",
     name: "Share"
 }, {