Merge pull request #3481 from haiwen/repire_empty_name

Fix a bug created when the name is empty

frontend/src/components/dialog/create-department-repo-dialog.js

@@ -14,11 +14,18 @@ class CreateDepartmentRepoDialog extends React.Component {
     this.state = {
       repoName: '',
       errMessage: '',
+      isSubmitBtnActive: false,
     };
     this.newInput = React.createRef();
   }
 
   handleChange = (e) => {
+    if (!e.target.value.trim()) {
+      this.setState({isSubmitBtnActive: false});
+    } else {
+      this.setState({isSubmitBtnActive: true});
+    }
+
     this.setState({
       repoName: e.target.value, 
     });
@@ -90,7 +97,7 @@ class CreateDepartmentRepoDialog extends React.Component {
           {this.state.errMessage && <Alert color="danger">{this.state.errMessage}</Alert>}
         </ModalBody>
         <ModalFooter>
-          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
+          <Button color="primary" onClick={this.handleSubmit} disabled={!this.state.isSubmitBtnActive}>{gettext('Submit')}</Button>
         </ModalFooter>
       </Modal>
     );

frontend/src/components/dialog/create-file-dialog.js

@@ -20,6 +20,7 @@ class CreateFile extends React.Component {
       childName: props.fileType || '',
       isDraft: false,
       errMessage: '',
+      isSubmitBtnActive: false,
     };
     this.newInput = React.createRef();
   }
