12.0 feature edit wiki page (#6033)

* 01 add static media files

* 02 edit wiki page

* 03 remove useless icons and support edit name and icon

* 04 support wiki nav

* delete useless codes

* optimize feature edit wiki

* 05 add wiki-api and save config

* 06 change some UI

* delete useless codes

* delete useless codes

* fix edit wiki url

* change js path

* change icon size

* fix

* fix fn name and do not show tree view

* fix edit url

* save config to index.json

* fix new file name check

* hide icon and library name

* remove useless svgs

* remove useless svgs

---------

Co-authored-by: ‘JoinTyang’ <yangtong1009@163.com>
Co-authored-by: JoinTyang <41655440+JoinTyang@users.noreply.github.com>

frontend/src/components/file-chooser/file-chooser.js

@@ -14,6 +14,7 @@ import '../../css/file-chooser.css';
 
 const propTypes = {
   isShowFile: PropTypes.bool,
+  hideLibraryName: PropTypes.bool,
   repoID: PropTypes.string,
   onDirentItemClick: PropTypes.func,
   onRepoItemClick: PropTypes.func,
@@ -371,7 +372,6 @@ class FileChooser extends React.Component {
   };
 
   renderRepoListView = () => {
-
     return (
       <div className="file-chooser-container user-select-none" onScroll={this.onScroll}>
         {this.props.mode === 'current_repo_and_other_repos' && (
@@ -421,10 +421,12 @@ class FileChooser extends React.Component {
         )}
         {this.props.mode === 'only_current_library' && (
           <div className="list-view">
+            {!this.props.hideLibraryName &&
             <div className="list-view-header">
               <span className={`item-toggle fa ${this.state.isCurrentRepoShow ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onCurrentRepoToggle}></span>
               <span className="library">{gettext('Current Library')}</span>
             </div>
+            }
             {
               this.state.isCurrentRepoShow && this.state.currentRepoInfo &&
               <RepoListView
@@ -438,6 +440,7 @@ class FileChooser extends React.Component {
                 isShowFile={this.props.isShowFile}
                 fileSuffixes={this.props.fileSuffixes}
                 selectedItemInfo={this.state.selectedItemInfo}
+                hideLibraryName={this.props.hideLibraryName}
               />
             }
           </div>

frontend/src/components/file-chooser/repo-list-item.js

@@ -21,6 +21,7 @@ const propTypes = {
   onRepoItemClick: PropTypes.func.isRequired,
   fileSuffixes: PropTypes.array,
   selectedItemInfo: PropTypes.object,
+  hideLibraryName: PropTypes.bool,
 };
 
 class RepoListItem extends React.Component {
@@ -199,17 +200,19 @@ class RepoListItem extends React.Component {
 
     return (
       <li>
-        <div className={`${repoActive ? 'item-active' : ''} item-info`} onClick={this.onRepoItemClick}>
-          <div className="item-text">
-            <span className="name user-select-none ellipsis" title={this.props.repo.repo_name}>{this.props.repo.repo_name}</span>
+        {!this.props.hideLibraryName &&
+          <div className={`${repoActive ? 'item-active' : ''} item-info`} onClick={this.onRepoItemClick}>
+            <div className="item-text">
+              <span className="name user-select-none ellipsis" title={this.props.repo.repo_name}>{this.props.repo.repo_name}</span>
+            </div>
+            <div className="item-left-icon">
+              <span className={`item-toggle icon fa ${this.state.isShowChildren ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onToggleClick}></span>
+              <i className="tree-node-icon">
+                <span className="icon far fa-folder tree-node-icon"></span>
+              </i>
+            </div>
           </div>
-          <div className="item-left-icon">
-            <span className={`item-toggle icon fa ${this.state.isShowChildren ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onToggleClick}></span>
-            <i className="tree-node-icon">
-              <span className="icon far fa-folder tree-node-icon"></span>
-            </i>
-          </div>
-        </div>
+        }
         {this.state.isShowChildren && (
           <TreeListView
             repo={this.props.repo}

frontend/src/components/file-chooser/repo-list-view.js

@@ -15,6 +15,7 @@ const propTypes = {
   fileSuffixes: PropTypes.array,
   selectedItemInfo: PropTypes.object,
   currentPath: PropTypes.string,
+  hideLibraryName: PropTypes.bool,
 };
 
 class RepoListView extends React.Component {
@@ -25,8 +26,12 @@ class RepoListView extends React.Component {
       repoList = [];
       repoList.push(currentRepoInfo);
     }
+    let style = {};
+    if (this.props.hideLibraryName) {
+      style = { marginLeft: '-44px' };
+    }
     return (
-      <ul className="list-view-content file-chooser-item">
+      <ul className="list-view-content file-chooser-item" style={style}>
         {repoList.length > 0 && repoList.map((repoItem, index) => {
           return (
             <RepoListItem
@@ -42,6 +47,7 @@ class RepoListView extends React.Component {
               isShowFile={this.props.isShowFile}
               fileSuffixes={this.props.fileSuffixes}
               selectedItemInfo={this.props.selectedItemInfo}
+              hideLibraryName={this.props.hideLibraryName}
             />
           );
         })}

frontend/src/components/wiki-list-view/wiki-list-item.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
 import PropTypes from 'prop-types';
 import moment from 'moment';
@@ -136,10 +136,14 @@ class WikiListItem extends Component {
     let wiki = this.props.wiki;
     let userProfileURL = `${siteRoot}profile/${encodeURIComponent(wiki.owner)}/`;
     let fileIconUrl = Utils.getDefaultLibIconUrl(false);
-    let deleteIcon = `action-icon sf2-icon-x3 ${this.state.highlight ? '' : 'invisible'}`;
 
     const desktopItem = (
-      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
+      <tr
+        className={this.state.highlight ? 'tr-highlight' : ''}
+        onMouseEnter={this.onMouseEnter}
+        onMouseLeave={this.onMouseLeave}
+        onFocus={this.onMouseEnter}
+      >
         <td><img src={fileIconUrl} width="24" alt="" /></td>
         <td className="name">
           <a href={wiki.link}>{wiki.name}</a>
@@ -151,13 +155,27 @@ class WikiListItem extends Component {
         <td><a href={userProfileURL} target='_blank' rel="noreferrer">{wiki.owner_nickname}</a></td>
         <td>{moment(wiki.updated_at).fromNow()}</td>
         <td className="text-center cursor-pointer">
-          <a href="#" role="button" aria-label={gettext('Unpublish')} title={gettext('Unpublish')} className={deleteIcon} onClick={this.onDeleteToggle}></a>
+          <span
+            className={`iconfont icon-edit mr-4 action-icon ${this.state.highlight ? '' : 'invisible'}`}
+            onClick={() => window.open(wiki.link.replace('/published/', '/edit-wiki/'))}
+            title={gettext('Edit')}
+            aria-label={gettext('Edit')}
+            style={{color: '#999'}}
+          ></span>
+          <a
+            href="#"
+            role="button"
+            aria-label={gettext('Unpublish')}
+            title={gettext('Unpublish')}
+            className={`action-icon sf2-icon-x3 ${this.state.highlight ? '' : 'invisible'}`}
+            onClick={this.onDeleteToggle}
+          ></a>
         </td>
       </tr>
     );
 
     const mobileItem = (
-      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+      <tr>
         <td><img src={fileIconUrl} width="24" alt="" /></td>
         <td>
           <a href={wiki.link}>{wiki.name}</a><br />
@@ -186,7 +204,7 @@ class WikiListItem extends Component {
     );
 
     return (
-      <Fragment>
+      <>
         {Utils.isDesktop() ? desktopItem : mobileItem}
         {this.state.isShowDeleteDialog &&
           <ModalPortal>
@@ -196,7 +214,7 @@ class WikiListItem extends Component {
             />
           </ModalPortal>
         }
-      </Fragment>
+      </>
     );
   }
 }