From c4ffa398bce02135cb51f250b9bb018c35432a15 Mon Sep 17 00:00:00 2001
From: Jan Vorcak <jan.vorcak@redpanda.com>
Date: Sat, 16 Nov 2024 15:28:09 +0100
Subject: [PATCH 1/2] Support explicit URLs in an admin interface

---
 .../src/components/pages/admin/AdminPage.tsx  | 36 ++++++++++++++-----
 frontend/src/components/routes.tsx            |  3 +-
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/pages/admin/AdminPage.tsx b/frontend/src/components/pages/admin/AdminPage.tsx
index 9e5af69bd..1847d602a 100644
--- a/frontend/src/components/pages/admin/AdminPage.tsx
+++ b/frontend/src/components/pages/admin/AdminPage.tsx
@@ -24,11 +24,19 @@ 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';
@@ -36,7 +44,6 @@ export default class AdminPage extends PageComponent {
 
         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: '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">
diff --git a/frontend/src/components/routes.tsx b/frontend/src/components/routes.tsx
index 3226fe020..cc90a6cd4 100644
--- a/frontend/src/components/routes.tsx
+++ b/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();

From 0cef5f33e3699d63281387dcf61e2898d8d919e2 Mon Sep 17 00:00:00 2001
From: Jan Vorcak <jan.vorcak@redpanda.com>
Date: Sat, 16 Nov 2024 15:30:09 +0100
Subject: [PATCH 2/2] Make admin tabs more TS safe

---
 frontend/src/components/pages/admin/AdminPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/pages/admin/AdminPage.tsx b/frontend/src/components/pages/admin/AdminPage.tsx
index 1847d602a..f777004a1 100644
--- a/frontend/src/components/pages/admin/AdminPage.tsx
+++ b/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';
@@ -55,7 +55,7 @@ export default class AdminPage extends PageComponent<{ tab: AdminPageTab }> {
         if (api.adminInfo === undefined) return DefaultSkeleton;
         const hasAdminPermissions = api.adminInfo !== null;
 
-        const tabs = [
+        const tabs: { key: AdminPageTab; name: string; component: ReactElement }[] = [
             {
                 key: 'users',
                 name: 'Users',