Merge pull request #2899 from weseek/imprv/3545-4071-restrictions-on-triple-buttons-for-guest-user-access

Imprv/3545 4071 restrictions on triple buttons for guest user access

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

@@ -145,6 +145,7 @@ const GrowiSubNavigation = (props) => {
     isForbidden: isPageForbidden, pageUser, isCreatable,
   } = pageContainer.state;
 
+  const { currentUser } = appContainer;
   const isPageNotFound = pageId == null;
   const isUserPage = pageUser != null;
   const isPageInTrash = isTrashPage(path);
@@ -195,7 +196,7 @@ const GrowiSubNavigation = (props) => {
             { !isPageNotFound && !isPageForbidden && <PageManagement /> }
           </div>
           <div className="mt-2">
-            { !isCreatable && <ThreeStrandedButton onThreeStrandedButtonClicked={onThreeStrandedButtonClicked} />}
+            { !isCreatable && <ThreeStrandedButton onThreeStrandedButtonClicked={onThreeStrandedButtonClicked} isBtnDisabled={currentUser == null} />}
           </div>
         </div>
 

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

@@ -1,11 +1,17 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+import { UncontrolledTooltip } from 'reactstrap';
 
 const ThreeStrandedButton = (props) => {
-  const { t } = props;
+  const { t, isBtnDisabled } = props;
+
   const [btnActive, setBtnActive] = useState('view');
+
   function threeStrandedButtonClickedHandler(viewType) {
+    if (isBtnDisabled) {
+      return;
+    }
     if (props.onThreeStrandedButtonClicked != null) {
       props.onThreeStrandedButtonClicked(viewType);
     }
@@ -13,32 +19,44 @@ const ThreeStrandedButton = (props) => {
   }
 
   return (
-    <div className="btn-group grw-three-stranded-button" role="group " aria-label="three-stranded-button">
-      <button
-        type="button"
-        className={`btn btn-outline-primary view-button ${btnActive === 'view' && 'active'}`}
-        onClick={() => { threeStrandedButtonClickedHandler('view') }}
-      >
-        <i className="icon-control-play icon-fw" />
-        { t('view') }
-      </button>
-      <button
-        type="button"
-        className={`btn btn-outline-primary edit-button ${btnActive === 'edit' && 'active'}`}
-        onClick={(e) => { threeStrandedButtonClickedHandler('edit') }}
+    <>
+      <div
+        className="btn-group grw-three-stranded-button"
+        role="group"
+        aria-label="three-stranded-button"
+        id="grw-three-stranded-button"
       >
-        <i className="icon-note icon-fw" />
-        { t('Edit') }
-      </button>
-      <button
-        type="button"
-        className={`btn btn-outline-primary hackmd-button ${btnActive === 'hackmd' && 'active'}`}
-        onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}
-      >
-        <i className="fa fa-fw fa-file-text-o" />
-        { t('hackmd.hack_md') }
-      </button>
-    </div>
+        <button
+          type="button"
+          className={`btn btn-outline-primary view-button ${btnActive === 'view' && 'active'} ${isBtnDisabled && 'disabled'}`}
+          onClick={() => { threeStrandedButtonClickedHandler('view') }}
+        >
+          <i className="icon-control-play icon-fw" />
+          { t('view') }
+        </button>
+        <button
+          type="button"
+          className={`btn btn-outline-primary edit-button ${btnActive === 'edit' && 'active'} ${isBtnDisabled && 'disabled'}`}
+          onClick={() => { threeStrandedButtonClickedHandler('edit') }}
+        >
+          <i className="icon-note icon-fw" />
+          { t('Edit') }
+        </button>
+        <button
+          type="button"
+          className={`btn btn-outline-primary hackmd-button ${btnActive === 'hackmd' && 'active'} ${isBtnDisabled && 'disabled'}`}
+          onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}
+        >
+          <i className="fa fa-fw fa-file-text-o" />
+          { t('hackmd.hack_md') }
+        </button>
+      </div>
+      {isBtnDisabled && (
+        <UncontrolledTooltip placement="top" target="grw-three-stranded-button" fade={false}>
+          {t('Not available for guest')}
+        </UncontrolledTooltip>
+      )}
+    </>
   );
 
 };
@@ -46,6 +64,11 @@ const ThreeStrandedButton = (props) => {
 ThreeStrandedButton.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   onThreeStrandedButtonClicked: PropTypes.func,
+  isBtnDisabled: PropTypes.bool,
+};
+
+ThreeStrandedButton.defaultProps = {
+  isBtnDisabled: false,
 };
 
 export default withTranslation()(ThreeStrandedButton);

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

@@ -194,7 +194,7 @@ const PageManagement = (props) => {
         >
           <i className="icon-options"></i>
         </button>
-        <UncontrolledTooltip placement="top" target="icon-options-guest-tltips">
+        <UncontrolledTooltip placement="top" target="icon-options-guest-tltips" fade={false}>
           {t('Not available for guest')}
         </UncontrolledTooltip>
       </>