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