[wiki] added 2 new entrances(one in the wiki card, the other in the w… (#7248)

* [wiki] added 2 new entrances(one in the wiki card, the other in the wiki 'edit' page) for published wikis

* [wiki] fixed eslint warning

frontend/src/components/published-wiki-entrance.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { UncontrolledTooltip } from 'reactstrap';
+import { serviceURL, gettext } from '../utils/constants';
+
+import '../css/published-wiki-entrance.css';
+
+const propTypes = {
+  wikiID: PropTypes.string.isRequired,
+  customURLPart: PropTypes.string.isRequired
+};
+
+class PublishedWikiExtrance extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { wikiID, customURLPart } = this.props;
+    return (
+      <>
+        <a
+          id={`wiki-${wikiID}`}
+          className="view-published-wiki ml-2"
+          href={`${serviceURL}/wiki/publish/${customURLPart}`}
+          target="_blank"
+          rel="noreferrer"
+          onClick={(e) => {e.stopPropagation();}}
+        >
+          {gettext('Published')}
+        </a>
+        <UncontrolledTooltip
+          target={`wiki-${wikiID}`}
+          placement="bottom"
+        >
+          {gettext('View published page')}
+        </UncontrolledTooltip>
+      </>
+    );
+  }
+}
+
+PublishedWikiExtrance.propTypes = propTypes;
+
+export default PublishedWikiExtrance;

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

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { siteRoot, gettext, username, canPublishWiki } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
 import ModalPortal from '../modal-portal';
 import DeleteWikiDialog from '../dialog/delete-wiki-dialog';
 import RenameWikiDialog from '../dialog/rename-wiki-dialog';
@@ -12,6 +13,7 @@ import PublishWikiDialog from '../dialog/publish-wiki-dialog';
 import wikiAPI from '../../utils/wiki-api';
 import toaster from '../toast';
 import ConvertWikiDialog from '../dialog/convert-wiki-dialog';
+import PublishedWikiExtrance from '../published-wiki-entrance';
 
 dayjs.extend(relativeTime);
 
@@ -71,6 +73,7 @@ class WikiCardItem extends Component {
       isShowPublishDialog: !this.state.isShowPublishDialog,
     });
   };
+
   handleCustomUrl = (url) => {
     this.setState({
       customUrlString: url,
@@ -156,6 +159,7 @@ class WikiCardItem extends Component {
 
   render() {
     const { wiki, isDepartment, isShowAvatar } = this.props;
+
     let isAdmin = false;
     if (wiki.admins) {
       isAdmin = wiki.admins.includes(username);
@@ -215,10 +219,11 @@ class WikiCardItem extends Component {
           className={`wiki-card-item ${this.state.isItemMenuShow ? 'wiki-card-item-menu-open' : ''}`}
           onClick={this.clickWikiCard.bind(this, isOldVersion ? publishedUrl : editUrl)}
         >
-          <div className="wiki-card-item-top">
+          <div className="wiki-card-item-top d-flex align-items-center">
             <span className="sf3-font-wiki sf3-font" aria-hidden="true"></span>
+            {this.state.customUrlString && <PublishedWikiExtrance wikiID={wiki.id} customURLPart={this.state.customUrlString} />}
             {showDropdownMenu &&
-              <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleDropDownMenu} onClick={this.onClickDropdown}>
+              <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleDropDownMenu} onClick={this.onClickDropdown} className="ml-auto">
                 <DropdownToggle
                   tag="i"
                   role="button"
@@ -261,7 +266,6 @@ class WikiCardItem extends Component {
           </div>
           <div className="wiki-item-bottom">
             {dayjs(wiki.updated_at).fromNow()}
-            {this.state.customUrlString && (<span>{gettext('Published')}</span>)}
           </div>
         </div>
         {this.state.isShowDeleteDialog &&

frontend/src/components/wiki-card-view/wiki-card-view.css

@@ -21,12 +21,6 @@
 }
 
 /* wiki-card-item-top */
-.wiki-card-item .wiki-card-item-top {
-  display: flex;
-  justify-content: space-between;
-  height: 24px;
-}
-
 .wiki-card-item .wiki-card-item-top .dropdown {
   display: flex;
   align-items: center;
@@ -48,7 +42,6 @@
   border-radius: 3px;
   opacity: 0;
   color: #999;
-  margin-left: 20px;
 }
 
 .wiki-card-item.wiki-card-item-menu-open .wiki-card-item-top .dropdown .sf-dropdown-toggle,
@@ -110,8 +103,6 @@
   font-size: 12px;
   color: #666;
   padding-top: 6px;
-  display: flex;
-  justify-content: space-between;
 }
 
 .wiki-card-item-add span:first-child {

frontend/src/css/published-wiki-entrance.css

@@ -0,0 +1,15 @@
+.view-published-wiki {
+   font-size: .75rem;
+   color: #666;
+   background: transparent;
+   height: 20px; 
+   padding: 0 .5rem;
+   border: 1px solid #dbdbdb;
+   border-radius: 10px;
+ } 
+ 
+ .view-published-wiki:hover {
+   background: #efefef;
+   text-decoration: none;
+   color: #666;
+ }

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

@@ -25,7 +25,6 @@
 .wiki2-side-panel .wiki2-side-panel-top {
   padding: 8px 12px 8px 16px;
   display: flex;
-  justify-content: space-between;
   align-items: center;
   flex-shrink: 0;
   height: 44px;

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

@@ -16,6 +16,7 @@ import WikiTrashDialog from './wiki-trash-dialog';
 import { DEFAULT_PAGE_NAME } from './constant';
 import Wiki2Search from '../../components/search/wiki2-search';
 import CommonUndoTool from '../../components/common/common-undo-tool';
+import PublishedWikiExtrance from '../../components/published-wiki-entrance';
 
 import './side-panel.css';
 
@@ -38,9 +39,28 @@ class SidePanel extends PureComponent {
     super(props);
     this.state = {
       isShowTrashDialog: false,
+      customUrl: ''
     };
   }
 
+  componentDidMount() {
+    if (wikiPermission == 'rw') {
+      this.getPublishWikiLink();
+    }
+  }
+
+  getPublishWikiLink = () => {
+    wikiAPI.getPublishWikiLink(wikiId).then((res) => {
+      const { publish_url } = res.data;
+      this.setState({
+        customUrl: publish_url
+      });
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  };
+
   onDeletePage = (pageId) => {
     const config = deepCopy(this.props.config);
     const { pages } = config;
@@ -224,6 +244,7 @@ class SidePanel extends PureComponent {
       <div className={classNames('wiki2-side-panel', { 'left-zero': this.props.isSidePanelOpen })}>
         <div className="wiki2-side-panel-top">
           <h1 className="h4 text-truncate ml-0 mb-0" title={repoName}>{repoName}</h1>
+          {wikiPermission === 'rw' && <PublishedWikiExtrance wikiID={wikiId} customURLPart={this.state.customUrl} />}
         </div>
         <Wiki2Search
           wikiId={wikiId}