src/views/run-process-panel/inputs/project-input.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { connect, DispatchProp } from 'react-redux';
   7 import { Field } from 'redux-form';
   8 import { Input, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@material-ui/core';
   9 import {
  10     GenericCommandInputParameter
  11 } from 'models/workflow';
  12 import { GenericInput, GenericInputProps } from './generic-input';
  13 import { ProjectsTreePicker } from 'views-components/projects-tree-picker/projects-tree-picker';
  14 import { initProjectsTreePicker } from 'store/tree-picker/tree-picker-actions';
  15 import { TreeItem } from 'components/tree/tree';
  16 import { ProjectsTreePickerItem } from 'views-components/projects-tree-picker/generic-projects-tree-picker';
  17 import { ProjectResource } from 'models/project';
  18 import { ResourceKind } from 'models/resource';
  19 import { RootState } from 'store/store';
  20 import { getUserUuid } from 'common/getuser';
  21
  22 export type ProjectCommandInputParameter = GenericCommandInputParameter<ProjectResource, ProjectResource>;
  23
  24 const require: any = (value?: ProjectResource) => (value === undefined);
  25
  26 export interface ProjectInputProps {
  27     input: ProjectCommandInputParameter;
  28     options?: { showOnlyOwned: boolean, showOnlyWritable: boolean };
  29 }
  30 export const ProjectInput = ({ input, options }: ProjectInputProps) =>
  31     <Field
  32         name={input.id}
  33         commandInput={input}
  34         component={ProjectInputComponent as any}
  35         format={format}
  36         validate={require}
  37         {...{
  38             options
  39         }} />;
  40
  41 const format = (value?: ProjectResource) => value ? value.name : '';
  42
  43 interface ProjectInputComponentState {
  44     open: boolean;
  45     project?: ProjectResource;
  46 }
  47
  48 interface HasUserUuid {
  49     userUuid: string;
  50 };
  51
  52 const mapStateToProps = (state: RootState) => ({ userUuid: getUserUuid(state) });
  53
  54 export const ProjectInputComponent = connect(mapStateToProps)(
  55     class ProjectInputComponent extends React.Component<GenericInputProps & DispatchProp & HasUserUuid & {
  56         options?: { showOnlyOwned: boolean, showOnlyWritable: boolean };
  57     }, ProjectInputComponentState> {
  58         state: ProjectInputComponentState = {
  59             open: false,
  60         };
  61
  62         componentDidMount() {
  63             this.props.dispatch<any>(
  64                 initProjectsTreePicker(this.props.commandInput.id));
  65         }
  66
  67         render() {
  68             return <>
  69                 {this.renderInput()}
  70                 {this.renderDialog()}
  71             </>;
  72         }
  73
  74         openDialog = () => {
  75             this.componentDidMount();
  76             this.setState({ open: true });
  77         }
  78
  79         closeDialog = () => {
  80             this.setState({ open: false });
  81         }
  82
  83         submit = () => {
  84             this.closeDialog();
  85             this.props.input.onChange(this.state.project);
  86         }
  87
  88         setProject = (_: {}, { data }: TreeItem<ProjectsTreePickerItem>) => {
  89             if ('kind' in data && data.kind === ResourceKind.PROJECT) {
  90                 this.setState({ project: data });
  91             } else {
  92                 this.setState({ project: undefined });
  93             }
  94         }
  95
  96         invalid = () => (!this.state.project || this.state.project.writableBy.indexOf(this.props.userUuid) === -1);
  97
  98         renderInput() {
  99             return <GenericInput
 100                 component={props =>
 101                     <Input
 102                         readOnly
 103                         fullWidth
 104                         value={props.input.value}
 105                         error={props.meta.touched && !!props.meta.error}
 106                         disabled={props.commandInput.disabled}
 107                         onClick={!this.props.commandInput.disabled ? this.openDialog : undefined}
 108                         onKeyPress={!this.props.commandInput.disabled ? this.openDialog : undefined} />}
 109                 {...this.props} />;
 110         }
 111
 112         renderDialog() {
 113             return this.state.open ? <Dialog
 114                 open={this.state.open}
 115                 onClose={this.closeDialog}
 116                 fullWidth
 117                 data-cy="choose-a-project-dialog"
 118                 maxWidth='md'>
 119                 <DialogTitle>Choose a project</DialogTitle>
 120                 <DialogContent>
 121                     <ProjectsTreePicker
 122                         pickerId={this.props.commandInput.id}
 123                         options={this.props.options}
 124                         toggleItemActive={this.setProject} />
 125                 </DialogContent>
 126                 <DialogActions>
 127                     <Button onClick={this.closeDialog}>Cancel</Button>
 128                     <Button
 129                         disabled={this.invalid()}
 130                         variant='contained'
 131                         color='primary'
 132                         onClick={this.submit}>Ok</Button>
 133                 </DialogActions>
 134             </Dialog> : null;
 135         }
 136
 137     });