feature(crr): add wizard shell with Configure destination step

Author: hervedombya

src/react/Routes.tsx

@@ -17,6 +17,8 @@ import DataBrowser from './databrowser/DataBrowser';
 import EndpointCreate from './endpoint/EndpointCreate';
 import Endpoints from './endpoint/Endpoints';
 import { ISVSteps } from './ISV/components/ISVSteps';
+import { CRRSetupWizard } from './locations/CRRSetupWizard/CRRSetupWizard';
+import { useCRRFeature } from './locations/CRRSetupWizard/hooks/useCRRFeature';
 import LocationEditor from './locations/LocationEditor';
 import { Locations } from './locations/Locations';
 import ManagementProvider from './ManagementProvider';
@@ -69,14 +71,14 @@ const RedirectToAccount = () => {
   }
 };
 
-
 export function PrivateRoutes({ hideSideBar = false }: { hideSideBar?: boolean }): JSX.Element {
   const { isClientsLoaded } = useAuthLoading();
   const config = useConfig();
 
   const { isPlatformAdmin } = useAuthGroups();
   const metalK8sInstances = useDeployedMetalk8sInstances();
   const isMetalK8sEnabled = metalK8sInstances.length > 0;
+  const isCRRWizardEnabled = useCRRFeature();
   if (!isClientsLoaded) {
     return (
       <Loader centered>
@@ -175,6 +177,16 @@ export function PrivateRoutes({ hideSideBar = false }: { hideSideBar?: boolean }
           </DataServiceRoleProvider>
         }
       />
+      {isCRRWizardEnabled && (
+        <Route
+          path="create-crr-configuration/*"
+          element={
+            <DataServiceRoleProvider>
+              <CRRSetupWizard />
+            </DataServiceRoleProvider>
+          }
+        />
+      )}
       <Route
         path={`accounts/:accountName/policies/:policyArn/attachments/*`}
         element={
@@ -293,6 +305,7 @@ function InternalRoutes(): JSX.Element {
     '/accounts/:accountName/users/:user/update-user',
     '/accounts/:accountName/create-policy',
     '/isv/configuration',
+    '/create-crr-configuration',
     '/truststore/import-certificate',
     '/accounts/:accountName/buckets/-/create',
     '/accounts/:accountName/buckets/:bucketName/lifecycle/create',

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

@@ -0,0 +1,97 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { rest } from 'msw';
+import { setupServer } from 'msw/node';
+import { Wrapper } from '../../utils/testUtil';
+import { CRRSetupWizard } from './CRRSetupWizard';
+
+const VERIFY_URL = '/crr-configurator/api/v1/verify';
+const server = setupServer();
+
+beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+const PEM = '-----BEGIN CERTIFICATE-----\nMIIB\n-----END CERTIFICATE-----';
+
+/**
+ * Fills the whole Configure form with valid values from a user's point of view —
+ * clicks the labelled inputs by their accessible name, disambiguating the two
+ * "Account Name" fields by the surrounding section title.
+ */
+const fillValidForm = async () => {
+  const accountNameInputs = screen.getAllByRole('textbox', { name: /Account Name/i });
+  const [sourceAccountName, destinationAccountName] = accountNameInputs;
+  await userEvent.type(sourceAccountName, 'source-account');
+  await userEvent.type(screen.getByRole('textbox', { name: /^URL/i }), 'https://10.0.0.42:8443');
+  await userEvent.type(screen.getByRole('textbox', { name: /^Username/i }), 'scality');
+  await userEvent.type(screen.getByLabelText(/^Password/i), 'super-secret');
+  await userEvent.type(screen.getByRole('textbox', { name: /^Certificate/i }), PEM);
+  await userEvent.type(destinationAccountName, 'dest-account');
+};
+
+describe('CRRSetupWizard — Configure step', () => {
+  it('confirms the destination is reachable when the user clicks Check Connection', async () => {
+    server.use(
+      rest.post(VERIFY_URL, (_req, res, ctx) =>
+        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 }));
+
+    expect(await screen.findByText(/Destination reachable/i)).toBeInTheDocument();
+  });
+
+  it('surfaces the ARTESCA problem code when Check Connection is rejected', async () => {
+    server.use(
+      rest.post(VERIFY_URL, (_req, res, ctx) =>
+        res(
+          ctx.status(400),
+          ctx.set('Content-Type', 'application/problem+json'),
+          ctx.body(
+            JSON.stringify({
+              type: 'about:blank',
+              title: 'Invalid destination certificate',
+              status: 400,
+              code: 'DestinationCertificateInvalid',
+            }),
+          ),
+        ),
+      ),
+    );
+    render(<CRRSetupWizard />, { wrapper: Wrapper });
+
+    await fillValidForm();
+    await userEvent.click(screen.getByRole('button', { name: /Check Connection/i }));
+
+    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 () => {
+    server.use(
+      rest.post(VERIFY_URL, (_req, res, ctx) =>
+        res(
+          ctx.status(502),
+          ctx.set('Content-Type', 'application/problem+json'),
+          ctx.body(
+            JSON.stringify({
+              type: 'about:blank',
+              title: 'Destination unreachable',
+              status: 502,
+              code: 'DestinationUnreachable',
+            }),
+          ),
+        ),
+      ),
+    );
+    render(<CRRSetupWizard />, { wrapper: Wrapper });
+
+    await fillValidForm();
+    await userEvent.click(screen.getByRole('button', { name: /Continue/i }));
+
+    expect(await screen.findByText(/destination cluster did not respond/i)).toBeInTheDocument();
+  });
+});

src/react/locations/CRRSetupWizard/CRRSetupWizard.tsx

@@ -0,0 +1,26 @@
+import { Stepper, spacing } from '@scality/core-ui';
+import { Box } from '@scality/core-ui/dist/next';
+import { useTheme } from 'styled-components';
+import { ApplyActionsStep } from './steps/ApplyActionsStep';
+import { ConfigureStep } from './steps/ConfigureStep';
+import { SummaryStep } from './steps/SummaryStep';
+
+const STEPS = [
+  { label: 'Configure', Component: ConfigureStep },
+  { label: 'Apply Actions', Component: ApplyActionsStep },
+  { label: 'Summary', Component: SummaryStep },
+] as const;
+
+export const CRRSetupWizard = () => {
+  const theme = useTheme();
+  return (
+    <Box
+      height="100%"
+      backgroundColor={theme.backgroundLevel4}
+      paddingTop={spacing.r16}
+      style={{ boxSizing: 'border-box' }}
+    >
+      <Stepper steps={STEPS} />
+    </Box>
+  );
+};

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

@@ -0,0 +1,10 @@
+import { Banner, Icon } from '@scality/core-ui';
+import { Box } from '@scality/core-ui/dist/next';
+
+export const ApplyActionsStep = () => (
+  <Box padding="r24">
+    <Banner variant="base" icon={<Icon name="Info-circle" />} title="Apply Actions">
+      This step runs the destination-side setup chain. It lands in the next brick.
+    </Banner>
+  </Box>
+);

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

@@ -0,0 +1,115 @@
+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 { FormProvider, useForm } from 'react-hook-form';
+import { ServiceError } from '../../api/crrConfiguratorClient';
+import type { ProblemCode, VerifyRequestBody } from '../../api/types';
+import { useCRRConfigurationVerifyMutation } from '../../hooks/useCRRConfigurationVerifyMutation';
+import { DestinationAccountSection } from './DestinationAccountSection';
+import { DestinationConnectionSection } from './DestinationConnectionSection';
+import { ReplicationSection } from './ReplicationSection';
+import { SourceSection } from './SourceSection';
+import { type ConfigureFormValues, configureResolver, defaultConfigureValues, toVerifyBody } from './schema';
+
+/** Step index for the wizard's Stepper.next() calls. */
+export const CONFIGURE_STEP_INDEX = 0;
+
+const errorCopy: Partial<Record<ProblemCode, string>> = {
+  DestinationUnreachable: 'The destination cluster did not respond.',
+  DestinationDnsResolutionFailed: 'One or more destination hostnames could not be resolved.',
+  DestinationCertificateInvalid: 'The pasted certificate is not a valid PEM bundle.',
+  DestinationAuthFailed: 'The destination refused these admin credentials.',
+  AssumeRoleFailed: 'The destination rejected the storage-manager role assumption.',
+  Unauthorized: 'Your session was rejected by the source cluster. Sign in again.',
+  Forbidden: 'You need the Storage Manager role to run this wizard.',
+};
+
+const errorMessage = (error: unknown): string => {
+  if (error instanceof ServiceError) {
+    const code = error.problem.code as ProblemCode | undefined;
+    return (code && errorCopy[code]) ?? error.problem.title ?? 'Connection to the destination failed.';
+  }
+  return (error as Error)?.message ?? 'Connection to the destination failed.';
+};
+
+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 formMethods = useForm<ConfigureFormValues>({
+    mode: 'all',
+    resolver: configureResolver,
+    defaultValues: defaultConfigureValues,
+  });
+  const {
+    handleSubmit,
+    getValues,
+    trigger,
+    formState: { isValid },
+  } = formMethods;
+
+  const runVerify = async (body: VerifyRequestBody) => {
+    await verify.mutateAsync(body);
+    lastVerifiedRef.current = JSON.stringify(body);
+  };
+
+  const onCheckConnection = async () => {
+    const valid = await trigger();
+    if (!valid) return;
+    const body = toVerifyBody(getValues());
+    try {
+      await runVerify(body);
+      showToast({ open: true, status: 'success', message: 'Destination reachable' });
+    } catch (error) {
+      showToast({ open: true, status: 'error', message: errorMessage(error) });
+    }
+  };
+
+  const onContinue = handleSubmit(async (values) => {
+    const body = toVerifyBody(values);
+    const snapshot = JSON.stringify(body);
+    if (lastVerifiedRef.current === snapshot) {
+      next({ ...values });
+      return;
+    }
+    try {
+      await runVerify(body);
+      next({ ...values });
+    } catch (error) {
+      showToast({ open: true, status: 'error', message: errorMessage(error) });
+    }
+  });
+
+  return (
+    <FormProvider {...formMethods}>
+      <Form
+        onSubmit={onContinue}
+        requireMode="partial"
+        layout={{ title: 'Configure Cross-Region Location', kind: 'page' }}
+        rightActions={
+          <Stack gap="r16">
+            <Button type="button" variant="outline" label="Cancel" onClick={() => navigate('/locations')} />
+            <Button
+              type="submit"
+              variant="primary"
+              label="Continue"
+              isLoading={verify.isLoading}
+              disabled={!isValid}
+              icon={<Icon name="Arrow-right" />}
+            />
+          </Stack>
+        }
+      >
+        <SourceSection />
+        <DestinationConnectionSection isCheckingConnection={verify.isLoading} onCheckConnection={onCheckConnection} />
+        <DestinationAccountSection />
+        <ReplicationSection />
+      </Form>
+    </FormProvider>
+  );
+};

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

@@ -0,0 +1,26 @@
+import { FormGroup, FormSection } from '@scality/core-ui';
+import { Input } from '@scality/core-ui/dist/next';
+import { useFormContext } from 'react-hook-form';
+import type { ConfigureFormValues } from './schema';
+
+export const DestinationAccountSection = () => {
+  const {
+    register,
+    formState: { errors, touchedFields },
+  } = useFormContext<ConfigureFormValues>();
+  const nameError = touchedFields.destinationAccountName ? errors.destinationAccountName?.message : undefined;
+
+  return (
+    <FormSection forceLabelWidth={280} title={{ name: 'Destination Account' }}>
+      <FormGroup
+        id="destinationAccountName"
+        direction="horizontal"
+        label="Account Name"
+        required
+        helpErrorPosition="bottom"
+        error={nameError}
+        content={<Input id="destinationAccountName" autoComplete="off" {...register('destinationAccountName')} />}
+      />
+    </FormSection>
+  );
+};