From e9c8f6b5321eabbbcd96bf5f14bd2b02c3218e36 Mon Sep 17 00:00:00 2001
From: Florian Renaut <florian.renaut@corp.ovh.com>
Date: Wed, 22 Jan 2025 12:05:23 +0100
Subject: [PATCH] fix(pci-object-storage): containerNameStep

ref: DTCORE-2996, DTCORE-2997
Signed-off-by: Florian Renaut <florian.renaut@corp.ovh.com>
---
 .../new/step/ContainerNameStep.component.tsx  | 27 +++++++++----------
 .../ContainerNameStep.component.test.tsx.snap |  1 -
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/packages/manager/apps/pci-object-storage/src/pages/objects/container/new/step/ContainerNameStep.component.tsx b/packages/manager/apps/pci-object-storage/src/pages/objects/container/new/step/ContainerNameStep.component.tsx
index b08dadf08b67..31f48c543358 100644
--- a/packages/manager/apps/pci-object-storage/src/pages/objects/container/new/step/ContainerNameStep.component.tsx
+++ b/packages/manager/apps/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/packages/manager/apps/pci-object-storage/src/pages/objects/container/new/step/__snapshots__/ContainerNameStep.component.test.tsx.snap b/packages/manager/apps/pci-object-storage/src/pages/objects/container/new/step/__snapshots__/ContainerNameStep.component.test.tsx.snap
index aa57a8ef3cdd..6226507d3481 100644
--- a/packages/manager/apps/pci-object-storage/src/pages/objects/container/new/step/__snapshots__/ContainerNameStep.component.test.tsx.snap
+++ b/packages/manager/apps/pci-object-storage/src/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