Merge branch 'master' into pr2/log-explorer-molecule

Author: eblairmckee

frontend/src/app.tsx

@@ -44,6 +44,7 @@ import { CustomFeatureFlagProvider } from 'custom-feature-flag-provider';
 import useDeveloperView from 'hooks/use-developer-view';
 import { protobufRegistry } from 'protobuf-registry';
 import queryClient from 'query-client';
+import { useEffect } from 'react';
 import { getBasePath } from 'utils/env';
 
 import { NotFoundPage } from './components/misc/not-found-page';
@@ -90,9 +91,14 @@ declare module '@tanstack/react-router' {
   }
 }
 
+const EMPTY_SETUP_ARGS = {};
+
 const App = () => {
   const developerView = useDeveloperView();
-  setup({});
+
+  useEffect(() => {
+    setup(EMPTY_SETUP_ARGS);
+  }, []);
 
   // Need to use CustomFeatureFlagProvider for completeness with EmbeddedApp
   return (

frontend/src/components/layout/sidebar.test.tsx

@@ -0,0 +1,86 @@
+import { act, renderHook } from '@testing-library/react';
+import { createGroupedSidebarItems } from 'utils/route-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import type { EndpointCompatibility } from '../../state/rest-interfaces';
+import { Feature, useSupportedFeaturesStore } from '../../state/supported-features';
+
+// Mock config to enable embedded + ADP mode (required for Transcripts route visibility)
+vi.mock('../../config', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../config')>();
+  return {
+    ...actual,
+    isEmbedded: () => true,
+    isAdpEnabled: () => true,
+  };
+});
+
+describe('SidebarNavigation re-renders on endpointCompatibility change (UX-972)', () => {
+  afterEach(() => {
+    // Reset store to initial state between tests
+    useSupportedFeaturesStore.setState({
+      endpointCompatibility: null,
+      tracingService: false,
+    });
+  });
+
+  it('TracingService defaults to unsupported when endpointCompatibility is null', () => {
+    const state = useSupportedFeaturesStore.getState();
+    expect(state.endpointCompatibility).toBeNull();
+    expect(state.tracingService).toBe(false);
+  });
+
+  it('Transcripts item is hidden when TracingService is not supported', () => {
+    const groups = createGroupedSidebarItems();
+    const allItems = groups.flatMap((g) => g.items);
+    const transcripts = allItems.find((item) => item.to === '/transcripts');
+    expect(transcripts).toBeUndefined();
+  });
+
+  it('Transcripts item appears after endpointCompatibility loads with TracingService supported', () => {
+    const compatibility: EndpointCompatibility = {
+      kafkaVersion: '3.6.0',
+      endpoints: [
+        {
+          endpoint: Feature.TracingService.endpoint,
+          method: Feature.TracingService.method,
+          isSupported: true,
+        },
+      ],
+    };
+
+    act(() => {
+      useSupportedFeaturesStore.getState().setEndpointCompatibility(compatibility);
+    });
+
+    const groups = createGroupedSidebarItems();
+    const allItems = groups.flatMap((g) => g.items);
+    const transcripts = allItems.find((item) => item.to === '/transcripts');
+    expect(transcripts).toBeDefined();
+    expect(transcripts?.title).toBe('Transcripts');
+  });
+
+  it('store selector triggers re-render when endpointCompatibility changes', () => {
+    const selector = (s: { endpointCompatibility: EndpointCompatibility | null }) => s.endpointCompatibility;
+    const { result } = renderHook(() => useSupportedFeaturesStore(selector));
+
+    expect(result.current).toBeNull();
+
+    const compatibility: EndpointCompatibility = {
+      kafkaVersion: '3.6.0',
+      endpoints: [
+        {
+          endpoint: Feature.TracingService.endpoint,
+          method: Feature.TracingService.method,
+          isSupported: true,
+        },
+      ],
+    };
+
+    act(() => {
+      useSupportedFeaturesStore.getState().setEndpointCompatibility(compatibility);
+    });
+
+    expect(result.current).toBe(compatibility);
+  });
+});

frontend/src/components/layout/sidebar.tsx

@@ -44,6 +44,7 @@ import RedpandaIcon from '../../assets/redpanda/redpanda-icon-next.svg';
 import RedpandaLogoWhite from '../../assets/redpanda/redpanda-logo-next-white.svg';
 import { AuthenticationMethod } from '../../protogen/redpanda/api/console/v1alpha1/authentication_pb';
 import { api, useApiStoreHook } from '../../state/backend-api';
+import { useSupportedFeaturesStore } from '../../state/supported-features';
 import { AppFeatures } from '../../utils/env';
 import { getUserInitials } from '../../utils/string';
 import { UserPreferencesDialog } from '../misc/user-preferences';
@@ -225,6 +226,7 @@ function SidebarNavItem({ item, isActive, onNavClick }: NavItemProps) {
 const SidebarNavigation = () => {
   const location = useLocation();
   const { isMobile, setOpenMobile } = useSidebar();
+  useSupportedFeaturesStore((s) => s.endpointCompatibility); // re-render when endpoint compatibility loads
   const groupedItems = createGroupedSidebarItems();
 
   const handleNavClick = () => {

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

@@ -1,7 +1,6 @@
 import { Alert, AlertDescription, AlertIcon, Box, Button, Flex } from '@redpanda-data/ui';
 import { Link, useLocation } from '@tanstack/react-router';
 import { useEffect } from 'react';
-import { useStore } from 'zustand';
 
 import {
   coreHasEnterpriseFeatures,
@@ -13,15 +12,15 @@ import {
   prettyLicenseType,
 } from './license-utils';
 import { License_Source, License_Type } from '../../protogen/redpanda/api/console/v1alpha1/license_pb';
-import { api, useApiStore } from '../../state/backend-api';
+import { api, useApiStoreHook } from '../../state/backend-api';
 import { capitalizeFirst } from '../../utils/utils';
 
 // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: complex business logic
 export const LicenseNotification = () => {
-  const licenses = useStore(useApiStore, (s) => s.licenses);
-  const licensesLoaded = useStore(useApiStore, (s) => s.licensesLoaded);
-  const licenseViolation = useStore(useApiStore, (s) => s.licenseViolation);
-  const enterpriseFeaturesUsed = useStore(useApiStore, (s) => s.enterpriseFeaturesUsed);
+  const licenses = useApiStoreHook((s) => s.licenses);
+  const licensesLoaded = useApiStoreHook((s) => s.licensesLoaded);
+  const licenseViolation = useApiStoreHook((s) => s.licenseViolation);
+  const enterpriseFeaturesUsed = useApiStoreHook((s) => s.enterpriseFeaturesUsed);
   const location = useLocation();
 
   useEffect(() => {

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

@@ -1,7 +1,6 @@
 import { Alert, AlertDescription, AlertIcon, Box, Flex, Text } from '@redpanda-data/ui';
 import { Link } from 'components/redpanda-ui/components/typography';
 import { type FC, type ReactElement, useEffect, useState } from 'react';
-import { useStore } from 'zustand';
 
 import {
   consoleHasEnterpriseFeature,
@@ -20,7 +19,7 @@ import {
 } from './license-utils';
 import { RegisterModal } from './register-modal';
 import { type License, License_Type } from '../../protogen/redpanda/api/console/v1alpha1/license_pb';
-import { api, useApiStore } from '../../state/backend-api';
+import { api, useApiStoreHook } from '../../state/backend-api';
 
 const getLicenseAlertContent = (
   licenses: License[],
@@ -255,8 +254,8 @@ const getLicenseAlertContent = (
 };
 
 export const OverviewLicenseNotification: FC = () => {
-  const licenses = useStore(useApiStore, (s) => s.licenses);
-  const clusterOverview = useStore(useApiStore, (s) => s.clusterOverview);
+  const licenses = useApiStoreHook((s) => s.licenses);
+  const clusterOverview = useApiStoreHook((s) => s.clusterOverview);
   const [registerModalOpen, setIsRegisterModalOpen] = useState(false);
 
   useEffect(() => {

frontend/src/components/pages/acls/acl-list.tsx

@@ -517,7 +517,7 @@ const UserActions = ({ user }: { user: UsersEntry }) => {
 
   return (
     <>
-      {Boolean(api.isAdminApiConfigured) && (
+      {Boolean(api.isAdminApiConfigured) && !isServerless() && (
         <ChangePasswordModal
           isOpen={isChangePasswordModalOpen}
           setIsOpen={setIsChangePasswordModalOpen}
@@ -533,7 +533,7 @@ const UserActions = ({ user }: { user: UsersEntry }) => {
           <Icon as={MoreHorizontalIcon} />
         </MenuButton>
         <MenuList>
-          {Boolean(api.isAdminApiConfigured) && (
+          {Boolean(api.isAdminApiConfigured) && !isServerless() && (
             <MenuItem
               onClick={(e) => {
                 e.stopPropagation();

frontend/src/components/pages/acls/serverless-password-guard.test.tsx

@@ -0,0 +1,93 @@
+/**
+ * Copyright 2022 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+// biome-ignore-all lint/style/noNamespaceImport: test file
+
+import { render, screen } from '@testing-library/react';
+import { UserInformationCard } from 'components/pages/roles/user-information-card';
+import { isServerless } from 'config';
+
+vi.mock('config', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('config')>();
+  return {
+    ...actual,
+    isServerless: vi.fn(() => false),
+  };
+});
+
+const mockedIsServerless = vi.mocked(isServerless);
+
+/**
+ * These tests verify the serverless guard on the password change UI (UX-963).
+ *
+ * In both user-details.tsx and acl-list.tsx, the password change controls are
+ * gated by `api.isAdminApiConfigured && !isServerless()`. When isServerless()
+ * returns true, onEditPassword is undefined and the UI is hidden.
+ *
+ * We test the UserInformationCard component directly, which renders the "Edit"
+ * password button only when the onEditPassword callback is provided. This
+ * mirrors the guard logic in the parent components.
+ */
+describe('UX-963: password change hidden in serverless mode', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('shows the Edit password button when not in serverless mode (onEditPassword provided)', () => {
+    mockedIsServerless.mockReturnValue(false);
+
+    const isAdminApiConfigured = true;
+    const onEditPassword = isAdminApiConfigured && !isServerless() ? vi.fn() : undefined;
+
+    render(<UserInformationCard onEditPassword={onEditPassword} username="test-user" />);
+
+    expect(screen.getByRole('button', { name: 'Edit' })).toBeInTheDocument();
+  });
+
+  it('hides the Edit password button when in serverless mode (onEditPassword is undefined)', () => {
+    mockedIsServerless.mockReturnValue(true);
+
+    const isAdminApiConfigured = true;
+    const onEditPassword = isAdminApiConfigured && !isServerless() ? vi.fn() : undefined;
+
+    render(<UserInformationCard onEditPassword={onEditPassword} username="test-user" />);
+
+    expect(screen.queryByRole('button', { name: 'Edit' })).not.toBeInTheDocument();
+  });
+
+  it('hides the Edit password button when admin API is not configured', () => {
+    mockedIsServerless.mockReturnValue(false);
+
+    const isAdminApiConfigured = false;
+    const onEditPassword = isAdminApiConfigured && !isServerless() ? vi.fn() : undefined;
+
+    render(<UserInformationCard onEditPassword={onEditPassword} username="test-user" />);
+
+    expect(screen.queryByRole('button', { name: 'Edit' })).not.toBeInTheDocument();
+  });
+
+  it('evaluates the guard condition correctly for all combinations', () => {
+    // This directly tests the boolean logic used in user-details.tsx and acl-list.tsx:
+    // api.isAdminApiConfigured && !isServerless()
+    const cases = [
+      { adminApi: true, serverless: false, expected: true },
+      { adminApi: true, serverless: true, expected: false },
+      { adminApi: false, serverless: false, expected: false },
+      { adminApi: false, serverless: true, expected: false },
+    ];
+
+    for (const { adminApi, serverless, expected } of cases) {
+      mockedIsServerless.mockReturnValue(serverless);
+      const result = adminApi && !isServerless();
+      expect(result).toBe(expected);
+    }
+  });
+});

frontend/src/components/pages/acls/user-details.tsx

@@ -14,6 +14,7 @@ import { UserAclsCard } from 'components/pages/roles/user-acls-card';
 import { UserInformationCard } from 'components/pages/roles/user-information-card';
 import { UserRolesCard } from 'components/pages/roles/user-roles-card';
 import { Button } from 'components/redpanda-ui/components/button';
+import { isServerless } from 'config';
 import type { UpdateRoleMembershipResponse } from 'protogen/redpanda/api/console/v1alpha1/security_pb';
 import { useEffect, useState } from 'react';
 
@@ -79,7 +80,7 @@ const UserDetailsPage = ({ userName }: UserDetailsPageProps) => {
       <div className="flex flex-col gap-4">
         <UserInformationCard
           onEditPassword={
-            api.isAdminApiConfigured
+            api.isAdminApiConfigured && !isServerless()
               ? () => {
                   setIsChangePasswordModalOpen(true);
                 }
@@ -124,7 +125,7 @@ const UserDetailsPage = ({ userName }: UserDetailsPageProps) => {
           )}
         </div>
 
-        {Boolean(api.isAdminApiConfigured) && (
+        {Boolean(api.isAdminApiConfigured) && !isServerless() && (
           <ChangePasswordModal
             isOpen={isChangePasswordModalOpen}
             setIsOpen={setIsChangePasswordModalOpen}