@devtron-labs/devtron-fe-common-lib 0.0.7-beta-20 → 0.0.7-beta-22

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

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

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

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

package/dist/index.js

@@ -8506,61 +8506,6 @@ function PropagateTagInfo(_a) {
     return (jsxRuntime.jsx(TippyCustomized, __assign({ theme: exports.TippyTheme.white, className: "w-300", placement: "top", Icon: SvgInjectTag, heading: 'Propagate tags to K8s resources', infoText: "", additionalContent: additionalInfo(), showCloseButton: true, trigger: "click", interactive: true, documentationLink: isCreateApp ? DOCUMENTATION.APP_TAGS : DOCUMENTATION.APP_OVERVIEW_TAGS, documentationLinkText: "View Documentation" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flexbox cursor" }, { children: [jsxRuntime.jsx(SvgInjectTag, { className: "icon-dim-16 mt-2 mr-4" }), jsxRuntime.jsx("span", { children: "Propagate tags" }), jsxRuntime.jsx(SvgIcHelpOutline, { className: "icon-dim-16 mt-2 ml-4" })] })) })));
 }
 
-var validateTagValue = function (value) {
-    var errorList = [];
-    if (value.length > 63) {
-        errorList.push('Can be max 63 characters');
-    }
-    var firstLastAlphanumeric = PATTERNS.START_END_ALPHANUMERIC.test(value);
-    if (!firstLastAlphanumeric) {
-        errorList.push('Must start and end with an alphanumeric character');
-    }
-    var validValue = PATTERNS.ALPHANUMERIC_WITH_SPECIAL_CHAR.test(value);
-    if (!validValue) {
-        errorList.push('Can only contain alphanumeric chars and (-), (_), (.)');
-    }
-    return errorList;
-};
-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');
-            }
-            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 };
-};
-var propagateTagValueValidator = function (value) {
-    var errorList = [];
-    if (!value) {
-        errorList.push('Value is required');
-    }
-    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); }
 var SvgIcInfoOutlined = function SvgIcInfoOutlined(props) {
@@ -8617,10 +8562,71 @@ function ResizableTagTextArea(_a) {
     return (jsxRuntime.jsx("textarea", { rows: 1, ref: refVar, value: text, placeholder: placeholder, className: "".concat(className || '', " lh-20"), style: { resize: 'none' }, onChange: handleChange, onBlur: handleOnBlur, onFocus: handleOnFocus, tabIndex: tabIndex }));
 }
 
+var validateTagValue = function (value) {
+    var errorList = [];
+    if (value.length > 63) {
+        errorList.push('Can be max 63 characters');
+    }
+    var firstLastAlphanumeric = PATTERNS.START_END_ALPHANUMERIC.test(value);
+    if (!firstLastAlphanumeric) {
+        errorList.push('Must start and end with an alphanumeric character');
+    }
+    var validValue = PATTERNS.ALPHANUMERIC_WITH_SPECIAL_CHAR.test(value);
+    if (!validValue) {
+        errorList.push('Can only contain alphanumeric chars and (-), (_), (.)');
+    }
+    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');
+            }
+            else {
+                errorList.push.apply(errorList, __spreadArray([], __read(validateTagValue(value)), false));
+            }
+            return { isValid: errorList.length === 0, messages: errorList };
+        };
+    }
+    return ValidationRules;
+}());
+
 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]);
@@ -8637,12 +8643,13 @@ var TagLabelValueSelector = function (_a) {
             var _tagData = __assign({}, tagData);
             _tagData[tagInputType] = selectedValue;
             if (tagInputType === exports.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 {
@@ -8667,11 +8674,11 @@ var TagLabelValueSelector = function (_a) {
         var field = { isValid: true, messages: [] };
         if (tagInputType === exports.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 (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" }))] })))] })));
@@ -8696,7 +8703,7 @@ var TagLabelValueSelector = function (_a) {
         return renderValidationsSuggestions();
     };
     var popupMenuBody = activeElement === "tag-".concat(tagInputType, "-").concat(selectedTagIndex) ? renderSuggestions() : null;
-    return (jsxRuntime.jsxs(PopupMenu, __assign({ autoClose: true, autoPosition: true }, { children: [jsxRuntime.jsx(PopupMenu.Button, __assign({ rootClassName: "dc__bg-n50 flex top dc__no-border-imp" }, { children: jsxRuntime.jsx(ResizableTagTextArea, { minHeight: 30, maxHeight: 80, className: "form__input pt-4-imp pb-4-imp fs-13 ".concat(tagInputType === exports.KEY_VALUE.KEY
+    return (jsxRuntime.jsxs(PopupMenu, __assign({ autoClose: true, autoPosition: true }, { children: [jsxRuntime.jsx(PopupMenu.Button, __assign({ rootClassName: "dc__bg-n50 flex top dc__no-border-imp" }, { children: jsxRuntime.jsx(ResizableTagTextArea, { minHeight: 30, maxHeight: 80, className: "form__input tag-input pt-4-imp pb-4-imp fs-13 ".concat(tagInputType === exports.KEY_VALUE.KEY
                         ? "dc__no-right-radius"
                         : "dc__no-border-radius dc__no-right-border dc__no-left-border", " ").concat(tagData[tagInputType === exports.KEY_VALUE.KEY ? 'isInvalidKey' : 'isInvalidValue']
                         ? 'form__input--error'
@@ -8707,6 +8714,7 @@ var TagDetails = function (_a) {
     var index = _a.index, tagData = _a.tagData, setTagData = _a.setTagData, removeTag = _a.removeTag, _b = _a.tabIndex, tabIndex = _b === void 0 ? 1 : _b, suggestedTagsOptions = _a.suggestedTagsOptions;
     var keyRef = React.useRef(null);
     var valueRef = React.useRef(null);
+    var validationRules = new ValidationRules();
     var deleteTag = function (e) {
         stopPropagation(e);
         removeTag(index);
@@ -8714,13 +8722,16 @@ 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);
+            _tagData.isInvalidKey = _tagData.isInvalidKey || !_tagData.key;
+            _tagData.isInvalidValue = _tagData.isInvalidValue || !_tagData.value;
         }
         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);
     };
@@ -16465,8 +16476,6 @@ 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-20",
+    "version": "0.0.7-beta-22",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

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,15 @@ 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.isInvalidKey || !_tagData.key
+            _tagData.isInvalidValue = _tagData.isInvalidValue || !_tagData.value
         } 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 (
@@ -160,7 +162,7 @@ export const TagLabelValueSelector = ({
                 <ResizableTagTextArea
                     minHeight={30}
                     maxHeight={80}
-                    className={`form__input pt-4-imp pb-4-imp fs-13 ${
+                    className={`form__input tag-input pt-4-imp pb-4-imp fs-13 ${
                         tagInputType === KEY_VALUE.KEY
                             ? `dc__no-right-radius`
                             : `dc__no-border-radius dc__no-right-border dc__no-left-border`

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'