Merge branch 'mod-improvements' into 'develop'

Mod improvements

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

app/soapbox/actions/moderation.js

@@ -1,7 +1,10 @@
+import React from 'react';
 import { defineMessages } from 'react-intl';
 import { openModal } from 'soapbox/actions/modal';
 import { deactivateUsers, deleteUsers, deleteStatus, toggleStatusSensitivity } from 'soapbox/actions/admin';
 import snackbar from 'soapbox/actions/snackbar';
+import AccountContainer from 'soapbox/containers/account_container';
+import { isLocal } from 'soapbox/utils/accounts';
 
 const messages = defineMessages({
   deactivateUserPrompt: { id: 'confirmations.admin.deactivate_user.message', defaultMessage: 'You are about to deactivate @{acct}. Deactivating a user is a reversible action.' },
@@ -9,6 +12,7 @@ const messages = defineMessages({
   userDeactivated: { id: 'admin.users.user_deactivated_message', defaultMessage: '@{acct} was deactivated' },
   deleteUserPrompt: { id: 'confirmations.admin.delete_user.message', defaultMessage: 'You are about to delete @{acct}. THIS IS A DESTRUCTIVE ACTION THAT CANNOT BE UNDONE.' },
   deleteUserConfirm: { id: 'confirmations.admin.delete_user.confirm', defaultMessage: 'Delete @{name}' },
+  deleteLocalUserCheckbox: { id: 'confirmations.admin.delete_local_user.checkbox', defaultMessage: 'I understand that I am about to delete a local user.' },
   userDeleted: { id: 'admin.users.user_deleted_message', defaultMessage: '@{acct} was deleted' },
   deleteStatusPrompt: { id: 'confirmations.admin.delete_status.message', defaultMessage: 'You are about to delete a post by @{acct}. This action cannot be undone.' },
   deleteStatusConfirm: { id: 'confirmations.admin.delete_status.confirm', defaultMessage: 'Delete post' },
@@ -46,10 +50,28 @@ export function deleteUserModal(intl, accountId, afterConfirm = () => {}) {
     const state = getState();
     const acct = state.getIn(['accounts', accountId, 'acct']);
     const name = state.getIn(['accounts', accountId, 'username']);
+    const favicon = state.getIn(['accounts', accountId, 'pleroma', 'favicon']);
+    const local = isLocal(state.getIn(['accounts', accountId]));
+
+    const message = (<>
+      <AccountContainer id={accountId} />
+      {intl.formatMessage(messages.deleteUserPrompt, { acct })}
+    </>);
+
+    const confirm = (<>
+      {favicon &&
+        <div className='submit__favicon'>
+          <img src={favicon} alt='' />
+        </div>}
+      {intl.formatMessage(messages.deleteUserConfirm, { name })}
+    </>);
+
+    const checkbox = local ? intl.formatMessage(messages.deleteLocalUserCheckbox) : false;
 
     dispatch(openModal('CONFIRM', {
-      message: intl.formatMessage(messages.deleteUserPrompt, { acct }),
-      confirm: intl.formatMessage(messages.deleteUserConfirm, { name }),
+      message,
+      confirm,
+      checkbox,
       onConfirm: () => {
         dispatch(deleteUsers([acct])).then(() => {
           const message = intl.formatMessage(messages.userDeleted, { acct });

app/soapbox/features/admin/moderation_log.js

@@ -1,41 +1,62 @@
 import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, FormattedDate } from 'react-intl';
 import { connect } from 'react-redux';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import PropTypes from 'prop-types';
 import Column from '../ui/components/column';
 import ScrollableList from 'soapbox/components/scrollable_list';
 import { fetchModerationLog } from 'soapbox/actions/admin';
-import { List as ImmutableList, fromJS } from 'immutable';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.moderation_log', defaultMessage: 'Moderation Log' },
   emptyMessage: { id: 'admin.moderation_log.empty_message', defaultMessage: 'You have not performed any moderation actions yet. When you do, a history will be shown here.' },
 });
 
-export default @connect()
+const mapStateToProps = state => ({
+  items: state.getIn(['admin_log', 'index']).map(i => state.getIn(['admin_log', 'items', String(i)])),
+  hasMore: state.getIn(['admin_log', 'total'], 0) - state.getIn(['admin_log', 'index']).count() > 0,
+});
+
+export default @connect(mapStateToProps)
 @injectIntl
 class ModerationLog extends ImmutablePureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,
+    list: ImmutablePropTypes.list,
   };
 
   state = {
     isLoading: true,
-    items: ImmutableList(),
+    lastPage: 0,
   }
 
   componentDidMount() {
     const { dispatch } = this.props;
     dispatch(fetchModerationLog())
-      .then(data => this.setState({ isLoading: false, items: fromJS(data.items) }))
+      .then(data => this.setState({
+        isLoading: false,
+        lastPage: 1,
+      }))
+      .catch(() => {});
+  }
+
+  handleLoadMore = () => {
+    const page = this.state.lastPage + 1;
+
+    this.setState({ isLoading: true });
+    this.props.dispatch(fetchModerationLog({ page }))
+      .then(data => this.setState({
+        isLoading: false,
+        lastPage: page,
+      }))
       .catch(() => {});
   }
 
   render() {
-    const { intl } = this.props;
-    const { isLoading, items } = this.state;
+    const { intl, items, hasMore } = this.props;
+    const { isLoading } = this.state;
     const showLoading = isLoading && items.count() === 0;
 
     return (
@@ -45,10 +66,23 @@ class ModerationLog extends ImmutablePureComponent {
           showLoading={showLoading}
           scrollKey='moderation-log'
           emptyMessage={intl.formatMessage(messages.emptyMessage)}
+          hasMore={hasMore}
+          onLoadMore={this.handleLoadMore}
         >
           {items.map((item, i) => (
             <div className='logentry' key={i}>
-              {item.get('message')}
+              <div className='logentry__message'>{item.get('message')}</div>
+              <div className='logentry__timestamp'>
+                <FormattedDate
+                  value={new Date(item.get('time') * 1000)}
+                  hour12={false}
+                  year='numeric'
+                  month='short'
+                  day='2-digit'
+                  hour='2-digit'
+                  minute='2-digit'
+                />
+              </div>
             </div>
           ))}
         </ScrollableList>

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

@@ -2,21 +2,27 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import Button from '../../../components/button';
+import { SimpleForm, FieldsGroup, Checkbox } from 'soapbox/features/forms';
 
 export default @injectIntl
 class ConfirmationModal extends React.PureComponent {
 
   static propTypes = {
     message: PropTypes.node.isRequired,
-    confirm: PropTypes.string.isRequired,
+    confirm: PropTypes.node.isRequired,
     onClose: PropTypes.func.isRequired,
     onConfirm: PropTypes.func.isRequired,
     secondary: PropTypes.string,
     onSecondary: PropTypes.func,
     intl: PropTypes.object.isRequired,
     onCancel: PropTypes.func,
+    checkbox: PropTypes.node,
   };
 
+  state = {
+    checked: false,
+  }
+
   componentDidMount() {
     this.button.focus();
   }
@@ -37,12 +43,17 @@ class ConfirmationModal extends React.PureComponent {
     if (onCancel) onCancel();
   }
 
+  handleCheckboxChange = e => {
+    this.setState({ checked: e.target.checked });
+  }
+
   setRef = (c) => {
     this.button = c;
   }
 
   render() {
-    const { message, confirm, secondary } = this.props;
+    const { message, confirm, secondary, checkbox } = this.props;
+    const { checked } = this.state;
 
     return (
       <div className='modal-root__modal confirmation-modal'>
@@ -50,6 +61,18 @@ class ConfirmationModal extends React.PureComponent {
           {message}
         </div>
 
+        {checkbox && <div className='confirmation-modal__checkbox'>
+          <SimpleForm>
+            <FieldsGroup>
+              <Checkbox
+                onChange={this.handleCheckboxChange}
+                label={checkbox}
+                checked={checked}
+              />
+            </FieldsGroup>
+          </SimpleForm>
+        </div>}
+
         <div className='confirmation-modal__action-bar'>
           <Button onClick={this.handleCancel} className='confirmation-modal__cancel-button'>
             <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
@@ -57,7 +80,12 @@ class ConfirmationModal extends React.PureComponent {
           {secondary !== undefined && (
             <Button text={secondary} onClick={this.handleSecondary} className='confirmation-modal__secondary-button' />
           )}
-          <Button text={confirm} onClick={this.handleClick} ref={this.setRef} />
+          <Button
+            text={confirm}
+            onClick={this.handleClick}
+            ref={this.setRef}
+            disabled={checkbox && !checked}
+          />
         </div>
       </div>
     );

app/soapbox/reducers/admin_log.js

@@ -0,0 +1,43 @@
+import { ADMIN_LOG_FETCH_SUCCESS } from 'soapbox/actions/admin';
+import {
+  Map as ImmutableMap,
+  OrderedSet as ImmutableOrderedSet,
+  fromJS,
+} from 'immutable';
+
+const initialState = ImmutableMap({
+  items: ImmutableMap(),
+  index: ImmutableOrderedSet(),
+  total: 0,
+});
+
+const parseItems = items => {
+  let ids = [];
+  let map = {};
+
+  items.forEach(item => {
+    ids.push(item.id);
+    map[item.id] = item;
+  });
+
+  return { ids: ids, map: map };
+};
+
+const importItems = (state, items, total) => {
+  const { ids, map } = parseItems(items);
+
+  return state.withMutations(state => {
+    state.update('index', v => v.union(ids));
+    state.update('items', v => v.merge(fromJS(map)));
+    state.set('total', total);
+  });
+};
+
+export default function admin_log(state = initialState, action) {
+  switch(action.type) {
+  case ADMIN_LOG_FETCH_SUCCESS:
+    return importItems(state, action.items, action.total);
+  default:
+    return state;
+  }
+};

app/soapbox/reducers/index.js

@@ -50,6 +50,7 @@ import chat_messages from './chat_messages';
 import chat_message_lists from './chat_message_lists';
 import profile_hover_card from './profile_hover_card';
 import backups from './backups';
+import admin_log from './admin_log';
 
 const appReducer = combineReducers({
   dropdown_menu,
@@ -101,6 +102,7 @@ const appReducer = combineReducers({
   chat_message_lists,
   profile_hover_card,
   backups,
+  admin_log,
 });
 
 // Clear the state (mostly) when the user logs out

app/soapbox/utils/accounts.js

@@ -40,3 +40,8 @@ export const getFollowDifference = (state, accountId, type) => {
   const counter = state.getIn(['accounts_counters', accountId, `${type}_count`], 0);
   return Math.max(counter - listSize, 0);
 };
+
+export const isLocal = account => {
+  let domain = account.get('acct').split('@')[1];
+  return domain === undefined ? true : false;
+};

app/styles/components/admin.scss

@@ -214,4 +214,10 @@
 
 .logentry {
   padding: 15px;
+
+  &__timestamp {
+    color: var(--primary-text-color--faint);
+    font-size: 13px;
+    text-align: right;
+  }
 }

app/styles/components/modal.scss

@@ -393,6 +393,23 @@
 
   .button {
     flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .submit__favicon {
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        width: 100%;
+        max-height: 100%;
+      }
+    }
   }
 }
 
@@ -604,6 +621,21 @@
       }
     }
   }
+
+  .account {
+    text-align: left;
+    background-color: var(--background-color);
+    border-radius: 4px;
+    margin-bottom: 16px;
+  }
+}
+
+.confirmation-modal__checkbox {
+  padding: 0 30px;
+
+  .simple_form {
+    margin-top: -14px;
+  }
 }
 
 .report-modal__target {