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] 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;
+    }
+  }
+}