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

package/dist/Common/CustomTagSelector/TagLabelValueSelector.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { TagLabelValueSelectorType } from './Types';
-export declare const TagLabelValueSelector: ({ selectedTagIndex, tagData, setTagData, tagOptions, isRequired, tagInputType, placeholder, tabIndex, refVar, dependentRef, noBackDrop }: TagLabelValueSelectorType) => JSX.Element;
+export declare const TagLabelValueSelector: ({ selectedTagIndex, tagData, setTagData, tagOptions, isRequired, tagInputType, placeholder, tabIndex, refVar, dependentRef, noBackDrop, }: TagLabelValueSelectorType) => JSX.Element;

package/dist/Common/CustomTagSelector/ValidationRules.d.ts

@@ -1,10 +1,8 @@
-export declare class ValidationRules {
-    propagateTagKey: (key: string) => {
-        isValid: boolean;
-        messages: string[];
-    };
-    propagateTagValue: (value: string) => {
-        isValid: boolean;
-        messages: string[];
-    };
-}
+export declare const propagateTagKeyValidator: (key: string) => {
+    isValid: boolean;
+    messages: string[];
+};
+export declare const propagateTagValueValidator: (value: string) => {
+    isValid: boolean;
+    messages: string[];
+};

package/dist/Common/CustomTagSelector/index.d.ts

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

package/dist/index.js

@@ -8521,50 +8521,45 @@ var validateTagValue = function (value) {
     }
     return errorList;
 };
