From 56b7b0aa0f50951b0134e3bfd7d9fbf7e5b82a70 Mon Sep 17 00:00:00 2001
From: Patrick Ear <patrick.ear@scality.com>
Date: Tue, 7 May 2024 15:38:19 +0200
Subject: [PATCH] ARTESCA-12111 - add warning in data service

---
 src/react/endpoint/EndpointCreate.tsx         | 52 ++++++++++++++++---
 .../__tests__/EndpointCreate.test.tsx         | 40 +++++++++++++-
 2 files changed, 83 insertions(+), 9 deletions(-)

diff --git a/src/react/endpoint/EndpointCreate.tsx b/src/react/endpoint/EndpointCreate.tsx
index bcc17b491..aa3840fde 100644
--- a/src/react/endpoint/EndpointCreate.tsx
+++ b/src/react/endpoint/EndpointCreate.tsx
@@ -7,11 +7,13 @@ import {
   FormSection,
   Icon,
   Stack,
+  spacing,
 } from '@scality/core-ui';
-import { Button, Input, Select } from '@scality/core-ui/dist/next';
+import { Box, Button, Input, Select } from '@scality/core-ui/dist/next';
 import { useMemo } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
 import {
   useCreateEndpointMutation,
   useWaitForRunningConfigurationVersionToBeUpdated,
@@ -21,6 +23,14 @@ import { useAccountsLocationsAndEndpoints } from '../next-architecture/domain/bu
 import { useAccountsLocationsEndpointsAdapter } from '../next-architecture/ui/AccountsLocationsEndpointsAdapterProvider';
 import { useInstanceId } from '../next-architecture/ui/AuthProvider';
 
+const BannerMessageList = styled.ul`
+  margin: ${spacing.r8} 0;
+  padding-left: ${spacing.r16};
+  li {
+    margin-bottom: ${spacing.r8};
+  }
+`;
+
 const schema = Joi.object({
   hostname: Joi.string().label('Hostname').required().min(3),
   locationName: Joi.string().required(),
@@ -100,7 +110,7 @@ function EndpointCreate() {
 
   return (
     <Form
-      layout={{ kind: 'page', title: 'Create a New Data Service' }}
+      layout={{ kind: 'page', title: 'Create new Data Service' }}
       requireMode="partial"
       rightActions={
         <Stack gap="r16">
@@ -133,15 +143,39 @@ function EndpointCreate() {
         </Stack>
       }
       banner={
-        createEndpointMutation.isError && (
+        <Stack gap="r16" direction="vertical">
           <Banner
-            icon={<Icon name="Exclamation-triangle" />}
-            title="Error"
-            variant="danger"
+            icon={
+              <Box display="flex" alignItems="center" ml={spacing.r8}>
+                <Icon
+                  name="Exclamation-circle"
+                  color="statusWarning"
+                  size="lg"
+                />
+              </Box>
+            }
+            variant="warning"
           >
-            {createEndpointMutation.error?.message}
+            <BannerMessageList>
+              <li>Expect some delay—creating a new Data Service takes time.</li>
+              <li>
+                Creating a new Data Service will regenerate all Certificates
+                related to Data Services. If these Certificates were already
+                replaced by ones issued by your Authority, they will have to be
+                replaced again. Contact your Platform admin if needed.
+              </li>
+            </BannerMessageList>
           </Banner>
-        )
+          {createEndpointMutation.isError ? (
+            <Banner
+              icon={<Icon name="Exclamation-triangle" />}
+              title="Error"
+              variant="danger"
+            >
+              {createEndpointMutation.error?.message}
+            </Banner>
+          ) : null}
+        </Stack>
       }
     >
       <FormSection>
@@ -151,6 +185,7 @@ function EndpointCreate() {
           labelHelpTooltip="Cannot be modified after creation."
           direction="vertical"
           error={errors.hostname?.message ?? ''}
+          required
           content={
             <Input
               type="text"
@@ -167,6 +202,7 @@ function EndpointCreate() {
           label="Storage Location"
           direction="vertical"
           labelHelpTooltip="Cannot be modified after creation."
+          required
           content={
             loading ? (
               <>Loading locations...</>
diff --git a/src/react/endpoint/__tests__/EndpointCreate.test.tsx b/src/react/endpoint/__tests__/EndpointCreate.test.tsx
index 821bf48f7..024c3a5a9 100644
--- a/src/react/endpoint/__tests__/EndpointCreate.test.tsx
+++ b/src/react/endpoint/__tests__/EndpointCreate.test.tsx
@@ -44,11 +44,49 @@ describe('EndpointCreate', () => {
     );
 
     await selectClick(
-      screen.getByRole('textbox', { name: 'Storage Location' }),
+      screen.getByRole('textbox', { name: /Storage Location/i }),
     );
     //V
     expect(
       screen.queryByRole('option', { name: new RegExp(coldLocation, 'i') }),
     ).toHaveAttribute('aria-disabled', 'true');
   });
+
+  it('should always render the warning message', async () => {
+    const coldLocation = 'europe25-myroom-cold';
+    //E
+    await renderWithRouterMatch(<EndpointCreate />, undefined, {
+      configuration: {
+        latest: {
+          locations: {
+            [coldLocation]: {
+              locationType: 'location-dmf-v1',
+              name: coldLocation,
+              isCold: true,
+              details: {
+                endpoint: 'ws://tape.myroom.europe25.cnes:8181',
+                repoId: ['repoId'],
+                nsId: 'nsId',
+                username: 'username',
+                password: 'password',
+              },
+            },
+          },
+        },
+      },
+    });
+
+    await waitForElementToBeRemoved(() =>
+      screen.getByText('Loading locations...'),
+    );
+
+    const warningMessages = [
+      `Expect some delay—creating a new Data Service takes time.`,
+      `Creating a new Data Service will regenerate all Certificates related to Data Services. If these Certificates were already replaced by ones issued by your Authority, they will have to be replaced again. Contact your Platform admin if needed.`,
+    ];
+
+    warningMessages.forEach((message) => {
+      expect(screen.getByText(message)).toBeInTheDocument();
+    });
+  });
 });