change wiki (#6052)

frontend/src/app.js

@@ -3,7 +3,7 @@ import ReactDom from 'react-dom';
 import { Router, navigate } from '@gatsbyjs/reach-router';
 import MediaQuery from 'react-responsive';
 import { Modal } from 'reactstrap';
-import { siteRoot, canAddRepo } from './utils/constants';
+import { siteRoot } from './utils/constants';
 import { Utils } from './utils/utils';
 import SystemNotification from './components/system-notification';
 import SidePanel from './components/side-panel';

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

@@ -68,7 +68,7 @@ class WikiSelectDialog extends React.Component {
   render() {
     return (
       <Modal isOpen={true} toggle={this.toggle}>
-        <ModalHeader toggle={this.toggle}>{gettext('Publish a Library')}</ModalHeader>
+        <ModalHeader toggle={this.toggle}>{gettext('Create Wiki from existing library')}</ModalHeader>
         <ModalBody className="dialog-list-container">
           <table>
             <thead>

frontend/src/components/main-side-nav.js

@@ -222,9 +222,9 @@ class MainSideNav extends React.Component {
               </li>
             }
             <li className="nav-item">
-              <Link className={`nav-link ellipsis ${this.getActiveClass('published')}`} to={siteRoot + 'published/'} title={gettext('Published Libraries')} onClick={(e) => this.tabItemClick(e, 'published')}>
+              <Link className={`nav-link ellipsis ${this.getActiveClass('published')}`} to={siteRoot + 'published/'} title={gettext('Wikis')} onClick={(e) => this.tabItemClick(e, 'published')}>
                 <span className="sf2-icon-wiki-view" aria-hidden="true"></span>
-                <span className="nav-text">{gettext('Published Libraries')}</span>
+                <span className="nav-text">{gettext('Wikis')}</span>
               </Link>
             </li>
             <li className="nav-item">

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

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
 import PropTypes from 'prop-types';
 import moment from 'moment';
-import { siteRoot, gettext } from '../../utils/constants';
+import { siteRoot, gettext, username } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 // import { seafileAPI } from '../../utils/seafile-api';
 // import Toast from '../toast';
@@ -136,6 +136,7 @@ class WikiListItem extends Component {
     let wiki = this.props.wiki;
     let userProfileURL = `${siteRoot}profile/${encodeURIComponent(wiki.owner)}/`;
     let fileIconUrl = Utils.getDefaultLibIconUrl(false);
+    const isWikiOwner = wiki.owner === username;
 
     const desktopItem = (
       <tr
@@ -154,14 +155,16 @@ class WikiListItem extends Component {
         </td>
         <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">
+        <td className="text-center cursor-pointer align-top">
+          {isWikiOwner &&
           <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'}}
+            style={{color: '#999', fontSize: '20px'}}
           ></span>
+          }
           <a
             href="#"
             role="button"

frontend/src/pages/wiki/css/view-structure.css

@@ -348,6 +348,12 @@
   color: #8c8c8c;
 }
 
+.dtable-dropdown-menu .dropdown-item .seafile-multicolor-icon.seafile-multicolor-icon-right-slide {
+  font-size: 12px;
+  transform: scale(0.8);
+  color: #666;
+}
+
 .dtable-dropdown-menu .dropdown-item:hover .item-icon,
 .dtable-dropdown-menu .dropdown-item:hover .seafile-multicolor-icon {
   color: #fff;

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

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import deepCopy from 'deep-copy';
-import { gettext, siteRoot, repoID, slug, username, permission, mediaUrl, isEditWiki } from '../../utils/constants';
+import { gettext, siteRoot, repoID, slug, username, permission, isEditWiki } from '../../utils/constants';
 import toaster from '../../components/toast';
 import Loading from '../../components/loading';
 // import TreeView from '../../components/tree-view/tree-view';
@@ -385,11 +385,11 @@ class SidePanel extends Component {
 
   render() {
     const { wiki_name, wiki_icon } = this.props.config;
-    const src = wiki_icon ? getIconURL(repoID, wiki_icon) : `${mediaUrl}img/wiki/default.png`;
+    const src = getIconURL(repoID, wiki_icon);
     return (
       <div className={`side-panel wiki-side-panel ${this.props.closeSideBar ? '': 'left-zero'}`}>
         <div className="side-panel-top panel-top">
-          {wiki_icon && <img src={src} width="32" height="32" alt='' className='mr-2' />}
+          {src && <img src={src} width="32" height="32" alt='' className='mr-2' />}
           <h4 className="ml-0 mb-0">{wiki_name || slug}</h4>
         </div>
         <div id="side-nav" className="wiki-side-nav" role="navigation">

frontend/src/pages/wiki/utils/index.js

@@ -1,4 +1,4 @@
-import {serviceURL} from '../../../utils/constants';
+import { serviceURL, mediaUrl } from '../../../utils/constants';
 
 const generatorBase64Code = (keyLength = 4) => {
   let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz0123456789';
@@ -34,6 +34,12 @@ const isObjectNotEmpty = (obj) => {
 };
 
 const getIconURL = (repoId, fileName) => {
+  if (!fileName) {
+    return null;
+  }
+  if (fileName === 'default') {
+    return `${mediaUrl}img/wiki/default.png`;
+  }
   return serviceURL + '/lib/' + repoId + '/file/_Internal/Wiki/Icon/' + fileName + '?raw=1';
 };
 

frontend/src/pages/wiki/wiki-left-bar/app-settings-dialog/app-settings-dialog-custom-icon.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'reactstrap';
 import { seafileAPI } from '../../../../utils/seafile-api';
-import { gettext, mediaUrl } from '../../../../utils/constants';
+import { gettext } from '../../../../utils/constants';
 import { getIconURL } from '../../utils';
 
 class AppSettingsDialogCustomIcon extends React.Component {
@@ -55,13 +55,12 @@ class AppSettingsDialogCustomIcon extends React.Component {
   };
 
   render() {
-    const hasIcon = false;
     let { iconName } = this.state;
-    const iconUrl = iconName ? getIconURL(this.props.repoId, iconName) : `${mediaUrl}img/wiki/default.png`;
-    if (hasIcon) {
+    const src = getIconURL(this.props.repoId, iconName);
+    if (src) {
       return (
         <div className="app-setting-dialog-icon">
-          <img src={iconUrl} alt="" width={128} height={128} ></img>
+          <img src={src} alt="" width={128} height={128} ></img>
           <p className="mt-2 mb-1 app-setting-dialog-icon-description">
             {gettext('Please select a png image within 5MB.')}
           </p>

frontend/src/pages/wiki/wiki-left-bar/app-settings-dialog/app-settings-dialog-icon-color.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormGroup, Label, Tooltip, Button } from 'reactstrap';
 import IconSettingsPopover from './icon-settings-popover';
-import { gettext, mediaUrl } from '../../../../utils/constants';
+import { gettext } from '../../../../utils/constants';
 import { getIconURL } from '../../utils';
 
 import './app-settings-dialog-icon-color.css';
@@ -28,7 +28,7 @@ class AppSettingsDialogIconColor extends React.Component {
 
   render() {
     const { wiki_icon } = this.props.config;
-    const src = wiki_icon ? getIconURL(this.props.repoId, wiki_icon) : `${mediaUrl}img/wiki/default.png`;
+    const src = getIconURL(this.props.repoId, wiki_icon);
     return (
       <div className="app-settings-dialog-icon-color">
         <FormGroup className="app-settings-dialog-theme-color">

frontend/src/pages/wiki/wiki-left-bar/app-settings-dialog/app-settings-dialog-icons.js

@@ -2,31 +2,26 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { mediaUrl } from '../../../../utils/constants';
 
-const APP_ICON_CLASSNAMES = [
+const ICON_CLASSNAMES = [
   'default',
 ];
 
 class AppSettingsDialogIcons extends React.Component {
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      iconClass: '',
-    };
-  }
-
-  onClickIcon = (iconClass) => {
-    this.setState({ iconClass }, () => {
+  onClickIcon = () => {
+    if (this.props.config.wiki_icon === 'default') {
       this.props.updateConfig({ wiki_icon: '' });
-      this.props.onToggle();
-    });
+    } else {
+      this.props.updateConfig({ wiki_icon: 'default' });
+    }
+    this.props.onToggle();
   };
 
   render() {
     return (
       <div className="app-settings-dialog-icons">
         <div className='d-flex flex-wrap'>
-          {APP_ICON_CLASSNAMES.map((name, index) => {
+          {ICON_CLASSNAMES.map((name, index) => {
             return (
               <div
                 key={index}
@@ -35,7 +30,7 @@ class AppSettingsDialogIcons extends React.Component {
                 }}
                 className={`seafile-multicolor-icon-container ${index < 5 ? 'top' : ''}`}
               >
-                <img src={`${mediaUrl}img/wiki/${name}.png`} className={`${name === this.state.iconClass ? 'active' : ''}`} alt='' />
+                <img src={`${mediaUrl}img/wiki/${name}.png`} alt='' />
               </div>
             );
           })}

frontend/src/pages/wikis/wikis.js

@@ -119,10 +119,10 @@ class Wikis extends Component {
             <div className="operation">
               <Fragment>
                 <MediaQuery query="(min-width: 768px)">
-                  <Button className="btn btn-secondary operation-item" onClick={this.onSelectToggle}>{gettext('Publish a Library')}</Button>
+                  <Button className="btn btn-secondary operation-item" onClick={this.onSelectToggle}>{gettext('Add Wiki')}</Button>
                 </MediaQuery>
                 <MediaQuery query="(max-width: 767.8px)">
-                  <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('Publish a Library')} onClick={this.onSelectToggle}></span>
+                  <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('Add Wiki')} onClick={this.onSelectToggle}></span>
                 </MediaQuery>
               </Fragment>
             </div>
@@ -134,7 +134,7 @@ class Wikis extends Component {
           <div className="cur-view-container" id="wikis">
             <div className="cur-view-path">
               <div className="path-container">
-                <h3 className="sf-heading m-0">{gettext('Published Libraries')}</h3>
+                <h3 className="sf-heading m-0">{gettext('Wikis')}</h3>
               </div>
             </div>
             <div className="cur-view-content">
@@ -148,7 +148,7 @@ class Wikis extends Component {
               {(!this.state.loading && this.state.wikis.length === 0) &&
                 <EmptyTip>
                   <h2>{gettext('No published libraries')}</h2>
-                  <p>{gettext('You have not published any libraries yet. A published library can be accessed by anyone, not only users, via its URL. You can publish a library by clicking the "Publish a Library" button in the menu bar.')}</p>
+                  <p>{gettext('You have not published any libraries yet. A published library can be accessed by anyone, not only users, via its URL. You can publish a library by clicking the "Add Wiki" button in the menu bar.')}</p>
                 </EmptyTip>
               }
             </div>