#
# SPDX-License-Identifier: Apache-2.0
+# Use bash, and run all lines in each recipe as one shell command
+SHELL := /bin/bash
+.ONESHELL:
+
APP_NAME?=arvados-workbench2
# GIT_TAG is the last tagged stable release (i.e. 1.2.0)
DEB_FILE=$(APP_NAME)_$(VERSION)-$(ITERATION)_amd64.deb
# redHat package file
-RPM_FILE=$(APP_NAME)_$(VERSION)-$(ITERATION).x86_64.rpm
+RPM_FILE=$(APP_NAME)-$(VERSION)-$(ITERATION).x86_64.rpm
export WORKSPACE?=$(shell pwd)
--description="$(DESCRIPTION)" \
$(WORKSPACE)/build/=$(DEST_DIR)
+copy: $(DEB_FILE) $(RPM_FILE)
+ for target in $(TARGETS); do \
+ if [[ $$target =~ ^centos ]]; then
+ cp -p $(RPM_FILE) packages/$$target ; \
+ else
+ cp -p $(DEB_FILE) packages/$$target ; \
+ fi
+ done
+ rm -f $(RPM_FILE)
+ rm -f $(DEB_FILE)
+
# use FPM to create DEB and RPM
-packages: $(DEB_FILE) $(RPM_FILE)
+packages: copy
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { mount, configure, shallow } from "enzyme";
+import * as Adapter from "enzyme-adapter-react-16";
+import ContextMenu from "./context-menu";
+import { ListItem } from "@material-ui/core";
+
+configure({ adapter: new Adapter() });
+
+describe("<ContextMenu />", () => {
+
+ const item = {
+ name: "",
+ owner: "",
+ lastModified: "",
+ type: ""
+ };
+
+ const actions = [[{
+ icon: "",
+ name: "Action 1.1",
+ onClick: jest.fn()
+ },
+ {
+ icon: "",
+ name: "Action 1.2",
+ onClick: jest.fn()
+ },], [{
+ icon: "",
+ name: "Action 2.1",
+ onClick: jest.fn()
+ }]];
+
+ it("calls provided actions with provided item", () => {
+ const contextMenu = mount(<ContextMenu
+ anchorEl={document.createElement("div")}
+ onClose={jest.fn()}
+ {...{ actions, item }} />);
+
+ contextMenu.find(ListItem).at(0).simulate("click");
+ contextMenu.find(ListItem).at(1).simulate("click");
+ contextMenu.find(ListItem).at(2).simulate("click");
+
+ expect(actions[0][0].onClick).toHaveBeenCalledWith(item);
+ expect(actions[0][1].onClick).toHaveBeenCalledWith(item);
+ expect(actions[1][0].onClick).toHaveBeenCalledWith(item);
+ });
+});
\ No newline at end of file
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+import * as React from "react";
+import { Popover, List, ListItem, ListItemIcon, ListItemText, Divider } from "@material-ui/core";
+import { DefaultTransformOrigin } from "../popover/helpers";
+
+export interface ContextMenuAction<T> {
+ name: string;
+ icon: string;
+ onClick: (item: T) => void;
+}
+
+export type ContextMenuActionGroup<T> = Array<ContextMenuAction<T>>;
+
+export interface ContextMenuProps<T> {
+ anchorEl?: HTMLElement;
+ item?: T;
+ onClose: () => void;
+ actions: Array<ContextMenuActionGroup<T>>;
+}
+
+export default class ContextMenu<T> extends React.PureComponent<ContextMenuProps<T>> {
+ render() {
+ const { anchorEl, onClose, actions, item } = this.props;
+ return <Popover
+ anchorEl={anchorEl}
+ open={Boolean(anchorEl)}
+ onClose={onClose}
+ transformOrigin={DefaultTransformOrigin}
+ anchorOrigin={DefaultTransformOrigin}>
+ <List dense>
+ {actions.map((group, groupIndex) =>
+ <React.Fragment key={groupIndex}>
+ {group.map((action, actionIndex) =>
+ <ListItem
+ button
+ key={actionIndex}
+ onClick={() => item && action.onClick(item)}>
+ <ListItemIcon>
+ <i className={action.icon} />
+ </ListItemIcon>
+ <ListItemText>
+ {action.name}
+ </ListItemText>
+ </ListItem>)}
+ {groupIndex < actions.length - 1 && <Divider />}
+ </React.Fragment>)}
+ </List>
+ </Popover>;
+ }
+}
export interface DataTableProps<T> {
items: T[];
columns: DataColumns<T>;
- onItemClick?: (item: T) => void;
+ onRowClick?: (event: React.MouseEvent<HTMLTableRowElement>, item: T) => void;
+ onRowContextMenu?: (event: React.MouseEvent<HTMLTableRowElement>, item: T) => void;
}
class DataTable<T> extends React.Component<DataTableProps<T> & WithStyles<CssRules>> {
render() {
- const { items, columns, classes, onItemClick } = this.props;
+ const { items, columns, classes, onRowClick, onRowContextMenu } = this.props;
return <div className={classes.tableContainer}>
{items.length > 0 ?
<Table>
<TableRow
hover
key={index}
- onClick={() => onItemClick && onItemClick(item)}>
+ onClick={event => onRowClick && onRowClick(event, item)}
+ onContextMenu={event => onRowContextMenu && onRowContextMenu(event, item)}>
{columns
.filter(column => column.selected)
.map((column, index) => (
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { PopoverOrigin } from "@material-ui/core/Popover";
+
+export const mockAnchorFromMouseEvent = (event: React.MouseEvent<HTMLElement>) => {
+ const el = document.createElement('div');
+ const clientRect = {
+ left: event.clientX,
+ right: event.clientX,
+ top: event.clientY,
+ bottom: event.clientY,
+ width: 0,
+ height: 0
+ };
+ el.getBoundingClientRect = () => clientRect;
+ return el;
+};
+
+export const DefaultTransformOrigin: PopoverOrigin = {
+ vertical: "top",
+ horizontal: "right",
+};
\ No newline at end of file
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { Typography, Grid, ListItem, Divider, List, ListItemIcon, ListItemText, Paper, Toolbar } from '@material-ui/core';
-import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
+import { Typography, Grid, Paper, Toolbar } from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton';
import MoreVertIcon from "@material-ui/icons/MoreVert";
-import Popover from '../../components/popover/popover';
import { formatFileSize, formatDate } from '../../common/formatters';
import { DataItem } from './data-item';
-import { DataColumns, DataTableProps } from "../../components/data-table/data-table";
-import { DataColumn } from "../../components/data-table/data-column";
+import { DataColumns } from "../../components/data-table/data-table";
+import ContextMenu from "../../components/context-menu/context-menu";
import ColumnSelector from "../../components/column-selector/column-selector";
import DataTable from "../../components/data-table/data-table";
+import { mockAnchorFromMouseEvent } from "../../components/popover/helpers";
+import { DataColumn } from "../../components/data-table/data-column";
+export interface DataExplorerContextActions {
+ onAddToFavourite: (dataIitem: DataItem) => void;
+ onCopy: (dataIitem: DataItem) => void;
+ onDownload: (dataIitem: DataItem) => void;
+ onMoveTo: (dataIitem: DataItem) => void;
+ onRemove: (dataIitem: DataItem) => void;
+ onRename: (dataIitem: DataItem) => void;
+ onShare: (dataIitem: DataItem) => void;
+}
interface DataExplorerProps {
items: DataItem[];
onItemClick: (item: DataItem) => void;
+ contextActions: DataExplorerContextActions;
}
interface DataExplorerState {
columns: DataColumns<DataItem>;
+ contextMenu: {
+ anchorEl?: HTMLElement;
+ item?: DataItem;
+ };
}
class DataExplorer extends React.Component<DataExplorerProps, DataExplorerState> {
state: DataExplorerState = {
- columns: [
- {
- name: "Name",
- selected: true,
- render: item => this.renderName(item)
- },
- {
- name: "Status",
- selected: true,
- render: item => renderStatus(item.status)
- },
- {
- name: "Type",
- selected: true,
- render: item => renderType(item.type)
- },
- {
- name: "Owner",
- selected: true,
- render: item => renderOwner(item.owner)
- },
- {
- name: "File size",
- selected: true,
- render: (item) => renderFileSize(item.fileSize)
- },
- {
- name: "Last modified",
- selected: true,
- render: item => renderDate(item.lastModified)
- },
- {
- name: "Actions",
- selected: true,
- configurable: false,
- renderHeader: () => null,
- render: renderItemActions
- }
- ]
+ contextMenu: {},
+ columns: [{
+ name: "Name",
+ selected: true,
+ render: item => this.renderName(item)
+ }, {
+ name: "Status",
+ selected: true,
+ render: item => renderStatus(item.status)
+ }, {
+ name: "Type",
+ selected: true,
+ render: item => renderType(item.type)
+ }, {
+ name: "Owner",
+ selected: true,
+ render: item => renderOwner(item.owner)
+ }, {
+ name: "File size",
+ selected: true,
+ render: item => renderFileSize(item.fileSize)
+ }, {
+ name: "Last modified",
+ selected: true,
+ render: item => renderDate(item.lastModified)
+ }, {
+ name: "Actions",
+ selected: true,
+ configurable: false,
+ renderHeader: () => null,
+ render: item => this.renderActions(item)
+ }]
};
+ contextMenuActions = [[{
+ icon: "fas fa-users fa-fw",
+ name: "Share",
+ onClick: this.handleContextAction("onShare")
+ }, {
+ icon: "fas fa-sign-out-alt fa-fw",
+ name: "Move to",
+ onClick: this.handleContextAction("onMoveTo")
+ }, {
+ icon: "fas fa-star fa-fw",
+ name: "Add to favourite",
+ onClick: this.handleContextAction("onAddToFavourite")
+ }, {
+ icon: "fas fa-edit fa-fw",
+ name: "Rename",
+ onClick: this.handleContextAction("onRename")
+ }, {
+ icon: "fas fa-copy fa-fw",
+ name: "Make a copy",
+ onClick: this.handleContextAction("onCopy")
+ }, {
+ icon: "fas fa-download fa-fw",
+ name: "Download",
+ onClick: this.handleContextAction("onDownload")
+ }], [{
+ icon: "fas fa-trash-alt fa-fw",
+ name: "Remove",
+ onClick: this.handleContextAction("onRemove")
+ }
+ ]];
+
render() {
return <Paper>
+ <ContextMenu
+ {...this.state.contextMenu}
+ actions={this.contextMenuActions}
+ onClose={this.closeContextMenu} />
<Toolbar>
<Grid container justify="flex-end">
<ColumnSelector
</Toolbar>
<DataTable
columns={this.state.columns}
- items={this.props.items} />
+ items={this.props.items}
+ onRowContextMenu={this.openItemMenuOnRowClick} />
<Toolbar />
</Paper>;
}
</Grid>
</Grid>
+ renderActions = (item: DataItem) =>
+ <Grid container justify="flex-end">
+ <IconButton onClick={event => this.openItemMenuOnActionsClick(event, item)}>
+ <MoreVertIcon />
+ </IconButton>
+ </Grid>
+
+ openItemMenuOnRowClick = (event: React.MouseEvent<HTMLElement>, item: DataItem) => {
+ event.preventDefault();
+ this.setState({
+ contextMenu: {
+ anchorEl: mockAnchorFromMouseEvent(event),
+ item
+ }
+ });
+ }
+
+ openItemMenuOnActionsClick = (event: React.MouseEvent<HTMLElement>, item: DataItem) => {
+ this.setState({
+ contextMenu: {
+ anchorEl: event.currentTarget,
+ item
+ }
+ });
+ }
+
+ closeContextMenu = () => {
+ this.setState({ contextMenu: {} });
+ }
+
+ handleContextAction(action: keyof DataExplorerContextActions) {
+ return (item: DataItem) => {
+ this.closeContextMenu();
+ this.props.contextActions[action](item);
+ };
+ }
+
}
const renderIcon = (dataItem: DataItem) => {
{status || "-"}
</Typography>;
-const renderItemActions = () =>
- <Grid container justify="flex-end">
- <Popover triggerComponent={ItemActionsTrigger}>
- <List dense>
- {[{
- icon: "fas fa-users",
- label: "Share"
- },
- {
- icon: "fas fa-sign-out-alt",
- label: "Move to"
- },
- {
- icon: "fas fa-star",
- label: "Add to favourite"
- },
- {
- icon: "fas fa-edit",
- label: "Rename"
- },
- {
- icon: "fas fa-copy",
- label: "Make a copy"
- },
- {
- icon: "fas fa-download",
- label: "Download"
- }].map(renderAction)}
- < Divider />
- {renderAction({ icon: "fas fa-trash-alt", label: "Remove" })}
- </List>
- </Popover>
- </Grid>;
-
-const renderAction = (action: { label: string, icon: string }, index?: number) =>
- <ListItem button key={index}>
- <ListItemIcon>
- <i className={action.icon} />
- </ListItemIcon>
- <ListItemText>
- {action.label}
- </ListItemText>
- </ListItem>;
-
-const ItemActionsTrigger: React.SFC<IconButtonProps> = (props) =>
- <IconButton {...props}>
- <MoreVertIcon />
- </IconButton>;
-
export default DataExplorer;
import { push } from 'react-router-redux';
import projectActions from "../../store/project/project-action";
import { DataColumns } from "../../components/data-table/data-table";
-import { DataItem } from "../../views-components/data-explorer/data-item";
-import DataExplorer from "../../views-components/data-explorer/data-explorer";
+import DataExplorer, { DataExplorerContextActions } from "../../views-components/data-explorer/data-explorer";
import { mapProjectTreeItem } from "./data-explorer-selectors";
+import { DataItem } from "../../views-components/data-explorer/data-item";
interface DataExplorerViewDataProps {
projects: ProjectState;
<DataExplorer
items={projectItems.map(mapProjectTreeItem)}
onItemClick={this.goToProject}
+ contextActions={this.contextActions}
/>
);
}
+ contextActions: DataExplorerContextActions = {
+ onAddToFavourite: console.log,
+ onCopy: console.log,
+ onDownload: console.log,
+ onMoveTo: console.log,
+ onRemove: console.log,
+ onRename: console.log,
+ onShare: console.log
+ };
+
goToProject = (item: DataItem) => {
- this.props.dispatch(push(`/project/${item.uuid}`));
+ this.props.dispatch(push(`/project/${item}`));
this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(item.uuid));
}
}
import DataExplorer from '../data-explorer/data-explorer';
const drawerWidth = 240;
+const appBarHeight = 102;
-type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'toolbar';
+type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'contentWrapper' | 'toolbar';
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
root: {
position: 'relative',
width: drawerWidth,
},
- content: {
- flexGrow: 1,
+ contentWrapper: {
backgroundColor: theme.palette.background.default,
- padding: theme.spacing.unit * 3,
- height: '100%',
+ display: "flex",
+ flexGrow: 1,
minWidth: 0,
+ paddingTop: appBarHeight
+ },
+ content: {
+ padding: theme.spacing.unit * 3,
+ overflowY: "auto",
+ flexGrow: 1
},
toolbar: theme.mixins.toolbar
});
projects={this.props.projects}
toggleProjectTreeItem={this.toggleProjectTreeItem} />
</Drawer>}
- <main className={classes.content}>
- <div className={classes.toolbar} />
- <div className={classes.toolbar} />
- <Switch>
- <Route path="/project/:name" component={DataExplorer} />
- </Switch>
+ <main className={classes.contentWrapper}>
+ <div className={classes.content}>
+ <Switch>
+ <Route path="/project/:name" component={DataExplorer} />
+ </Switch>
+ </div>
</main>
</div>
);
projects / arvados-workbench2.git / commitdiff