Merge pull request #2030 from redpanda-data/front-end/dr/improvements

andresaristizabal · web-flow · commit 3411003faf5e · 2025-11-18T11:35:15.000-05:00
feat: shadow links UI improvements and bug fixes
diff --git a/frontend/src/components/pages/shadowlinks/create/configuration/topics-step.tsx b/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 mirroring</CardTitle>
+          <CardTitle>Topic shadowing</CardTitle>
           <CardAction>
             <CollapsibleTrigger asChild>
               <Button className="w-fit p-0" data-testid="topics-toggle-button" size="sm" variant="ghost">
@@ -111,7 +111,7 @@ export const TopicsStep = () => {
               <TabsContent value="all">
                 <Alert>
                   <AlertDescription>
-                    All topics from the source cluster will be mirrored to the destination cluster.
+                    All topics from the source cluster will be shadowed to the destination cluster.
                   </AlertDescription>
                 </Alert>
               </TabsContent>
diff --git a/frontend/src/components/pages/shadowlinks/create/connection/bootstrap-servers.test.tsx b/frontend/src/components/pages/shadowlinks/create/connection/bootstrap-servers.test.tsx
@@ -177,13 +177,15 @@ describe('BootstrapServers', () => {
       const input1 = getBootstrapInput(1);
       fireEvent.change(input1, { target: { value: 'kafka2.example.com:9092' } });
 
-      const disabledTab = screen.getByTestId('tls-disabled-tab');
-      fireEvent.click(disabledTab);
+      const tlsToggle = screen.getByTestId('tls-toggle');
+
+      // TLS is enabled by default (initialValues.useTls = true), so clicking will disable it
+      fireEvent.click(tlsToggle);
 
       await waitFor(() => {
         expect(input0).toHaveValue('kafka1.example.com:9092');
         expect(input1).toHaveValue('kafka2.example.com:9092');
-        expect(disabledTab).toHaveAttribute('aria-selected', 'true');
+        expect(tlsToggle).not.toBeChecked();
       });
     });
   });