-var ValidationRules = /** @class */ (function () {
-    function ValidationRules() {
-        this.propagateTagKey = function (key) {
-            var _a;
-            var errorList = [];
-            if (!key) {
-                errorList.push('Key is required');
-            }
-            else {
-                var re = new RegExp('/', 'g');
-                var noOfSlashInKey = (_a = key.match(re)) === null || _a === void 0 ? void 0 : _a.length;
-                if (noOfSlashInKey > 1) {
-                    errorList.push('Key: Max 1 ( / ) allowed');
-                }
-                else if (noOfSlashInKey === 1) {
-                    var _b = __read(key.split('/'), 2), prefix = _b[0], name_1 = _b[1];
-                    errorList.push.apply(errorList, __spreadArray([], __read(validateTagValue(name_1).map(function (error) { return "Name: ".concat(error); })), false));
-                    if (prefix.length > 253) {
-                        errorList.push('Prefix: Can be max 253 characters');
-                    }
-                    var 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.apply(errorList, __spreadArray([], __read(validateTagValue(key).map(function (error) { return "Name: ".concat(error); })), false));
-                }
-            }
-            return { isValid: errorList.length === 0, messages: errorList };
-        };
-        this.propagateTagValue = function (value) {
-            var errorList = [];
-            if (!value) {
-                errorList.push('Value is required');
+var propagateTagKeyValidator = function (key) {
+    var _a;
+    var errorList = [];
+    if (!key) {
+        errorList.push('Key is required');
+    }
+    else {
+        var re = new RegExp('/', 'g');
+        var noOfSlashInKey = (_a = key.match(re)) === null || _a === void 0 ? void 0 : _a.length;
+        if (noOfSlashInKey > 1) {
+            errorList.push('Key: Max 1 ( / ) allowed');
+        }
+        else if (noOfSlashInKey === 1) {
+            var _b = __read(key.split('/'), 2), prefix = _b[0], name_1 = _b[1];
+            errorList.push.apply(errorList, __spreadArray([], __read(validateTagValue(name_1).map(function (error) { return "Name: ".concat(error); })), false));
+            if (prefix.length > 253) {
+                errorList.push('Prefix: Can be max 253 characters');
             }
-            else {
-                errorList.push.apply(errorList, __spreadArray([], __read(validateTagValue(value)), false));
+            var 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 (.)');
             }
-            return { isValid: errorList.length === 0, messages: errorList };
-        };
+        }
+        else {
+            errorList.push.apply(errorList, __spreadArray([], __read(validateTagValue(key).map(function (error) { return "Name: ".concat(error); })), false));
+        }
+    }
+    return { isValid: errorList.length === 0, messages: errorList };
+};
+var propagateTagValueValidator = function (value) {
+    var errorList = [];
+    if (!value) {
+        errorList.push('Value is required');
     }
-    return ValidationRules;
-}());
+    else {
+        errorList.push.apply(errorList, __spreadArray([], __read(validateTagValue(value)), false));
+    }
+    return { isValid: errorList.length === 0, messages: errorList };
+};
 
 var _path$2;
 function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
@@ -8626,7 +8621,6 @@ var TagLabelValueSelector = function (_a) {
     var selectedTagIndex = _a.selectedTagIndex, tagData = _a.tagData, setTagData = _a.setTagData, tagOptions = _a.tagOptions, isRequired = _a.isRequired, tagInputType = _a.tagInputType, placeholder = _a.placeholder, _b = _a.tabIndex, tabIndex = _b === void 0 ? null : _b, refVar = _a.refVar, dependentRef = _a.dependentRef, noBackDrop = _a.noBackDrop;
     var _c = __read(React.useState(''), 2), selectedValue = _c[0], setSelectedValue = _c[1];
     var _d = __read(React.useState(''), 2), activeElement = _d[0], setActiveElement = _d[1];
-    var validationRules = new ValidationRules();
     React.useEffect(function () {
         setSelectedValue((tagData === null || tagData === void 0 ? void 0 : tagData[tagInputType]) || '');
     }, [selectedTagIndex, tagData, tagInputType]);
@@ -8644,11 +8638,11 @@ var TagLabelValueSelector = function (_a) {
             _tagData[tagInputType] = selectedValue;
             if (tagInputType === exports.KEY_VALUE.KEY) {
                 _tagData.isInvalidKey = selectedValue
-                    ? !validationRules.propagateTagKey(selectedValue).isValid
+                    ? !propagateTagKeyValidator(selectedValue).isValid
                     : _tagData.value !== '';
             }
             else if (selectedValue || isRequired || _tagData.propagate) {
-                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid;
+                _tagData.isInvalidValue = !propagateTagValueValidator(selectedValue).isValid;
                 _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey;
             }
             else {
@@ -8673,11 +8667,11 @@ var TagLabelValueSelector = function (_a) {
         var field = { isValid: true, messages: [] };
         if (tagInputType === exports.KEY_VALUE.KEY) {
             if (selectedValue || tagData.value) {
-                field = validationRules.propagateTagKey(selectedValue);
+                field = propagateTagKeyValidator(selectedValue);
             }
         }
-        else if (isRequired || selectedValue) {
-            field = validationRules.propagateTagValue(selectedValue);
+        else if (isRequired || selectedValue || tagData.propagate) {
+            field = propagateTagValueValidator(selectedValue);
         }
         if (!field.isValid) {
             return (jsxRuntime.jsxs("div", __assign({ className: "p-4", onClick: stopPropagation }, { children: [field.messages.map(function (error) { return (jsxRuntime.jsxs("div", __assign({ className: "flexbox pr-4 pl-4" }, { children: [jsxRuntime.jsx("span", { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-14 scr-5 mt-3 mr-4" }) }), jsxRuntime.jsx("span", { children: error })] }), error)); }), tagInputType === exports.KEY_VALUE.KEY && (jsxRuntime.jsxs("div", __assign({ className: "flexbox pr-4 pl-4" }, { children: [jsxRuntime.jsx("span", { children: jsxRuntime.jsx(SvgIcInfoOutlined, { className: "icon-dim-14 mt-3 mr-4" }) }), jsxRuntime.jsx("span", __assign({ className: "dc__italic-font-style" }, { children: "Key format: prefix/name or name" }))] })))] })));
@@ -8720,6 +8714,14 @@ var TagDetails = function (_a) {
     var propagateTagToResource = function () {
         var _tagData = __assign({}, tagData);
         _tagData.propagate = !_tagData.propagate;
+        console.log(_tagData.propagate, _tagData.value);
+        if (_tagData.propagate) {
+            _tagData.isInvalidValue = _tagData.key && (!_tagData.value || _tagData.isInvalidValue);
+        }
+        else {
+            _tagData.isInvalidValue =
+                _tagData.key && _tagData.value ? propagateTagValueValidator(_tagData.value).isValid : false;
+        }
         setTagData(index, _tagData);
     };
     return (jsxRuntime.jsxs("div", __assign({ className: "flexbox mb-8" }, { children: [jsxRuntime.jsx("div", __assign({ className: "dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ".concat(tagData.propagate ? 'bcn-7' : ''), onClick: propagateTagToResource }, { children: jsxRuntime.jsx(SvgInjectTag, { className: "icon-dim-20 mt-4 ".concat(tagData.propagate ? 'scn-0' : '') }) })), jsxRuntime.jsx(TagLabelValueSelector, { selectedTagIndex: index, tagData: tagData, setTagData: setTagData, tagInputType: exports.KEY_VALUE.KEY, placeholder: "Enter key", tabIndex: tabIndex - 1, refVar: keyRef, dependentRef: valueRef, tagOptions: suggestedTagsOptions }), jsxRuntime.jsx(TagLabelValueSelector, { selectedTagIndex: index, tagData: tagData, setTagData: setTagData, tagInputType: exports.KEY_VALUE.VALUE, placeholder: "Enter value", tabIndex: tabIndex, refVar: valueRef, dependentRef: keyRef }), jsxRuntime.jsx("div", __assign({ className: "dc__border pl-4 pr-4 dc__right-radius-4 pointer flex top", onClick: deleteTag }, { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-20 mt-4" }) }))] })));
@@ -16448,6 +16450,8 @@ exports.get = get;
 exports.getTeamListMin = getTeamListMin;
 exports.multiSelectStyles = multiSelectStyles;
 exports.post = post;
+exports.propagateTagKeyValidator = propagateTagKeyValidator;
+exports.propagateTagValueValidator = propagateTagValueValidator;
 exports.put = put;
 exports.showError = showError;
 exports.sortCallback = sortCallback;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.7-beta-16",
+    "version": "0.0.7-beta-19",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
@@ -36,6 +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",
         "@sentry/browser": "^7.31.1"
     },

package/src/Common/CustomTagSelector/TagDetails.tsx

@@ -5,6 +5,7 @@ import { TagLabelValueSelector } from './TagLabelValueSelector'
 import { KEY_VALUE } from '../Constants'
 import { stopPropagation } from '../Helper'
 import { TagDetailType } from './Types'
+import { propagateTagValueValidator } from './ValidationRules'
 
 export const TagDetails = ({
     index,
@@ -24,6 +25,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)
+        } else {
+            _tagData.isInvalidValue =
+                _tagData.key && _tagData.value ? propagateTagValueValidator(_tagData.value).isValid : false
+        }
         setTagData(index, _tagData)
     }
     return (

package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import PopupMenu from '../PopupMenu'
-import { ValidationRules } from './ValidationRules'
+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'
@@ -20,11 +20,10 @@ export const TagLabelValueSelector = ({
     tabIndex = null,
     refVar,
     dependentRef,
-    noBackDrop
+    noBackDrop,
 }: TagLabelValueSelectorType) => {
     const [selectedValue, setSelectedValue] = useState<string>('')
     const [activeElement, setActiveElement] = useState<string>('')
-    const validationRules = new ValidationRules()
 
     useEffect(() => {
         setSelectedValue(tagData?.[tagInputType] || '')
@@ -46,10 +45,10 @@ export const TagLabelValueSelector = ({
             _tagData[tagInputType] = selectedValue
             if (tagInputType === KEY_VALUE.KEY) {
                 _tagData.isInvalidKey = selectedValue
-                    ? !validationRules.propagateTagKey(selectedValue).isValid
+                    ? !propagateTagKeyValidator(selectedValue).isValid
                     : _tagData.value !== ''
             } else if (selectedValue || isRequired || _tagData.propagate) {
-                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid
+                _tagData.isInvalidValue = !propagateTagValueValidator(selectedValue).isValid
                 _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey
             } else {
                 _tagData.isInvalidValue = false
@@ -76,10 +75,10 @@ export const TagLabelValueSelector = ({
         let field = { isValid: true, messages: [] }
         if (tagInputType === KEY_VALUE.KEY) {
             if (selectedValue || tagData.value) {
-                field = validationRules.propagateTagKey(selectedValue)
+                field = propagateTagKeyValidator(selectedValue)
             }
-        } else if (isRequired || selectedValue) {
-            field = validationRules.propagateTagValue(selectedValue)
+        } else if (isRequired || selectedValue || tagData.propagate) {
+            field = propagateTagValueValidator(selectedValue)
         }
         if (!field.isValid) {
             return (
@@ -128,12 +127,8 @@ export const TagLabelValueSelector = ({
                 placement="right"
                 content={
                     <div>
-                        <div className="mb-10 fs-12 fw-6 cn-0 dc__break-word">
-                            {tag.label}
-                        </div>
-                        <div className="fs-12 fw-4 cn-0 dc__break-word">
-                            {tag.description}
-                        </div>
+                        <div className="mb-10 fs-12 fw-6 cn-0 dc__break-word">{tag.label}</div>
+                        <div className="fs-12 fw-4 cn-0 dc__break-word">{tag.description}</div>
                     </div>
                 }
             >

package/src/Common/CustomTagSelector/ValidationRules.ts

@@ -15,41 +15,38 @@ const validateTagValue = (value: string): string[] => {
     }
     return errorList
 }
-export class ValidationRules {
-
-    propagateTagKey = (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 (.)')
-                }
-            } else {
-                errorList.push(...validateTagValue(key).map((error) => `Name: ${error}`))
+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 (.)')
+            }
+        } else {
+            errorList.push(...validateTagValue(key).map((error) => `Name: ${error}`))
         }
-        return { isValid: errorList.length === 0, messages: errorList }
     }
+    return { isValid: errorList.length === 0, messages: errorList }
+}
 
-    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 }
+export const propagateTagValueValidator = (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 }
 }

package/src/Common/CustomTagSelector/index.ts

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