feature(crr): add the DNS fallback modal for unresolved destination hostnames

Author: hervedombya

src/react/locations/CRRSetupWizard/CRRSetupWizard.test.tsx

@@ -94,4 +94,49 @@ describe('CRRSetupWizard — Configure step', () => {
 
     expect(await screen.findByText(/destination cluster did not respond/i)).toBeInTheDocument();
   });
+
+  it('opens the DNS fallback modal on unresolved hosts and retries with one IP applied to all of them', async () => {
+    let verifyCalls = 0;
+    let retryBody: { hostAliases?: { hostname: string; ip: string }[] } | undefined;
+    server.use(
+      rest.post(VERIFY_URL, (req, res, ctx) => {
+        verifyCalls += 1;
+        if (verifyCalls === 1) {
+          return res(
+            ctx.status(502),
+            ctx.set('Content-Type', 'application/problem+json'),
+            ctx.body(
+              JSON.stringify({
+                type: 'about:blank',
+                title: 'DNS resolution failed',
+                status: 502,
+                code: 'DestinationDnsResolutionFailed',
+                unresolvedHosts: ['s3.dest.local', 'iam.dest.local'],
+              }),
+            ),
+          );
+        }
+        retryBody = req.body as { hostAliases?: { hostname: string; ip: string }[] };
+        return res(ctx.json({ ok: true, mode: 'management-network', instanceName: 'ageless-valley' }));
+      }),
+    );
+    render(<CRRSetupWizard />, { wrapper: Wrapper });
+
+    await fillValidForm();
+    await userEvent.click(screen.getByRole('button', { name: /Check Connection/i }));
+
+    // The DNS failure surfaces the fallback modal listing every host that could not be resolved.
+    expect(await screen.findByText('• s3.dest.local')).toBeInTheDocument();
+    expect(screen.getByText('• iam.dest.local')).toBeInTheDocument();
+
+    await userEvent.type(screen.getByRole('textbox', { name: /Destination cluster IP/i }), '10.0.0.9');
+    await userEvent.click(screen.getByRole('button', { name: /Retry Connection/i }));
+
+    expect(await screen.findByText(/Destination reachable/i)).toBeInTheDocument();
+    // The single IP fans out to an alias for each unresolved host.
+    expect(retryBody?.hostAliases).toEqual([
+      { hostname: 's3.dest.local', ip: '10.0.0.9' },
+      { hostname: 'iam.dest.local', ip: '10.0.0.9' },
+    ]);
+  });
 });

src/react/locations/CRRSetupWizard/DnsFallbackModal.tsx

@@ -0,0 +1,77 @@
+import { Modal, Stack, Text } from '@scality/core-ui';
+import { Box } from '@scality/core-ui/dist/components/box/Box';
+import { Button, Input } from '@scality/core-ui/dist/next';
+import { useEffect, useState } from 'react';
+import type { HostAlias } from './api/types';
+
+const IPV4 = /^(?:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\.){3}(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)$/;
+
+type Props = {
+  isOpen: boolean;
+  unresolvedHosts: string[];
+  initialAliases: HostAlias[];
+  onSubmit: (aliases: HostAlias[]) => void;
+  onCancel: () => void;
+};
+
+export const DnsFallbackModal = ({ isOpen, unresolvedHosts, initialAliases, onSubmit, onCancel }: Props) => {
+  const seedIp = () => initialAliases.find((alias) => unresolvedHosts.includes(alias.hostname))?.ip ?? '';
+  const [ip, setIp] = useState(seedIp);
+
+  const hostsKey = unresolvedHosts.join('|');
+  // biome-ignore lint/correctness/useExhaustiveDependencies: re-seed only when the host set changes, capturing initialAliases at that moment
+  useEffect(() => {
+    setIp(seedIp());
+  }, [hostsKey]);
+
+  const trimmed = ip.trim();
+  const isValid = IPV4.test(trimmed);
+  const plural = unresolvedHosts.length > 1;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      close={onCancel}
+      title="Resolve destination hostnames"
+      footer={
+        <Box style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <Stack>
+            <Button variant="outline" label="Cancel" onClick={onCancel} />
+            <Button
+              variant="primary"
+              label="Retry Connection"
+              disabled={!isValid}
+              onClick={() => onSubmit(unresolvedHosts.map((hostname) => ({ hostname, ip: trimmed })))}
+            />
+          </Stack>
+        </Box>
+      }
+    >
+      <Stack direction="vertical" gap="r16" style={{ maxWidth: '35rem' }}>
+        <Text>
+          The destination could not resolve the hostname{plural ? 's' : ''} below. Enter the destination cluster IP to
+          reach {plural ? 'them' : 'it'}; it is used only for this setup, no DNS change is made.
+        </Text>
+        <Stack direction="vertical" gap="r4">
+          {unresolvedHosts.map((host) => (
+            <Text key={host} variant="Basic">
+              • {host}
+            </Text>
+          ))}
+        </Stack>
+        <Stack direction="vertical" gap="r4">
+          <Text>Destination cluster IP</Text>
+          <Input
+            id="dns-fallback-ip"
+            aria-label="Destination cluster IP"
+            noPlaceholderPrefix
+            placeholder="10.0.0.10"
+            value={ip}
+            onChange={(e) => setIp(e.target.value)}
+          />
+          {trimmed !== '' && !isValid && <Text variant="Smaller">Enter a valid IPv4 address</Text>}
+        </Stack>
+      </Stack>
+    </Modal>
+  );
+};

