Support explicit URLs in an admin interface

frontend/src/components/pages/admin/AdminPage.tsx

@@ -9,7 +9,7 @@
  * by the Apache License, Version 2.0
  */
 
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { observer } from 'mobx-react';
 import { PageComponent, PageInitHelper } from '../Page';
 import { api } from '../../../state/backendApi';
@@ -24,19 +24,26 @@ import { Alert, AlertIcon, Tabs } from '@redpanda-data/ui';
 import { AdminDebugBundle } from './Admin.DebugBundle';
 import { AdminLicenses } from './Admin.Licenses';
 import { Features } from '../../../state/supportedFeatures';
+import { makeObservable, observable } from 'mobx';
 
+export type AdminPageTab = 'users' | 'roles' | 'permissions-debug' | 'debug-bundle' | 'licenses'
 
 @observer
-export default class AdminPage extends PageComponent {
+export default class AdminPage extends PageComponent<{ tab: AdminPageTab }> {
 
+    @observable x = '';
+
+    constructor(p: any) {
+        super(p);
+        makeObservable(this);
+    }
 
     initPage(p: PageInitHelper): void {
         p.title = 'Admin';
         p.addBreadcrumb('Admin', '/admin');
 
         this.refreshData(true);
         appGlobal.onRefresh = () => this.refreshData(true);
-
     }
 
     refreshData(force: boolean) {
@@ -48,7 +55,7 @@ export default class AdminPage extends PageComponent {
         if (api.adminInfo === undefined) return DefaultSkeleton;
         const hasAdminPermissions = api.adminInfo !== null;
 
-        const items = [
+        const tabs: { key: AdminPageTab; name: string; component: ReactElement }[] = [
             {
                 key: 'users',
                 name: 'Users',
@@ -60,30 +67,43 @@ export default class AdminPage extends PageComponent {
                 component: <AdminRoles />
             },
             {
-                key: 'permissionsDebug',
+                key: 'permissions-debug',
                 name: 'Permissions debug',
                 component: <code><pre>{toJson(api.adminInfo, 4)}</pre></code>
             },
         ]
 
         if(api.userData?.canViewDebugBundle && Features.debugBundle) {
-            items.push({
-                key: 'debugBundle',
+            tabs.push({
+                key: 'debug-bundle',
                 name: 'Debug bundle',
                 component: <AdminDebugBundle/>
             });
         }
 
-        items.push({
+        tabs.push({
             key: 'licenses',
             name: 'License details',
             component: <AdminLicenses />
         })
 
+        const activeTab = tabs.findIndex(x => x.key === this.props.tab);
+        if (activeTab === -1) {
+            // No tab selected, default to users
+            appGlobal.history.replace('/admin/users')
+        }
+
         return <PageContent>
             <Section>
                 {hasAdminPermissions ?
-                    <Tabs size="lg" items={items} />
+                    <Tabs
+                        size="lg"
+                        items={tabs}
+                        index={activeTab >= 0 ? activeTab : 0}
+                        onChange={(_, key) => {
+                            appGlobal.history.push(`/admin/${key}`);
+                        }}
+                    />
 
                     : <div>
                         <Alert status="error">

frontend/src/components/routes.tsx

@@ -333,9 +333,10 @@ export const APP_ROUTES: IRouteEntry[] = [
 
     MakeRoute<{}>('/admin/debug-bundle/progress/:jobId', AdminPageDebugBundleProgress, 'Debug Bundle Progress'),
 
-    MakeRoute<{}>('/admin', AdminPage, 'Admin', CogIcon, false,
+    MakeRoute<{}>('/admin', AdminPage, 'Admin', CogIcon, true,
         routeVisibility(() => api.userData?.canViewConsoleUsers ?? false)
     ),
+    MakeRoute<{}>('/admin/:tab?', AdminPage, 'Admin'),
 
 
 ].filterNull();