Admin: basic moderation log

app/soapbox/actions/admin.js

@@ -37,6 +37,10 @@ export const ADMIN_STATUS_DELETE_REQUEST = 'ADMIN_STATUS_DELETE_REQUEST';
 export const ADMIN_STATUS_DELETE_SUCCESS = 'ADMIN_STATUS_DELETE_SUCCESS';
 export const ADMIN_STATUS_DELETE_FAIL    = 'ADMIN_STATUS_DELETE_FAIL';
 
+export const ADMIN_LOG_FETCH_REQUEST = 'ADMIN_LOG_FETCH_REQUEST';
+export const ADMIN_LOG_FETCH_SUCCESS = 'ADMIN_LOG_FETCH_SUCCESS';
+export const ADMIN_LOG_FETCH_FAIL    = 'ADMIN_LOG_FETCH_FAIL';
+
 export function fetchConfig() {
   return (dispatch, getState) => {
     dispatch({ type: ADMIN_CONFIG_FETCH_REQUEST });
@@ -158,3 +162,17 @@ export function deleteStatus(id) {
       });
   };
 }
+
+export function fetchModerationLog(params) {
+  return (dispatch, getState) => {
+    dispatch({ type: ADMIN_LOG_FETCH_REQUEST });
+    return api(getState)
+      .get('/api/pleroma/admin/moderation_log', { params })
+      .then(({ data }) => {
+        dispatch({ type: ADMIN_LOG_FETCH_SUCCESS, items: data.items, total: data.total });
+        return data;
+      }).catch(error => {
+        dispatch({ type: ADMIN_LOG_FETCH_FAIL, error });
+      });
+  };
+}

app/soapbox/features/admin/moderation_log.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+import { connect } from 'react-redux';
+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()
+@injectIntl
+class ModerationLog extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+  };
+
+  state = {
+    isLoading: true,
+    items: ImmutableList(),
+  }
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    dispatch(fetchModerationLog())
+      .then(data => this.setState({ isLoading: false, items: fromJS(data.items) }))
+      .catch(() => {});
+  }
+
+  render() {
+    const { intl } = this.props;
+    const { isLoading, items } = this.state;
+    const showLoading = isLoading && items.count() === 0;
+
+    return (
+      <Column icon='gavel' heading={intl.formatMessage(messages.heading)} backBtnSlim>
+        <ScrollableList
+          isLoading={isLoading}
+          showLoading={showLoading}
+          scrollKey='moderation-log'
+          emptyMessage={intl.formatMessage(messages.emptyMessage)}
+        >
+          {items.map((item, i) => (
+            <div className='logentry' key={i}>
+              {item.get('message')}
+            </div>
+          ))}
+        </ScrollableList>
+      </Column>
+    );
+  }
+
+}

app/soapbox/features/ui/index.js

@@ -90,6 +90,7 @@ import {
   Dashboard,
   AwaitingApproval,
   Reports,
+  ModerationLog,
 } from './util/async-components';
 
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
@@ -282,6 +283,7 @@ class SwitchingColumnsArea extends React.PureComponent {
         <WrappedRoute path='/admin' page={AdminPage} component={Dashboard} content={children} exact />
         <WrappedRoute path='/admin/approval' page={AdminPage} component={AwaitingApproval} content={children} exact />
         <WrappedRoute path='/admin/reports' page={AdminPage} component={Reports} content={children} exact />
+        <WrappedRoute path='/admin/log' page={AdminPage} component={ModerationLog} content={children} exact />
         <WrappedRoute path='/info' layout={LAYOUT.EMPTY} component={ServerInfo} content={children} />
 
         <WrappedRoute layout={LAYOUT.EMPTY} component={GenericNotFound} content={children} />

app/soapbox/features/ui/util/async-components.js

@@ -229,3 +229,7 @@ export function AwaitingApproval() {
 export function Reports() {
   return import(/* webpackChunkName: "features/admin/reports" */'../../admin/reports');
 }
+
+export function ModerationLog() {
+  return import(/* webpackChunkName: "features/admin/moderation_log" */'../../admin/moderation_log');
+}

app/styles/components/admin.scss

@@ -89,8 +89,11 @@
   }
 }
 
-.slist .item-list article:nth-child(2n-1) .unapproved-account {
-  background-color: hsla(var(--accent-color_hsl), 0.07);
+.page--admin .slist .item-list article:nth-child(2n-1) {
+  .unapproved-account,
+  .logentry {
+    background-color: hsla(var(--accent-color_hsl), 0.07);
+  }
 }
 
 .page--admin {
@@ -197,3 +200,7 @@
     }
   }
 }
+
+.logentry {
+  padding: 15px;
+}