Merge branch '21128-toolbar-context-menu'

[arvados-workbench2.git] / src / views-components / virtual-machines-dialog / group-array-input.tsx

diff --git a/src/views-components/virtual-machines-dialog/group-array-input.tsx b/src/views-components/virtual-machines-dialog/group-array-input.tsx
index 3ea5e77c883e2316f2d2fc7dd16a40dfd7953558..cba9af636e8eaaf22a1aa6019af47775f68e6fb5 100644 (file)
--- a/src/views-components/virtual-machines-dialog/group-array-input.tsx
+++ b/src/views-components/virtual-machines-dialog/group-array-input.tsx
@@ -4,34 +4,58 @@
 
 import React from 'react';
 import { StringArrayCommandInputParameter } from 'models/workflow';
-import { Field } from 'redux-form';
+import { Field, GenericField } from 'redux-form';
 import { GenericInputProps } from 'views/run-process-panel/inputs/generic-input';
 import { ChipsInput } from 'components/chips-input/chips-input';
 import { identity } from 'lodash';
-import { withStyles, WithStyles, FormGroup, Input, InputLabel, FormControl } from '@material-ui/core';
+import { withStyles, WithStyles, FormGroup, Input, InputLabel, FormControl, FormHelperText } from '@material-ui/core';
+import classnames from "classnames";
+import { ArvadosTheme } from 'common/custom-theme';
 
-export interface StringArrayInputProps {
+export interface GroupArrayDataProps {
+  hasPartialGroupInput?: boolean;
+  setPartialGroupInput?: (value: boolean) => void;
+}
+
+interface GroupArrayFieldProps {
+  commandInput: StringArrayCommandInputParameter;
+}
+
+const GroupArrayField = Field as new () => GenericField<GroupArrayDataProps & GroupArrayFieldProps>;
+
+export interface GroupArrayInputProps {
   name: string;
   input: StringArrayCommandInputParameter;
   required: boolean;
 }
 
-type CssRules = 'chips';
+type CssRules = 'chips' | 'partialInputHelper' | 'partialInputHelperVisible';
 
-const styles = {
+const styles = (theme: ArvadosTheme) => ({
     chips: {
         marginTop: "16px",
     },
-};
+    partialInputHelper: {
+        textAlign: 'right' as 'right',
+        visibility: 'hidden' as 'hidden',
+        color: theme.palette.error.dark,
+    },
+    partialInputHelperVisible: {
+        visibility: 'visible' as 'visible',
+    }
+});
 
-export const GroupArrayInput = ({name, input}: StringArrayInputProps) =>
-    <Field
-        name={name}
-        commandInput={input}
-        component={StringArrayInputComponent as any}
-        />;
+export const GroupArrayInput = ({name, input, setPartialGroupInput, hasPartialGroupInput}: GroupArrayInputProps & GroupArrayDataProps) => {
+  return <GroupArrayField
+      name={name}
+      commandInput={input}
+      component={GroupArrayInputComponent as any}
+      setPartialGroupInput={setPartialGroupInput}
+      hasPartialGroupInput={hasPartialGroupInput}
+      />;
+}
 
-const StringArrayInputComponent = (props: GenericInputProps) => {
+const GroupArrayInputComponent = (props: GenericInputProps & GroupArrayDataProps) => {
   return <FormGroup>
         <FormControl fullWidth error={props.meta.error}>
           <InputLabel shrink={props.meta.active || props.input.value.length > 0}>{props.commandInput.id}</InputLabel>
@@ -41,24 +65,30 @@ const StringArrayInputComponent = (props: GenericInputProps) => {
     };
 
 const StyledInputComponent = withStyles(styles)(
-  class InputComponent extends React.PureComponent<GenericInputProps & WithStyles<CssRules>>{
+  class InputComponent extends React.PureComponent<GenericInputProps & WithStyles<CssRules> & GroupArrayDataProps>{
       render() {
           const { classes } = this.props;
-          const { commandInput, input, meta } = this.props;
-          return <ChipsInput
-              deletable={!commandInput.disabled}
-              orderable={!commandInput.disabled}
-              disabled={commandInput.disabled}
-              values={input.value}
-              onChange={this.handleChange}
-              handleFocus={input.onFocus}
-              createNewValue={identity}
-              inputComponent={Input}
-              chipsClassName={classes.chips}
-              pattern={/[_a-z][-0-9_a-z]*/ig}
-              inputProps={{
-                  error: meta.error,
-              }} />;
+          const { commandInput, input, meta, hasPartialGroupInput } = this.props;
+          return <>
+            <ChipsInput
+                deletable={!commandInput.disabled}
+                orderable={!commandInput.disabled}
+                disabled={commandInput.disabled}
+                values={input.value}
+                onChange={this.handleChange}
+                handleFocus={input.onFocus}
+                createNewValue={identity}
+                inputComponent={Input}
+                chipsClassName={classes.chips}
+                pattern={/[_a-z][-0-9_a-z]*/ig}
+                onPartialInput={this.props.setPartialGroupInput}
+                inputProps={{
+                    error: meta.error || hasPartialGroupInput,
+                }} />
+                <FormHelperText className={classnames([classes.partialInputHelper, ...(hasPartialGroupInput ? [classes.partialInputHelperVisible] : [])])}>
+                  Press enter to complete group name
+                </FormHelperText>
+          </>;
       }
 
       handleChange = (values: {}[]) => {