"@types/react-copy-to-clipboard": "4.2.6",
"@types/react-dropzone": "4.2.2",
"@types/redux-form": "7.4.5",
+ "@types/shell-quote": "1.6.0",
"axios": "0.18.0",
"classnames": "2.2.6",
"lodash": "4.17.10",
"react-transition-group": "2.4.0",
"redux": "4.0.0",
"redux-thunk": "2.3.0",
+ "shell-quote": "1.6.1",
"unionize": "2.1.2",
"uuid": "3.3.2"
},
+++ /dev/null
-.dropzone-border-left {
- left: -1px;
- top: -1px;
- bottom: -1px;
- width: 2px;
- content: "";
- position: absolute;
- transform: scaleY(0);
- transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
- pointer-events: none;
- background-color: #6a1b9a;
-}
-
-.dropzone-border-right {
- right: -1px;
- top: -1px;
- bottom: -1px;
- width: 2px;
- content: "";
- position: absolute;
- transform: scaleY(0);
- transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
- pointer-events: none;
- background-color: #6a1b9a;
-}
-
-.dropzone-border-top {
- left: 0;
- right: 0;
- top: -1px;
- height: 2px;
- content: "";
- position: absolute;
- transform: scaleX(0);
- transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
- pointer-events: none;
- background-color: #6a1b9a;
-}
-
-.dropzone-border-bottom {
- left: 0;
- right: 0;
- bottom: -1px;
- height: 2px;
- content: "";
- position: absolute;
- transform: scaleX(0);
- transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
- pointer-events: none;
- background-color: #6a1b9a;
-}
-
-.dropzone-border-left-active {
- transform: scaleY(1);
-}
-
-.dropzone-border-right-active {
- transform: scaleY(1);
-}
-
-.dropzone-border-top-active {
- transform: scaleX(1);
-}
-
-.dropzone-border-bottom-active {
- transform: scaleX(1);
-}
import { formatFileSize, formatProgress, formatUploadSpeed } from "~/common/formatters";
import { UploadFile } from '~/store/file-uploader/file-uploader-actions';
-type CssRules = "root" | "dropzone" | "dropzoneWrapper" | "container" | "uploadIcon";
-
-import './file-upload.css';
-import { DOMElement, RefObject } from "react";
+type CssRules = "root" | "dropzone" | "dropzoneWrapper" | "container" | "uploadIcon"
+ | "dropzoneBorder" | "dropzoneBorderLeft" | "dropzoneBorderRight" | "dropzoneBorderTop" | "dropzoneBorderBottom"
+ | "dropzoneBorderHorzActive" | "dropzoneBorderVertActive";
const styles: StyleRulesCallback<CssRules> = theme => ({
root: {
position: "relative",
border: "1px solid rgba(0, 0, 0, 0.42)"
},
+ dropzoneBorder: {
+ content: "",
+ position: "absolute",
+ transition: "transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms",
+ pointerEvents: "none",
+ backgroundColor: "#6a1b9a"
+ },
+ dropzoneBorderLeft: {
+ left: -1,
+ top: -1,
+ bottom: -1,
+ width: 2,
+ transform: "scaleY(0)",
+ },
+ dropzoneBorderRight: {
+ right: -1,
+ top: -1,
+ bottom: -1,
+ width: 2,
+ transform: "scaleY(0)",
+ },
+ dropzoneBorderTop: {
+ left: 0,
+ right: 0,
+ top: -1,
+ height: 2,
+ transform: "scaleX(0)",
+ },
+ dropzoneBorderBottom: {
+ left: 0,
+ right: 0,
+ bottom: -1,
+ height: 2,
+ transform: "scaleX(0)",
+ },
+ dropzoneBorderHorzActive: {
+ transform: "scaleY(1)"
+ },
+ dropzoneBorderVertActive: {
+ transform: "scaleX(1)"
+ },
container: {
height: "100%"
},
render() {
const { classes, onDrop, disabled, files } = this.props;
return <div className={"file-upload-dropzone " + classes.dropzoneWrapper}>
- <div className={classnames("dropzone-border-left", { "dropzone-border-left-active": this.state.focused })}/>
- <div className={classnames("dropzone-border-right", { "dropzone-border-right-active": this.state.focused })}/>
- <div className={classnames("dropzone-border-top", { "dropzone-border-top-active": this.state.focused })}/>
- <div className={classnames("dropzone-border-bottom", { "dropzone-border-bottom-active": this.state.focused })}/>
+ <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderLeft, { [classes.dropzoneBorderHorzActive]: this.state.focused })}/>
+ <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderRight, { [classes.dropzoneBorderHorzActive]: this.state.focused })}/>
+ <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderTop, { [classes.dropzoneBorderVertActive]: this.state.focused })}/>
+ <div className={classnames(classes.dropzoneBorder, classes.dropzoneBorderBottom, { [classes.dropzoneBorderVertActive]: this.state.focused })}/>
<Dropzone className={classes.dropzone}
onDrop={files => onDrop(files)}
- onClick={(e) => {
+ onClick={() => {
const el = document.getElementsByClassName("file-upload-dropzone")[0];
const inputs = el.getElementsByTagName("input");
if (inputs.length > 0) {
import { createTree } from "~/models/tree";
import { RootState } from "../store";
import { ServiceRepository } from "~/services/services";
-import { TagResource, TagProperty } from "~/models/tag";
+import { TagProperty } from "~/models/tag";
import { snackbarActions } from "../snackbar/snackbar-actions";
import { resourcesActions } from "~/store/resources/resources-actions";
import { unionize, ofType, UnionOf } from '~/common/unionize';
export const collectionPanelActions = unionize({
LOAD_COLLECTION: ofType<{ uuid: string }>(),
- LOAD_COLLECTION_SUCCESS: ofType<{ item: CollectionResource }>(),
- LOAD_COLLECTION_TAGS: ofType<{ uuid: string }>(),
- LOAD_COLLECTION_TAGS_SUCCESS: ofType<{ tags: TagResource[] }>(),
- CREATE_COLLECTION_TAG: ofType<{ data: any }>(),
- CREATE_COLLECTION_TAG_SUCCESS: ofType<{ tag: TagResource }>(),
- DELETE_COLLECTION_TAG: ofType<{ uuid: string }>(),
- DELETE_COLLECTION_TAG_SUCCESS: ofType<{ uuid: string }>()
+ LOAD_COLLECTION_SUCCESS: ofType<{ item: CollectionResource }>()
});
export type CollectionPanelAction = UnionOf<typeof collectionPanelActions>;
dispatch(collectionPanelActions.LOAD_COLLECTION_SUCCESS({ item: collection }));
dispatch(resourcesActions.SET_RESOURCES([collection]));
dispatch<any>(loadCollectionFiles(collection.uuid));
- dispatch<any>(loadCollectionTags(collection.uuid));
return collection;
};
-export const loadCollectionTags = (uuid: string) =>
- (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
- dispatch(collectionPanelActions.LOAD_COLLECTION_TAGS({ uuid }));
- return services.tagService
- .list(uuid)
- .then(tags => {
- dispatch(collectionPanelActions.LOAD_COLLECTION_TAGS_SUCCESS({ tags }));
- });
- };
-
-export const createCollectionTag = (data: TagProperty) =>
- (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
- dispatch(collectionPanelActions.CREATE_COLLECTION_TAG({ data }));
+export const createCollectionTag = (data: TagProperty) =>
+ async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
const item = getState().collectionPanel.item;
const uuid = item ? item.uuid : '';
- return services.tagService
- .create(uuid, data)
- .then(tag => {
- dispatch(collectionPanelActions.CREATE_COLLECTION_TAG_SUCCESS({ tag }));
- dispatch(snackbarActions.OPEN_SNACKBAR({
- message: "Tag has been successfully added.",
- hideDuration: 2000
- }));
- });
+ try {
+ if (item) {
+ item.properties[data.key] = data.value;
+ const updatedCollection = await services.collectionService.update(uuid, item);
+ dispatch(resourcesActions.SET_RESOURCES([updatedCollection]));
+ dispatch(snackbarActions.OPEN_SNACKBAR({ message: "Tag has been successfully added.", hideDuration: 2000 }));
+ return updatedCollection;
+ }
+ return;
+ } catch (e) {
+ return;
+ }
};
-export const deleteCollectionTag = (uuid: string) =>
- (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
- dispatch(collectionPanelActions.DELETE_COLLECTION_TAG({ uuid }));
- return services.linkService
- .delete(uuid)
- .then(tag => {
- dispatch(collectionPanelActions.DELETE_COLLECTION_TAG_SUCCESS({ uuid: tag.uuid }));
- dispatch(snackbarActions.OPEN_SNACKBAR({
- message: "Tag has been successfully deleted.",
- hideDuration: 2000
- }));
- });
+export const deleteCollectionTag = (key: string) =>
+ async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+ const item = getState().collectionPanel.item;
+ const uuid = item ? item.uuid : '';
+ try {
+ if (item) {
+ delete item.properties[key];
+ const updatedCollection = await services.collectionService.update(uuid, item);
+ dispatch(resourcesActions.SET_RESOURCES([updatedCollection]));
+ dispatch(snackbarActions.OPEN_SNACKBAR({ message: "Tag has been successfully deleted.", hideDuration: 2000 }));
+ return updatedCollection;
+ }
+ return;
+ } catch (e) {
+ return;
+ }
};
import { collectionPanelActions, CollectionPanelAction } from "./collection-panel-action";
import { CollectionResource } from "~/models/collection";
-import { TagResource } from "~/models/tag";
export interface CollectionPanelState {
item: CollectionResource | null;
- tags: TagResource[];
}
const initialState = {
- item: null,
- tags: []
+ item: null
};
export const collectionPanelReducer = (state: CollectionPanelState = initialState, action: CollectionPanelAction) =>
collectionPanelActions.match(action, {
default: () => state,
LOAD_COLLECTION_SUCCESS: ({ item }) => ({ ...state, item }),
- LOAD_COLLECTION_TAGS_SUCCESS: ({ tags }) => ({...state, tags }),
- CREATE_COLLECTION_TAG_SUCCESS: ({ tag }) => ({...state, tags: [...state.tags, tag] }),
- DELETE_COLLECTION_TAG_SUCCESS: ({ uuid }) => ({...state, tags: state.tags.filter(tag => tag.uuid !== uuid) })
});
import { RootState } from '../store';
import { Dispatch } from 'redux';
import { getProcess } from '~/store/processes/process';
+import { quote } from 'shell-quote';
export const PROCESS_COMMAND_DIALOG_NAME = 'processCommandDialog';
const process = getProcess(processUuid)(getState().resources);
if (process) {
const data: ProcessCommandDialogData = {
- command: process.containerRequest.command.join(' '),
+ command: quote(process.containerRequest.command),
processName: process.containerRequest.name,
};
dispatch(dialogActions.OPEN_DIALOG({ id: PROCESS_COMMAND_DIALOG_NAME, data }));
// SPDX-License-Identifier: AGPL-3.0
import * as React from "react";
-import { Dialog, DialogTitle, DialogActions, Button, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
+import { Dialog, DialogTitle, DialogActions, Button, StyleRulesCallback, WithStyles, withStyles, Tooltip, IconButton, Grid, CardHeader } from '@material-ui/core';
import { withDialog } from "~/store/dialog/with-dialog";
import { PROCESS_COMMAND_DIALOG_NAME } from '~/store/processes/process-command-actions';
import { WithDialogProps } from '~/store/dialog/with-dialog';
import { ProcessCommandDialogData } from '~/store/processes/process-command-actions';
import { DefaultCodeSnippet } from "~/components/default-code-snippet/default-code-snippet";
import { compose } from 'redux';
+import * as CopyToClipboard from "react-copy-to-clipboard";
+import { CopyIcon } from '~/components/icon/icon';
-type CssRules = 'codeSnippet';
+type CssRules = 'codeSnippet' | 'copyToClipboard';
const styles: StyleRulesCallback<CssRules> = theme => ({
codeSnippet: {
marginLeft: theme.spacing.unit * 3,
marginRight: theme.spacing.unit * 3,
+ },
+ copyToClipboard: {
+ marginRight: theme.spacing.unit,
}
});
maxWidth="md"
onClose={props.closeDialog}
style={{ alignSelf: 'stretch' }}>
- <DialogTitle>{`Command - ${props.data.processName}`}</DialogTitle>
+ <CardHeader
+ title={`Command - ${props.data.processName}`}
+ action={
+ <Tooltip title="Copy to clipboard">
+ <CopyToClipboard text={props.data.command}>
+ <IconButton className={props.classes.copyToClipboard}>
+ <CopyIcon />
+ </IconButton>
+ </CopyToClipboard>
+ </Tooltip>
+ } />
<DefaultCodeSnippet
className={props.classes.codeSnippet}
lines={[props.data.command]} />
+++ /dev/null
-// // Copyright (C) The Arvados Authors. All rights reserved.
-// //
-// // SPDX-License-Identifier: AGPL-3.0
-//
-// import * as React from 'react';
-// import { CircularProgress } from '@material-ui/core';
-// import { withProgress } from '~/store/progress-indicator/with-progress';
-// import { WithProgressStateProps } from '~/store/progress-indicator/with-progress';
-// import { ProgressIndicatorData } from '~/store/progress-indicator/progress-indicator-reducer';
-//
-// export const ContentProgress = withProgress(ProgressIndicatorData.CONTENT_PROGRESS)((props: WithProgressStateProps) =>
-// props.started ? <CircularProgress /> : null
-// );
+++ /dev/null
-// // Copyright (C) The Arvados Authors. All rights reserved.
-// //
-// // SPDX-License-Identifier: AGPL-3.0
-//
-// import * as React from 'react';
-// import { CircularProgress } from '@material-ui/core';
-// import { withProgress } from '~/store/progress-indicator/with-progress';
-// import { WithProgressStateProps } from '~/store/progress-indicator/with-progress';
-// import { ProgressIndicatorData } from '~/store/progress-indicator/progress-indicator-reducer';
-//
-// export const SidePanelProgress = withProgress(ProgressIndicatorData.SIDE_PANEL_PROGRESS)((props: WithProgressStateProps) =>
-// props.started ? <span style={{ display: 'flex', justifyContent: 'center', marginTop: "40px" }}><CircularProgress /></span> : null
-// );
+++ /dev/null
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-// import * as React from 'react';
-// import { LinearProgress } from '@material-ui/core';
-// import { withProgress } from '~/store/progress-indicator/with-progress';
-// import { WithProgressStateProps } from '~/store/progress-indicator/with-progress';
-// import { ProgressIndicatorData } from '~/store/progress-indicator/progress-indicator-reducer';
-
-// export const WorkbenchProgress = withProgress(ProgressIndicatorData.WORKBENCH_PROGRESS)(
-// (props: WithProgressStateProps) =>
-// props.started ? <LinearProgress color="secondary" /> : null
-// );
import * as React from "react";
import { connect } from "react-redux";
import { RootState } from "~/store/store";
-import MaterialSnackbar, { SnackbarProps } from "@material-ui/core/Snackbar";
+import MaterialSnackbar, { SnackbarOrigin } from "@material-ui/core/Snackbar";
import { Dispatch } from "redux";
import { snackbarActions, SnackbarKind } from "~/store/snackbar/snackbar-actions";
import IconButton from '@material-ui/core/IconButton';
import { amber, green } from "@material-ui/core/colors";
import * as classNames from 'classnames';
-const mapStateToProps = (state: RootState): SnackbarProps & ArvadosSnackbarProps => {
+interface SnackbarDataProps {
+ anchorOrigin?: SnackbarOrigin;
+ autoHideDuration?: number;
+ open: boolean;
+ message?: React.ReactElement<any>;
+ kind: SnackbarKind;
+}
+
+interface SnackbarEventProps {
+ onClose?: (event: React.SyntheticEvent<any>, reason: string) => void;
+ onExited: () => void;
+}
+
+const mapStateToProps = (state: RootState): SnackbarDataProps => {
const messages = state.snackbar.messages;
return {
anchorOrigin: { vertical: "bottom", horizontal: "right" },
};
};
-const mapDispatchToProps = (dispatch: Dispatch) => ({
+const mapDispatchToProps = (dispatch: Dispatch): SnackbarEventProps => ({
onClose: (event: any, reason: string) => {
if (reason !== "clickaway") {
dispatch(snackbarActions.CLOSE_SNACKBAR());
}
});
-const ArvadosSnackbar = (props: any) => <MaterialSnackbar {...props}>
- <ArvadosSnackbarContent {...props}/>
-</MaterialSnackbar>;
-
type CssRules = "success" | "error" | "info" | "warning" | "icon" | "iconVariant" | "message";
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
},
});
-interface ArvadosSnackbarProps {
- kind: SnackbarKind;
-}
+export const Snackbar = withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(
+ (props: SnackbarDataProps & SnackbarEventProps & WithStyles<CssRules>) => {
+ const { classes } = props;
-const ArvadosSnackbarContent = (props: SnackbarProps & ArvadosSnackbarProps & WithStyles<CssRules>) => {
- const { classes, className, message, onClose, kind } = props;
+ const variants = {
+ [SnackbarKind.INFO]: [InfoIcon, classes.info],
+ [SnackbarKind.WARNING]: [WarningIcon, classes.warning],
+ [SnackbarKind.SUCCESS]: [CheckCircleIcon, classes.success],
+ [SnackbarKind.ERROR]: [ErrorIcon, classes.error]
+ };
- let Icon = InfoIcon;
- let cssClass = classes.info;
+ const [Icon, cssClass] = variants[props.kind];
- switch (kind) {
- case SnackbarKind.INFO:
- Icon = InfoIcon;
- cssClass = classes.info;
- break;
- case SnackbarKind.WARNING:
- Icon = WarningIcon;
- cssClass = classes.warning;
- break;
- case SnackbarKind.SUCCESS:
- Icon = CheckCircleIcon;
- cssClass = classes.success;
- break;
- case SnackbarKind.ERROR:
- Icon = ErrorIcon;
- cssClass = classes.error;
- break;
+ return (
+ <MaterialSnackbar
+ open={props.open}
+ message={props.message}
+ onClose={props.onClose}
+ onExited={props.onExited}
+ anchorOrigin={props.anchorOrigin}
+ autoHideDuration={props.autoHideDuration}>
+ <SnackbarContent
+ className={classNames(cssClass)}
+ aria-describedby="client-snackbar"
+ message={
+ <span id="client-snackbar" className={classes.message}>
+ <Icon className={classNames(classes.icon, classes.iconVariant)}/>
+ {props.message}
+ </span>
+ }
+ action={
+ <IconButton
+ key="close"
+ aria-label="Close"
+ color="inherit"
+ onClick={e => props.onClose && props.onClose(e, '')}>
+ <CloseIcon className={classes.icon}/>
+ </IconButton>
+ }
+ />
+ </MaterialSnackbar>
+ );
}
-
- return (
- <SnackbarContent
- className={classNames(cssClass, className)}
- aria-describedby="client-snackbar"
- message={
- <span id="client-snackbar" className={classes.message}>
- <Icon className={classNames(classes.icon, classes.iconVariant)}/>
- {message}
- </span>
- }
- action={
- <IconButton
- key="close"
- aria-label="Close"
- color="inherit"
- onClick={e => {
- if (onClose) {
- onClose(e, '');
- }
- }}>
- <CloseIcon className={classes.icon}/>
- </IconButton>
- }
- />
- );
-};
-
-export const Snackbar = connect(mapStateToProps, mapDispatchToProps)(
- withStyles(styles)(ArvadosSnackbar)
-);
+));
import { CollectionResource } from '~/models/collection';
import { CollectionPanelFiles } from '~/views-components/collection-panel-files/collection-panel-files';
import * as CopyToClipboard from 'react-copy-to-clipboard';
-import { TagResource } from '~/models/tag';
import { CollectionTagForm } from './collection-tag-form';
import { deleteCollectionTag } from '~/store/collection-panel/collection-panel-action';
import { snackbarActions } from '~/store/snackbar/snackbar-actions';
interface CollectionPanelDataProps {
item: CollectionResource;
- tags: TagResource[];
}
type CollectionPanelProps = CollectionPanelDataProps & DispatchProp
connect((state: RootState, props: RouteComponentProps<{ id: string }>) => {
const collection = getResource(props.match.params.id)(state.resources);
return {
- item: collection,
- tags: state.collectionPanel.tags
+ item: collection
};
})(
class extends React.Component<CollectionPanelProps> {
render() {
- const { classes, item, tags } = this.props;
+ const { classes, item } = this.props;
return <div>
<Card className={classes.card}>
<CardHeader
<Grid item xs={12}><CollectionTagForm /></Grid>
<Grid item xs={12}>
{
- tags.map(tag => {
- return <Chip key={tag.etag} className={classes.tag}
- onDelete={this.handleDelete(tag.uuid)}
- label={renderTagLabel(tag)} />;
+ Object.keys(item.properties).map( key => {
+ return <Chip key={key} className={classes.tag}
+ onDelete={this.handleDelete(key)}
+ label={`${key}: ${item.properties[key]}`} />;
})
}
</Grid>
this.props.dispatch<any>(openContextMenu(event, resource));
}
- handleDelete = (uuid: string) => () => {
- this.props.dispatch<any>(deleteCollectionTag(uuid));
+ handleDelete = (key: string) => () => {
+ this.props.dispatch<any>(deleteCollectionTag(key));
}
onCopy = () => {
}
)
);
-
-const renderTagLabel = (tag: TagResource) => {
- const { properties } = tag;
- return `${properties.key}: ${properties.value}`;
-};
"@types/react" "*"
redux "^3.6.0 || ^4.0.0"
+"@types/shell-quote@1.6.0":
+ version "1.6.0"
+ resolved "https://registry.yarnpkg.com/@types/shell-quote/-/shell-quote-1.6.0.tgz#537b2949a2ebdcb0d353e448fee45b081021963f"
+
"@types/uuid@3.4.4":
version "3.4.4"
resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-3.4.4.tgz#7af69360fa65ef0decb41fd150bf4ca5c0cefdf5"
projects / arvados-workbench2.git / commitdiff