Fix search input UI (#5769)

* fix code warnings

* change search UI

frontend/src/components/common/switch/index.js

@@ -5,8 +5,7 @@ import classnames from 'classnames';
 import '../../../css/switch.css';
 
 function Switch(props) {
-  const { onChange, checked, placeholder, disabled, className, size } = props;
-
+  const { onChange, checked, placeholder, disabled, className, size, textPosition } = props;
   return(
     <div className={classnames('seahub-switch position-relative', className, size)}>
       <label className="custom-switch">
@@ -18,8 +17,13 @@ function Switch(props) {
           name="custom-switch-checkbox"
           disabled={disabled}
         />
+        {textPosition === 'left' &&
           <span className="custom-switch-description text-truncate">{placeholder}</span>
-        <span className="custom-switch-indicator"></span>
+        }
+        <span className={classnames('custom-switch-indicator', {'disabled': disabled})}></span>
+        {textPosition === 'right' &&
+          <span className="custom-switch-description text-truncate">{placeholder}</span>
+        }
       </label>
     </div>
   );
@@ -31,7 +35,12 @@ Switch.propTypes = {
   placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   className: PropTypes.string,
   size: PropTypes.oneOf(['large', 'small', undefined]),
-  onChange: PropTypes.func.isRequired,
+  textPosition: PropTypes.oneOf(['left', 'right', undefined]),
+  onChange: PropTypes.func,
+};
+
+Switch.defaultProps = {
+  textPosition: 'left',
 };
 
 export default Switch;

frontend/src/components/search/search.js

@@ -1,14 +1,14 @@
 import React, { Component, Fragment } from 'react';
-import { Form, FormGroup, Input, Label } from 'reactstrap';
 import PropTypes from 'prop-types';
 import isHotkey from 'is-hotkey';
 import MediaQuery from 'react-responsive';
 import { seafileAPI } from '../../utils/seafile-api';
-import { gettext, siteRoot, username, enableSeafileAI } from '../../utils/constants';
+import { gettext, siteRoot, enableSeafileAI } from '../../utils/constants';
 import SearchResultItem from './search-result-item';
 import { Utils } from '../../utils/utils';
 import { isMac } from '../../utils/extra-attributes';
 import toaster from '../toast';
+import Switch from '../common/switch';
 
 const INDEX_STATE = {
   RUNNING: 'running',
@@ -567,10 +567,38 @@ class Search extends Component {
     });
   };
 
+  renderSwitch = () => {
+    const { indexState } = this.state;
+    if (indexState === INDEX_STATE.FINISHED || indexState === INDEX_STATE.RUNNING) {
+      return (
+        <Switch
+          checked={true}
+          placeholder={gettext('Turn on semantic search for this library')}
+          className="w-100 mt-1"
+          size="small"
+          textPosition='right'
+          disabled
+        />
+      );
+    } else if (indexState === '' || indexState === INDEX_STATE.UNCREATED) {
+      return (
+        <Switch
+          checked={false}
+          placeholder={gettext('Turn on semantic search for this library')}
+          className="w-100 mt-1"
+          size="small"
+          onChange={this.onCreateIndex}
+          textPosition='right'
+        />
+      );
+    }
+    return null;
+  }
+
   render() {
     let width = this.state.width !== 'default' ? this.state.width : '';
     let style = {'width': width};
-    const { searchPageUrl, isMaskShow, indexState, isCloseShow, resultItems } = this.state;
+    const { isMaskShow, isCloseShow } = this.state;
     const placeholder = `${this.props.placeholder}${isMaskShow ? '' : ` (${controlKey} + f )`}`;
     return (
       <Fragment>
@@ -593,9 +621,6 @@ class Search extends Component {
                   ref={this.inputRef}
                   onKeyDown={this.onKeydownHandler}
                 />
-                {(this.state.isCloseShow && username) &&
-                  <a href={searchPageUrl} className="search-icon-right input-icon-addon fas fa-external-link-alt search-icon-arrow"></a>
-                }
                 {this.state.isCloseShow &&
                   <button type="button" className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent mr-4" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
                 }
@@ -605,14 +630,7 @@ class Search extends Component {
                 onScroll={this.onResultListScroll}
                 ref={this.searchContainer}
               >
-                {isCloseShow && this.props.isLibView && enableSeafileAI &&
-                  <Form>
-                    <FormGroup check>
-                      <Input type="radio" name="radio1" checked={indexState === INDEX_STATE.FINISHED} onChange={() => {this.onCreateIndex()}}/>
-                      <Label>{gettext('Turn on semantic search for this library.')}</Label>
-                    </FormGroup>
-                  </Form>
-                }
+                {isCloseShow && this.props.isLibView && enableSeafileAI && this.renderSwitch()}
                 {this.renderSearchResult()}
               </div>
             </div>
@@ -639,9 +657,6 @@ class Search extends Component {
                     onChange={this.onChangeHandler}
                     autoComplete="off"
                   />
-                  {(this.state.isCloseShow && username) &&
-                    <a href={searchPageUrl} className="search-icon-right input-icon-addon fas fa-external-link-alt search-icon-arrow"></a>
-                  }
                   {this.state.isCloseShow &&
                     <button type="button" className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
                   }

frontend/src/css/search.css

@@ -83,6 +83,10 @@
   flex-direction: column;
 }
 
+.dropdown-search-result-container .seahub-switch .custom-switch {
+  padding-left: 0;
+}
+
 .search-result-container .search-result-none {
   text-align: center;
   line-height: 4rem;

frontend/src/css/switch.css

@@ -2,6 +2,11 @@
   width: 22px;
   height: 12px;
   border-radius: 6px;
+  cursor: pointer;
+}
+
+.seahub-switch.small .custom-switch-indicator.disabled {
+  cursor: default;
 }
 
 .seahub-switch.small .custom-switch-indicator:before {

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -1037,14 +1037,12 @@ class LibContentView extends React.Component {
       seafileAPI.renameFile(repoID, path, newName).then(() => {
         this.renameItemAjaxCallback(path, newName);
       }).catch((error) => {
-
-        let errMessage = "";
+        let errMessage = '';
         if (error.response.status == 403 && error.response.data && error.response.data['error_msg']) {
           errMessage = error.response.data['error_msg'];
         } else {
           errMessage = Utils.getErrorMsg(error);
         }
-
         if (errMessage === gettext('Error')) {
           let name = Utils.getFileName(path);
           errMessage = gettext('Renaming {name} failed').replace('{name}', name);