From 39436bc07c8b20e2e0ede465c7f3cec2204c80a2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 1 Jan 2021 12:50:13 -0600
Subject: [PATCH 1/5] Admin: basic moderation log

---
 app/soapbox/actions/admin.js                  | 18 ++++++
 app/soapbox/features/admin/moderation_log.js  | 59 +++++++++++++++++++
 app/soapbox/features/ui/index.js              |  2 +
 .../features/ui/util/async-components.js      |  4 ++
 app/styles/components/admin.scss              | 11 +++-
 5 files changed, 92 insertions(+), 2 deletions(-)
 create mode 100644 app/soapbox/features/admin/moderation_log.js

diff --git a/app/soapbox/actions/admin.js b/app/soapbox/actions/admin.js
index 84857abba..04fdd1a31 100644
--- a/app/soapbox/actions/admin.js
+++ b/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 });
+      });
+  };
+}
diff --git a/app/soapbox/features/admin/moderation_log.js b/app/soapbox/features/admin/moderation_log.js
new file mode 100644
index 000000000..f9b34de2b
--- /dev/null
+++ b/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>
+    );
+  }
+
+}
diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js
index 59c36c831..6a556510c 100644
--- a/app/soapbox/features/ui/index.js
+++ b/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} />
diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js
index 1e9cc7550..bc0c98ca8 100644
--- a/app/soapbox/features/ui/util/async-components.js
+++ b/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');
+}
diff --git a/app/styles/components/admin.scss b/app/styles/components/admin.scss
index 8943e5555..caf9ddbcb 100644
--- a/app/styles/components/admin.scss
+++ b/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;
+}

From acf0619790660403cdc323bfd1458709d6f253d3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 1 Jan 2021 13:18:06 -0600
Subject: [PATCH 2/5] Columns cleanup

---
 app/soapbox/features/ui/components/column.js      | 15 +++------------
 .../features/ui/components/column_header.js       |  7 +------
 2 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/app/soapbox/features/ui/components/column.js b/app/soapbox/features/ui/components/column.js
index 888b2c04e..5e4b643b7 100644
--- a/app/soapbox/features/ui/components/column.js
+++ b/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 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 { heading, icon, children, active, backBtnSlim } = this.props;
+    const columnHeaderId = heading.replace(/ /g, '-');
     const backBtn = backBtnSlim ? (<ColumnBackButtonSlim />) : (<ColumnBackButton />);
 
     return (
       <div role='region' aria-labelledby={columnHeaderId} className='column'>
-        {header}
+        <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} />
         {backBtn}
         {children}
       </div>
diff --git a/app/soapbox/features/ui/components/column_header.js b/app/soapbox/features/ui/components/column_header.js
index 6ff52e44f..bb027eb38 100644
--- a/app/soapbox/features/ui/components/column_header.js
+++ b/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>

From c5641a566db5ddf4e16f1fb9666c52c5357b4cb2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 1 Jan 2021 14:06:12 -0600
Subject: [PATCH 3/5] Admin: add link to moderation log within reports

---
 app/soapbox/features/admin/moderation_log.js  |  2 +-
 app/soapbox/features/admin/reports.js         | 14 ++++++-
 .../features/ui/components/better_column.js   | 38 +++++++++++++++++
 app/styles/components/columns.scss            | 41 +++++++++++++++++++
 4 files changed, 92 insertions(+), 3 deletions(-)
 create mode 100644 app/soapbox/features/ui/components/better_column.js

