Change wiki nav UI (#7085)

* 02 fix page scroll when move or delete page

* 01 init wiki pages all folded

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

@@ -168,6 +168,11 @@ class PageItem extends Component {
   };
 
   onAddNewPage = (newPage) => {
+    const { page } = this.props;
+    const folded = this.props.getFoldState(page.id);
+    if (folded) {
+      this.props.toggleExpand(page.id);
+    }
     this.props.addPageInside(Object.assign({ parentPageId: this.props.page.id }, newPage));
   };
 

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

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { DropTarget, DragLayer } from 'react-dnd';
 import html5DragDropContext from './html5DragDropContext';
 import DraggedPageItem from './pages/dragged-page-item';
-import { repoID, gettext, wikiPermission } from '../../../utils/constants';
+import { gettext, wikiPermission } from '../../../utils/constants';
 
 import '../css/wiki-nav.css';
 
@@ -28,33 +28,39 @@ class WikiNav extends Component {
   constructor(props) {
     super(props);
     this.folderClassNameCache = '';
-    this.idFoldedStatusMap = this.getFoldedFromLocal();
+    this.lastScrollTop = 0;
+    this.wikiNavBodyRef = React.createRef();
+    // set init pages are all folded
+    this.idFoldedStatusMap = {};
+    props.pages.forEach((page) => {
+      this.idFoldedStatusMap[page.id] = true;
+    });
   }
 
-  getFoldedFromLocal = () => {
-    const items = window.localStorage.getItem(`wiki-folded-${repoID}`);
-    return items ? JSON.parse(items) : {};
-  };
-
-  saveFoldedToLocal = (items) => {
-    window.localStorage.setItem(`wiki-folded-${repoID}`, JSON.stringify(items));
-  };
-
   getFoldState = (pageId) => {
     return this.idFoldedStatusMap[pageId];
   };
 
   toggleExpand = (pageId) => {
-    const idFoldedStatusMap = this.getFoldedFromLocal();
+    const idFoldedStatusMap = this.idFoldedStatusMap;
     if (idFoldedStatusMap[pageId]) {
       delete idFoldedStatusMap[pageId];
     } else {
       idFoldedStatusMap[pageId] = true;
     }
-    this.saveFoldedToLocal(idFoldedStatusMap);
     this.idFoldedStatusMap = idFoldedStatusMap;
   };
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.navigation !== this.props.navigation) {
+      this.wikiNavBodyRef.current.scrollTop = this.lastScrollTop;
+    }
+  }
+
+  onWikiNavBodyScroll = (e) => {
+    this.lastScrollTop = e.target.scrollTop;
+  };
+
   setClassName = (name) => {
     this.folderClassNameCache = name;
   };
@@ -103,7 +109,7 @@ class WikiNav extends Component {
     let id_page_map = {};
     pages.forEach(page => id_page_map[page.id] = page);
     return (
-      <div className='wiki-nav-body'>
+      <div className='wiki-nav-body' onScroll={this.onWikiNavBodyScroll} ref={this.wikiNavBodyRef}>
         {navigation.map((item, index) => {
           return this.renderPage(item, index, pages.length, isOnlyOnePage, id_page_map, layerDragProps);
         })}