bugfix(crr): address Configure & Apply Actions UI review findings

Author: hervedombya

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

@@ -143,4 +143,37 @@ describe('CRRSetupWizard — Configure step', () => {
       { hostname: 'iam.dest.local', ip: '10.0.0.9' },
     ]);
   });
+
+  it('reopens the DNS modal when the mapped IP leaves the destination unreachable', async () => {
+    let verifyCalls = 0;
+    server.use(
+      rest.post(VERIFY_URL, (_req, res, ctx) => {
+        verifyCalls += 1;
+        const code = verifyCalls === 1 ? 'DestinationDnsResolutionFailed' : 'DestinationUnreachable';
+        return res(
+          ctx.status(502),
+          ctx.set('Content-Type', 'application/problem+json'),
+          ctx.body(
+            JSON.stringify({
+              type: 'about:blank',
+              title: 'error',
+              status: 502,
+              code,
+              ...(verifyCalls === 1 ? { unresolvedHosts: ['s3.dest.local'] } : {}),
+            }),
+          ),
+        );
+      }),
+    );
+    render(<CRRSetupWizard />, { wrapper: Wrapper });
+
+    fillValidForm();
+    await clickWhenEnabled(/Check Connection/i);
+    expect(await screen.findByText('• s3.dest.local')).toBeInTheDocument();
+
+    await userEvent.type(screen.getByRole('textbox', { name: /Destination cluster IP/i }), '10.0.0.9');
+    await clickWhenEnabled(/Retry Connection/i);
+
+    expect(await screen.findByText('• s3.dest.local')).toBeInTheDocument();
+  });
 });

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

@@ -1,4 +1,4 @@
-import { Form, Icon, Loader, Stack, Text } from '@scality/core-ui';
+import { Banner, Form, Icon, Loader, Stack, Text } from '@scality/core-ui';
 import { useStepper } from '@scality/core-ui/dist/components/steppers/Stepper.component';
 import { Button } from '@scality/core-ui/dist/next';
 import { useCreateBucket, useSetBucketReplication, useSetBucketVersioning } from '@scality/data-browser-library';
@@ -57,7 +57,6 @@ const StatusCell = ({ view, onRetry }: { view: StepView; onRetry: () => void })
         <Icon name="Exclamation-circle" color={theme.statusCritical} />
         <span>Failed</span>
         <Button icon={<Icon name="Redo" />} variant="secondary" type="button" label="Retry" onClick={onRetry} />
-        {view.errorMessage && <ErrorText>{view.errorMessage}</ErrorText>}
       </StatusBox>
     );
   }
