From 5c8904069214b7c81654bfcb3f9150d36b4c4b14 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 28 Apr 2022 15:04:49 -0500
Subject: [PATCH] Rudimentary admin tabs navigation

---
 .../features/admin/awaiting_approval.js       |  4 ++-
 .../features/admin/components/admin-tabs.tsx  | 30 +++++++++++++++++++
 app/soapbox/features/admin/index.tsx          | 16 ++--------
 app/soapbox/features/admin/reports.js         |  7 +++--
 4 files changed, 40 insertions(+), 17 deletions(-)
 create mode 100644 app/soapbox/features/admin/components/admin-tabs.tsx

diff --git a/app/soapbox/features/admin/awaiting_approval.js b/app/soapbox/features/admin/awaiting_approval.js
index fa0e538ff..6b67dd02e 100644
--- a/app/soapbox/features/admin/awaiting_approval.js
+++ b/app/soapbox/features/admin/awaiting_approval.js
@@ -10,6 +10,7 @@ import ScrollableList from 'soapbox/components/scrollable_list';
 
 import Column from '../ui/components/column';
 
+import AdminTabs from './components/admin-tabs';
 import UnapprovedAccount from './components/unapproved_account';
 
 const messages = defineMessages({
@@ -47,7 +48,8 @@ class AwaitingApproval extends ImmutablePureComponent {
     const showLoading = isLoading && accountIds.count() === 0;
 
     return (
-      <Column icon='user' label={intl.formatMessage(messages.heading)}>
+      <Column label={intl.formatMessage(messages.heading)} withHeader={false}>
+        <AdminTabs activeItem='approval' />
         <ScrollableList
           isLoading={isLoading}
           showLoading={showLoading}
diff --git a/app/soapbox/features/admin/components/admin-tabs.tsx b/app/soapbox/features/admin/components/admin-tabs.tsx
new file mode 100644
index 000000000..fd0202003
--- /dev/null
+++ b/app/soapbox/features/admin/components/admin-tabs.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { Tabs } from 'soapbox/components/ui';
+
+interface IAdminTabs {
+  activeItem: 'dashboard' | 'reports' | 'approval',
+}
+
+const AdminTabs: React.FC<IAdminTabs> = ({ activeItem }) => {
+  const history = useHistory();
+
+  const tabs = [{
+    name: 'dashboard',
+    text: 'Dashboard',
+    action: () => history.push('/admin'),
+  }, {
+    name: 'reports',
+    text: 'Reports',
+    action: () => history.push('/admin/reports'),
+  }, {
+    name: 'approval',
+    text: 'Waitlist',
+    action: () => history.push('/admin/approval'),
+  }];
+
+  return <Tabs items={tabs} activeItem={activeItem} />;
+};
+
+export default AdminTabs;
diff --git a/app/soapbox/features/admin/index.tsx b/app/soapbox/features/admin/index.tsx
index 8cd83bc28..0f8004e59 100644
--- a/app/soapbox/features/admin/index.tsx
+++ b/app/soapbox/features/admin/index.tsx
@@ -3,7 +3,7 @@ import { defineMessages, useIntl, FormattedMessage, FormattedNumber } from 'reac
 import { Link } from 'react-router-dom';
 
 import { getSubscribersCsv, getUnsubscribersCsv, getCombinedCsv } from 'soapbox/actions/email_list';
-import { Text, Tabs } from 'soapbox/components/ui';
+import { Text } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures } from 'soapbox/hooks';
 import sourceCode from 'soapbox/utils/code';
 import { parseVersion } from 'soapbox/utils/features';
@@ -11,6 +11,7 @@ import { isNumber } from 'soapbox/utils/numbers';
 
 import Column from '../ui/components/column';
 
+import AdminTabs from './components/admin-tabs';
 import RegistrationModePicker from './components/registration_mode_picker';
 
 import type { AxiosResponse } from 'axios';
@@ -70,20 +71,9 @@ const Dashboard: React.FC = () => {
 
   if (!account) return null;
 
-  const tabs = [{
-    name: 'dashboard',
-    text: 'Dashboard',
-  }, {
-    name: 'reports',
-    text: 'Reports',
-  }, {
-    name: 'approval',
-    text: 'Waitlist',
-  }];
-
   return (
     <Column label={intl.formatMessage(messages.heading)} withHeader={false}>
-      <Tabs items={tabs} activeItem='dashboard' />
+      <AdminTabs activeItem='dashboard' />
 
       <div className='dashcounters mt-8'>
         {isNumber(mau) && (
diff --git a/app/soapbox/features/admin/reports.js b/app/soapbox/features/admin/reports.js
index e7402ad2e..3f377ba70 100644
--- a/app/soapbox/features/admin/reports.js
+++ b/app/soapbox/features/admin/reports.js
@@ -7,10 +7,10 @@ import { connect } from 'react-redux';
 
 import { fetchReports } from 'soapbox/actions/admin';
 import ScrollableList from 'soapbox/components/scrollable_list';
+import { Column } from 'soapbox/components/ui';
 import { makeGetReport } from 'soapbox/selectors';
 
-import Column from '../ui/components/better_column';
-
+import AdminTabs from './components/admin-tabs';
 import Report from './components/report';
 
 const messages = defineMessages({
@@ -64,7 +64,8 @@ class Reports extends ImmutablePureComponent {
     const showLoading = isLoading && reports.count() === 0;
 
     return (
-      <Column icon='gavel' label={intl.formatMessage(messages.heading)} menu={this.makeColumnMenu()}>
+      <Column label={intl.formatMessage(messages.heading)} withHeader={false}>
+        <AdminTabs activeItem='reports' />
         <ScrollableList
           isLoading={isLoading}
           showLoading={showLoading}