fix(pci-workflow): deletion modal error message

ref: DTCORE-2744 Signed-off-by: Florian Renaut <[email protected]>
ovh · Oct 14, 2024 · ea0ff71 · ea0ff71
1 parent ede40df
commit ea0ff71
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 10 deletions.
diff --git a/packages/manager/apps/pci-private-registry/src/pages/delete/Delete.page.tsx b/packages/manager/apps/pci-private-registry/src/pages/delete/Delete.page.tsx
@@ -102,7 +102,6 @@ export default function DeletePage() {
       cancelText={t('private_registry_common_cancel')}
       submitText={t('private_registry_common_delete')}
       type="warning"
-      inputErrorMessage={tField('common_field_error_pattern')}
     >
       <OsdsText
         color={ODS_THEME_COLOR_INTENT.text}

diff --git a/packages/manager/apps/pci-workflow/src/pages/delete/DeleteWorkflow.page.tsx b/packages/manager/apps/pci-workflow/src/pages/delete/DeleteWorkflow.page.tsx
@@ -75,7 +75,6 @@ export default function DeleteWorkflowPage() {
       title={t('pci_workflow_delete_title')}
       confirmationText="DELETE"
       confirmationLabel={tDelete('pci_workflow_delete_enter')}
-      inputErrorMessage={tCommon('common_field_error_pattern')}
       isPending={isPending || isPendingWorkflows}
       onConfirm={deleteWorkflow}
       onCancel={onClose}

diff --git a/packages/manager/apps/pci-workflow/tailwind.config.js b/packages/manager/apps/pci-workflow/tailwind.config.js
@@ -6,6 +6,7 @@ module.exports = {
   content: [
     './src/**/*.{js,jsx,ts,tsx}',
     '../../../manager-react-components/src/**/*.{js,jsx,ts,tsx}',
+    '../../modules/manager-pci-common/**/*.{js,jsx,ts,tsx}',
   ],
   corePlugins: {
     preflight: false,

diff --git a/...odules/manager-pci-common/src/components/modal/deletion-modal/DeletionModal.component.tsx b/...odules/manager-pci-common/src/components/modal/deletion-modal/DeletionModal.component.tsx
@@ -20,9 +20,14 @@ import { PciModal, PciModalProps } from '../PciModal.component';
 export type DeletionModalProps = PciModalProps & {
   confirmationText?: string;
   confirmationLabel?: string;
-  inputErrorMessage?: string;
 };
 
+enum FormErrorEnum {
+  NONE,
+  REQUIRED,
+  INVALID,
+}
+
 export function DeletionModal({
   children,
   type,
@@ -35,13 +40,12 @@ export function DeletionModal({
   onCancel,
   confirmationText,
   confirmationLabel,
-  inputErrorMessage,
 }: Readonly<DeletionModalProps>) {
   const { t } = useTranslation('pci-common');
 
   const [formState, setFormState] = useState({
     deleteInput: '',
-    hasError: false,
+    error: FormErrorEnum.NONE,
     isTouched: false,
   });
 
@@ -53,18 +57,32 @@ export function DeletionModal({
   };
 
   useEffect(() => {
+    let error = null;
+    if (formState.isTouched && !formState.deleteInput?.trim()) {
+      error = FormErrorEnum.REQUIRED;
+    } else if (
+      formState.isTouched &&
+      formState.deleteInput !== confirmationText
+    ) {
+      error = FormErrorEnum.INVALID;
+    } else {
+      error = FormErrorEnum.NONE;
+    }
     setFormState({
       ...formState,
-      hasError:
-        formState.isTouched && formState.deleteInput !== confirmationText,
+      error,
     });
   }, [formState.deleteInput, formState.isTouched]);
 
   const isDisabled =
     isPending ||
     (confirmationText && formState.deleteInput !== confirmationText);
 
-  const errorMessage = inputErrorMessage || t('common_field_error_required');
+  const errorMessage = {
+    [FormErrorEnum.REQUIRED]: t('common_field_error_required'),
+    [FormErrorEnum.INVALID]: t('common_field_error_pattern'),
+    [FormErrorEnum.NONE]: '',
+  }[formState.error];
 
   return (
     <PciModal
@@ -83,7 +101,7 @@ export function DeletionModal({
         <OsdsFormField
           class="mt-6"
           data-testid="delete-formField"
-          error={formState.hasError ? errorMessage : ''}
+          error={errorMessage}
         >
           <OsdsText
             slot="label"
@@ -99,7 +117,7 @@ export function DeletionModal({
             data-testid="delete-input"
             onOdsValueChange={handleInputDeleteChange}
             className={
-              formState.hasError
+              errorMessage
                 ? 'bg-red-100 border-red-500 text-red-500 focus:text-red-500'
                 : 'border-color-[var(--ods-color-default-200)] bg-white'
             }