@devtron-labs/devtron-fe-common-lib 0.0.7-beta-19 → 0.0.7-beta-21

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.7-beta-19",
+    "version": "0.0.7-beta-21",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
@@ -36,8 +36,7 @@
         "typescript": "^4.9.4",
         "react-toastify": "^8.2.0",
         "@tippyjs/react": "^4.2.0",
-        "@types/react-select": "^5.0.1",
-        "react-select": "^5.2.2",
+        "react-select": "5.2.2",
         "@sentry/browser": "^7.31.1"
     },
     "peerDependencies": {

package/src/Common/CustomTagSelector/TagDetails.tsx

@@ -5,7 +5,7 @@ import { TagLabelValueSelector } from './TagLabelValueSelector'
 import { KEY_VALUE } from '../Constants'
 import { stopPropagation } from '../Helper'
 import { TagDetailType } from './Types'
-import { propagateTagValueValidator } from './ValidationRules'
+import { ValidationRules } from './ValidationRules'
 
 export const TagDetails = ({
     index,
@@ -17,6 +17,7 @@ export const TagDetails = ({
 }: TagDetailType) => {
     const keyRef = useRef(null)
     const valueRef = useRef(null)
+    const validationRules = new ValidationRules()
 
     const deleteTag = (e): void => {
         stopPropagation(e)
@@ -25,12 +26,13 @@ export const TagDetails = ({
     const propagateTagToResource = (): void => {
         const _tagData = { ...tagData }
         _tagData.propagate = !_tagData.propagate
-        console.log(_tagData.propagate, _tagData.value)
         if (_tagData.propagate) {
-            _tagData.isInvalidValue = _tagData.key && (!_tagData.value || _tagData.isInvalidValue)
+            _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidValue
+            _tagData.isInvalidValue = !_tagData.value || _tagData.isInvalidValue
         } else {
-            _tagData.isInvalidValue =
-                _tagData.key && _tagData.value ? propagateTagValueValidator(_tagData.value).isValid : false
+            _tagData.isInvalidKey =
+                _tagData.key || _tagData.value ? validationRules.propagateTagKey(_tagData.key).isValid : false
+            _tagData.isInvalidValue = _tagData.value ? validationRules.propagateTagValue(_tagData.value).isValid : false
         }
         setTagData(index, _tagData)
     }

package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react'
 import PopupMenu from '../PopupMenu'
-import { propagateTagKeyValidator, propagateTagValueValidator } from './ValidationRules'
 import { ReactComponent as ErrorCross } from '../../Assets/Icon/ic-cross.svg'
 import { ReactComponent as Info } from '../../Assets/Icon/ic-info-outlined.svg'
 import { KEY_VALUE } from '../Constants'
@@ -8,6 +7,7 @@ import { stopPropagation } from '../Helper'
 import { ResizableTagTextArea } from './ResizableTagTextArea'
 import { SuggestedTagOptionType, TagLabelValueSelectorType } from './Types'
 import Tippy from '@tippyjs/react'
+import { ValidationRules } from './ValidationRules'
 
 export const TagLabelValueSelector = ({
     selectedTagIndex,
@@ -24,6 +24,7 @@ export const TagLabelValueSelector = ({
 }: TagLabelValueSelectorType) => {
     const [selectedValue, setSelectedValue] = useState<string>('')
     const [activeElement, setActiveElement] = useState<string>('')
+    const validationRules = new ValidationRules()
 
     useEffect(() => {
         setSelectedValue(tagData?.[tagInputType] || '')
@@ -44,11 +45,12 @@ export const TagLabelValueSelector = ({
             const _tagData = { ...tagData }
             _tagData[tagInputType] = selectedValue
             if (tagInputType === KEY_VALUE.KEY) {
-                _tagData.isInvalidKey = selectedValue
-                    ? !propagateTagKeyValidator(selectedValue).isValid
-                    : _tagData.value !== ''
+                _tagData.isInvalidKey =
+                    selectedValue || _tagData.propagate
+                        ? !validationRules.propagateTagKey(selectedValue).isValid
+                        : _tagData.value !== ''
             } else if (selectedValue || isRequired || _tagData.propagate) {
-                _tagData.isInvalidValue = !propagateTagValueValidator(selectedValue).isValid
+                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid
                 _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey
             } else {
                 _tagData.isInvalidValue = false
@@ -75,10 +77,10 @@ export const TagLabelValueSelector = ({
         let field = { isValid: true, messages: [] }
         if (tagInputType === KEY_VALUE.KEY) {
             if (selectedValue || tagData.value) {
-                field = propagateTagKeyValidator(selectedValue)
+                field = validationRules.propagateTagKey(selectedValue)
             }
         } else if (isRequired || selectedValue || tagData.propagate) {
-            field = propagateTagValueValidator(selectedValue)
+            field = validationRules.propagateTagValue(selectedValue)
         }
         if (!field.isValid) {
             return (

package/src/Common/CustomTagSelector/ValidationRules.ts

@@ -15,38 +15,40 @@ const validateTagValue = (value: string): string[] => {
     }
     return errorList
 }
-export const propagateTagKeyValidator = (key: string): { isValid: boolean; messages: string[] } => {
-    const errorList = []
-    if (!key) {
-        errorList.push('Key is required')
-    } else {
-        const re = new RegExp('/', 'g')
-        const noOfSlashInKey = key.match(re)?.length
-        if (noOfSlashInKey > 1) {
-            errorList.push('Key: Max 1 ( / ) allowed')
-        } else if (noOfSlashInKey === 1) {
-            const [prefix, name] = key.split('/')
-            errorList.push(...validateTagValue(name).map((error) => `Name: ${error}`))
-            if (prefix.length > 253) {
-                errorList.push('Prefix: Can be max 253 characters')
-            }
-            const validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix)
-            if (!validPrefix) {
-                errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)')
-            }
+export class ValidationRules {
+    propagateTagKey = (key: string): { isValid: boolean; messages: string[] } => {
+        const errorList = []
+        if (!key) {
+            errorList.push('Key is required')
         } else {
-            errorList.push(...validateTagValue(key).map((error) => `Name: ${error}`))
+            const re = new RegExp('/', 'g')
+            const noOfSlashInKey = key.match(re)?.length
+            if (noOfSlashInKey > 1) {
+                errorList.push('Key: Max 1 ( / ) allowed')
+            } else if (noOfSlashInKey === 1) {
+                const [prefix, name] = key.split('/')
+                errorList.push(...validateTagValue(name).map((error) => `Name: ${error}`))
+                if (prefix.length > 253) {
+                    errorList.push('Prefix: Can be max 253 characters')
+                }
+                const validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix)
+                if (!validPrefix) {
+                    errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)')
+                }
+            } else {
+                errorList.push(...validateTagValue(key).map((error) => `Name: ${error}`))
+            }
         }
+        return { isValid: errorList.length === 0, messages: errorList }
     }
-    return { isValid: errorList.length === 0, messages: errorList }
-}
 
-export const propagateTagValueValidator = (value: string): { isValid: boolean; messages: string[] } => {
-    const errorList = []
-    if (!value) {
-        errorList.push('Value is required')
-    } else {
-        errorList.push(...validateTagValue(value))
+    propagateTagValue = (value: string): { isValid: boolean; messages: string[] } => {
+        const errorList = []
+        if (!value) {
+            errorList.push('Value is required')
+        } else {
+            errorList.push(...validateTagValue(value))
+        }
+        return { isValid: errorList.length === 0, messages: errorList }
     }
-    return { isValid: errorList.length === 0, messages: errorList }
 }

package/src/Common/CustomTagSelector/index.ts

@@ -3,5 +3,4 @@ export * from './TagDetails'
 export * from './TagLabelSelect'
 export * from './TagLabelValueSelector'
 export * from './ResizableTagTextArea'
-export * from './Types'
-export * from './ValidationRules'
+export * from './Types'