diff --git a/frontend/src/components/pages/shadowlinks/create/connection/scram-configuration.test.tsx b/frontend/src/components/pages/shadowlinks/create/connection/scram-configuration.test.tsx
@@ -42,30 +42,30 @@ const TestWrapper = ({ defaultValues = initialValues }: { defaultValues?: FormVa
 
 describe('ScramConfiguration', () => {
   describe('SCRAM enabled state', () => {
-    test('should show credentials form when Enabled is selected', () => {
+    test('should show credentials form when switch is enabled', () => {
       const customValues: FormValues = {
         ...initialValues,
         useScram: true,
       };
 
       render(<TestWrapper defaultValues={customValues} />);
 
-      expect(screen.getByTestId('scram-enabled-tab')).toHaveAttribute('aria-selected', 'true');
+      expect(screen.getByTestId('scram-toggle')).toBeChecked();
       expect(screen.getByTestId('scram-credentials-form')).toBeInTheDocument();
       expect(screen.getByTestId('scram-username-field')).toBeInTheDocument();
       expect(screen.getByTestId('scram-password-field')).toBeInTheDocument();
       expect(screen.getByTestId('scram-mechanism-field')).toBeInTheDocument();
     });
 
-    test('should hide credentials form when Disabled is selected', () => {
+    test('should hide credentials form when switch is disabled', () => {
       const customValues: FormValues = {
         ...initialValues,
         useScram: false,
       };
 
       render(<TestWrapper defaultValues={customValues} />);
 
-      expect(screen.getByTestId('scram-disabled-tab')).toHaveAttribute('aria-selected', 'true');
+      expect(screen.getByTestId('scram-toggle')).not.toBeChecked();
       expect(screen.queryByTestId('scram-credentials-form')).not.toBeInTheDocument();
       expect(screen.queryByTestId('scram-username-field')).not.toBeInTheDocument();
       expect(screen.queryByTestId('scram-password-field')).not.toBeInTheDocument();
diff --git a/frontend/src/components/pages/shadowlinks/create/connection/scram-configuration.tsx b/frontend/src/components/pages/shadowlinks/create/connection/scram-configuration.tsx
@@ -19,16 +19,29 @@ import {
   SelectTrigger,
   SelectValue,
 } from 'components/redpanda-ui/components/select';
+import { Switch } from 'components/redpanda-ui/components/switch';
 import { ScramMechanism } from 'protogen/redpanda/core/admin/v2/shadow_link_pb';
+import { useEffect } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 
-import { Tabs, TabsList, TabsTrigger } from '../../../../redpanda-ui/components/tabs';
 import type { FormValues } from '../model';
 
 export const ScramConfiguration = () => {
-  const { control } = useFormContext<FormValues>();
+  const { control, setValue } = useFormContext<FormValues>();
   const useScram = useWatch({ control, name: 'useScram' });
 
+  useEffect(() => {
+    if (useScram) {
+      setValue('scramCredentials', {
+        username: '',
+        password: '',
+        mechanism: ScramMechanism.SCRAM_SHA_256,
+      });
+    } else {
+      setValue('scramCredentials', undefined);
+    }
+  }, [useScram, setValue]);
+
   return (
     <Card size="full">
       <CardHeader>
@@ -38,21 +51,10 @@ export const ScramConfiguration = () => {
         control={control}
         name="useScram"
         render={({ field }) => (
-          <FormItem className="flex flex-col">
-            <div>
-              <FormLabel>Use SCRAM authentication</FormLabel>
-            </div>
+          <FormItem className="flex flex-row items-center gap-3">
+            <FormLabel>Use SCRAM authentication</FormLabel>
             <FormControl>
-              <Tabs onValueChange={(value) => field.onChange(value === 'true')} value={String(field.value)}>
-                <TabsList variant="default">
-                  <TabsTrigger data-testid="scram-enabled-tab" value="true">
-                    Enabled
-                  </TabsTrigger>
-                  <TabsTrigger data-testid="scram-disabled-tab" value="false">
-                    Disabled
-                  </TabsTrigger>
-                </TabsList>
-              </Tabs>
+              <Switch checked={field.value} onCheckedChange={field.onChange} testId="scram-toggle" />
             </FormControl>
           </FormItem>
         )}
diff --git a/frontend/src/components/pages/shadowlinks/create/connection/tls-configuration.tsx b/frontend/src/components/pages/shadowlinks/create/connection/tls-configuration.tsx
@@ -10,7 +10,7 @@
  */
 
 import { FormControl, FormField, FormItem, FormLabel } from 'components/redpanda-ui/components/form';
-import { Tabs, TabsList, TabsTrigger } from 'components/redpanda-ui/components/tabs';
+import { Switch } from 'components/redpanda-ui/components/switch';
 import { useFormContext } from 'react-hook-form';
 
 import type { FormValues } from '../model';
@@ -23,25 +23,10 @@ export const TlsConfiguration = () => {
         control={control}
         name="useTls"
         render={({ field }) => (
-          <FormItem className="flex flex-col">
-            <div>
-              <FormLabel>Enable TLS</FormLabel>
-            </div>
+          <FormItem className="flex flex-row items-center gap-3">
+            <FormLabel>Enable TLS</FormLabel>
             <FormControl>
-              <Tabs
-                data-testid="tls-toggle"
-                onValueChange={(value) => field.onChange(value === 'true')}
-                value={String(field.value)}
-              >
-                <TabsList variant="default">
-                  <TabsTrigger data-testid="tls-enabled-tab" value="true">
-                    Enabled
-                  </TabsTrigger>
-                  <TabsTrigger data-testid="tls-disabled-tab" value="false">
-                    Disabled
-                  </TabsTrigger>
-                </TabsList>
-              </Tabs>
+              <Switch checked={field.value} onCheckedChange={field.onChange} testId="tls-toggle" />
             </FormControl>
           </FormItem>
         )}
diff --git a/frontend/src/components/pages/shadowlinks/details/config/configuration-shadowing.tsx b/frontend/src/components/pages/shadowlinks/details/config/configuration-shadowing.tsx
@@ -26,7 +26,7 @@ import {
   getResourceTypeLabel,
 } from '../../shadowlink-helpers';
 
-export interface ConfigurationMirroringProps {
+export interface ConfigurationShadowingProps {
   shadowLink: ShadowLink;
 }
 
@@ -166,7 +166,7 @@ const ACLFilterSection = ({ filters }: { filters: ACLFilter[] }) => {
   );
 };
 
-export const ConfigurationMirroring = ({ shadowLink }: ConfigurationMirroringProps) => {
+export const ConfigurationShadowing = ({ shadowLink }: ConfigurationShadowingProps) => {
   const topicSyncOptions = shadowLink.configurations?.topicMetadataSyncOptions;
   const consumerSyncOptions = shadowLink.configurations?.consumerOffsetSyncOptions;
   const securitySyncOptions = shadowLink.configurations?.securitySyncOptions;
diff --git a/frontend/src/components/pages/shadowlinks/details/config/configuration-topic-replication.tsx b/frontend/src/components/pages/shadowlinks/details/config/configuration-topic-replication.tsx
@@ -97,7 +97,7 @@ export const ConfigurationTopicReplication = ({ shadowLink }: ConfigurationTopic
     return (
       <Card size="full" testId="topic-replication-placeholder-card">
         <CardContent className="py-8 text-center">
-          <Text className="text-muted-foreground">No topic properties configured for replication</Text>
+          <Text className="text-muted-foreground">No topic properties configured for shadowing</Text>
         </CardContent>
       </Card>
     );
@@ -106,7 +106,7 @@ export const ConfigurationTopicReplication = ({ shadowLink }: ConfigurationTopic
   return (
     <div className="flex flex-col gap-6">
       <Heading level={2} testId="shadowing-title">
-        Topic config replication
+        Topic config shadow
       </Heading>
       {sortedCategories.map((category) => {
         const properties = categorizedProperties[category];
diff --git a/frontend/src/components/pages/shadowlinks/details/config/shadow-link-configuration.tsx b/frontend/src/components/pages/shadowlinks/details/config/shadow-link-configuration.tsx
@@ -14,7 +14,7 @@
 import { Tabs, TabsContent, TabsContents, TabsList, TabsTrigger } from 'components/redpanda-ui/components/tabs';
 import type { ShadowLink } from 'protogen/redpanda/api/console/v1alpha1/shadowlink_pb';
 
-import { ConfigurationMirroring } from './configuration-mirroring';
+import { ConfigurationShadowing } from './configuration-shadowing';
 import { ConfigurationSource } from './configuration-source';
 import { ConfigurationTopicReplication } from './configuration-topic-replication';
 
@@ -31,7 +31,7 @@ export const ShadowLinkConfiguration = ({ shadowLink }: ShadowLinkConfigurationP
       <TabsTrigger testId="source-tab" value="source" variant="underline">
         Source
       </TabsTrigger>
-      <TabsTrigger testId="mirroring-tab" value="mirroring" variant="underline">
+      <TabsTrigger testId="shadowing-tab" value="shadowing" variant="underline">
         Shadowing
       </TabsTrigger>
       <TabsTrigger testId="topic-config-replication-tab" value="topic-config-replication" variant="underline">
@@ -43,7 +43,7 @@ export const ShadowLinkConfiguration = ({ shadowLink }: ShadowLinkConfigurationP
       <TabsContent testId="all-content" value="all">
         <div className="flex flex-col gap-6">
           <ConfigurationSource shadowLink={shadowLink} />
-          <ConfigurationMirroring shadowLink={shadowLink} />
+          <ConfigurationShadowing shadowLink={shadowLink} />
           <ConfigurationTopicReplication shadowLink={shadowLink} />
         </div>
       </TabsContent>
@@ -52,8 +52,8 @@ export const ShadowLinkConfiguration = ({ shadowLink }: ShadowLinkConfigurationP
         <ConfigurationSource shadowLink={shadowLink} />
       </TabsContent>
 
-      <TabsContent testId="mirroring-content" value="mirroring">
-        <ConfigurationMirroring shadowLink={shadowLink} />
+      <TabsContent testId="shadowing-content" value="shadowing">
+        <ConfigurationShadowing shadowLink={shadowLink} />
       </TabsContent>
 
       <TabsContent testId="topic-config-replication-content" value="topic-config-replication">
diff --git a/frontend/src/components/pages/shadowlinks/details/shadow-link-diagram.tsx b/frontend/src/components/pages/shadowlinks/details/shadow-link-diagram.tsx
@@ -26,7 +26,7 @@ const SourceClusterNode = ({ data }: { data: { brokers: string[] } }) => (
       <ItemTitle>Source cluster</ItemTitle>
       <div className="flex flex-col gap-1 text-muted-foreground text-xs">
         {data.brokers.map((broker) => (
-          <Text key={broker} variant={'muted'}>
+          <Text className="max-w-[240px] truncate" key={broker} variant={'muted'}>
             {broker}
           </Text>
         ))}
@@ -105,6 +105,7 @@ export const ShadowLinkDiagram = ({ shadowLink }: ShadowLinkDiagramProps) => {
               nodeTypes={nodeTypes}
               panOnDrag={false}
               preventScrolling={false}
+              proOptions={{ hideAttribution: true }}
               zoomOnPinch={false}
               zoomOnScroll={false}
             >
diff --git a/frontend/src/components/pages/shadowlinks/edit/shadowlink-edit-page.test.tsx b/frontend/src/components/pages/shadowlinks/edit/shadowlink-edit-page.test.tsx
@@ -172,8 +172,8 @@ const enableTLS = async (
   user: ReturnType<typeof userEvent.setup>,
   scr: typeof import('@testing-library/react').screen
 ) => {
-  const tlsEnabledTab = scr.getByTestId('tls-enabled-tab');
-  await user.click(tlsEnabledTab);
+  const tlsToggle = scr.getByTestId('tls-toggle');
+  await user.click(tlsToggle);
 };
 
 const updateMetadataMaxAge = async (
@@ -337,8 +337,8 @@ const enableMTLS = async (
   user: ReturnType<typeof userEvent.setup>,
   scr: typeof import('@testing-library/react').screen
 ) => {
-  const mtlsEnabledTab = scr.getByTestId('mtls-enabled-tab');
-  await user.click(mtlsEnabledTab);
+  const mtlsToggle = scr.getByTestId('mtls-toggle');
+  await user.click(mtlsToggle);
 };
 
 const uploadCACertificate = async (
diff --git a/frontend/src/components/pages/shadowlinks/edit/topic-config-tab.test.tsx b/frontend/src/components/pages/shadowlinks/edit/topic-config-tab.test.tsx
@@ -0,0 +1,105 @@
+/**
+ * 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 { TopicConfigTab } from './topic-config-tab';
+import { getDefaultProperties } from './topic-properties-config';
+import { FormSchema, type FormValues, initialValues } from '../create/model';
+
+const TestWrapper = ({ defaultValues = initialValues }: { defaultValues?: FormValues }) => {
+  const form = useForm<FormValues>({
+    resolver: zodResolver(FormSchema),
+    defaultValues,
+    mode: 'onBlur',
+  });
+
+  return (
+    <Form {...form}>
+      <form>
+        <TopicConfigTab />
+        <div data-testid="form-state">{JSON.stringify(form.watch())}</div>
+      </form>
+    </Form>
+  );
+};
+
+describe('TopicConfigTab', () => {
+  describe('Exclude default properties toggle', () => {
+    test('should remove default properties from topicProperties when excludeDefault is enabled', async () => {
+      const defaultProps = getDefaultProperties();
+      const customValues: FormValues = {
+        ...initialValues,
+        excludeDefault: false,
+        topicProperties: [...defaultProps, 'segment.bytes', 'flush.ms'],
+      };
+
+      render(<TestWrapper defaultValues={customValues} />);
+
+      const toggle = screen.getByTestId('exclude-default-switch');
+      expect(toggle).not.toBeChecked();
+
+      // Enable exclude default
+      fireEvent.click(toggle);
+
+      await waitFor(() => {
+        expect(toggle).toBeChecked();
+      });
+
+      // Check that default properties were removed from topicProperties
+      const formState = screen.getByTestId('form-state');
+      const state = JSON.parse(formState.textContent || '{}');
+
+      // Only non-default properties should remain
+      expect(state.topicProperties).toEqual(['segment.bytes', 'flush.ms']);
+      expect(state.topicProperties).not.toContain('retention.bytes');
+      expect(state.topicProperties).not.toContain('retention.ms');
+    });
+
+    test('should add default properties to topicProperties when excludeDefault is disabled', async () => {
+      const customValues: FormValues = {
+        ...initialValues,
+        excludeDefault: true,
+        topicProperties: ['segment.bytes', 'flush.ms'],
+      };
+
+      render(<TestWrapper defaultValues={customValues} />);
+
+      const toggle = screen.getByTestId('exclude-default-switch');
+      expect(toggle).toBeChecked();
+
+      // Disable exclude default
+      fireEvent.click(toggle);
+
+      await waitFor(() => {
+        expect(toggle).not.toBeChecked();
+      });
+
+      // Check that default properties were added to topicProperties
+      const formState = screen.getByTestId('form-state');
+      const state = JSON.parse(formState.textContent || '{}');
+
+      // Should contain all default properties plus the existing ones
+      expect(state.topicProperties).toContain('segment.bytes');
+      expect(state.topicProperties).toContain('flush.ms');
+      expect(state.topicProperties).toContain('retention.bytes');
+      expect(state.topicProperties).toContain('retention.ms');
+      expect(state.topicProperties).toContain('delete.retention.ms');
+      expect(state.topicProperties).toContain('min.compaction.lag.ms');
+      expect(state.topicProperties).toContain('max.compaction.lag.ms');
+      expect(state.topicProperties).toContain('replication.factor');
+      expect(state.topicProperties).toContain('compression.type');
+    });
+  });
+});
diff --git a/frontend/src/components/pages/shadowlinks/edit/topic-config-tab.tsx b/frontend/src/components/pages/shadowlinks/edit/topic-config-tab.tsx
diff --git a/frontend/src/components/pages/shadowlinks/edit/topic-properties-config.ts b/frontend/src/components/pages/shadowlinks/edit/topic-properties-config.ts
diff --git a/frontend/src/components/pages/shadowlinks/list/shadowlink-empty-state.tsx b/frontend/src/components/pages/shadowlinks/list/shadowlink-empty-state.tsx
diff --git a/frontend/src/components/pages/shadowlinks/list/shadowlink-list-page.tsx b/frontend/src/components/pages/shadowlinks/list/shadowlink-list-page.tsx
diff --git a/frontend/src/components/routes.tsx b/frontend/src/components/routes.tsx
