diff --git a/frontend/src/pages/wiki2/side-panel.css b/frontend/src/pages/wiki2/side-panel.css index ba349fb54c..01cc137544 100644 --- a/frontend/src/pages/wiki2/side-panel.css +++ b/frontend/src/pages/wiki2/side-panel.css @@ -3,18 +3,29 @@ display: flex; flex-direction: column; overflow: hidden; - background-color: #F7F7F5;; + background-color: #F7F7F5; border-right: 1px solid #F1F1EF; } .wiki2-side-panel .wiki2-side-panel-top { padding: 8px 20px; display: flex; + justify-content: space-between; align-items: center; flex-shrink: 0; height: 44px; } +.wiki2-side-panel .wiki2-side-panel-top .add-new-page { + padding: 0 4px; + cursor: pointer; + border-radius: 4px; +} + +.wiki2-side-panel .wiki2-side-panel-top .add-new-page:hover { + background-color: #DFDFDD; +} + .wiki2-side-panel .wiki2-side-nav { flex: auto; display: flex; diff --git a/frontend/src/pages/wiki2/side-panel.js b/frontend/src/pages/wiki2/side-panel.js index f68300d2d9..dc01abb621 100644 --- a/frontend/src/pages/wiki2/side-panel.js +++ b/frontend/src/pages/wiki2/side-panel.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import deepCopy from 'deep-copy'; +import { UncontrolledTooltip } from 'reactstrap'; import { gettext, isWiki2, wikiId } from '../../utils/constants'; import toaster from '../../components/toast'; import Loading from '../../components/loading'; @@ -14,6 +15,7 @@ import Folder from './models/folder'; import Page from './models/page'; import wikiAPI from '../../utils/wiki-api'; import { FOLDER } from './constant'; +import { Utils } from '../../utils/utils'; import './side-panel.css'; @@ -339,12 +341,38 @@ class SidePanel extends Component { ); }; + handleAddNewPage = () => { + const pageName = 'Untitled'; // default page name + const voidFn = () => void 0; + wikiAPI.createWiki2Page(wikiId, pageName).then(res => { + const { obj_name, parent_dir, doc_uuid,page_name } = res.data; + this.onAddNewPage({ + name: page_name, + icon: '', + path: parent_dir === '/' ? `/${obj_name}` : `${parent_dir}/${obj_name}`, + docUuid: doc_uuid, + successCallback: voidFn, + errorCallback: voidFn, + }); + }).catch((error) => { + let errMessage = Utils.getErrorMsg(error); + toaster.danger(errMessage); + this.onError(); + }); + }; + render() { const { isLoading, config } = this.props; return (