Moderators: conditional display of features

app/soapbox/components/sidebar_menu.js

@@ -12,7 +12,7 @@ import IconButton from './icon_button';
 import Icon from './icon';
 import DisplayName from './display_name';
 import { closeSidebar } from '../actions/sidebar';
-import { isStaff } from '../utils/accounts';
+import { isStaff, isAdmin } from '../utils/accounts';
 import { makeGetAccount, makeGetOtherAccounts } from '../selectors';
 import { logOut, switchAccount } from 'soapbox/actions/auth';
 import ThemeToggle from '../features/ui/components/theme_toggle_container';
@@ -58,7 +58,6 @@ const makeMapStateToProps = () => {
       sidebarOpen: state.get('sidebar').sidebarOpen,
       donateUrl: state.getIn(['patron', 'instance', 'url']),
       hasCrypto: typeof soapbox.getIn(['cryptoAddresses', 0, 'ticker']) === 'string',
-      isStaff: isStaff(state.getIn(['accounts', me])),
       otherAccounts: getOtherAccounts(state),
     };
   };
@@ -92,13 +91,8 @@ class SidebarMenu extends ImmutablePureComponent {
     otherAccounts: ImmutablePropTypes.list,
     sidebarOpen: PropTypes.bool,
     onClose: PropTypes.func.isRequired,
-    isStaff: PropTypes.bool.isRequired,
   };
 
-  static defaultProps = {
-    isStaff: false,
-  }
-
   state = {
     switcher: false,
   }
@@ -153,7 +147,7 @@ class SidebarMenu extends ImmutablePureComponent {
   }
 
   render() {
-    const { sidebarOpen, intl, account, onClickLogOut, donateUrl, isStaff, otherAccounts, hasCrypto } = this.props;
+    const { sidebarOpen, intl, account, onClickLogOut, donateUrl, otherAccounts, hasCrypto } = this.props;
     const { switcher } = this.state;
     if (!account) return null;
     const acct = account.get('acct');
@@ -245,11 +239,11 @@ class SidebarMenu extends ImmutablePureComponent {
                 <Icon id='filter' />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.filters)}</span>
               </NavLink>
-              { isStaff && <a className='sidebar-menu-item' href='/pleroma/admin' target='_blank' onClick={this.handleClose}>
+              {isStaff(account) && <a className='sidebar-menu-item' href='/pleroma/admin' target='_blank' onClick={this.handleClose}>
                 <Icon id='shield' />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.admin_settings)}</span>
               </a>}
-              { isStaff && <NavLink className='sidebar-menu-item' to='/soapbox/config' onClick={this.handleClose}>
+              {isAdmin(account) && <NavLink className='sidebar-menu-item' to='/soapbox/config' onClick={this.handleClose}>
                 <Icon id='cog' />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.soapbox_config)}</span>
               </NavLink>}

app/soapbox/features/admin/index.js

@@ -10,6 +10,7 @@ import { parseVersion } from 'soapbox/utils/features';
 import sourceCode from 'soapbox/utils/code';
 import { getSubscribersCsv, getUnsubscribersCsv, getCombinedCsv } from 'soapbox/actions/email_list';
 import { getFeatures } from 'soapbox/utils/features';
