fix: more accurate validation on geneset name (#2429)

client/src/components/annoDialog.js

@@ -42,7 +42,7 @@ class AnnoDialog extends React.PureComponent {
               <p
                 style={{
                   marginTop: 7,
-                  visibility: validationError ? "visible" : "hidden",
+                  visibility: errorMessage !== "" ? "visible" : "hidden",
                   color: Colors.ORANGE3,
                 }}
               >

client/src/components/geneExpression/geneSet.js

@@ -125,8 +125,8 @@ class GeneSet extends React.Component {
         )}
         {isOpen && !genesetIsEmpty && this.renderGenes()}
         <EditGenesetNameDialogue
-          parentGeneset={setName}
-          parentGenesetDescription={genesetDescription}
+          originalGenesetName={setName}
+          originalGenesetDescription={genesetDescription}
         />
       </div>
     );

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

@@ -90,14 +90,15 @@ class CreateGenesetDialogue extends React.PureComponent {
     this.setState({ genesetDescription: e });
   };
 
-  instruction = (genesetName, genesets) => genesets.has(genesetName)
+  instruction = (genesetName, genesets) =>
+    genesets.has(genesetName)
       ? "Gene set name must be unique."
       : "New, unique gene set name";
 
   validate = (genesetName, genesets) => {
     if (genesets.has(genesetName)) {
       this.setState({
-        nameErrorMessage: "There is already a geneset with that name",
+        nameErrorMessage: "There is already a gene set with that name",
       });
       return false;
     }

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

@@ -14,16 +14,18 @@ class RenameGeneset extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
-      newGenesetName: props.parentGeneset,
-      newGenesetDescription: props.parentGenesetDescription,
+      newGenesetName: props.originalGenesetName,
+      newGenesetDescription: props.originalGenesetDescription,
+      nameErrorMessage: "",
     };
   }
 
   disableEditGenesetNameMode = (e) => {
     const { dispatch } = this.props;
+    const { originalGenesetDescription, originalGenesetName } = this.props;
     this.setState({
-      newGenesetName: "",
-      newGenesetDescription: "",
+      newGenesetName: originalGenesetName,
+      newGenesetDescription: originalGenesetDescription,
     });
     dispatch({
       type: "geneset: disable rename geneset mode",
@@ -59,22 +61,57 @@ class RenameGeneset extends React.PureComponent {
     this.setState({ newGenesetDescription: e });
   };
 
-  validate = (genesetName, genesets) => (
-      !genesets.has(genesetName) &&
+  validate = (
+    originalGenesetName,
+    newGenesetName,
+    originalGenesetDescription,
+    newGenesetDescription,
+    genesets
+  ) => {
+    if (
+      originalGenesetName !== newGenesetName &&
+      genesets.has(newGenesetName)
+    ) {
+      this.setState({
+        nameErrorMessage: `There is already a gene set with that name`,
+      });
+      return true;
+    }
+    if (
       // eslint-disable-next-line no-control-regex -- unicode 0-31 127-65535
-      genesetName.match(/^\s|[\u0000-\u001F\u007F-\uFFFF]|[ ]{2,}|^$|\s$/g)
-        ?.length
-    );
+      newGenesetName.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 true;
+    }
+    this.setState({
+      nameErrorMessage: "",
+    });
+    if (
+      originalGenesetName === newGenesetName &&
+      originalGenesetDescription === newGenesetDescription
+    )
+      return true;
+    return false;
+  };
 
   render() {
-    const { newGenesetName, newGenesetDescription } = this.state;
-    const { genesetsUI, parentGeneset, parentGenesetDescription, genesets } =
-      this.props;
+    const { newGenesetName, newGenesetDescription, nameErrorMessage } =
+      this.state;
+    const {
+      genesetsUI,
+      originalGenesetName,
+      originalGenesetDescription,
+      genesets,
+    } = this.props;
 
     return (
       <>
         <AnnoDialog
-          isActive={genesetsUI.isEditingGenesetName === parentGeneset}
+          isActive={genesetsUI.isEditingGenesetName === originalGenesetName}
           inputProps={{
             "data-testid": `${genesetsUI.isEditingGenesetName}:rename-geneset-dialog`,
           }}
@@ -82,15 +119,23 @@ class RenameGeneset extends React.PureComponent {
             "data-testid": `${genesetsUI.isEditingGenesetName}:submit-geneset`,
           }}
           title="Edit gene set name and description"
-          instruction={`Rename ${genesetsUI.isEditingGenesetName}`}
+          instruction={
+            <>
+              Rename <b>{genesetsUI.isEditingGenesetName}</b>
+            </>
+          }
           cancelTooltipContent="Close this dialog without renaming the gene set."
           primaryButtonText="Edit gene set name and description"
           text={newGenesetName}
           secondaryText={newGenesetDescription}
-          validationError={
-            this.validate(newGenesetName, genesets) &&
-            parentGenesetDescription === newGenesetDescription
-          }
+          validationError={this.validate(
+            originalGenesetName,
+            newGenesetName,
+            originalGenesetDescription,
+            newGenesetDescription,
+            genesets
+          )}
+          errorMessage={nameErrorMessage}
           annoInput={
             <LabelInput
               label={newGenesetName}