Merge pull request #2058 from redpanda-data/front-end/dr/support-shadowing-sr

Front end/dr/support shadowing sr

Author: andresaristizabal

frontend/src/components/pages/shadowlinks/create/configuration/acls-step.tsx

@@ -108,7 +108,7 @@ export const AclsStep = () => {
     <Collapsible onOpenChange={setIsOpen} open={isOpen}>
       <Card className="gap-0" size="full">
         <CardHeader>
-          <CardTitle>ACLs</CardTitle>
+          <CardTitle>Shadow ACLs</CardTitle>
           <CardAction>
             <CollapsibleTrigger asChild>
               <Button className="w-fit p-0" data-testid="acls-toggle-button" size="sm" variant="ghost">

frontend/src/components/pages/shadowlinks/create/configuration/configuration-step.tsx

@@ -11,12 +11,14 @@
 
 import { AclsStep } from './acls-step';
 import { ConsumerOffsetStep } from './consumer-offset-step';
+import { SchemaRegistryStep } from './schema-registry-step';
 import { TopicsStep } from './topics-step';
 
 export const ConfigurationStep = () => (
   <div className="space-y-4">
     <TopicsStep />
     <AclsStep />
     <ConsumerOffsetStep />
+    <SchemaRegistryStep />
   </div>
 );

frontend/src/components/pages/shadowlinks/create/configuration/consumer-offset-step.tsx

@@ -63,7 +63,7 @@ export const ConsumerOffsetStep = () => {
     <Collapsible onOpenChange={setIsOpen} open={isOpen}>
       <Card className="gap-0" size="full">
         <CardHeader>
-          <CardTitle>Consumer groups</CardTitle>
+          <CardTitle>Shadow consumer groups</CardTitle>
           <CardAction>
             <CollapsibleTrigger asChild>
               <Button className="w-fit p-0" data-testid="consumers-toggle-button" size="sm" variant="ghost">

frontend/src/components/pages/shadowlinks/create/configuration/schema-registry-step.test.tsx

@@ -0,0 +1,79 @@
+/**
+ * Copyright 2025 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
+ */
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Form } from 'components/redpanda-ui/components/form';
+import { useForm } from 'react-hook-form';
+import { fireEvent, render, screen, waitFor } from 'test-utils';
+
+import { SchemaRegistryStep } from './schema-registry-step';
+import { FormSchema, type FormValues, initialValues } from '../model';
+
+const TestWrapper = ({
+  defaultValues = initialValues,
+  onFormChange,
+}: {
+  defaultValues?: FormValues;
+  onFormChange?: (values: FormValues) => void;
+}) => {
+  const form = useForm<FormValues>({
+    resolver: zodResolver(FormSchema),
+    defaultValues,
+  });
+
+  if (onFormChange) {
+    form.watch((values) => {
+      onFormChange(values as FormValues);
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form>
+        <SchemaRegistryStep />
+      </form>
+    </Form>
+  );
+};
+
+describe('SchemaRegistryStep', () => {
+  describe('Toggle switch', () => {
+    test('should toggle enableSchemaRegistrySync value when switch is clicked', async () => {
+      let formValues: FormValues | undefined;
+
+      render(
+        <TestWrapper
+          onFormChange={(values) => {
+            formValues = values;
+          }}
+        />
+      );
+
+      const switchElement = screen.getByTestId('sr-enable-switch');
+
+      expect(switchElement).toHaveAttribute('data-state', 'unchecked');
+
+      fireEvent.click(switchElement);
+
+      await waitFor(() => {
+        expect(switchElement).toHaveAttribute('data-state', 'checked');
+        expect(formValues?.enableSchemaRegistrySync).toBe(true);
+      });
+
+      fireEvent.click(switchElement);
+
+      await waitFor(() => {
+        expect(switchElement).toHaveAttribute('data-state', 'unchecked');
+        expect(formValues?.enableSchemaRegistrySync).toBe(false);
+      });
+    });
+  });
+});

frontend/src/components/pages/shadowlinks/create/configuration/schema-registry-step.tsx

@@ -0,0 +1,46 @@
+/**
+ * Copyright 2025 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
+ */
+
+import { Card, CardContent, CardHeader, CardTitle } from 'components/redpanda-ui/components/card';
+import { FormControl, FormDescription, FormField, FormItem } from 'components/redpanda-ui/components/form';
+import { Switch } from 'components/redpanda-ui/components/switch';
+import { useFormContext } from 'react-hook-form';
+
+import type { FormValues } from '../model';
+
+export const SchemaRegistryStep = () => {
+  const { control } = useFormContext<FormValues>();
+
+  return (
+    <Card size="full">
+      <CardHeader>
+        <CardTitle>Shadow Schema Registry</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <FormField
+          control={control}
+          name="enableSchemaRegistrySync"
+          render={({ field }) => (
+            <FormItem className="flex items-center justify-between">
+              <div className="space-y-1">
+                <FormDescription>
+                  Replicate the source cluster's _schema topic, which replaces the shadow cluster's Schema Registry.
+                </FormDescription>
+              </div>
+              <FormControl>
+                <Switch checked={field.value} onCheckedChange={field.onChange} testId="sr-enable-switch" />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+      </CardContent>
+    </Card>
+  );
+};

frontend/src/components/pages/shadowlinks/create/configuration/topics-step.tsx

@@ -63,7 +63,7 @@ export const TopicsStep = () => {
     <Collapsible onOpenChange={setIsOpen} open={isOpen}>
       <Card className="gap-0" size="full">
         <CardHeader>
-          <CardTitle>Topic shadowing</CardTitle>
+          <CardTitle>Shadow topics</CardTitle>
           <CardAction>
             <CollapsibleTrigger asChild>
               <Button className="w-fit p-0" data-testid="topics-toggle-button" size="sm" variant="ghost">

frontend/src/components/pages/shadowlinks/create/model.ts

@@ -129,6 +129,9 @@ export const FormSchema = z
         })
       )
       .optional(),
+
+    // Schema Registry sync
+    enableSchemaRegistrySync: z.boolean(),
   })
   .superRefine((data, ctx) => {
     // If SCRAM is enabled, username and password are required
@@ -213,4 +216,5 @@ export const initialValues: FormValues = {
   consumers: [],
   aclsMode: 'all',
   aclFilters: [], // No default filter - user adds as needed
+  enableSchemaRegistrySync: false,
 };

frontend/src/components/pages/shadowlinks/create/shadowlink-create-page.test.tsx

@@ -94,7 +94,8 @@ type CreateAction =
   | { type: 'navigateToConfiguration' }
   | { type: 'addTopicFilterCreate'; name: string; options?: { patternType?: PatternType; filterType?: FilterType } }
   | { type: 'addConsumerFilterCreate'; name: string }
-  | { type: 'addACLFilterCreate'; principal: string };
+  | { type: 'addACLFilterCreate'; principal: string }
+  | { type: 'enableSchemaRegistrySync' };
 
 /**
  * Perform action for create form
@@ -217,6 +218,11 @@ const performCreateAction = async (
     case 'addACLFilterCreate':
       await addACLFilterCreate(user, scr, action.principal);
       break;
+    case 'enableSchemaRegistrySync': {
+      const schemaRegistrySwitch = scr.getByTestId('sr-enable-switch');
+      await user.click(schemaRegistrySwitch);
+      break;
+    }
     default:
       throw new Error(`Unknown action type: ${JSON.stringify(action)}`);
   }
@@ -370,6 +376,24 @@ const testCases: CreateTestCase[] = [
       );
     },
   },
+  {
+    description: 'creates shadow link with schema registry sync enabled',
+    actions: [
+      { type: 'fillName', value: 'test-shadow-link' },
+      { type: 'fillBootstrapServer', index: 0, value: 'server1.example.com:9092' },
+      { type: 'fillScramUsername', value: 'admin' },
+      { type: 'fillScramPassword', value: 'admin-secret' },
+      { type: 'navigateToConfiguration' },
+      { type: 'enableSchemaRegistrySync' },
+    ],
+    verify: (createRequest, exp) => {
+      exp(createRequest.shadowLink.name).toBe('test-shadow-link');
+      exp(createRequest.shadowLink.configurations.schemaRegistrySyncOptions).toBeDefined();
+      exp(createRequest.shadowLink.configurations.schemaRegistrySyncOptions.schemaRegistryShadowingMode.case).toBe(
+        'shadowSchemaRegistryTopic'
+      );
+    },
+  },
 ];
 
 describe('ShadowLinkCreatePage', () => {

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

@@ -25,6 +25,8 @@ import {
   FilterType,
   NameFilterSchema,
   PatternType,
+  SchemaRegistrySyncOptions_ShadowSchemaRegistryTopicSchema,
+  SchemaRegistrySyncOptionsSchema,
   ScramConfigSchema,
   SecuritySettingsSyncOptionsSchema,
   ShadowLinkClientOptionsSchema,
@@ -185,12 +187,23 @@ const buildCreateShadowLinkRequest = (values: FormValues) => {
         ),
   });
 
+  // Build schema registry sync options (only set if enabled)
+  const schemaRegistrySyncOptions = values.enableSchemaRegistrySync
+    ? create(SchemaRegistrySyncOptionsSchema, {
+        schemaRegistryShadowingMode: {
+          case: 'shadowSchemaRegistryTopic',
+          value: create(SchemaRegistrySyncOptions_ShadowSchemaRegistryTopicSchema, {}),
+        },
+      })
+    : undefined;
+
   // Build configurations
   const configurations = create(ShadowLinkConfigurationsSchema, {
     clientOptions,
     topicMetadataSyncOptions,
     consumerOffsetSyncOptions,
     securitySyncOptions,
+    schemaRegistrySyncOptions,
   });
 
   // Build shadow link
@@ -250,7 +263,8 @@ export const ShadowLinkCreatePage = () => {
       <div className="space-y-2">
         <Heading level={1}>Create shadow link</Heading>
         <Text variant="muted">
-          Set up a shadow link to replicate topics from a source cluster for disaster recovery.
+          Shadowing copies data at the byte level, ensuring shadow topics contain identical copies of source topics with
+          preserved offsets and timestamps. Select the replicated content for this shadow link.
         </Text>
       </div>
 

frontend/src/components/pages/shadowlinks/details/config/configuration-shadowing.tsx

@@ -166,16 +166,38 @@ const ACLFilterSection = ({ filters }: { filters: ACLFilter[] }) => {
   );
 };
 
+// Component to display Schema Registry sync status
+const SchemaRegistrySection = ({ isEnabled }: { isEnabled: boolean }) => (
+  <Card size="full" testId="schema-registry-card">
+    <CardHeader>
+      <Heading level={3}>Schema Registry</Heading>
+    </CardHeader>
+    <CardContent className="flex flex-row justify-between">
+      <Text className="mt-2 text-muted-foreground text-sm">
+        Replicate the source cluster's _schema topic, which replaces the shadow cluster's Schema Registry.
+      </Text>
+      <Badge testId="schema-registry-status-badge" variant={isEnabled ? 'green' : 'gray'}>
+        {isEnabled ? 'Enabled' : 'Disabled'}
+      </Badge>
+    </CardContent>
+  </Card>
+);
+
 export const ConfigurationShadowing = ({ shadowLink }: ConfigurationShadowingProps) => {
   const topicSyncOptions = shadowLink.configurations?.topicMetadataSyncOptions;
   const consumerSyncOptions = shadowLink.configurations?.consumerOffsetSyncOptions;
   const securitySyncOptions = shadowLink.configurations?.securitySyncOptions;
+  const schemaRegistrySyncOptions = shadowLink.configurations?.schemaRegistrySyncOptions;
 
   // Get filters
   const topicFilters = topicSyncOptions?.autoCreateShadowTopicFilters || [];
   const consumerFilters = consumerSyncOptions?.groupFilters || [];
   const aclFilters = securitySyncOptions?.aclFilters || [];
 
+  // Check if schema registry sync is enabled
+  const isSchemaRegistrySyncEnabled =
+    schemaRegistrySyncOptions?.schemaRegistryShadowingMode?.case === 'shadowSchemaRegistryTopic';
+
   return (
     <div className="flex flex-col gap-6">
       <Heading level={2} testId="shadowing-title">
@@ -200,6 +222,9 @@ export const ConfigurationShadowing = ({ shadowLink }: ConfigurationShadowingPro
         testId="consumer-group-replication"
         title="Consumer group replication"
       />
+
+      {/* Schema Registry Section */}
+      <SchemaRegistrySection isEnabled={isSchemaRegistrySyncEnabled} />
     </div>
   );
 };