[ARVADOS-WORKBENCH2] updated: 2.3.0-148-gc2a580be

Git user git at public.arvados.org
Tue Feb 1 20:11:49 UTC 2022


Summary of changes:
 src/components/chips-input/chips-input.tsx         | 33 ++++++++++++++++++----
 .../virtual-machines-dialog/group-array-input.tsx  |  1 +
 2 files changed, 29 insertions(+), 5 deletions(-)

       via  c2a580be1484629e557b967524473a75b2d02274 (commit)
      from  281300c86c615248d124c8b5bb6b7a3461b63349 (commit)

Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.


commit c2a580be1484629e557b967524473a75b2d02274
Author: Stephen Smith <stephen at curii.com>
Date:   Tue Feb 1 15:10:21 2022 -0500

    18284: Add regex pattern option to chips-input for better tokenization of login groups input chips
    
    Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen at curii.com>

diff --git a/src/components/chips-input/chips-input.tsx b/src/components/chips-input/chips-input.tsx
index 31e12333..cbb1fb12 100644
--- a/src/components/chips-input/chips-input.tsx
+++ b/src/components/chips-input/chips-input.tsx
@@ -21,6 +21,7 @@ interface ChipsInputProps<Value> {
     deletable?: boolean;
     orderable?: boolean;
     disabled?: boolean;
+    pattern?: RegExp;
 }
 
 type CssRules = 'chips' | 'input' | 'inputContainer';
@@ -52,10 +53,26 @@ export const ChipsInput = withStyles(styles)(
         timeout = -1;
 
         setText = (event: React.ChangeEvent<HTMLInputElement>) => {
-            this.setState({ text: event.target.value });
+            this.setState({ text: event.target.value }, () => {
+                // If pattern is provided, check for delimiter
+                if (this.props.pattern) {
+                    const matches = this.state.text.match(this.props.pattern);
+                    // Only create values if 1 match and the last character is a delimiter
+                    //   (user pressed an invalid character at the end of a token)
+                    //   or if multiple matches (user pasted text)
+                    if (matches &&
+                            (
+                                matches.length > 1 ||
+                                (matches.length === 1 && !this.state.text.endsWith(matches[0]))
+                            )) {
+                        this.createNewValue(matches.map((i) => i));
+                    }
+                }
+            });
         }
 
         handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+            // Handle special keypresses
             if (e.key === 'Enter') {
                 this.createNewValue();
                 e.preventDefault();
@@ -64,11 +81,17 @@ export const ChipsInput = withStyles(styles)(
             }
         }
 
-        createNewValue = () => {
+        createNewValue = (matches?: string[]) => {
             if (this.state.text) {
-                const newValue = this.props.createNewValue(this.state.text);
-                this.setState({ text: '' });
-                this.props.onChange([...this.props.values, newValue]);
+                if (matches && matches.length > 0) {
+                    const newValues = matches.map((v) => this.props.createNewValue(v));
+                    this.setState({ text: '' });
+                    this.props.onChange([...this.props.values, ...newValues]);
+                } else {
+                    const newValue = this.props.createNewValue(this.state.text);
+                    this.setState({ text: '' });
+                    this.props.onChange([...this.props.values, newValue]);
+                }
             }
         }
 
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 12a73019..d3714dce 100644
--- a/src/views-components/virtual-machines-dialog/group-array-input.tsx
+++ b/src/views-components/virtual-machines-dialog/group-array-input.tsx
@@ -56,6 +56,7 @@ const StyledInputComponent = withStyles(styles)(
               createNewValue={identity}
               inputComponent={Input}
               chipsClassName={classes.chips}
+              pattern={/[_a-z][-0-9_a-z]*/ig}
               inputProps={{
                   error: meta.error,
               }} />;

-----------------------------------------------------------------------


hooks/post-receive
-- 




More information about the arvados-commits mailing list