@@ -347,23 +346,31 @@ export const ApplyActionsStep = (props: Props) => {
       style={{ width: '50rem' }}
     >
       {Slots}
+      {stepViews.some((view) => view.id === 'create-location' && view.active) && (
+        <Banner variant="warning" icon={<Icon color="statusWarning" name="Exclamation-circle" />}>
+          Creating the location can take up to a minute while it is applied to the running configuration.
+        </Banner>
+      )}
       <div style={{ height: '32rem', overflow: 'auto' }}>
         <Table>
           <T.Head>
             <T.HeadRow style={{ display: 'flex' }}>
               <T.HeadCell style={{ width: '150px' }}>Step</T.HeadCell>
-              <T.HeadCell style={{ width: '50%' }}>Action</T.HeadCell>
-              <T.HeadCell style={{ width: '12.5%' }}>Status</T.HeadCell>
+              <T.HeadCell style={{ flex: 1, minWidth: 0 }}>Action</T.HeadCell>
+              <T.HeadCell style={{ width: '200px' }}>Status</T.HeadCell>
             </T.HeadRow>
           </T.Head>
           <T.Body>
             {stepViews.map((view) => (
               <T.Row key={view.id} style={{ display: 'flex' }}>
                 <T.Cell style={{ width: '150px' }}>{view.step}</T.Cell>
-                <T.Cell style={{ width: '50%' }}>
-                  <Text>{view.label}</Text>
+                <T.Cell style={{ flex: 1, minWidth: 0 }}>
+                  <Stack direction="vertical" gap="r4">
+                    <Text>{view.label}</Text>
+                    {view.state === 'failed' && view.errorMessage && <ErrorText>{view.errorMessage}</ErrorText>}
+                  </Stack>
                 </T.Cell>
-                <T.Cell style={{ width: '12.5%' }}>
+                <T.Cell style={{ width: '200px' }}>
                   <StatusCell view={view} onRetry={() => onRetry(view)} />
                 </T.Cell>
               </T.Row>

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

@@ -43,6 +43,9 @@ const unresolvedHostsFrom = (error: unknown): string[] | null => {
   return null;
 };
 
+const isDestinationUnreachable = (error: unknown): boolean =>
+  error instanceof ServiceError && error.code === 'DestinationUnreachable';
+
 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);
@@ -76,6 +79,11 @@ export const ConfigureStep = () => {
       setDnsFallbackHosts(hosts);
       return;
     }
+    const aliases = getValues('hostAliases');
+    if (aliases.length > 0 && isDestinationUnreachable(error)) {
+      setDnsFallbackHosts(aliases.map((alias) => alias.hostname));
+      return;
+    }
     showToast({ open: true, status: 'error', message: errorMessage(error) });
   };
 

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

@@ -1,6 +1,7 @@
-import { FormGroup, FormSection, Icon, Radio, Stack, Text, Wrap } from '@scality/core-ui';
+import { FormGroup, FormSection, Icon, Stack, Text, Wrap } from '@scality/core-ui';
 import { Button, Input } from '@scality/core-ui/dist/next';
 import { Controller, useFormContext } from 'react-hook-form';
+import { RadioGroup } from '../../../../ISV/components/RadioGroup';
 import { CertificateSection } from '../../../../ui-elements/CertificateSection';
 import type { ConfigureFormValues } from './schema';
 
@@ -47,22 +48,16 @@ export const DestinationConnectionSection = ({
             name="connectionMode"
             control={control}
             render={({ field }) => (
-              <Stack direction="horizontal" gap="r16">
-                <Radio
-                  name="connectionMode"
-                  value="management-network"
-                  checked={field.value === 'management-network'}
-                  onChange={() => field.onChange('management-network')}
-                  label="Management Network"
-                />
-                <Radio
-                  name="connectionMode"
-                  value="data-network"
-                  checked={field.value === 'data-network'}
-                  onChange={() => field.onChange('data-network')}
-                  label="Data Network"
-                />
-              </Stack>
+              <RadioGroup
+                name="connectionMode"
+                options={[
+                  { value: 'management-network', label: 'Management Network' },
+                  { value: 'data-network', label: 'Data Network' },
+                ]}
+                value={field.value}
+                onChange={(next) => field.onChange(next)}
+                direction="horizontal"
+              />
             )}
           />
         }
@@ -86,7 +81,9 @@ export const DestinationConnectionSection = ({
           required
           helpErrorPosition="bottom"
           error={errorIfTouched('baseDomain')}
-          content={<Input id="baseDomain" {...register('baseDomain')} />}
+          content={
+            <Input id="baseDomain" noPlaceholderPrefix placeholder="ui.<base-domain>" {...register('baseDomain')} />
+          }
         />
       )}
       {connectionMode === 'data-network' && (

src/react/ui-elements/CertificateSection.tsx

@@ -1,4 +1,4 @@
-import { Dropzone, Stack, Text, TextArea } from '@scality/core-ui';
+import { Dropzone, Stack, spacing, Text, TextArea } from '@scality/core-ui';
 import type { ChangeEvent } from 'react';
 import { useFormContext } from 'react-hook-form';
 import styled from 'styled-components';
@@ -13,6 +13,10 @@ const CertificateContainer = styled.div`
   gap: 0.5rem;
   color: ${(props) => props.theme.textPrimary};
   max-width: 45rem;
+
+  & textarea {
+    border: ${spacing.r1} solid transparent;
+  }
 `;
 
 const PLACEHOLDER = `Example: