change publish wiki custom URL (#6817)

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

@@ -2,26 +2,39 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import copy from 'copy-to-clipboard';
 import { gettext, serviceURL } from '../../utils/constants';
-import { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Alert, InputGroup, InputGroupAddon } from 'reactstrap';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert, InputGroup, InputGroupText } from 'reactstrap';
 import toaster from '../toast';
 import wikiAPI from '../../utils/wiki-api';
 
+import '../../css/publish-wiki-dialog.css';
+
 const propTypes = {
   wiki: PropTypes.object,
   onPublish: PropTypes.func.isRequired,
   toggleCancel: PropTypes.func.isRequired,
 };
 
+const DEFAULT_URL = serviceURL + '/wiki/publish/';
+
 class PublishWikiDialog extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      url: serviceURL + '/wiki/publish/' + this.props.customUrl,
+      url: this.props.customUrl,
       errMessage: '',
       isSubmitBtnActive: false,
     };
     this.newInput = React.createRef();
+    this.preTextRef = React.createRef();
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      const preTextWidth = this.preTextRef.current.offsetWidth;
+      this.newInput.current.style.paddingLeft = (preTextWidth + 12) + 'px';
+      this.newInput.current.focus();
+    }, 1);
   }
 
   handleChange = (e) => {
@@ -36,18 +49,19 @@ class PublishWikiDialog extends React.Component {
     if (!isValid) {
       this.setState({
         errMessage: errMessage,
-        url: serviceURL + '/wiki/publish/',
+        url: '',
       });
     } else {
-      this.props.onPublish(this.state.url.trim());
+      this.props.onPublish(DEFAULT_URL + this.state.url.trim());
+      this.toggle();
     }
   };
 
   deleteCustomUrl = () => {
     let wiki_id = this.props.wiki.id;
     wikiAPI.deletePublishWikiLink(wiki_id).then((res) => {
-      this.setState({ url: serviceURL + '/wiki/publish/' });
+      this.setState({ url: '' });
-      toaster.success(gettext('Successfully.'));
+      toaster.success(gettext('Successfully'));
     }).catch((error) => {
       if (error.response) {
         let errorMsg = error.response.data.error_msg;
@@ -56,7 +70,6 @@ class PublishWikiDialog extends React.Component {
     });
   };
 
-
   handleKeyDown = (e) => {
     if (e.key === 'Enter') {
       this.handleSubmit();
@@ -73,43 +86,44 @@ class PublishWikiDialog extends React.Component {
     let errMessage = '';
     if (!url) {
       isValid = false;
-      errMessage = gettext('url is required.');
+      errMessage = gettext('URL is required');
-      return { isValid, errMessage };
-    }
-    if (!(url.includes(serviceURL + '/wiki/publish/'))) {
-      isValid = false;
-      errMessage = gettext('url  need include specific prefix.');
       return { isValid, errMessage };
     }
     return { isValid, errMessage };
   };
 
   copyLink = () => {
-    copy(this.state.url);
+    copy(DEFAULT_URL + this.state.url.trim());
     toaster.success(gettext('URL is copied to the clipboard'));
   };
 
+  onClickPreText = () => {
+    this.newInput.current.focus();
+  };
+
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
         <ModalHeader toggle={this.toggle}>{gettext('Publish Wiki')}</ModalHeader>
         <ModalBody>
           <p>{gettext('Customize URL')}</p>
-          <InputGroup>
+          <InputGroup className="publish-wiki-custom-url-inputs">
-            <Input
+            <span className="input-pretext" ref={this.preTextRef} onClick={this.onClickPreText}>{DEFAULT_URL}</span>
-              onKeyDown={this.handleKeyDown}
+            <input
-              innerRef={this.newInput}
+              className="publish-wiki-custom-url-input form-control"
-              placeholder="customize url"
+              type="text"
               value={this.state.url}
               onChange={this.handleChange}
+              onKeyDown={this.handleKeyDown}
+              ref={this.newInput}
             />
-            <InputGroupAddon addonType="append">
+            <InputGroupText>
               <Button color="primary" onClick={this.copyLink} className="border-0">{gettext('Copy')}</Button>
-            </InputGroupAddon>
+            </InputGroupText>
           </InputGroup>
-          <span className='tip mb-1' style={{ fontSize: '14px' }}>
+          <p className='sf-tip-default mt-2'>
             {gettext('The custom part of the URL must be between 5 and 30 characters long and may only contain letters (a-z), numbers, and hyphens.')}
-          </span>
+          </p>
           {this.state.errMessage && <Alert color="danger" className="mt-2">{this.state.errMessage}</Alert>}
         </ModalBody>
         <ModalFooter>

frontend/src/css/layout.css

@@ -346,3 +346,8 @@ img[src=""],img:not([src]) { /* for first loading img*/
   align-items: center;
   text-align: center;
 }
+
+.sf-tip-default {
+  font-size: 13px;
+  color: #666;
+}

frontend/src/css/publish-wiki-dialog.css

@@ -0,0 +1,24 @@
+.publish-wiki-custom-url-inputs .input-pretext {
+  position: absolute;
+  left: 12px;
+  top: 0;
+  height: 38px;
+  line-height: 38px;
+  z-index: 1;
+  color: #666;
+}
+
+.publish-wiki-custom-url-inputs .publish-wiki-custom-url-input {
+  background-color: transparent;
+  border-radius: 4px 0 0 4px !important;
+  border-right: none;
+}
+
+.publish-wiki-custom-url-inputs .input-group-text {
+  padding: 0;
+  border: none;
+}
+
+.publish-wiki-custom-url-inputs .input-group-text .btn {
+  border-radius: 0 4px 4px 0;
+}