frontend: fix shadow links page crash when feature is disabled (#2225)

* fix: handle FailedPrecondition in shadow links route loader

* fix: remove ShadowLinkService from HIDE_IF_NOT_SUPPORTED_FEATURES

Shadow Links should remain visible in the sidebar even when the feature
is disabled so users can see instructions on how to enable it. The
loader try-catch handles FailedPrecondition gracefully for disabled
clusters.

* fix: hide shadow links tab on non-Redpanda clusters

* fix: show distinct unavailable state for shadow links on non-Redpanda clusters

Non-Redpanda clusters (e.g. Apache Kafka) return Code.Unavailable because
the Redpanda Admin API doesn't exist. Previously this showed the same
FeatureDisabled card with an `rpk` command, which is incorrect for these
clusters. Add a separate ShadowLinkUnavailableState with an info alert
explaining that shadowing requires a Redpanda cluster with the Admin API.

---------

Co-authored-by: Martin Schneppenheim <23424570+weeco@users.noreply.github.com>

Author: c-julin

frontend/src/components/pages/shadowlinks/list/shadowlink-empty-state.tsx

@@ -9,11 +9,12 @@
  * by the Apache License, Version 2.0
  */
 
+import { Alert, AlertDescription } from 'components/redpanda-ui/components/alert';
 import { Button } from 'components/redpanda-ui/components/button';
 import { Card, CardContent, CardHeader, CardTitle } from 'components/redpanda-ui/components/card';
 import { CodeBlock, Pre } from 'components/redpanda-ui/components/code-block';
 import { Text } from 'components/redpanda-ui/components/typography';
-import { AlertCircle, SearchX } from 'lucide-react';
+import { AlertCircle, Info, SearchX } from 'lucide-react';
 
 const ShadowingDescription = () => (
   <>
@@ -86,6 +87,23 @@ export const ShadowLinkFeatureDisabledState = () => (
   </Card>
 );
 
+export const ShadowLinkUnavailableState = () => (
+  <Card data-testid="shadowlink-unavailable-card" size="full">
+    <CardHeader>
+      <CardTitle>Shadowing</CardTitle>
+    </CardHeader>
+    <CardContent className="flex flex-col gap-3">
+      <ShadowingDescription />
+      <Alert icon={<Info />} variant="warning">
+        <AlertDescription>
+          Shadowing is not available for this cluster. This feature requires a Redpanda cluster with the Admin API
+          enabled.
+        </AlertDescription>
+      </Alert>
+    </CardContent>
+  </Card>
+);
+
 type ShadowLinkErrorStateProps = {
   errorMessage: string;
   onRetry: () => void;

frontend/src/components/pages/shadowlinks/list/shadowlink-list-page.tsx

@@ -30,6 +30,7 @@ import {
   ShadowLinkEmptyStateCloud,
   ShadowLinkErrorState,
   ShadowLinkFeatureDisabledState,
+  ShadowLinkUnavailableState,
 } from './shadowlink-empty-state';
 import { isEmbedded } from '../../../../config';
 import { getBasePath } from '../../../../utils/env';
@@ -119,9 +120,9 @@ export const ShadowLinkListPage = () => {
     uiState.pageTitle = 'Shadow Links';
   }, []);
 
-  // Show toast on error (except for feature-disabled errors)
+  // Show toast on error (except for feature-disabled or unavailable admin API errors)
   useEffect(() => {
-    if (error && error.code !== Code.FailedPrecondition) {
+    if (error && error.code !== Code.FailedPrecondition && error.code !== Code.Unavailable) {
       toast.error('Failed to load shadowlinks', {
         description: error.message,
       });
@@ -140,6 +141,15 @@ export const ShadowLinkListPage = () => {
     getCoreRowModel: getCoreRowModel(),
   });
 
+  // Admin API unavailable
+  if (error?.code === Code.Unavailable) {
+    return (
+      <div className="my-2 flex justify-center gap-2">
+        <ShadowLinkUnavailableState />
+      </div>
+    );
+  }
+
   // Feature disabled state
   if (error?.code === Code.FailedPrecondition && error.message.includes('Cluster link feature is disabled')) {
     return (

frontend/src/routes/shadowlinks/index.tsx

@@ -10,23 +10,33 @@
  */
 
 import { create } from '@bufbuild/protobuf';
+import { Code, ConnectError } from '@connectrpc/connect';
 import { createQueryOptions } from '@connectrpc/connect-query';
 import { createFileRoute } from '@tanstack/react-router';
 import { ShieldIcon } from 'components/icons';
+import { ShadowLinkListPage } from 'components/pages/shadowlinks/list/shadowlink-list-page';
 import { ListShadowLinksRequestSchema } from 'protogen/redpanda/api/console/v1alpha1/shadowlink_pb';
 import { listShadowLinks } from 'protogen/redpanda/api/console/v1alpha1/shadowlink-ShadowLinkService_connectquery';
 
-import { ShadowLinkListPage } from '../../components/pages/shadowlinks/list/shadowlink-list-page';
-
 export const Route = createFileRoute('/shadowlinks/')({
   staticData: {
     title: 'Shadow Links',
     icon: ShieldIcon,
   },
   loader: async ({ context: { queryClient, dataplaneTransport } }) => {
-    await queryClient.ensureQueryData(
-      createQueryOptions(listShadowLinks, create(ListShadowLinksRequestSchema, {}), { transport: dataplaneTransport })
-    );
+    try {
+      await queryClient.ensureQueryData(
+        createQueryOptions(listShadowLinks, create(ListShadowLinksRequestSchema, {}), { transport: dataplaneTransport })
+      );
+    } catch (error) {
+      if (
+        error instanceof ConnectError &&
+        (error.code === Code.FailedPrecondition || error.code === Code.Unavailable)
+      ) {
+        return;
+      }
+      throw error;
+    }
   },
   component: ShadowLinkListPage,
 });

frontend/src/state/supported-features.ts

@@ -118,7 +118,7 @@ export function isSupported(f: FeatureEntry): boolean {
 /**
  * A list of features we should hide instead of showing a disabled message.
  */
-const HIDE_IF_NOT_SUPPORTED_FEATURES = [Feature.GetQuotas, Feature.ShadowLinkService, Feature.TracingService];
+const HIDE_IF_NOT_SUPPORTED_FEATURES = [Feature.GetQuotas, Feature.TracingService];
 export function shouldHideIfNotSupported(f: FeatureEntry): boolean {
   return HIDE_IF_NOT_SUPPORTED_FEATURES.includes(f);
 }

frontend/src/utils/route-utils.tsx

@@ -290,7 +290,7 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
       if (isEmbedded()) {
         return isFeatureFlagEnabled('shadowlinkCloudUi') && !isServerless();
       }
-      return true; // self-hosted always visible
+      return true;
     }),
   },
   {