fix rename file or folder placeholder in grid mode (#8322)

* fix rename file or folder placeholder in grid mode

* change label name

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import { Utils, validateName } from '../../utils/utils';
-import { Button, Modal, Input, ModalBody, ModalFooter, Alert } from 'reactstrap';
+import { Button, Modal, Input, ModalBody, ModalFooter, Alert, Label } from 'reactstrap';
 import SeahubModalHeader from '@/components/common/seahub-modal-header';
 
 const propTypes = {
@@ -17,26 +17,25 @@ class Rename extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      newName: '',
+      newName: this.props.dirent.name,
       errMessage: '',
       isSubmitBtnActive: false,
     };
     this.newInput = React.createRef();
   }
 
-  UNSAFE_componentWillMount() {
-    this.setState({ newName: this.props.dirent.name });
-  }
-
   componentDidMount() {
-    const { dirent } = this.props;
-    this.changeState(dirent);
+    this.updateName(this.props.dirent);
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
-    this.changeState(nextProps.dirent);
+    this.updateName(nextProps.dirent);
   }
 
+  updateName = (dirent) => {
+    this.setState({ newName: dirent.name });
+  };
+
   handleChange = (e) => {
     if (!e.target.value.trim()) {
       this.setState({ isSubmitBtnActive: false });
@@ -76,11 +75,6 @@ class Rename extends React.Component {
     this.props.toggleCancel();
   };
 
-  changeState = (dirent) => {
-    let name = dirent.name;
-    this.setState({ newName: name });
-  };
-
   onAfterModelOpened = () => {
     if (!this.newInput.current) return;
     const { dirent } = this.props;
@@ -100,14 +94,15 @@ class Rename extends React.Component {
       <Modal isOpen={true} toggle={this.toggle} onOpened={this.onAfterModelOpened}>
         <SeahubModalHeader toggle={this.toggle}>{type === 'file' ? gettext('Rename File') : gettext('Rename Folder') }</SeahubModalHeader>
         <ModalBody>
-          <p>{type === 'file' ? gettext('New file name') : gettext('New folder name')}</p>
+          <Label for={type === 'file' ? 'rename-file-name' : 'rename-folder-name'}>
+            {type === 'file' ? gettext('Rename file to') : gettext('Rename folder to')}
+          </Label>
           <Input
             onKeyDown={this.handleKeyDown}
             innerRef={this.newInput}
-            placeholder="newName"
             value={this.state.newName}
             onChange={this.handleChange}
-            name={type === 'file' ? 'new-file-name' : 'new-folder-name'}
+            name={type === 'file' ? 'rename-file-name' : 'rename-folder-name'}
           />
           {this.state.errMessage && <Alert color="danger" className="mt-2">{this.state.errMessage}</Alert>}
         </ModalBody>