Security page rewrite

Author: jvorcak

frontend/src/components/layout/header.tsx

@@ -9,10 +9,11 @@
  * by the Apache License, Version 2.0
  */
 
-import { Box, Button, ColorModeSwitch, CopyButton, Flex } from '@redpanda-data/ui';
+import { Button, ColorModeSwitch, CopyButton } from '@redpanda-data/ui';
 import { Link, useLocation, useMatchRoute } from '@tanstack/react-router';
 import { Heading } from 'components/redpanda-ui/components/typography';
 import { cn } from 'components/redpanda-ui/lib/utils';
+import { ChevronLeft } from 'lucide-react';
 import { Fragment, useMemo } from 'react';
 
 import { isEmbedded, isFeatureFlagEnabled } from '../../config';
@@ -28,6 +29,7 @@ import {
   BreadcrumbList,
   BreadcrumbSeparator,
 } from '../redpanda-ui/components/breadcrumb';
+import { Button as RegistryButton } from '../redpanda-ui/components/button';
 import { Separator } from '../redpanda-ui/components/separator';
 import { SidebarTrigger } from '../redpanda-ui/components/sidebar';
 
@@ -38,8 +40,8 @@ type BreadcrumbHeaderRowProps = {
 
 function BreadcrumbHeaderRow({ useNewSidebar, breadcrumbItems }: BreadcrumbHeaderRowProps) {
   return (
-    <Flex alignItems="center" justifyContent="space-between">
-      <Flex alignItems="center" gap={2}>
+    <div className="w-full border-b">
+      <div className="flex items-center gap-2 px-6 py-4">
         {useNewSidebar ? (
           <>
             <SidebarTrigger />
@@ -50,7 +52,7 @@ function BreadcrumbHeaderRow({ useNewSidebar, breadcrumbItems }: BreadcrumbHeade
           <Breadcrumb>
             <BreadcrumbList>
               {breadcrumbItems.map((item, index) => (
-                <Fragment key={item.linkTo}>
+                <Fragment key={`${index}-${item.linkTo}`}>
                   {index > 0 && <BreadcrumbSeparator />}
                   <BreadcrumbItem>
                     <BreadcrumbLink asChild>
@@ -62,8 +64,8 @@ function BreadcrumbHeaderRow({ useNewSidebar, breadcrumbItems }: BreadcrumbHeade
             </BreadcrumbList>
           </Breadcrumb>
         )}
-      </Flex>
-    </Flex>
+      </div>
+    </div>
   );
 }
 
@@ -74,9 +76,10 @@ function AppPageHeader() {
   const useNewSidebar = !isEmbedded();
 
   const pageBreadcrumbs = useUIStateStore((s) => s.pageBreadcrumbs);
+  const pageTitle = useUIStateStore((s) => s._pageTitle);
+  const backLink = useUIStateStore((s) => s.backLink);
   const selectedClusterName = useUIStateStore((s) => s.selectedClusterName);
   const shouldHidePageHeader = useUIStateStore((s) => s.shouldHidePageHeader);
-
   const breadcrumbItems = useMemo(() => {
     const items: BreadcrumbEntry[] = [...pageBreadcrumbs];
 
@@ -92,38 +95,41 @@ function AppPageHeader() {
   }, [pageBreadcrumbs, selectedClusterName]);
 
   const lastBreadcrumb = breadcrumbItems.at(-1);
-  const breadcrumbsExceptLast = breadcrumbItems.slice(0, -1);
 
   if (shouldHideHeader || shouldHidePageHeader) {
     return null;
   }
 
   return (
-    <Box>
-      {/* we need to refactor out #mainLayout > div rule, for now I've added this box as a workaround */}
-      <BreadcrumbHeaderRow breadcrumbItems={breadcrumbsExceptLast} useNewSidebar={useNewSidebar} />
-
-      <Flex alignItems="center" justifyContent="space-between" pb={2}>
-        <Flex alignItems="center">
-          {lastBreadcrumb ? (
-            <Heading
-              // as="span"
-              className={cn('mr-2', lastBreadcrumb.options?.canBeTruncated ? 'break-spaces break-all' : 'nowrap')}
-              level={1}
-            >
-              {lastBreadcrumb.titleNode ?? lastBreadcrumb.title}
-            </Heading>
-          ) : null}
-          {lastBreadcrumb ? (
-            <Box>
-              {lastBreadcrumb.options?.canBeCopied ? (
-                <CopyButton content={lastBreadcrumb.title} variant="ghost" />
-              ) : null}
-            </Box>
-          ) : null}
-          {Boolean(showRefresh) && <DataRefreshButton />}
-        </Flex>
-        <Flex alignItems="center" gap={2}>
+    <div>
+      <BreadcrumbHeaderRow breadcrumbItems={breadcrumbItems} useNewSidebar={useNewSidebar} />
+
+      <div className="flex items-center justify-between px-12 pt-6">
+        <div className="flex flex-col gap-1">
+          {backLink && (
+            <RegistryButton asChild className="-ml-2 w-fit text-muted-foreground" size="sm" variant="ghost">
+              <Link to={backLink.linkTo}>
+                <ChevronLeft className="h-4 w-4" />
+                {backLink.title}
+              </Link>
+            </RegistryButton>
+          )}
+          <div className="flex items-center">
+            {pageTitle ? (
+              <Heading
+                className={cn('mr-2', lastBreadcrumb?.options?.canBeTruncated ? 'break-spaces break-all' : 'nowrap')}
+                level={1}
+              >
+                {pageTitle}
+              </Heading>
+            ) : null}
+            {lastBreadcrumb?.options?.canBeCopied ? (
+              <CopyButton content={lastBreadcrumb.title} variant="ghost" />
+            ) : null}
+            {Boolean(showRefresh) && <DataRefreshButton />}
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
           {!isEmbedded() && api.isRedpanda && (
             <Link to="/debug-bundle">
               <Button
@@ -139,9 +145,9 @@ function AppPageHeader() {
           )}
           <UserPreferencesButton />
           {IsDev && !isEmbedded() && <ColorModeSwitch m={0} p={0} variant="ghost" />}
-        </Flex>
-      </Flex>
-    </Box>
+        </div>
+      </div>
+    </div>
   );
 }
 
@@ -165,17 +171,18 @@ function useShouldShowRefresh() {
   const getStartedApiMatch = matchRoute({ to: '/get-started/api' });
 
   // matches acls
-  const aclCreateMatch = matchRoute({ to: '/security/acls/create' });
-  const aclUpdateMatch = matchRoute({ to: '/security/acls/$aclName/update' });
   const aclDetailMatch = matchRoute({ to: '/security/acls/$aclName/details' });
-  const isACLRelated = aclCreateMatch || aclUpdateMatch || aclDetailMatch;
+  const isACLRelated = aclDetailMatch;
 
   // matches roles
   const roleCreateMatch = matchRoute({ to: '/security/roles/create' });
   const roleUpdateMatch = matchRoute({ to: '/security/roles/$roleName/update' });
   const roleDetailMatch = matchRoute({ to: '/security/roles/$roleName/details' });
   const isRoleRelated = roleCreateMatch || roleUpdateMatch || roleDetailMatch;
 
+  // matches user detail
+  const userDetailMatch = matchRoute({ to: '/security/users/$userName/details' });
+
   if (connectClusterMatch && connectClusterMatch.connector === 'create-connector') {
     return false;
   }
@@ -194,6 +201,9 @@ function useShouldShowRefresh() {
   if (isRoleRelated) {
     return false;
   }
+  if (userDetailMatch) {
+    return false;
+  }
   if (connectWizardPagesMatch) {
     return false;
   }

frontend/src/components/license/feature-license-notification.tsx

@@ -27,6 +27,7 @@ import {
 } from '../../protogen/redpanda/api/console/v1alpha1/license_pb';
 import { api } from '../../state/backend-api';
 import { Alert, AlertDescription } from '../redpanda-ui/components/alert';
+import { Badge } from '../redpanda-ui/components/badge';
 
 // biome-ignore lint/nursery/useMaxParams: Refactoring to options object would require updating all call sites
 const getLicenseAlertContentForFeature = (
@@ -172,7 +173,10 @@ const getLicenseAlertContentForFeature = (
   return null;
 };
 
-export const FeatureLicenseNotification: FC<{ featureName: 'reassignPartitions' | 'rbac' }> = ({ featureName }) => {
+export const FeatureLicenseNotification: FC<{
+  featureName: 'reassignPartitions' | 'rbac';
+  as?: 'alert' | 'badge';
+}> = ({ featureName, as: renderAs = 'alert' }) => {
   const [registerModalOpen, setIsRegisterModalOpen] = useState(false);
 
   useEffect(() => {
@@ -222,9 +226,13 @@ export const FeatureLicenseNotification: FC<{ featureName: 'reassignPartitions'
 
   const { message, variant } = alertContent;
 
+  if (renderAs === 'badge') {
+    return <Badge variant={variant === 'destructive' ? 'destructive' : 'simple'}>{message}</Badge>;
+  }
+
   return (
     <>
-      <Alert className="mb-4" variant={variant}>
+      <Alert variant={variant}>
         <AlertDescription>{message}</AlertDescription>
       </Alert>
 

frontend/src/components/pages/observability/observability-page.tsx

@@ -12,7 +12,7 @@
 import { type FC, lazy, Suspense, useCallback, useEffect, useMemo, useState } from 'react';
 import { useListQueries } from 'react-query/api/observability';
 import { appGlobal } from 'state/app-global';
-import { uiState } from 'state/ui-state';
+import { setPageHeader } from 'state/ui-state';
 
 const MetricChart = lazy(() => import('./metric-chart').then((m) => ({ default: m.MetricChart })));
 
@@ -46,7 +46,7 @@ const ObservabilityPage: FC = () => {
   }, [refetch]);
 
   useEffect(() => {
-    uiState.pageBreadcrumbs = [{ title: 'Metrics', linkTo: '/observability' }];
+    setPageHeader('Metrics', [{ title: 'Metrics', linkTo: '/observability' }]);
     appGlobal.onRefresh = () => refreshData();
   }, [refreshData]);
 

frontend/src/components/pages/overview/overview.tsx

@@ -384,7 +384,7 @@ function ClusterDetails() {
         <Details
           content={[
             [
-              <Link key={0} to="/security/acls">
+              <Link key={0} to="/security/permissions-list">
                 {aclCount}
               </Link>,
             ],

frontend/src/components/pages/page.ts

@@ -19,7 +19,7 @@ import {
   useRpcnSecretManagerStore,
   useTransformsStore,
 } from '../../state/backend-api';
-import { type BreadcrumbOptions, uiState } from '../../state/ui-state';
+import { type BreadcrumbEntry, type BreadcrumbOptions, setPageHeader } from '../../state/ui-state';
 
 //
 // Page Types
@@ -30,11 +30,17 @@ export type NoRouteParams = {};
 export type PageProps<TRouteParams = NoRouteParams> = TRouteParams & { matchedPath: string };
 
 export class PageInitHelper {
+  private pageTitle = '';
+  private pageBreadcrumbs: BreadcrumbEntry[] = [];
+
   set title(title: string) {
-    uiState.pageTitle = title;
+    this.pageTitle = title;
   }
   addBreadcrumb(title: string, to: string, heading?: string, options?: BreadcrumbOptions) {
-    uiState.pageBreadcrumbs.push({ title, linkTo: to, heading, options });
+    this.pageBreadcrumbs.push({ title, linkTo: to, heading, options });
+  }
+  _flush() {
+    setPageHeader(this.pageTitle, this.pageBreadcrumbs);
   }
 }
 export abstract class PageComponent<TRouteParams = NoRouteParams> extends React.Component<PageProps<TRouteParams>> {
@@ -43,9 +49,9 @@ export abstract class PageComponent<TRouteParams = NoRouteParams> extends React.
   constructor(props: Readonly<PageProps<TRouteParams>>) {
     super(props);
 
-    uiState.pageBreadcrumbs = [];
-
-    this.initPage(new PageInitHelper());
+    const helper = new PageInitHelper();
+    this.initPage(helper);
+    helper._flush();
   }
 
   componentDidMount() {

frontend/src/components/pages/rp-connect/onboarding/add-user-step.tsx

@@ -698,8 +698,11 @@ export const AddUserStep = forwardRef<UserStepRef, AddUserStepProps & MotionProp
                                       <AlertDescription>
                                         <Text variant="small">
                                           You will need to configure{' '}
-                                          <TanStackRouterLink to="/security/acls">ACLs</TanStackRouterLink> for custom
-                                          user permissions if you want the user to be able to read from the topic.
+                                          <TanStackRouterLink to="/security/permissions-list">
+                                            Permissions
+                                          </TanStackRouterLink>{' '}
+                                          for custom user permissions if you want the user to be able to read from the
+                                          topic.
                                         </Text>
                                       </AlertDescription>
                                     </Alert>

frontend/src/components/pages/schemas/schema-list.tsx

@@ -67,7 +67,7 @@ import { api } from '../../../state/backend-api';
 import type { SchemaRegistrySubject } from '../../../state/rest-interfaces';
 import { useSupportedFeaturesStore } from '../../../state/supported-features';
 import { uiSettings } from '../../../state/ui';
-import { uiState } from '../../../state/ui-state';
+import { setPageHeader } from '../../../state/ui-state';
 import { encodeURIComponentPercents } from '../../../utils/utils';
 import PageContent from '../../misc/page-content';
 import Section from '../../misc/section';
@@ -180,7 +180,7 @@ const SchemaList: FC = () => {
   }, [derivedContexts, selectedContext, schemaRegistryContextsSupported, schemaMode, schemaCompatibility]);
 
   useEffect(() => {
-    uiState.pageBreadcrumbs = [{ title: 'Schema Registry', linkTo: '/schema-registry' }];
+    setPageHeader('Schema Registry', [{ title: 'Schema Registry', linkTo: '/schema-registry' }]);
     appGlobal.onRefresh = () => refreshData();
   }, [refreshData]);