src/react/locations/CRRSetupWizard/steps/ApplyActionsStep/ApplyActionsStep.test.tsx

@@ -40,6 +40,7 @@ const VALUES: ConfigureFormValues = {
   password: 'super-secret',
   certificate: '-----BEGIN CERTIFICATE-----\nx\n-----END CERTIFICATE-----',
   destinationAccountName: 'crr-dest',
+  hostAliases: [],
   createReplicationRule: true,
   sourceBucketName: 'crr-src-bucket',
   targetBucketName: 'crr-target-bucket',

src/react/locations/CRRSetupWizard/steps/ConfigureStep/ConfigureStep.tsx

@@ -2,10 +2,11 @@ import { Form, Icon, Stack, useToast } from '@scality/core-ui';
 import { useStepper } from '@scality/core-ui/dist/components/steppers/Stepper.component';
 import { Button } from '@scality/core-ui/dist/next';
 import { useBasenameRelativeNavigate } from '@scality/module-federation';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { ServiceError } from '../../api/crrConfiguratorClient';
-import type { ProblemCode, VerifyRequestBody, VerifyResponse } from '../../api/types';
+import type { HostAlias, ProblemCode, VerifyRequestBody, VerifyResponse } from '../../api/types';
+import { DnsFallbackModal } from '../../DnsFallbackModal';
 import { useCRRConfigurationVerifyMutation } from '../../hooks/useCRRConfigurationVerifyMutation';
 import { DestinationAccountSection } from './DestinationAccountSection';
 import { DestinationConnectionSection } from './DestinationConnectionSection';
@@ -34,12 +35,27 @@ const errorMessage = (error: unknown): string => {
   return (error as Error)?.message ?? 'Connection to the destination failed.';
 };
 
+const unresolvedHostsFrom = (error: unknown): string[] | null => {
+  if (error instanceof ServiceError && error.code === 'DestinationDnsResolutionFailed') {
+    const hosts = error.problem.unresolvedHosts;
+    if (hosts && hosts.length > 0) return hosts;
+  }
+  return null;
+};
+
+const mergeAliases = (existing: HostAlias[], added: HostAlias[]): HostAlias[] => {
+  const byHost = new Map(existing.map((alias) => [alias.hostname, alias]));
+  for (const alias of added) byHost.set(alias.hostname, alias);
+  return [...byHost.values()];
+};
+
 export const ConfigureStep = () => {
   const { next } = useStepper(CONFIGURE_STEP_INDEX);
   const navigate = useBasenameRelativeNavigate();
   const { showToast } = useToast();
   const verify = useCRRConfigurationVerifyMutation();
   const lastVerifiedRef = useRef<string | null>(null);
+  const [dnsFallbackHosts, setDnsFallbackHosts] = useState<string[] | null>(null);
 
   const formMethods = useForm<ConfigureFormValues>({
     mode: 'all',
@@ -49,10 +65,20 @@ export const ConfigureStep = () => {
   const {
     handleSubmit,
     getValues,
+    setValue,
     trigger,
     formState: { isValid },
   } = formMethods;
 
+  const handleVerifyError = (error: unknown) => {
+    const hosts = unresolvedHostsFrom(error);
+    if (hosts) {
+      setDnsFallbackHosts(hosts);
+      return;
+    }
+    showToast({ open: true, status: 'error', message: errorMessage(error) });
+  };
+
   const runVerify = async (body: VerifyRequestBody): Promise<VerifyResponse> => {
     const response = await verify.mutateAsync(body);
     lastVerifiedRef.current = JSON.stringify(body);
@@ -85,7 +111,7 @@ export const ConfigureStep = () => {
       await runVerify(body);
       showToast({ open: true, status: 'success', message: 'Destination reachable' });
     } catch (error) {
-      showToast({ open: true, status: 'error', message: errorMessage(error) });
+      handleVerifyError(error);
     }
   };
 
@@ -100,12 +126,23 @@ export const ConfigureStep = () => {
       const response = await runVerify(body);
       next({ ...values, destinationInstanceName: destinationInstanceNameFrom(response) });
     } catch (error) {
-      showToast({ open: true, status: 'error', message: errorMessage(error) });
+      handleVerifyError(error);
     }
   });
 
   return (
     <FormProvider {...formMethods}>
+      <DnsFallbackModal
+        isOpen={dnsFallbackHosts !== null}
+        unresolvedHosts={dnsFallbackHosts ?? []}
+        initialAliases={getValues('hostAliases')}
+        onCancel={() => setDnsFallbackHosts(null)}
+        onSubmit={(aliases) => {
+          setValue('hostAliases', mergeAliases(getValues('hostAliases'), aliases));
+          setDnsFallbackHosts(null);
+          onCheckConnection();
+        }}
+      />
       <Form
         onSubmit={onContinue}
         requireMode="partial"

src/react/locations/CRRSetupWizard/steps/ConfigureStep/schema.ts

@@ -1,7 +1,7 @@
 import Joi from 'joi';
 import type { FieldErrors, Resolver } from 'react-hook-form';
 import { accountNameValidationSchema } from '../../../../account/AccountCreate';
-import type { StartSetupBody, VerifyRequestBody } from '../../api/types';
+import type { HostAlias, StartSetupBody, VerifyRequestBody } from '../../api/types';
 
 export type AccountNameType = 'create' | 'existing';
 export type ConnectionMode = 'management-network' | 'data-network';
@@ -21,6 +21,8 @@ export type ConfigureFormValues = {
 
   destinationAccountName: string;
 
+  hostAliases: HostAlias[];
+
   createReplicationRule: boolean;
   sourceBucketName: string;
   targetBucketName: string;
@@ -38,6 +40,7 @@ export const defaultConfigureValues: ConfigureFormValues = {
   password: '',
   certificate: '',
   destinationAccountName: '',
+  hostAliases: [],
   createReplicationRule: false,
   sourceBucketName: '',
   targetBucketName: '',
@@ -88,6 +91,8 @@ export const configureSchema = Joi.object<ConfigureFormValues>({
 
   destinationAccountName: accountNameValidationSchema,
 
+  hostAliases: Joi.array().default([]),
+
   createReplicationRule: Joi.boolean().required(),
   sourceBucketName: Joi.when('createReplicationRule', {
     is: true,
@@ -145,6 +150,7 @@ export const toVerifyBody = (values: ConfigureFormValues): VerifyRequestBody =>
           adminPassword: values.password,
         },
   destinationCertificate: values.certificate,
+  ...(values.hostAliases?.length ? { hostAliases: values.hostAliases } : {}),
 });
 
 export const toStartSetupBody = (values: ConfigureFormValues): StartSetupBody => {