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.setState({ open: true });
  76         }
  77
  78         closeDialog = () => {
  79             this.setState({ open: false });
  80         }
  81
  82         submit = () => {
  83             this.closeDialog();
  84             this.props.input.onChange(this.state.project);
  85         }
  86
  87         setProject = (_: {}, { data }: TreeItem<ProjectsTreePickerItem>) => {
  88             if ('kind' in data && data.kind === ResourceKind.PROJECT) {
  89                 this.setState({ project: data });
  90             } else {
  91                 this.setState({ project: undefined });
  92             }
  93         }
  94
  95         invalid = () => (!this.state.project || this.state.project.writableBy.indexOf(this.props.userUuid) === -1);
  96
  97         renderInput() {
  98             return <GenericInput
  99                 component={props =>
 100                     <Input
 101                         readOnly
 102                         fullWidth
 103                         value={props.input.value}
 104                         error={props.meta.touched && !!props.meta.error}
 105                         disabled={props.commandInput.disabled}
 106                         onClick={!this.props.commandInput.disabled ? this.openDialog : undefined}
 107                         onKeyPress={!this.props.commandInput.disabled ? this.openDialog : undefined} />}
 108                 {...this.props} />;
 109         }
 110
 111         renderDialog() {
 112             return <Dialog
 113                 open={this.state.open}
 114                 onClose={this.closeDialog}
 115                 fullWidth
 116                 data-cy="choose-a-project-dialog"
 117                 maxWidth='md'>
 118                 <DialogTitle>Choose a project</DialogTitle>
 119                 <DialogContent>
 120                     <ProjectsTreePicker
 121                         pickerId={this.props.commandInput.id}
 122                         options={this.props.options}
 123                         toggleItemActive={this.setProject} />
 124                 </DialogContent>
 125                 <DialogActions>
 126                     <Button onClick={this.closeDialog}>Cancel</Button>
 127                     <Button
 128                         disabled={this.invalid()}
 129                         variant='contained'
 130                         color='primary'
 131                         onClick={this.submit}>Ok</Button>
 132                 </DialogActions>
 133             </Dialog>;
 134         }
 135
 136     });