feature(crr): select the destination S3 endpoint from Verify's discovered list

Author: hervedombya

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

@@ -31,10 +31,17 @@ const fillValidForm = async () => {
 };
 
 describe('CRRSetupWizard — Configure step', () => {
-  it('confirms the destination is reachable when the user clicks Check Connection', async () => {
+  it('confirms the destination is reachable and offers its discovered S3 endpoints to pick from', async () => {
     server.use(
       rest.post(VERIFY_URL, (_req, res, ctx) =>
-        res(ctx.json({ ok: true, mode: 'management-network', instanceName: 'ageless-valley' })),
+        res(
+          ctx.json({
+            ok: true,
+            mode: 'management-network',
+            instanceName: 'ageless-valley',
+            s3Endpoints: ['s3.dest.example', 's3-alt.dest.example'],
+          }),
+        ),
       ),
     );
     render(<CRRSetupWizard />, { wrapper: Wrapper });
@@ -43,6 +50,10 @@ describe('CRRSetupWizard — Configure step', () => {
     await userEvent.click(screen.getByRole('button', { name: /Check Connection/i }));
 
     expect(await screen.findByText(/Destination reachable/i)).toBeInTheDocument();
+    // The discovered endpoints become the selectable replication targets.
+    await userEvent.click(screen.getByText(/Select the destination S3 endpoint/i));
+    expect(await screen.findByText('s3.dest.example')).toBeInTheDocument();
+    expect(screen.getByText('s3-alt.dest.example')).toBeInTheDocument();
   });
 
   it('surfaces the ARTESCA problem code when Check Connection is rejected', async () => {
@@ -70,7 +81,7 @@ describe('CRRSetupWizard — Configure step', () => {
     expect(await screen.findByText(/pasted certificate is not a valid PEM/i)).toBeInTheDocument();
   });
 
-  it('blocks the user on Configure with an error toast when the silent verify fails on Continue', async () => {
+  it('surfaces the unreachable error when Check Connection fails', async () => {
     server.use(
       rest.post(VERIFY_URL, (_req, res, ctx) =>
         res(
@@ -90,7 +101,7 @@ describe('CRRSetupWizard — Configure step', () => {
     render(<CRRSetupWizard />, { wrapper: Wrapper });
 
     await fillValidForm();
-    await userEvent.click(screen.getByRole('button', { name: /Continue/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Check Connection/i }));
 
     expect(await screen.findByText(/destination cluster did not respond/i)).toBeInTheDocument();
   });
@@ -117,7 +128,9 @@ describe('CRRSetupWizard — Configure step', () => {
           );
         }
         retryBody = req.body as { hostAliases?: { hostname: string; ip: string }[] };
-        return res(ctx.json({ ok: true, mode: 'management-network', instanceName: 'ageless-valley' }));
+        return res(
+          ctx.json({ ok: true, mode: 'management-network', instanceName: 'ageless-valley', s3Endpoints: ['s3.dest.example'] }),
+        );
       }),
     );
     render(<CRRSetupWizard />, { wrapper: Wrapper });

src/react/locations/CRRSetupWizard/api/types.ts

@@ -34,13 +34,16 @@ export type VerifyResponse =
       mode: 'management-network';
       instanceName: string;
       artescaVersion?: string;
+      s3Endpoints?: string[];
     }
-  | { ok: true; mode: 'data-network' };
+  | { ok: true; mode: 'data-network'; s3Endpoints?: string[] };
 
 export type StartSetupBody = {
   destinationConnection: DestinationConnection;
   destinationCertificate: string;
   destinationAccount: { mode: 'create' | 'existing'; name: string };
+  /** The destination S3 endpoint the user picked from Verify's discovered list. */
+  replicationEndpoint: string;
   targetBucket?: string;
   hostAliases?: HostAlias[];
 };

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

@@ -39,6 +39,7 @@ const VALUES: ConfigureFormValues = {
   username: 'scality',
   password: 'super-secret',
   certificate: '-----BEGIN CERTIFICATE-----\nx\n-----END CERTIFICATE-----',
+  replicationEndpoint: 'https://s3.dest.example',
   destinationAccountName: 'crr-dest',
   hostAliases: [],
   createReplicationRule: true,

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

@@ -56,6 +56,7 @@ export const ConfigureStep = () => {
   const verify = useCRRConfigurationVerifyMutation();
   const lastVerifiedRef = useRef<string | null>(null);
   const [dnsFallbackHosts, setDnsFallbackHosts] = useState<string[] | null>(null);
+  const [discoveredEndpoints, setDiscoveredEndpoints] = useState<string[]>([]);
 
   const formMethods = useForm<ConfigureFormValues>({
     mode: 'all',
@@ -82,6 +83,7 @@ export const ConfigureStep = () => {
   const runVerify = async (body: VerifyRequestBody): Promise<VerifyResponse> => {
     const response = await verify.mutateAsync(body);
     lastVerifiedRef.current = JSON.stringify(body);
+    setDiscoveredEndpoints(response.s3Endpoints ?? []);
     return response;
   };
 
@@ -162,7 +164,11 @@ export const ConfigureStep = () => {
         }
       >
         <SourceSection />
-        <DestinationConnectionSection isCheckingConnection={verify.isLoading} onCheckConnection={onCheckConnection} />
+        <DestinationConnectionSection
+          isCheckingConnection={verify.isLoading}
+          onCheckConnection={onCheckConnection}
+          discoveredEndpoints={discoveredEndpoints}
+        />
         <DestinationAccountSection />
         <ReplicationSection />
       </Form>

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

@@ -1,15 +1,20 @@
 import { FormGroup, FormSection, Radio, Stack, Wrap } from '@scality/core-ui';
-import { Button, Input } from '@scality/core-ui/dist/next';
+import { Button, Input, Select } from '@scality/core-ui/dist/next';
 import { Controller, useFormContext } from 'react-hook-form';
 import { CertificateSection } from '../../../../ui-elements/CertificateSection';
 import type { ConfigureFormValues } from './schema';
 
 type Props = {
   isCheckingConnection: boolean;
   onCheckConnection: () => void;
+  discoveredEndpoints: string[];
 };
 
-export const DestinationConnectionSection = ({ isCheckingConnection, onCheckConnection }: Props) => {
+export const DestinationConnectionSection = ({
+  isCheckingConnection,
+  onCheckConnection,
+  discoveredEndpoints,
+}: Props) => {
   const {
     control,
     register,
@@ -122,6 +127,36 @@ export const DestinationConnectionSection = ({ isCheckingConnection, onCheckConn
           onClick={onCheckConnection}
         />
       </Wrap>
+      {discoveredEndpoints.length > 0 && (
+        <FormGroup
+          id="replicationEndpoint"
+          direction="horizontal"
+          label="Replication Endpoint"
+          required
+          helpErrorPosition="bottom"
+          error={errorIfTouched('replicationEndpoint')}
+          content={
+            <Controller
+              name="replicationEndpoint"
+              control={control}
+              render={({ field }) => (
+                <Select
+                  id="replicationEndpoint"
+                  value={field.value}
+                  onChange={(value) => field.onChange(value)}
+                  placeholder="Select the destination S3 endpoint"
+                >
+                  {discoveredEndpoints.map((endpoint) => (
+                    <Select.Option key={endpoint} value={endpoint}>
+                      {endpoint}
+                    </Select.Option>
+                  ))}
+                </Select>
+              )}
+            />
+          }
+        />
+      )}
     </FormSection>
   );
 };

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

@@ -19,6 +19,9 @@ export type ConfigureFormValues = {
   password: string;
   certificate: string;
 
+  /** Destination S3 endpoint chosen from the list Verify discovers. */
+  replicationEndpoint: string;
+
   destinationAccountName: string;
 
   hostAliases: HostAlias[];
@@ -39,6 +42,7 @@ export const defaultConfigureValues: ConfigureFormValues = {
   username: '',
   password: '',
   certificate: '',
+  replicationEndpoint: '',
   destinationAccountName: '',
   hostAliases: [],
   createReplicationRule: false,
@@ -84,6 +88,7 @@ export const configureSchema = Joi.object<ConfigureFormValues>({
   }),
   username: Joi.string().required(),
   password: Joi.string().required(),
+  replicationEndpoint: Joi.string().required(),
   certificate: Joi.string()
     .pattern(/-----BEGIN CERTIFICATE-----/)
     .required()
@@ -158,6 +163,7 @@ export const toStartSetupBody = (values: ConfigureFormValues): StartSetupBody =>
   const body: StartSetupBody = {
     ...verifyBody,
     destinationAccount: { mode: 'create', name: values.destinationAccountName },
+    replicationEndpoint: values.replicationEndpoint,
   };
   if (values.createReplicationRule && values.targetBucketName) {
     body.targetBucket = values.targetBucketName;