diff --git a/app/soapbox/features/admin/moderation_log.js b/app/soapbox/features/admin/moderation_log.js
index f9b34de2b..e84fd6ed6 100644
--- a/app/soapbox/features/admin/moderation_log.js
+++ b/app/soapbox/features/admin/moderation_log.js
@@ -39,7 +39,7 @@ class ModerationLog extends ImmutablePureComponent {
     const showLoading = isLoading && items.count() === 0;
 
     return (
-      <Column icon='gavel' heading={intl.formatMessage(messages.heading)} backBtnSlim>
+      <Column icon='balance-scale' heading={intl.formatMessage(messages.heading)} backBtnSlim>
         <ScrollableList
           isLoading={isLoading}
           showLoading={showLoading}
diff --git a/app/soapbox/features/admin/reports.js b/app/soapbox/features/admin/reports.js
index 50c7c33a7..141db1d45 100644
--- a/app/soapbox/features/admin/reports.js
+++ b/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}
diff --git a/app/soapbox/features/ui/components/better_column.js b/app/soapbox/features/ui/components/better_column.js
new file mode 100644
index 000000000..f5c04d226
--- /dev/null
+++ b/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.replace(/ /g, '-');
+
+    return (
+      <div role='region' aria-labelledby={columnHeaderId} className='column column--better'>
+        <div className='column__top'>
+          <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>
+    );
+  }
+
+}
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index a2f430538..a48fb87d5 100644
--- a/app/styles/components/columns.scss
+++ b/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;
+    }
+  }
+}

From 82b41d25219845eab7a2f7cc0bf3c163c111c14c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 1 Jan 2021 14:11:52 -0600
Subject: [PATCH 4/5] Fix breaking column bug lol whoops

---
 app/soapbox/features/ui/components/better_column.js | 2 +-
 app/soapbox/features/ui/components/column.js        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/ui/components/better_column.js b/app/soapbox/features/ui/components/better_column.js
index f5c04d226..e7c4d5682 100644
--- a/app/soapbox/features/ui/components/better_column.js
+++ b/app/soapbox/features/ui/components/better_column.js
@@ -17,7 +17,7 @@ export default class Column extends React.PureComponent {
 
   render() {
     const { heading, icon, children, active, menu } = this.props;
-    const columnHeaderId = heading.replace(/ /g, '-');
+    const columnHeaderId = heading && heading.replace(/ /g, '-');
 
     return (
       <div role='region' aria-labelledby={columnHeaderId} className='column column--better'>
diff --git a/app/soapbox/features/ui/components/column.js b/app/soapbox/features/ui/components/column.js
index 5e4b643b7..b09882b80 100644
--- a/app/soapbox/features/ui/components/column.js
+++ b/app/soapbox/features/ui/components/column.js
@@ -16,7 +16,7 @@ export default class Column extends React.PureComponent {
 
   render() {
     const { heading, icon, children, active, backBtnSlim } = this.props;
-    const columnHeaderId = heading.replace(/ /g, '-');
+    const columnHeaderId = heading && heading.replace(/ /g, '-');
     const backBtn = backBtnSlim ? (<ColumnBackButtonSlim />) : (<ColumnBackButton />);
 
     return (

From 558fd1e3cc2b07d3791ecaa0c5570c20a457187f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 1 Jan 2021 14:25:48 -0600
Subject: [PATCH 5/5] Fix column header conditional rendering, oops again

---
 app/soapbox/features/ui/components/better_column.js | 2 +-
 app/soapbox/features/ui/components/column.js        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/ui/components/better_column.js b/app/soapbox/features/ui/components/better_column.js
index e7c4d5682..65f7dd1d8 100644
--- a/app/soapbox/features/ui/components/better_column.js
+++ b/app/soapbox/features/ui/components/better_column.js
@@ -22,7 +22,7 @@ export default class Column extends React.PureComponent {
     return (
       <div role='region' aria-labelledby={columnHeaderId} className='column column--better'>
         <div className='column__top'>
-          <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} />
+          {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' />
diff --git a/app/soapbox/features/ui/components/column.js b/app/soapbox/features/ui/components/column.js
index b09882b80..5f31399e3 100644
--- a/app/soapbox/features/ui/components/column.js
+++ b/app/soapbox/features/ui/components/column.js
@@ -21,7 +21,7 @@ export default class Column extends React.PureComponent {
 
     return (
       <div role='region' aria-labelledby={columnHeaderId} className='column'>
-        <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} />
+        {heading && <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} />}
         {backBtn}
         {children}
       </div>