+import { isAdmin } from 'soapbox/utils/accounts';
 
 // https://stackoverflow.com/a/53230807
 const download = (response, filename) => {
@@ -26,10 +27,15 @@ const messages = defineMessages({
   heading: { id: 'column.admin.dashboard', defaultMessage: 'Dashboard' },
 });
 
-const mapStateToProps = (state, props) => ({
+const mapStateToProps = (state, props) => {
+  const me = state.get('me');
+
+  return {
     instance: state.get('instance'),
     supportsEmailList: getFeatures(state.get('instance')).emailList,
-});
+    account: state.getIn(['accounts', me]),
+  };
+};
 
 export default @connect(mapStateToProps)
 @injectIntl
@@ -39,6 +45,7 @@ class Dashboard extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
     instance: ImmutablePropTypes.map.isRequired,
     supportsEmailList: PropTypes.bool,
+    account: ImmutablePropTypes.map,
   };
 
   handleSubscribersClick = e => {
@@ -63,12 +70,14 @@ class Dashboard extends ImmutablePureComponent {
   }
 
   render() {
-    const { intl, instance, supportsEmailList } = this.props;
+    const { intl, instance, supportsEmailList, account } = this.props;
     const v = parseVersion(instance.get('version'));
     const userCount = instance.getIn(['stats', 'user_count']);
     const mau = instance.getIn(['pleroma', 'stats', 'mau']);
     const retention = (userCount && mau) ? Math.round(mau / userCount * 100) : null;
 
+    if (!account) return null;
+
     return (
       <Column icon='tachometer' heading={intl.formatMessage(messages.heading)} backBtnSlim>
         <div className='dashcounters'>
@@ -123,7 +132,7 @@ class Dashboard extends ImmutablePureComponent {
             </div>
           </div>
         </div>
-        <RegistrationModePicker />
+        {isAdmin(account) && <RegistrationModePicker />}
         <div className='dashwidgets'>
           <div className='dashwidget'>
             <h4><FormattedMessage id='admin.dashwidgets.software_header' defaultMessage='Software' /></h4>
@@ -132,7 +141,7 @@ class Dashboard extends ImmutablePureComponent {
               <li>{v.software} <span className='pull-right'>{v.version}</span></li>
             </ul>
           </div>
-          {supportsEmailList && <div className='dashwidget'>
+          {supportsEmailList && isAdmin(account) && <div className='dashwidget'>
             <h4><FormattedMessage id='admin.dashwidgets.email_list_header' defaultMessage='Email list' /></h4>
             <ul>
               <li><a href='#' onClick={this.handleSubscribersClick} target='_blank'>subscribers.csv</a></li>

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

@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { openModal } from '../../../actions/modal';
 import { logOut } from 'soapbox/actions/auth';
-import { isStaff } from 'soapbox/utils/accounts';
+import { isStaff, isAdmin } from 'soapbox/utils/accounts';
 import sourceCode from 'soapbox/utils/code';
 
 const mapStateToProps = state => {
@@ -35,10 +35,8 @@ const LinkFooter = ({ onOpenHotkeys, account, onClickLogOut }) => (
         <li><Link to='/filters'><FormattedMessage id='navigation_bar.filters' defaultMessage='Filters' /></Link></li>
         <li><Link to='/domain_blocks'><FormattedMessage id='navigation_bar.domain_blocks' defaultMessage='Domain blocks' /></Link></li>
         <li><Link to='/follow_requests'><FormattedMessage id='navigation_bar.follow_requests' defaultMessage='Follow requests' /></Link></li>
-        {isStaff(account) && <>
-          <li><a href='/pleroma/admin'><FormattedMessage id='navigation_bar.admin_settings' defaultMessage='AdminFE' /></a></li>
-          <li><Link to='/soapbox/config'><FormattedMessage id='navigation_bar.soapbox_config' defaultMessage='Soapbox config' /></Link></li>
-        </>}
+        {isStaff(account) && <li><a href='/pleroma/admin'><FormattedMessage id='navigation_bar.admin_settings' defaultMessage='AdminFE' /></a></li>}
+        {isAdmin(account) && <li><Link to='/soapbox/config'><FormattedMessage id='navigation_bar.soapbox_config' defaultMessage='Soapbox config' /></Link></li>}
         <li><Link to='/settings/import'><FormattedMessage id='navigation_bar.import_data' defaultMessage='Import data' /></Link></li>
         <li><a href='#' onClick={onOpenHotkeys}><FormattedMessage id='navigation_bar.keyboard_shortcuts' defaultMessage='Hotkeys' /></a></li>
       </>}

app/soapbox/features/ui/index.js

@@ -38,7 +38,7 @@ import SidebarMenu from '../../components/sidebar_menu';
 import { connectUserStream } from '../../actions/streaming';
 import { Redirect } from 'react-router-dom';
 import Icon from 'soapbox/components/icon';
-import { isStaff } from 'soapbox/utils/accounts';
+import { isStaff, isAdmin } from 'soapbox/utils/accounts';
 import ProfileHoverCard from 'soapbox/components/profile_hover_card';
 import { getAccessToken } from 'soapbox/utils/auth';
 
@@ -429,6 +429,9 @@ class UI extends React.PureComponent {
       if (isStaff(account)) {
         this.props.dispatch(fetchReports({ state: 'open' }));
         this.props.dispatch(fetchUsers({ page: 1, filters: 'local,need_approval' }));
+      }
+
+      if (isAdmin(account)) {
         this.props.dispatch(fetchConfig());
       }