fix(pci-object-storage): containerNameStep

ref: DTCORE-2996, DTCORE-2997 Signed-off-by: Florian Renaut <[email protected]>
ovh · Jan 22, 2025 · e9c8f6b · e9c8f6b
1 parent 372ca9e
commit e9c8f6b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 15 deletions.
diff --git a/...s/pci-object-storage/src/pages/objects/container/new/step/ContainerNameStep.component.tsx b/...s/pci-object-storage/src/pages/objects/container/new/step/ContainerNameStep.component.tsx
@@ -24,7 +24,7 @@ import {
   STORAGE_ASYNC_REPLICATION_LINK,
 } from '@/constants';
 
-const validNameRegex = '^[a-z0-9]([a-z0-9.-]{1,61})[a-z0-9]$';
+const validNameRegex = /^[a-z0-9]([a-z0-9.\\-]{1,61})[a-z0-9]$/;
 
 interface ContainerNameStepProps {
   isCreationPending: boolean;
@@ -42,8 +42,14 @@ export function ContainerNameStep({
   const navigate = useNavigate();
   const { ovhSubsidiary } = context.environment.getUser();
   const { form, stepper, setContainerName } = useContainerCreationStore();
+  const [isTouched, setIsTouched] = useState(false);
 
-  const [nameError, setNameError] = useState(undefined);
+  let nameError: string | undefined;
+  if (isTouched && !form.containerName) {
+    nameError = t('pci-common:common_field_error_required');
+  } else if (isTouched && !validNameRegex.test(form.containerName)) {
+    nameError = t('pci-common:common_field_error_pattern');
+  }
 
   const asyncReplicationLink =
     STORAGE_ASYNC_REPLICATION_LINK[ovhSubsidiary] ||
@@ -67,7 +73,7 @@ export function ContainerNameStep({
           onSubmit(form);
         },
         label: t('pci_projects_project_storages_containers_add_submit_label'),
-        isDisabled: nameError,
+        isDisabled: !!nameError,
       }}
       skip={{
         action: () => {
@@ -86,18 +92,11 @@ export function ContainerNameStep({
           name="containerName"
           color="primary"
           isRequired
-          pattern={`${validNameRegex}`}
           onOdsChange={(event) => {
-            if (event.detail.validity?.valueMissing) {
-              setNameError(t('pci-common:common_field_error_required'));
-            } else if (event.detail.validity?.patternMismatch) {
-              setNameError(t('pci-common:common_field_error_pattern'));
-            } else {
-              setNameError(undefined);
-            }
-
-            if (event.detail.value)
-              setContainerName(event.detail.value.toString());
+            setContainerName(`${event.detail.value}`);
+          }}
+          onOdsBlur={() => {
+            setIsTouched(true);
           }}
         />
 

diff --git a/.../pages/objects/container/new/step/__snapshots__/ContainerNameStep.component.test.tsx.snap b/.../pages/objects/container/new/step/__snapshots__/ContainerNameStep.component.test.tsx.snap
@@ -39,7 +39,6 @@ exports[`ContainerNameStep > renders the component 1`] = `
             color="primary"
             is-required="true"
             name="containerName"
-            pattern="^[a-z0-9]([a-z0-9.-]{1,61})[a-z0-9]$"
             value=""
           />
           <ods-text