feature(crr): render Apply Actions step-by-step against the SSE stream with per-row retry

Author: hervedombya

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

@@ -0,0 +1,131 @@
+import { render, screen, waitFor } 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 type { ConfigureFormValues } from '../ConfigureStep/schema';
+import { ApplyActionsStep } from './ApplyActionsStep';
+
+const mockNext = jest.fn();
+const mockPrev = jest.fn();
+
+jest.mock('@scality/core-ui/dist/components/steppers/Stepper.component', () => ({
+  useStepper: () => ({ next: mockNext, prev: mockPrev }),
+}));
+
+const STREAM_URL = '/crr-configurator/api/v1/replication-setups';
+const server = setupServer();
+
+beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
+afterEach(() => {
+  server.resetHandlers();
+  mockNext.mockReset();
+  mockPrev.mockReset();
+});
+afterAll(() => server.close());
+
+const ndjson = (...lines: unknown[]) => `${lines.map((l) => JSON.stringify(l)).join('\n')}\n`;
+
+const VALUES: ConfigureFormValues = {
+  accountNameType: 'create',
+  accountName: 'source-acc',
+  connectionMode: 'management-network',
+  url: 'https://10.0.0.42:8443',
+  baseDomain: '',
+  s3Endpoint: '',
+  username: 'scality',
+  password: 'super-secret',
+  certificate: '-----BEGIN CERTIFICATE-----\nx\n-----END CERTIFICATE-----',
+  destinationAccountName: 'dest-account',
+  createReplicationRule: true,
+  sourceBucketName: 'source-bucket',
+  targetBucketName: 'target-bucket',
+  prefix: '',
+};
+
+const SUCCESS_RESULT = {
+  endpoint: 'https://cluster.example:8443',
+  stsEndpoint: 'https://cluster.example:8443/sts',
+  accessKey: 'AKIA',
+  secretKey: 'secret',
+  roleArn: 'arn:aws:iam::123456789012:role/crr',
+  targetBucket: 'target-bucket',
+};
+
+describe('ApplyActionsStep', () => {
+  it('renders every step as pending before any event lands', () => {
+    server.use(
+      rest.post(STREAM_URL, (_req, res, ctx) =>
+        res(ctx.set('Content-Type', 'application/x-ndjson'), ctx.body(ndjson())),
+      ),
+    );
+    render(<ApplyActionsStep {...VALUES} />, { wrapper: Wrapper });
+
+    expect(screen.getByText(/Authenticate against the destination/i)).toBeInTheDocument();
+    expect(screen.getByText(/Create the target bucket/i)).toBeInTheDocument();
+    expect(screen.getAllByLabelText(/Pending|Running/i).length).toBeGreaterThan(0);
+  });
+
+  it('advances to the next step with the result once the setup completes', async () => {
+    server.use(
+      rest.post(STREAM_URL, (_req, res, ctx) =>
+        res(
+          ctx.set('Content-Type', 'application/x-ndjson'),
+          ctx.body(
+            ndjson(
+              { event: 'step.started', step: 'authenticate', at: 't1' },
+              { event: 'step.completed', step: 'authenticate', at: 't2' },
+              { event: 'setup.completed', at: 't3', result: SUCCESS_RESULT },
+            ),
+          ),
+        ),
+      ),
+    );
+    render(<ApplyActionsStep {...VALUES} />, { wrapper: Wrapper });
+
+    await waitFor(() => expect(mockNext).toHaveBeenCalled());
+    expect(mockNext.mock.calls[0][0]).toMatchObject({ result: SUCCESS_RESULT });
+  });
+
+  it('surfaces a Retry button on a failed step and re-runs the mutation on click', async () => {
+    let requestCount = 0;
+    server.use(
+      rest.post(STREAM_URL, (_req, res, ctx) => {
+        requestCount += 1;
+        return res(
+          ctx.set('Content-Type', 'application/x-ndjson'),
+          ctx.body(
+            ndjson(
+              { event: 'step.started', step: 'authenticate', at: 't1' },
+              {
+                event: 'step.failed',
+                step: 'authenticate',
+                at: 't2',
+                error: { code: 'DestinationAuthFailed', message: 'creds refused' },
+              },
+              { event: 'setup.failed', at: 't3', error: { code: 'DestinationAuthFailed', message: 'creds refused' } },
+            ),
+          ),
+        );
+      }),
+    );
+    render(<ApplyActionsStep {...VALUES} />, { wrapper: Wrapper });
+
+    const retry = await screen.findByRole('button', { name: /Retry/i });
+    await userEvent.click(retry);
+    await waitFor(() => expect(requestCount).toBe(2));
+  });
+
+  it('drops create-bucket from the list when the user did not opt into replication rule creation', () => {
+    server.use(
+      rest.post(STREAM_URL, (_req, res, ctx) =>
+        res(ctx.set('Content-Type', 'application/x-ndjson'), ctx.body(ndjson())),
+      ),
+    );
+    render(
+      <ApplyActionsStep {...VALUES} createReplicationRule={false} targetBucketName="" />,
+      { wrapper: Wrapper },
+    );
+    expect(screen.queryByText(/Create the target bucket/i)).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,86 @@
+import { Stack, Text } from '@scality/core-ui';
+import { useStepper } from '@scality/core-ui/dist/components/steppers/Stepper.component';
+import { Box, Button } from '@scality/core-ui/dist/next';
+import { useEffect, useMemo, useRef } from 'react';
+import { useTheme } from 'styled-components';
+import type { StartSetupBody } from '../../api/types';
+import { useCRRConfigurationSetupMutation } from '../../hooks/useCRRConfigurationSetupMutation';
+import { type ConfigureFormValues, toStartSetupBody } from '../ConfigureStep/schema';
+import { StepRow } from './StepRow';
+import { deriveStepViews, stepListFor } from './steps';
+
+export const APPLY_ACTIONS_STEP_INDEX = 1;
+
+type Props = Partial<ConfigureFormValues>;
+
+const isCompleteFormValues = (values: Props): values is ConfigureFormValues =>
+  values.connectionMode !== undefined && values.certificate !== undefined && values.username !== undefined;
+
+export const ApplyActionsStep = (props: Props) => {
+  const theme = useTheme();
+  const { next, prev } = useStepper(APPLY_ACTIONS_STEP_INDEX);
+  const setup = useCRRConfigurationSetupMutation();
+
+  const body: StartSetupBody | null = useMemo(
+    () => (isCompleteFormValues(props) ? toStartSetupBody(props) : null),
+    [props],
+  );
+  const steps = useMemo(() => stepListFor(body?.targetBucket !== undefined), [body]);
+  const stepViews = useMemo(() => deriveStepViews(steps, setup.events), [steps, setup.events]);
+
+  const hasStartedRef = useRef(false);
+  useEffect(() => {
+    if (body && !hasStartedRef.current) {
+      hasStartedRef.current = true;
+      setup.mutate(body);
+    }
+  }, [body, setup]);
+
+  useEffect(() => {
+    if (setup.data) {
+      next({ result: setup.data, ...props });
+    }
+  }, [setup.data, next, props]);
+
+  const failedStep = stepViews.find((view) => view.state === 'failed');
+  const onRetry = () => {
+    if (!body) return;
+    setup.reset();
+    hasStartedRef.current = true;
+    setup.mutate(body);
+  };
+
+  if (!body) {
+    return (
+      <Box padding="r24">
+        <Text>Please complete the previous step before running the setup.</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box padding={"r24"} flex="1">
+      <Stack direction="vertical" gap={"r16"}>
+        <Stack direction="vertical" gap={"r4"}>
+          <Text variant="Large">Applying destination setup</Text>
+          <Text variant="Smaller" color="textSecondary">
+            The configurator provisions the destination in the order below. Progress updates stream in real time.
+          </Text>
+        </Stack>
+
+        <Stack direction="vertical" gap={"r8"}>
+          {stepViews.map((view) => (
+            <StepRow key={view.id} step={view} onRetry={view.id === failedStep?.id ? onRetry : undefined} />
+          ))}
+        </Stack>
+
+        <Stack direction="horizontal" gap={"r8"}>
+          <Button variant="secondary" label="Back" onClick={() => prev(props)} disabled={setup.isLoading} />
+          {setup.isLoading && (
+            <Button variant="secondary" label="Cancel" onClick={setup.cancel} />
+          )}
+        </Stack>
+      </Stack>
+    </Box>
+  );
+};

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

@@ -0,0 +1,53 @@
+import { Icon, Loader, Stack, Text } from '@scality/core-ui';
+import { Box, Button } from '@scality/core-ui/dist/next';
+import { useTheme } from 'styled-components';
+import type { StepView } from './steps';
+
+type StatusIndicatorProps = { state: StepView['state'] };
+
+const StatusIndicator = ({ state }: StatusIndicatorProps) => {
+  if (state === 'running') {
+    return <Loader size="base" aria-label="Running" />;
+  }
+  if (state === 'succeeded') {
+    return <Icon name="Check-circle" color="statusHealthy" ariaLabel="Succeeded" />;
+  }
+  if (state === 'failed') {
+    return <Icon name="Times-circle" color="statusCritical" ariaLabel="Failed" />;
+  }
+  return <Icon name="Circle-empty" color="textSecondary" ariaLabel="Pending" />;
+};
+
+type Props = {
+  step: StepView;
+  onRetry?: () => void;
+};
+
+export const StepRow = ({ step, onRetry }: Props) => {
+  const theme = useTheme();
+  return (
+    <Box
+      padding="r12"
+      style={{
+        border: `1px solid ${theme.backgroundLevel3}`,
+        borderRadius: '4px',
+        backgroundColor: theme.backgroundLevel1,
+      }}
+    >
+      <Stack direction="horizontal" gap="r16" style={{ alignItems: 'center' }}>
+        <StatusIndicator state={step.state} />
+        <Stack direction="vertical" gap="r4" style={{ flex: 1, minWidth: 0 }}>
+          <Text variant="Larger">{step.label}</Text>
+          {step.state === 'failed' && step.errorMessage && (
+            <Text variant="Smaller" color="statusCritical">
+              {step.errorMessage}
+            </Text>
+          )}
+        </Stack>
+        {step.state === 'failed' && onRetry && (
+          <Button variant="secondary" label="Retry" onClick={onRetry} icon={<Icon name="Arrow-right" />} />
+        )}
+      </Stack>
+    </Box>
+  );
+};

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

@@ -0,0 +1 @@
+export { APPLY_ACTIONS_STEP_INDEX, ApplyActionsStep } from './ApplyActionsStep';

src/react/locations/CRRSetupWizard/steps/ApplyActionsStep/index.ts

@@ -0,0 +1,78 @@
+import type { SetupEvent } from '../../api/types';
+import { deriveStepViews, stepListFor } from './steps';
+
+describe('stepListFor', () => {
+  it('drops create-bucket when the wizard did not opt in', () => {
+    expect(stepListFor(false)).not.toContain('create-bucket');
+  });
+
+  it('appends create-bucket at the end when the wizard opted in', () => {
+    const list = stepListFor(true);
+    expect(list[list.length - 1]).toBe('create-bucket');
+  });
+});
+
+describe('deriveStepViews', () => {
+  const steps = stepListFor(true);
+
+  it('returns every step as pending when no event has landed yet', () => {
+    const views = deriveStepViews(steps, []);
+    expect(views.every((view) => view.state === 'pending')).toBe(true);
+  });
+
+  it('marks a step as running once step.started is received', () => {
+    const events: SetupEvent[] = [{ event: 'step.started', step: 'authenticate', at: 't' }];
+    const [first, ...rest] = deriveStepViews(steps, events);
+    expect(first.state).toBe('running');
+    expect(rest.every((view) => view.state === 'pending')).toBe(true);
+  });
+
+  it('marks a step as succeeded once step.completed follows step.started', () => {
+    const events: SetupEvent[] = [
+      { event: 'step.started', step: 'authenticate', at: 't1' },
+      { event: 'step.completed', step: 'authenticate', at: 't2' },
+    ];
+    const [first] = deriveStepViews(steps, events);
+    expect(first.state).toBe('succeeded');
+  });
+
+  it('marks a step as failed and surfaces the error message on step.failed', () => {
+    const events: SetupEvent[] = [
+      { event: 'step.started', step: 'create-user', at: 't1' },
+      {
+        event: 'step.failed',
+        step: 'create-user',
+        at: 't2',
+        error: { code: 'InternalError', message: 'IAM refused CreateUser' },
+      },
+    ];
+    const view = deriveStepViews(steps, events).find((v) => v.id === 'create-user');
+    expect(view?.state).toBe('failed');
+    expect(view?.errorMessage).toBe('IAM refused CreateUser');
+  });
+
+  it('leaves subsequent steps as pending after an earlier step fails', () => {
+    const events: SetupEvent[] = [
+      { event: 'step.started', step: 'authenticate', at: 't1' },
+      {
+        event: 'step.failed',
+        step: 'authenticate',
+        at: 't2',
+        error: { code: 'DestinationAuthFailed', message: 'creds refused' },
+      },
+    ];
+    const views = deriveStepViews(steps, events);
+    expect(views[0].state).toBe('failed');
+    for (const view of views.slice(1)) {
+      expect(view.state).toBe('pending');
+    }
+  });
+
+  it('ignores create-bucket events when the step is not in the requested list', () => {
+    const withoutBucket = stepListFor(false);
+    const events: SetupEvent[] = [{ event: 'step.started', step: 'create-bucket', at: 't' }];
+    const views = deriveStepViews(withoutBucket, events);
+    expect(views.find((v) => v.id === ('create-bucket' as never))).toBeUndefined();
+    expect(views.every((v) => v.state === 'pending')).toBe(true);
+  });
+});