Merge branch 'modlog' into 'develop'

Moderation log

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

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='balance-scale' 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/admin/reports.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import Column from '../ui/components/column';
+import Column from '../ui/components/better_column';
 import ScrollableList from 'soapbox/components/scrollable_list';
 import { fetchReports } from 'soapbox/actions/admin';
 import Report from './components/report';
@@ -12,6 +12,7 @@ import { makeGetReport } from 'soapbox/selectors';
 
 const messages = defineMessages({
   heading: { id: 'column.admin.reports', defaultMessage: 'Reports' },
+  modlog: { id: 'column.admin.reports.menu.moderation_log', defaultMessage: 'Moderation Log' },
   emptyMessage: { id: 'admin.reports.empty_message', defaultMessage: 'There are no open reports. If a user gets reported, they will show up here.' },
 });
 
@@ -37,6 +38,15 @@ class Reports extends ImmutablePureComponent {
     isLoading: true,
   }
 
+  makeColumnMenu = () => {
+    const { intl } = this.props;
+
+    return [{
+      text: intl.formatMessage(messages.modlog),
+      to: '/admin/log',
+    }];
+  }
+
   componentDidMount() {
     const { dispatch } = this.props;
     dispatch(fetchReports())
@@ -50,7 +60,7 @@ class Reports extends ImmutablePureComponent {
     const showLoading = isLoading && reports.count() === 0;
 
     return (
-      <Column icon='gavel' heading={intl.formatMessage(messages.heading)} backBtnSlim>
+      <Column icon='gavel' heading={intl.formatMessage(messages.heading)} menu={this.makeColumnMenu()}>
         <ScrollableList
           isLoading={isLoading}
           showLoading={showLoading}

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import ColumnHeader from './column_header';
+import PropTypes from 'prop-types';
+import ColumnBackButton from '../../../components/column_back_button_slim';
+import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
+
+// Yes, there are 3 types of columns at this point, but this one is better, I swear
+export default class Column extends React.PureComponent {
+
+  static propTypes = {
+    heading: PropTypes.string,
+    icon: PropTypes.string,
+    children: PropTypes.node,
+    active: PropTypes.bool,
+    menu: PropTypes.array,
+  };
+
+  render() {
+    const { heading, icon, children, active, menu } = this.props;
+    const columnHeaderId = heading && heading.replace(/ /g, '-');
+
+    return (
+      <div role='region' aria-labelledby={columnHeaderId} className='column column--better'>
+        <div className='column__top'>
+          {heading && <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} />}
+          {menu && (
+            <div className='column__menu'>
+              <DropdownMenu items={menu} icon='ellipsis-v' size={18} direction='right' />
+            </div>
+          )}
+          <ColumnBackButton />
+        </div>
+        {children}
+      </div>
+    );
+  }
+
+}

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import ColumnHeader from './column_header';
 import PropTypes from 'prop-types';
-import { isMobile } from '../../../is_mobile';
 import ColumnBackButton from '../../../components/column_back_button';
 import ColumnBackButtonSlim from '../../../components/column_back_button_slim';
 
@@ -12,25 +11,17 @@ export default class Column extends React.PureComponent {
     icon: PropTypes.string,
     children: PropTypes.node,
     active: PropTypes.bool,
-    hideHeadingOnMobile: PropTypes.bool,
     backBtnSlim: PropTypes.bool,
   };
 
   render() {
-    const { heading, icon, children, active, hideHeadingOnMobile, backBtnSlim } = this.props;
+    const { heading, icon, children, active, backBtnSlim } = this.props;
-
+    const columnHeaderId = heading && heading.replace(/ /g, '-');
-    const showHeading = heading && (!hideHeadingOnMobile || (hideHeadingOnMobile && !isMobile(window.innerWidth)));
-
-    const columnHeaderId = showHeading && heading.replace(/ /g, '-');
-    const header = showHeading && (
-      <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} />
-    );
-
     const backBtn = backBtnSlim ? (<ColumnBackButtonSlim />) : (<ColumnBackButton />);
 
     return (
       <div role='region' aria-labelledby={columnHeaderId} className='column'>
-        {header}
+        {heading && <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} />}
         {backBtn}
         {children}
       </div>

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

@@ -19,16 +19,11 @@ export default class ColumnHeader extends React.PureComponent {
 
   render() {
     const { icon, type, active, columnHeaderId } = this.props;
-    let iconElement = '';
-
-    if (icon) {
-      iconElement = <Icon id={icon} fixedWidth className='column-header__icon' />;
-    }
 
     return (
       <h1 className={classNames('column-header', { active })} id={columnHeaderId || null}>
         <button onClick={this.handleClick}>
-          {iconElement}
+          {icon && <Icon id={icon} fixedWidth className='column-header__icon' />}
           {type}
         </button>
       </h1>

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,9 +89,12 @@
   }
 }
 
-.slist .item-list article:nth-child(2n-1) .unapproved-account {
+.page--admin .slist .item-list article:nth-child(2n-1) {
+  .unapproved-account,
+  .logentry {
     background-color: hsla(var(--accent-color_hsl), 0.07);
   }
+}
 
 .page--admin {
   @media screen and (max-width: 895px) {
@@ -197,3 +200,7 @@
     }
   }
 }
+
+.logentry {
+  padding: 15px;
+}

app/styles/components/columns.scss

@@ -726,3 +726,44 @@
     margin-right: 8px;
   }
 }
+
+.column--better {
+  .column__top {
+    display: flex;
+    align-items: center;
+  }
+
+  .column-header {
+    margin-right: auto;
+  }
+
+  .column__menu {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &,
+    > div,
+    button {
+      height: 100%;
+    }
+
+    button {
+      padding: 0 15px;
+
+      > div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+
+  .column-back-button--slim {
+    &-button {
+      position: relative;
+      top: auto;
+      right: auto;
+    }
+  }
+}