feat: frontend geneset validation (#2258)

* add geneset name validation

* validate genes before addition

* display error messages

client/src/components/geneExpression/menus/addGeneToGenesetDialogue.js

@@ -61,7 +61,7 @@ class AddGeneToGenesetDialogue extends React.PureComponent {
             "data-testid": `${geneset}:submit-label`,
           }}
           title="Add genes to gene set"
-          instruction={`Add gene to ${geneset}`}
+          instruction={`Add genes to ${geneset}`}
           cancelTooltipContent="Close this dialog without adding genes to gene set."
           primaryButtonText="Add genes"
           text={genesToAdd}

client/src/components/geneExpression/menus/createGenesetDialogue.js

@@ -31,6 +31,7 @@ class CreateGenesetDialogue extends React.PureComponent {
       genesetName: "",
       genesToPopulateGeneset: "",
       genesetDescription: "",
+      nameErrorMessage: "",
     });
     dispatch({
       type: "geneset: disable create geneset mode",
@@ -48,7 +49,7 @@ class CreateGenesetDialogue extends React.PureComponent {
 
     dispatch({
       type: "geneset: create",
-      genesetName,
+      genesetName: genesetName.trim(),
       genesetDescription,
     });
     if (genesToPopulateGeneset) {
@@ -82,7 +83,9 @@ class CreateGenesetDialogue extends React.PureComponent {
   };
 
   handleChange = (e) => {
+    const { genesets } = this.props;
     this.setState({ genesetName: e });
+    this.validate(e, genesets);
   };
 
   handleGenesetInputChange = (e) => {
@@ -100,11 +103,32 @@ class CreateGenesetDialogue extends React.PureComponent {
   };
 
   validate = (genesetName, genesets) => {
-    return genesets.has(genesetName);
+    if (genesets.has(genesetName)) {
+      this.setState({
+        nameErrorMessage: "There is already a geneset with that name",
+      });
+      return false;
+    }
+
+    if (
+      genesetName.length > 1 &&
+      // eslint-disable-next-line no-control-regex -- unicode 0-31 127-65535
+      genesetName.match(/^[\u0000-\u001F\u007F-\uFFFF]|[ ]{2,}/g)?.length
+    ) {
+      this.setState({
+        nameErrorMessage:
+          "Gene set names can only contain alphanumeric characters and the following special characters: ! ” # $ % ’ ( ) * + , - . / : ; < = > ? @  ] ^ _ ` | ~",
+      });
+      return false;
+    }
+    this.setState({
+      nameErrorMessage: "",
+    });
+    return true;
   };
 
   render() {
-    const { genesetName } = this.state;
+    const { genesetName, nameErrorMessage } = this.state;
     const { metadataField, genesetsUI, genesets } = this.props;
 
     return (
@@ -136,13 +160,11 @@ class CreateGenesetDialogue extends React.PureComponent {
                 <p
                   style={{
                     marginTop: 7,
-                    visibility: this.validate(genesetName, genesets)
-                      ? "visible"
-                      : "hidden",
+                    visibility: nameErrorMessage !== "" ? "visible" : "hidden",
                     color: Colors.ORANGE3,
                   }}
                 >
-                  {this.genesetNameError()}
+                  {nameErrorMessage}
                 </p>
                 <p style={{ marginTop: 20 }}>
                   Optionally add a{" "}
@@ -185,9 +207,7 @@ class CreateGenesetDialogue extends React.PureComponent {
                 <Button
                   data-testid={`${metadataField}:submit-geneset`}
                   onClick={this.createGeneset}
-                  disabled={
-                    !genesetName || this.validate(genesetName, genesets)
-                  }
+                  disabled={nameErrorMessage !== ""}
                   intent="primary"
                   type="submit"
                 >

client/src/components/geneExpression/menus/editGenesetNameDialogue.js

@@ -9,6 +9,7 @@ import LabelInput from "../../labelInput";
   ontology: state.ontology,
   obsCrossfilter: state.obsCrossfilter,
   genesetsUI: state.genesetsUI,
+  genesets: state.genesets.genesets,
 }))
 class RenameGeneset extends React.PureComponent {
   constructor(props) {
@@ -61,9 +62,23 @@ class RenameGeneset extends React.PureComponent {
     this.setState({ newGenesetDescription: e });
   };
 
+  validate = (genesetName, genesets) => {
+    return (
+      !genesets.has(genesetName) &&
+      // eslint-disable-next-line no-control-regex -- unicode 0-31 127-65535
+      genesetName.match(/^\s|[\u0000-\u001F\u007F-\uFFFF]|[ ]{2,}|^$|\s$/g)
+        ?.length
+    );
+  };
+
   render() {
     const { newGenesetName, newGenesetDescription } = this.state;
-    const { genesetsUI, parentGeneset, parentGenesetDescription } = this.props;
+    const {
+      genesetsUI,
+      parentGeneset,
+      parentGenesetDescription,
+      genesets,
+    } = this.props;
 
     return (
       <>
@@ -82,7 +97,7 @@ class RenameGeneset extends React.PureComponent {
           text={newGenesetName}
           secondaryText={newGenesetDescription}
           validationError={
-            genesetsUI.isEditingGenesetName === newGenesetName &&
+            this.validate(newGenesetName, genesets) &&
             parentGenesetDescription === newGenesetDescription
           }
           annoInput={