Merge branch 'mentions-modal' into 'develop'

Replace link to /reblogs, require authentication

See merge request soapbox-pub/soapbox-fe!960

app/soapbox/components/status_action_bar.js

@@ -70,6 +70,7 @@ class StatusActionBar extends ImmutablePureComponent {
   static propTypes = {
     status: ImmutablePropTypes.map.isRequired,
     onOpenUnauthorizedModal: PropTypes.func.isRequired,
+    onOpenReblogsModal: PropTypes.func.isRequired,
     onReply: PropTypes.func,
     onFavourite: PropTypes.func,
     onBookmark: PropTypes.func,
@@ -294,6 +295,13 @@ class StatusActionBar extends ImmutablePureComponent {
     this.props.onToggleStatusSensitivity(this.props.status);
   }
 
+  handleOpenReblogsModal = () => {
+    const { me, status, onOpenUnauthorizedModal, onOpenReblogsModal } = this.props;
+
+    if (!me) onOpenUnauthorizedModal();
+    else onOpenReblogsModal(status.getIn(['account', 'acct']), status.get('id'));
+  }
+
   _makeMenu = (publicStatus) => {
     const { status, intl, withDismiss, withGroupAdmin, me, features, isStaff, isAdmin } = this.props;
     const mutingConversation = status.get('muted');
@@ -544,7 +552,7 @@ class StatusActionBar extends ImmutablePureComponent {
         </div>
         <div className='status__action-bar__counter'>
           <IconButton className='status__action-bar-button' disabled={!publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} src={reblogIcon} onClick={this.handleReblogClick} />
-          {reblogCount !== 0 && <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/reblogs`} className='detailed-status__link'>{reblogCount}</Link>}
+          {reblogCount !== 0 && <span className='detailed-status__link' type='button' role='presentation' onClick={this.handleOpenReblogsModal}>{reblogCount}</span>}
         </div>
         <div
           className='status__action-bar__counter status__action-bar__counter--favourite'
@@ -607,6 +615,12 @@ const mapDispatchToProps = (dispatch, { status }) => ({
       ap_id: status.get('url'),
     }));
   },
+  onOpenReblogsModal(username, statusId) {
+    dispatch(openModal('REBLOGS', {
+      username,
+      statusId,
+    }));
+  },
 });
 
 export default injectIntl(

app/soapbox/features/status/components/status_interaction_bar.js

@@ -13,15 +13,20 @@ import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { openModal } from 'soapbox/actions/modal';
 
 const mapStateToProps = state => {
+  const me = state.get('me');
   const instance = state.get('instance');
 
   return {
+    me,
     allowedEmoji: getSoapboxConfig(state).get('allowedEmoji'),
     features: getFeatures(instance),
   };
 };
 
 const mapDispatchToProps = (dispatch) => ({
+  onOpenUnauthorizedModal() {
+    dispatch(openModal('UNAUTHORIZED'));
+  },
   onOpenReblogsModal(username, statusId) {
     dispatch(openModal('REBLOGS', {
       username,
@@ -66,9 +71,10 @@ class StatusInteractionBar extends ImmutablePureComponent {
   }
 
   handleOpenReblogsModal = () => {
-    const { status, onOpenReblogsModal } = this.props;
+    const { me, status, onOpenUnauthorizedModal, onOpenReblogsModal } = this.props;
 
-    onOpenReblogsModal(status.getIn(['account', 'acct']), status.get('id'));
+    if (!me) onOpenUnauthorizedModal();
+    else onOpenReblogsModal(status.getIn(['account', 'acct']), status.get('id'));
   }
 
   getReposts = () => {
@@ -94,9 +100,10 @@ class StatusInteractionBar extends ImmutablePureComponent {
   }
 
   handleOpenFavouritesModal = () => {
-    const { status, onOpenFavouritesModal } = this.props;
+    const { me, status, onOpenUnauthorizedModal, onOpenFavouritesModal } = this.props;
 
-    onOpenFavouritesModal(status.getIn(['account', 'acct']), status.get('id'));
+    if (!me) onOpenUnauthorizedModal();
+    else onOpenFavouritesModal(status.getIn(['account', 'acct']), status.get('id'));
   }
 
   getFavourites = () => {
@@ -136,9 +143,10 @@ class StatusInteractionBar extends ImmutablePureComponent {
   }
 
   handleOpenReactionsModal = (reaction) => () => {
-    const { status, onOpenReactionsModal } = this.props;
+    const { me, status, onOpenUnauthorizedModal, onOpenReactionsModal } = this.props;
 
-    onOpenReactionsModal(status.getIn(['account', 'acct']), status.get('id'), reaction.get('name'));
+    if (!me) onOpenUnauthorizedModal();
+    else onOpenReactionsModal(status.getIn(['account', 'acct']), status.get('id'), reaction.get('name'));
   }
 
   getEmojiReacts = () => {

app/soapbox/features/ui/components/unauthorized_modal.js

@@ -146,9 +146,9 @@ class UnauthorizedModal extends ImmutablePureComponent {
   }
 
   render() {
-    const { intl, features, siteTitle } = this.props;
+    const { intl, features, siteTitle, action } = this.props;
 
-    if (features.remoteInteractionsAPI && features.federating) return this.renderRemoteInteractions();
+    if (action && features.remoteInteractionsAPI && features.federating) return this.renderRemoteInteractions();
 
     return (
       <div className='modal-root__modal compose-modal unauthorized-modal'>

app/styles/components/detailed-status.scss

@@ -88,6 +88,7 @@
   color: var(--primary-text-color--faint);
   text-decoration: none;
   font-size: 13px;
+  cursor: pointer;
 }
 
 .detailed-status__button {