Merge branch 'master' into fix/pagination-of-UserGroupPagelist

src/client/js/components/Admin/Common/AdminNavigation.jsx

@@ -39,7 +39,7 @@ const AdminNavigation = (props) => {
     return (
       <a
         href={isRoot ? '/admin' : urljoin('/admin', menu)}
-        className={`${pageTransitionClassName} ${isActive && 'active'}`}
+        className={`${pageTransitionClassName} ${isActive ? 'active' : ''}`}
       >
         <MenuLabel menu={menu} />
       </a>

src/client/js/components/BookmarkButton.jsx

@@ -1,9 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { toastError } from '../util/apiNotification';
+import { UncontrolledTooltip } from 'reactstrap';
+import { withTranslation } from 'react-i18next';
 import { withUnstatedContainers } from './UnstatedUtils';
+
+import { toastError } from '../util/apiNotification';
 import PageContainer from '../services/PageContainer';
+import AppContainer from '../services/AppContainer';
 
 class BookmarkButton extends React.Component {
 
@@ -15,6 +19,11 @@ class BookmarkButton extends React.Component {
 
   async handleClick() {
     const { pageContainer } = this.props;
+    const isGuestUser = pageContainer.state.isGuestUser;
+
+    if (isGuestUser) {
+      return;
+    }
 
     try {
       pageContainer.toggleBookmark();
@@ -24,44 +33,49 @@ class BookmarkButton extends React.Component {
     }
   }
 
-  isUserLoggedIn() {
-    return this.props.crowi.currentUserId != null;
-  }
 
   render() {
-    const { pageContainer } = this.props;
-    // if guest user
-    if (!this.isUserLoggedIn()) {
-      return <div></div>;
-    }
+    const { pageContainer, t } = this.props;
+    const isGuestUser = pageContainer.state.isGuestUser;
 
     return (
-      <button
-        type="button"
-        href="#"
-        title="Bookmark"
-        onClick={this.handleClick}
-        className={`btn btn-bookmark border-0
+      <div>
+        <button
+          type="button"
+          id="bookmark-button"
+          onClick={this.handleClick}
+          className={`btn btn-bookmark border-0
           ${`btn-${this.props.size}`}
-          ${pageContainer.state.isBookmarked ? 'active' : ''}`}
-      >
-        <i className="icon-star mr-3"></i>
-        <span className="total-bookmarks">
-          {pageContainer.state.sumOfBookmarks}
-        </span>
-      </button>
+          ${pageContainer.state.isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
+        >
+          <i className="icon-star mr-3"></i>
+          <span className="total-bookmarks">
+            {pageContainer.state.sumOfBookmarks}
+          </span>
+        </button>
+
+        {isGuestUser && (
+        <UncontrolledTooltip placement="top" target="bookmark-button" fade={false}>
+          {t('Not available for guest')}
+        </UncontrolledTooltip>
+        )}
+      </div>
     );
   }
 
 }
 
-const BookmarkButtonWrapper = withUnstatedContainers(BookmarkButton, [PageContainer]);
+/**
+ * Wrapper component for using unstated
+ */
+const BookmarkButtonWrapper = withUnstatedContainers(BookmarkButton, [AppContainer, PageContainer]);
 
 BookmarkButton.propTypes = {
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
   pageId: PropTypes.string,
-  crowi: PropTypes.object.isRequired,
+  t: PropTypes.func.isRequired,
   size: PropTypes.string,
 };
 
@@ -69,4 +83,4 @@ BookmarkButton.defaultProps = {
   size: 'md',
 };
 
-export default BookmarkButtonWrapper;
+export default withTranslation()(BookmarkButtonWrapper);

src/client/js/components/LikeButton.jsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { toastError } from '../util/apiNotification';
+import { UncontrolledTooltip } from 'reactstrap';
+import { withTranslation } from 'react-i18next';
 import { withUnstatedContainers } from './UnstatedUtils';
+
+import { toastError } from '../util/apiNotification';
 import AppContainer from '../services/AppContainer';
 import PageContainer from '../services/PageContainer';
 
@@ -16,6 +19,12 @@ class LikeButton extends React.Component {
 
   async handleClick() {
     const { pageContainer } = this.props;
+    const isGuestUser = pageContainer.state.isGuestUser;
+
+    if (isGuestUser) {
+      return;
+    }
+
     try {
       pageContainer.toggleLike();
     }
@@ -24,29 +33,32 @@ class LikeButton extends React.Component {
     }
   }
 
-  isUserLoggedIn() {
-    return this.props.appContainer.currentUserId != null;
-  }
 
   render() {
-    const { pageContainer } = this.props;
-    // if guest user
-    if (!this.isUserLoggedIn()) {
-      return <div></div>;
-    }
+    const { pageContainer, t } = this.props;
+    const isGuestUser = pageContainer.state.isGuestUser;
 
     return (
-      <button
-        type="button"
-        onClick={this.handleClick}
-        className={`btn btn-like border-0
-        ${pageContainer.state.isLiked ? 'active' : ''}`}
-      >
-        <i className="icon-like mr-3"></i>
-        <span className="total-likes">
-          {pageContainer.state.sumOfLikers}
-        </span>
-      </button>
+      <div>
+        <button
+          type="button"
+          id="like-button"
+          onClick={this.handleClick}
+          className={`btn btn-like border-0
+          ${pageContainer.state.isLiked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
+        >
+          <i className="icon-like mr-3"></i>
+          <span className="total-likes">
+            {pageContainer.state.sumOfLikers}
+          </span>
+        </button>
+
+        {isGuestUser && (
+        <UncontrolledTooltip placement="top" target="like-button" fade={false}>
+          {t('Not available for guest')}
+        </UncontrolledTooltip>
+        )}
+      </div>
     );
   }
 
@@ -61,7 +73,8 @@ LikeButton.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 
+  t: PropTypes.func.isRequired,
   size: PropTypes.string,
 };
 
-export default LikeButtonWrapper;
+export default withTranslation()(LikeButtonWrapper);

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -77,7 +77,7 @@ const PageReactionButtons = ({ appContainer, pageContainer }) => {
         </span>
       )}
       <span>
-        <BookmarkButton crowi={appContainer} />
+        <BookmarkButton />
       </span>
     </>
   );

src/client/js/components/Navbar/ThreeStrandedButton.jsx

@@ -26,7 +26,7 @@ const ThreeStrandedButton = (props) => {
       >
         <button
           type="button"
-          className={`btn btn-outline-primary view-button ${editorMode === 'view' && 'active'} ${isBtnDisabled && 'disabled'}`}
+          className={`btn btn-outline-primary view-button ${editorMode === 'view' ? 'active' : ''} ${isBtnDisabled ? 'disabled' : ''}`}
           onClick={() => { threeStrandedButtonClickedHandler('view') }}
         >
           <i className="icon-control-play icon-fw grw-three-stranded-button-icon" />
@@ -34,7 +34,7 @@ const ThreeStrandedButton = (props) => {
         </button>
         <button
           type="button"
-          className={`btn btn-outline-primary edit-button ${editorMode === 'edit' && 'active'} ${isBtnDisabled && 'disabled'}`}
+          className={`btn btn-outline-primary edit-button ${editorMode === 'edit' ? 'active' : ''} ${isBtnDisabled ? 'disabled' : ''}`}
           onClick={() => { threeStrandedButtonClickedHandler('edit') }}
         >
           <i className="icon-note icon-fw grw-three-stranded-button-icon" />
@@ -42,7 +42,7 @@ const ThreeStrandedButton = (props) => {
         </button>
         <button
           type="button"
-          className={`btn btn-outline-primary hackmd-button ${editorMode === 'hackmd' && 'active'} ${isBtnDisabled && 'disabled'}`}
+          className={`btn btn-outline-primary hackmd-button ${editorMode === 'hackmd' ? 'active' : ''} ${isBtnDisabled ? 'disabled' : ''}`}
           onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}
         >
           <i className="fa fa-fw fa-file-text-o grw-three-stranded-button-icon" />

src/client/js/components/Page/NotFoundAlert.jsx

@@ -7,6 +7,13 @@ import { UncontrolledTooltip } from 'reactstrap';
 const NotFoundAlert = (props) => {
   const { t, isHidden, isGuestUserMode } = props;
   function clickHandler(viewType) {
+
+    // check guest user,
+    // disabled of button cannot be used for using tooltip.
+    if (isGuestUserMode) {
+      return;
+    }
+
     if (props.onPageCreateClicked === null) {
       return;
     }
@@ -27,17 +34,16 @@ const NotFoundAlert = (props) => {
           <i className="icon-info pr-2 font-weight-bold" aria-hidden="true"></i>
           {t('not_found_page.page_not_exist_alert')}
         </h2>
-        <button
-          type="button"
-          className="m-1 pl-3 pr-3 btn bg-info text-white"
-          onClick={() => { clickHandler('edit') }}
-          disabled={isGuestUserMode}
-        >
-          <div id="create-page-btn-wrapper-for-tooltip">
+        <div id="create-page-btn-wrapper-for-tooltip" className="d-inline-block">
+          <button
+            type="button"
+            className={`pl-3 pr-3 btn bg-info text-white ${isGuestUserMode ? 'disabled' : ''}`}
+            onClick={() => { clickHandler('edit') }}
+          >
             <i className="icon-note icon-fw" />
             {t('not_found_page.Create Page')}
-          </div>
-        </button>
+          </button>
+        </div>
 
 
         {isGuestUserMode && (

src/client/js/components/Page/RenderTagLabels.jsx

@@ -37,7 +37,7 @@ const RenderTagLabels = React.memo((props) => {
 
       <div id="edit-tags-btn-wrapper-for-tooltip">
         <a
-          className={`btn btn-link btn-edit-tags p-0 text-muted ${isTagsEmpty && 'no-tags'} ${isGuestUser && 'disabled'}`}
+          className={`btn btn-link btn-edit-tags p-0 text-muted ${isTagsEmpty ? 'no-tags' : ''} ${isGuestUser ? 'disabled' : ''}`}
           onClick={openEditorHandler}
         >
           { isTagsEmpty && <>{ t('Add tags for this page') }</>}

src/client/js/components/PageAccessoriesModal.jsx

@@ -95,7 +95,12 @@ const PageAccessoriesModal = (props) => {
 
   return (
     <React.Fragment>
-      <Modal size="xl" isOpen={props.isOpen} toggle={closeModalHandler} className={`grw-page-accessories-modal ${isWindowExpanded && 'grw-modal-expanded'} `}>
+      <Modal
+        size="xl"
+        isOpen={props.isOpen}
+        toggle={closeModalHandler}
+        className={`grw-page-accessories-modal ${isWindowExpanded ? 'grw-modal-expanded' : ''} `}
+      >
         <ModalHeader className="p-0" toggle={closeModalHandler} close={buttons}>
           <CustomNav activeTab={activeTab} navTabMapping={navTabMapping} onNavSelected={switchActiveTab} hideBorderBottom />
         </ModalHeader>

src/client/js/components/PageAccessoriesModalControl.jsx

@@ -58,7 +58,7 @@ const PageAccessoriesModalControl = (props) => {
             <div id={`shareLink-btn-wrapper-for-tooltip-for-${accessory.name}`}>
               <button
                 type="button"
-                className={`btn btn-link grw-btn-page-accessories ${accessory.disabled && 'disabled'}`}
+                className={`btn btn-link grw-btn-page-accessories ${accessory.disabled ? 'disabled' : ''}`}
                 onClick={() => pageAccessoriesContainer.openPageAccessoriesModal(accessory.name)}
               >
                 {accessory.Icon}

src/client/js/components/PageList.jsx

@@ -43,7 +43,7 @@ const PageList = (props) => {
   if (isLoading) {
     return (
       <div className="wiki">
-        <div className="text-muted test-center">
+        <div className="text-muted text-center">
           <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
         </div>
       </div>

src/client/styles/scss/theme/_apply-colors.scss

@@ -328,6 +328,10 @@ ul.pagination {
 
 .grw-custom-nav {
   .nav-item {
+    &:hover,
+    &:focus {
+      background-color: rgba($color-link, 0.08);
+    }
     .nav-link {
       -webkit-appearance: none;
       color: $color-link;