@@ -36,6 +37,12 @@ class CreateFile extends React.Component {
   }
 
   handleChange = (e) => {
+    if (!e.target.value.trim()) {
+      this.setState({isSubmitBtnActive: false});
+    } else {
+      this.setState({isSubmitBtnActive: true});
+    }
+
     this.setState({
       childName: e.target.value, 
     }) ;
@@ -44,6 +51,7 @@ class CreateFile extends React.Component {
   handleSubmit = () => {
     let isDuplicated = this.checkDuplicatedName();
     let newName = this.state.childName;
+    
     if (isDuplicated) {
       let errMessage = gettext('The name "{name}" is already taken. Please choose a different name.');
       errMessage = errMessage.replace('{name}', Utils.HTMLescape(newName));
@@ -148,7 +156,7 @@ class CreateFile extends React.Component {
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
-          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
+          <Button color="primary" onClick={this.handleSubmit} disabled={!this.state.isSubmitBtnActive}>{gettext('Submit')}</Button>
         </ModalFooter>
       </Modal>
     );

frontend/src/components/dialog/create-folder-dialog.js

@@ -18,7 +18,8 @@ class CreateForder extends React.Component {
     this.state = {
       parentPath: '',
       childName: '',
-      errMessage: ''
+      errMessage: '',
+      isSubmitBtnActive: false,
     };
     this.newInput = React.createRef();
   }
@@ -35,12 +36,19 @@ class CreateForder extends React.Component {
   }
 
   handleChange = (e) => {
+    if (!e.target.value.trim()) {
+      this.setState({isSubmitBtnActive: false});
+    } else {
+      this.setState({isSubmitBtnActive: true});
+    }
+
     this.setState({childName: e.target.value});
   }
 
   handleSubmit = () => {
     let newName = this.state.childName;
     let isDuplicated = this.checkDuplicatedName();
+
     if (isDuplicated) {
       let errMessage = gettext('The name "{name}" is already taken. Please choose a different name.');
       errMessage = errMessage.replace('{name}', Utils.HTMLescape(newName));
@@ -88,7 +96,7 @@ class CreateForder extends React.Component {
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
-          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
+          <Button color="primary" onClick={this.handleSubmit} disabled={!this.state.isSubmitBtnActive}>{gettext('Submit')}</Button>
         </ModalFooter>
       </Modal>
     );

frontend/src/components/dialog/create-group-dialog.js

@@ -11,6 +11,7 @@ class CreateGroupDialog extends React.Component {
     this.state = {
       groupName: '',
       errorMsg: '',
+      isSubmitBtnActive: false,
     };
     this.newInput = React.createRef();
   }
@@ -22,6 +23,12 @@ class CreateGroupDialog extends React.Component {
 
   handleGroupChange = (event) => {
     let name = event.target.value;
+
+    if (!name.trim()) {
+      this.setState({isSubmitBtnActive: false});
+    } else {
+      this.setState({isSubmitBtnActive: true});
+    }
     this.setState({
       groupName: name
     });
@@ -79,7 +86,7 @@ class CreateGroupDialog extends React.Component {
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.props.toggleAddGroupModal}>{gettext('Cancel')}</Button>
-          <Button color="primary" onClick={this.handleSubmitGroup}>{gettext('Submit')}</Button>
+          <Button color="primary" onClick={this.handleSubmitGroup} disabled={!this.state.isSubmitBtnActive}>{gettext('Submit')}</Button>
         </ModalFooter>
       </Modal>
     );

frontend/src/components/dialog/create-repo-dialog.js

@@ -19,12 +19,19 @@ class CreateRepoDialog extends React.Component {
       password1: '',
       password2: '',
       errMessage: '',
-      permission: 'rw'
+      permission: 'rw',
+      isSubmitBtnActive: false,
     };
     this.newInput = React.createRef();
   }
 
   handleRepoNameChange = (e) => {
+    if (!e.target.value.trim()) {
+      this.setState({isSubmitBtnActive: false});
+    } else {
+      this.setState({isSubmitBtnActive: true});
+    }
+
     this.setState({repoName: e.target.value});
   }
 
@@ -205,7 +212,7 @@ class CreateRepoDialog extends React.Component {
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
-          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
+          <Button color="primary" onClick={this.handleSubmit} disabled={!this.state.isSubmitBtnActive}>{gettext('Submit')}</Button>
         </ModalFooter>
       </Modal>
     );

frontend/src/components/dialog/new-wiki-dialog.js

@@ -16,6 +16,7 @@ class NewWikiDialog extends React.Component {
       isExist: false,
       name: '',
       repoID: '',
+      isSubmitBtnActive: false,
     };
     this.newName = React.createRef();
   }
@@ -26,6 +27,12 @@ class NewWikiDialog extends React.Component {
   }
 
   inputNewName = (e) => {
+    if (!event.target.value.trim()) {
+      this.setState({isSubmitBtnActive: false});
+    } else {
+      this.setState({isSubmitBtnActive: true});
+    }
+
     this.setState({
       name: e.target.value,
     });
@@ -57,7 +64,7 @@ class NewWikiDialog extends React.Component {
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
-          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
+          <Button color="primary" onClick={this.handleSubmit} disabled={!this.state.isSubmitBtnActive}>{gettext('Submit')}</Button>
         </ModalFooter>
       </Modal>
     );

frontend/src/components/dialog/rename-dialog.js

@@ -17,6 +17,7 @@ class Rename extends React.Component {
     this.state = {
       newName: '',
       errMessage: '',
+      isSubmitBtnActive: false,
     };
     this.newInput = React.createRef();
   }
@@ -43,6 +44,12 @@ class Rename extends React.Component {
   }
   
   handleChange = (e) => {
+    if (!e.target.value.trim()) {
+      this.setState({isSubmitBtnActive: false});
+    } else {
+      this.setState({isSubmitBtnActive: true});
+    }
+
     this.setState({newName: e.target.value}); 
   }
 
@@ -113,7 +120,7 @@ class Rename extends React.Component {
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
-          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
+          <Button color="primary" onClick={this.handleSubmit} disabled={!this.state.isSubmitBtnActive}>{gettext('Submit')}</Button>
         </ModalFooter>
       </Modal>
     );

frontend/src/components/dialog/rename-grid-item-dialog.js

@@ -18,6 +18,7 @@ class Rename extends React.Component {
     this.state = {
       newName: '',
       errMessage: '',
+      isSubmitBtnActive: false,
     };
     this.newInput = React.createRef();
   }
@@ -44,6 +45,12 @@ class Rename extends React.Component {
   }
   
   handleChange = (e) => {
+    if (!e.target.value.trim()) {
+      this.setState({isSubmitBtnActive: false});
+    } else {
+      this.setState({isSubmitBtnActive: true});
+    }
+
     this.setState({newName: e.target.value}); 
   }
 
@@ -114,7 +121,7 @@ class Rename extends React.Component {
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
-          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
+          <Button color="primary" onClick={this.handleSubmit} disabled={!this.state.isSubmitBtnActive}>{gettext('Submit')}</Button>
         </ModalFooter>
       </Modal>
     );

frontend/src/components/dialog/rename-group-dialog.js

@@ -10,10 +10,17 @@ class RenameGroupDialog extends React.Component {
     super(props);
     this.state = {
       newGroupName: this.props.currentGroupName,
+      isSubmitBtnActive: false,
     };
   }
 
   handleGroupNameChange = (event) => {
+    if (!event.target.value.trim()) {
+      this.setState({isSubmitBtnActive: false});
+    } else {
+      this.setState({isSubmitBtnActive: true});
+    }
+
     let name = event.target.value;
     this.setState({
       newGroupName: name
@@ -52,7 +59,7 @@ class RenameGroupDialog extends React.Component {
         </ModalBody>
         <ModalFooter>
           <Button color="secondary" onClick={this.props.toggleRenameGroupDialog}>{gettext('Cancel')}</Button>
-          <Button color="primary" onClick={this.renameGroup}>{gettext('Submit')}</Button>
+          <Button color="primary" onClick={this.renameGroup} disabled={!this.state.isSubmitBtnActive}>{gettext('Submit')}</Button>
         </ModalFooter>
       </Modal>
     );