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, WrappedFieldProps } 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
  20 export type ProjectCommandInputParameter = GenericCommandInputParameter<ProjectResource, ProjectResource>;
  21
  22 export interface ProjectInputProps {
  23     input: ProjectCommandInputParameter;
  24     options?: { showOnlyOwned: boolean, showOnlyWritable: boolean };
  25 }
  26 export const ProjectInput = ({ input, options }: ProjectInputProps) =>
  27     <Field
  28         name={input.id}
  29         commandInput={input}
  30         component={ProjectInputComponent as any}
  31         format={format}
  32         {...{
  33             options
  34         }} />;
  35
  36 const format = (value?: ProjectResource) => value ? value.name : '';
  37
  38 interface ProjectInputComponentState {
  39     open: boolean;
  40     project?: ProjectResource;
  41 }
  42
  43 export const ProjectInputComponent = connect()(
  44     class ProjectInputComponent extends React.Component<GenericInputProps & DispatchProp & {
  45         options?: { showOnlyOwned: boolean, showOnlyWritable: boolean };
  46     }, ProjectInputComponentState> {
  47         state: ProjectInputComponentState = {
  48             open: false,
  49         };
  50
  51         componentDidMount() {
  52             this.props.dispatch<any>(
  53                 initProjectsTreePicker(this.props.commandInput.id));
  54         }
  55
  56         render() {
  57             return <>
  58                 {this.renderInput()}
  59                 {this.renderDialog()}
  60             </>;
  61         }
  62
  63         openDialog = () => {
  64             this.setState({ open: true });
  65         }
  66
  67         closeDialog = () => {
  68             this.setState({ open: false });
  69         }
  70
  71         submit = () => {
  72             this.closeDialog();
  73             this.props.input.onChange(this.state.project);
  74         }
  75
  76         setProject = (_: {}, { data }: TreeItem<ProjectsTreePickerItem>) => {
  77             if ('kind' in data && data.kind === ResourceKind.PROJECT) {
  78                 this.setState({ project: data });
  79             } else {
  80                 this.setState({ project: undefined });
  81             }
  82         }
  83
  84         renderInput() {
  85             return <GenericInput
  86                 component={props =>
  87                     <Input
  88                         readOnly
  89                         fullWidth
  90                         value={props.input.value}
  91                         error={props.meta.touched && !!props.meta.error}
  92                         disabled={props.commandInput.disabled}
  93                         onClick={!this.props.commandInput.disabled ? this.openDialog : undefined}
  94                         onKeyPress={!this.props.commandInput.disabled ? this.openDialog : undefined} />}
  95                 {...this.props} />;
  96         }
  97
  98         renderDialog() {
  99             return <Dialog
 100                 open={this.state.open}
 101                 onClose={this.closeDialog}
 102                 fullWidth
 103                 data-cy="choose-a-project-dialog"
 104                 maxWidth='md'>
 105                 <DialogTitle>Choose a project</DialogTitle>
 106                 <DialogContent>
 107                     <ProjectsTreePicker
 108                         pickerId={this.props.commandInput.id}
 109                         options={this.props.options}
 110                         toggleItemActive={this.setProject} />
 111                 </DialogContent>
 112                 <DialogActions>
 113                     <Button onClick={this.closeDialog}>Cancel</Button>
 114                     <Button
 115                         disabled={!this.state.project}
 116                         variant='contained'
 117                         color='primary'
 118                         onClick={this.submit}>Ok</Button>
 119                 </DialogActions>
 120             </Dialog>;
 121         }
 122
 123     });