refactor: EditTaintsModal - validation text updates

Author: RohitRaj011

src/Pages/GlobalConfigurations/DeploymentCharts/List/UploadChartModal.tsx

@@ -199,7 +199,7 @@ const UploadChartModal = ({ closeUploadPopup }: UploadChartModalType) => {
                 2. Image descriptor template file - .image_descriptor_template.json.
             </div>
             <div className="cn-7 fw-4 fs-14 cn-7 mb-20">3. Custom chart packaged in the *.tgz format.</div>
-            <div className="flexbox-col dc__align-start">
+            <div className="flexbox-col dc__align-start pt-20">
                 <div className="fw-6 fs-13 cn-9 mb-8">
                     📙 Need help?&nbsp;
                     <DocLink

src/components/CIPipelineN/CIPipeline.tsx

@@ -833,7 +833,7 @@ export default function CIPipeline({
                 <pipelineContext.Provider value={contextValue}>
                     <div className={`${isAdvanced ? 'pipeline-container' : ''}`}>
                         {isAdvanced && (
-                            <div className="sidebar-container">
+                            <div className="sidebar-container pt-20">
                                 <Sidebar
                                     isJobView={isJobView}
                                     isJobCI={isJobCI}

src/components/ClusterNodes/NodeActions/EditTaintsModal.tsx

@@ -127,6 +127,10 @@ const EditTaintsModal = ({ name, version, kind, taints, closePopup }: EditTaints
         const { isValid, taintCellError: updatedTaintCellError } = getTaintTableValidateState({ taintList })
         setTaintCellError(updatedTaintCellError)
         if (!isValid) {
+            ToastManager.showToast({
+                variant: ToastVariantType.error,
+                description: 'Please resolve errors and try again',
+            })
             return
         }
 

src/components/ClusterNodes/NodeActions/utils.ts

@@ -89,19 +89,28 @@ export const getTaintsTableCellValidateState = (
         if (value.indexOf('/') !== -1) {
             const keyArr = value.split('/')
 
-            if (keyArr.length > 2) {
-                return { errorMessages: ['Maximum one ( / ) allowed'], isValid: false }
-            }
-
-            if (!keyPrefixRegex.test(keyArr[0])) {
-                return { errorMessages: ['Invalid prefix in key'], isValid: false }
+            if (keyArr.length > 2 || !keyPrefixRegex.test(keyArr[0])) {
+                return {
+                    errorMessages: ["The key can begin with a DNS subdomain prefix and a single '/'"],
+                    isValid: false,
+                }
             }
 
             if (!keyNameRegex.test(keyArr[1])) {
-                return { errorMessages: ['Invalid name in key'], isValid: false }
+                return {
+                    errorMessages: [
+                        'The key must begin with a letter or number, and may contain letters, numbers, hyphens, dots, and underscores',
+                    ],
+                    isValid: false,
+                }
             }
         } else if (!keyNameRegex.test(value)) {
-            return { errorMessages: ['Invalid key'], isValid: false }
+            return {
+                errorMessages: [
+                    'The key must begin with a letter or number, and may contain letters, numbers, hyphens, dots, and underscores',
+                ],
+                isValid: false,
+            }
         }
     }
 
@@ -112,7 +121,12 @@ export const getTaintsTableCellValidateState = (
             return { errorMessages: ['Maximum 63 chars are allowed'], isValid: false }
         }
         if (!valueRegex.test(value)) {
-            return { errorMessages: ['Invalid value'], isValid: false }
+            return {
+                errorMessages: [
+                    'The value must begin with a letter or number, and may contain letters, numbers, hyphens, dots, and underscores',
+                ],
+                isValid: false,
+            }
         }
     }
 
@@ -139,7 +153,7 @@ export const validateUniqueTaintKey = ({
 
         return acc
     }, {})
-    const uniqueKeyErrorMsg = 'Key and effect must be a unique combination.'
+    const uniqueKeyErrorMsg = 'Key and effect must be a unique combination'
 
     taintList.forEach(({ id, data }) => {
         const key = getTaintUniqueKey(data)

src/components/ClusterNodes/constants.ts

@@ -110,9 +110,9 @@ export const EDIT_TAINTS_MODAL_MESSAGING = {
     description: {
         title: 'A taint consists of a key, value, and effect.',
         messageList: [
-            'Key: The key must begin with a letter or number, and may contain letters, numbers, hyphens, dots,and underscores, up to 253 characters. Optionally, the key can begin with a DNS subdomain prefix and a single '/', like example.com/my-app.',
+            "Key: The key must begin with a letter or number, and may contain letters, numbers, hyphens, dots,and underscores, up to 253 characters. Optionally, the key can begin with a DNS subdomain prefix and a single '/', like example.com/my-app.",
             'Value(Optional): If given, it must begin with a letter or number, and may contain letters, numbers, hyphens, dots, and underscores, up to 63 characters.',
-            'Combination of <key, effect> must be unique',
+            'Combination of <key, effect> must be unique',
         ],
     },
     emptyState: {