change Wiki2 search UI (#7000)

* change Wiki2 search UI

* change style when no pages

frontend/src/pages/wiki2/side-panel.js

@@ -14,7 +14,7 @@ import { Utils } from '../../utils/utils';
 import WikiExternalOperations from './wiki-external-operations';
 import WikiTrashDialog from './wiki-trash-dialog';
 import { DEFAULT_PAGE_NAME } from './constant';
-import Search from '../../components/search/search';
+import Wiki2Search from '../../components/search/wiki2-search';
 
 import './side-panel.css';
 
@@ -38,6 +38,7 @@ class SidePanel extends Component {
       isShowTrashDialog: false,
     };
   }
+
   confirmDeletePage = (pageId) => {
     const config = deepCopy(this.props.config);
     const { pages } = config;
@@ -157,7 +158,7 @@ class SidePanel extends Component {
   };
 
   render() {
-    const { isLoading } = this.props;
+    const { isLoading, config, currentPageId } = this.props;
     const isDesktop = Utils.isDesktop();
     return (
       <div className={`wiki2-side-panel${this.props.closeSideBar ? '' : ' left-zero'}`}>
@@ -177,11 +178,11 @@ class SidePanel extends Component {
             </div>
           }
         </div>
-        <Search
-          repoID={wikiId}
-          onSearchedClick={this.onSearchedClick}
-          placeholder={gettext('Search')}
-          isWiki2={true}
+        <Wiki2Search
+          wikiId={wikiId}
+          config={config}
+          currentPageId={currentPageId}
+          setCurrentPage={this.props.setCurrentPage}
         />
         <div className="wiki2-side-nav">
           {isLoading ? <Loading/> : this.renderWikiNav()}

frontend/src/pages/wiki2/wiki-nav/wiki-nav.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { DropTarget, DragLayer } from 'react-dnd';
 import html5DragDropContext from './html5DragDropContext';
 import DraggedPageItem from './pages/dragged-page-item';
@@ -97,10 +98,8 @@ class WikiNav extends Component {
   // eslint-disable-next-line
   renderStructureBody = React.forwardRef((layerDragProps, ref) => {
     const { navigation, pages } = this.props;
-    let isOnlyOnePage = false;
-    if (pages.length === 1) {
-      isOnlyOnePage = true;
-    }
+    const pagesLen = pages.length;
+    const isOnlyOnePage = pagesLen === 1;
     let id_page_map = {};
     pages.forEach(page => id_page_map[page.id] = page);
     return (
@@ -109,7 +108,7 @@ class WikiNav extends Component {
           return this.renderPage(item, index, pages.length, isOnlyOnePage, id_page_map, layerDragProps);
         })}
         {wikiPermission !== 'public' &&
-          <div className='wiki2-trash' onClick={this.props.toggelTrashDialog}>
+          <div className={classNames('wiki2-trash', { 'mt-0': !pagesLen })} onClick={this.props.toggelTrashDialog}>
             <span className="sf3-font-trash sf3-font mr-2"></span>
             <span>{gettext('Trash')}</span>
           </div>