Rudimentary admin tabs navigation

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}

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;

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) && (

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}