@devtron-labs/devtron-fe-common-lib 0.0.7-beta-47 → 0.0.7-beta-49

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

@@ -3,7 +3,7 @@ export declare class ValidationRules {
         isValid: boolean;
         messages: string[];
     };
-    propagateTagValue: (value: string) => {
+    propagateTagValue: (value: string, key: string) => {
         isValid: boolean;
         messages: string[];
     };

package/dist/Common/Types.d.ts

@@ -45,7 +45,7 @@ export interface CheckboxProps {
 export interface TippyCustomizedProps {
     theme: TippyTheme;
     visible?: boolean;
-    heading?: string;
+    heading?: ReactNode | string;
     infoTextHeading?: string;
     placement: Placement;
     className?: string;

package/dist/index.js

@@ -8655,7 +8655,7 @@ function TippyCustomized(props) {
     };
     var getTippyContent = function () {
         var Icon = props.Icon, iconPath = props.iconPath, iconClass = props.iconClass, iconSize = props.iconSize, onImageLoadError = props.onImageLoadError, heading = props.heading, infoTextHeading = props.infoTextHeading, infoText = props.infoText, showCloseButton = props.showCloseButton, additionalContent = props.additionalContent, documentationLink = props.documentationLink, documentationLinkText = props.documentationLinkText;
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "dc__word-break dc__hyphens-auto flex left ".concat(isWhiteTheme ? 'p-12 dc__border-bottom-n1 cn-9' : 'pt-20 pb-12 pr-20 pl-20 cn-0 top') }, { children: [iconPath ? (jsxRuntime.jsx("img", { className: "icon-dim-".concat(iconSize || 20, " mr-6 ").concat(iconClass || ''), src: iconPath, alt: heading, onError: onImageLoadError })) : (Icon && (jsxRuntime.jsx("div", __assign({ className: "icon-dim-".concat(iconSize || 20, " mr-6") }, { children: jsxRuntime.jsx(Icon, { className: "icon-dim-".concat(iconSize || 20, " ").concat(iconClass || '') }) })))), heading && jsxRuntime.jsx("span", __assign({ className: "fs-14 fw-6 lh-20 ".concat(showCloseButton ? 'mr-6' : '') }, { children: heading })), showCloseButton && (jsxRuntime.jsx("div", __assign({ className: "icon-dim-16 ml-auto" }, { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-16 cursor ".concat(isWhiteTheme ? 'fcn-9' : 'fcn-0'), onClick: closeTippy }) })))] })), infoTextHeading && (jsxRuntime.jsx("div", __assign({ className: "dc__word-break dc__hyphens-auto fs-14 fw-6 lh-20 ".concat(isWhiteTheme ? 'pl-12 pr-12' : 'pl-20 pr-20') }, { children: infoTextHeading }))), infoText && (jsxRuntime.jsx("div", __assign({ className: "dc__word-break dc__hyphens-auto fs-13 fw-4 lh-20 ".concat(isWhiteTheme
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "dc__word-break dc__hyphens-auto flex left ".concat(isWhiteTheme ? 'p-12 dc__border-bottom-n1 cn-9' : 'pt-20 pb-12 pr-20 pl-20 cn-0 top') }, { children: [iconPath ? (jsxRuntime.jsx("img", { className: "icon-dim-".concat(iconSize || 20, " mr-6 ").concat(iconClass || ''), src: iconPath, alt: 'Heading', onError: onImageLoadError })) : (Icon && (jsxRuntime.jsx("div", __assign({ className: "icon-dim-".concat(iconSize || 20, " mr-6") }, { children: jsxRuntime.jsx(Icon, { className: "icon-dim-".concat(iconSize || 20, " ").concat(iconClass || '') }) })))), heading && jsxRuntime.jsx("span", __assign({ className: "fs-14 fw-6 lh-20 ".concat(showCloseButton ? 'mr-6' : '') }, { children: heading })), showCloseButton && (jsxRuntime.jsx("div", __assign({ className: "icon-dim-16 ml-auto" }, { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-16 cursor ".concat(isWhiteTheme ? 'fcn-9' : 'fcn-0'), onClick: closeTippy }) })))] })), infoTextHeading && (jsxRuntime.jsx("div", __assign({ className: "dc__word-break dc__hyphens-auto fs-14 fw-6 lh-20 ".concat(isWhiteTheme ? 'pl-12 pr-12' : 'pl-20 pr-20') }, { children: infoTextHeading }))), infoText && (jsxRuntime.jsx("div", __assign({ className: "dc__word-break dc__hyphens-auto fs-13 fw-4 lh-20 ".concat(isWhiteTheme
                         ? 'p-12'
                         : "pl-20 pr-20 pt-4 ".concat(additionalContent && documentationLink ? 'pb-12' : 'pb-20')) }, { children: infoText }))), additionalContent, documentationLink && (jsxRuntime.jsx("div", __assign({ className: "pl-12 pb-12" }, { children: jsxRuntime.jsx("a", __assign({ href: documentationLink, target: "_blank", rel: "noreferrer noopener", className: "fs-13 cb-5", onClick: closeTippy }, { children: documentationLinkText || 'Learn more' })) })))] }));
     };
@@ -8795,35 +8795,39 @@ var ValidationRules = /** @class */ (function () {
                 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');
+                if (!key.startsWith("devtron.ai/")) {
+                    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');
                     }
-                    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 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));
                     }
-                }
-                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) {
+        this.propagateTagValue = function (value, key) {
             var errorList = [];
             if (!value) {
                 errorList.push('Value is required');
             }
             else {
-                errorList.push.apply(errorList, __spreadArray([], __read(validateTagValue(value)), false));
+                if (!key.startsWith("devtron.ai/")) {
+                    errorList.push.apply(errorList, __spreadArray([], __read(validateTagValue(value)), false));
+                }
             }
             return { isValid: errorList.length === 0, messages: errorList };
         };
@@ -8858,7 +8862,7 @@ var TagLabelValueSelector = function (_a) {
                         : _tagData.value !== '';
             }
             else if (selectedValue || isRequired || _tagData.propagate) {
-                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid;
+                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue, _tagData.key).isValid;
                 _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey;
             }
             else {
@@ -8887,7 +8891,7 @@ var TagLabelValueSelector = function (_a) {
             }
         }
         else if (isRequired || selectedValue || tagData.propagate) {
-            field = validationRules.propagateTagValue(selectedValue);
+            field = validationRules.propagateTagValue(selectedValue, tagData.key);
         }
         if (!field.isValid) {
             return (jsxRuntime.jsxs("div", __assign({ className: "p-4", onClick: stopPropagation, "data-testid": "tag-label-cross-stop-propagation" }, { 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" }))] })))] })));
@@ -8939,12 +8943,12 @@ var TagDetails = function (_a) {
             _tagData.isInvalidKey =
                 _tagData.key || _tagData.value ? !validationRules.propagateTagKey(_tagData.key).isValid : false;
             _tagData.isInvalidValue = _tagData.value
-                ? !validationRules.propagateTagValue(_tagData.value).isValid
+                ? !validationRules.propagateTagValue(_tagData.value, _tagData.key).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, "data-testid": "propagate-tag-".concat(index) }, { 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, "data-testid": "delete-tag-".concat(index) }, { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-20 mt-4" }) }))] })));
+    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' : '', " ").concat(tagData.key.startsWith("devtron.ai/") ? 'cursor-not-allowed bcn-1' : ''), onClick: propagateTagToResource, "data-testid": "propagate-tag-".concat(index) }, { 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, "data-testid": "delete-tag-".concat(index) }, { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-20 mt-4" }) }))] })));
 };
 
 var _path$1;
@@ -8966,7 +8970,11 @@ var TagLabelSelect = function (_a) {
     var isCreateApp = _a.isCreateApp, labelTags = _a.labelTags, setLabelTags = _a.setLabelTags, _b = _a.tabIndex, tabIndex = _b === void 0 ? 0 : _b;
     var setTagData = function (index, tagValue) {
         var _tags = __spreadArray([], __read(labelTags), false);
-        _tags[index] = tagValue;
+        var _tagValue = tagValue;
+        if (_tagValue.key.startsWith("devtron.ai/")) {
+            _tagValue.propagate = false;
+        }
+        _tags[index] = _tagValue;
         setLabelTags(_tags);
     };
     var addNewTag = function () {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.7-beta-47",
+    "version": "0.0.7-beta-49",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Common/CustomTagSelector/TagDetails.tsx

@@ -33,7 +33,7 @@ export const TagDetails = ({
             _tagData.isInvalidKey =
                 _tagData.key || _tagData.value ? !validationRules.propagateTagKey(_tagData.key).isValid : false
             _tagData.isInvalidValue = _tagData.value
-                ? !validationRules.propagateTagValue(_tagData.value).isValid
+                ? !validationRules.propagateTagValue(_tagData.value, _tagData.key).isValid
                 : false
         }
         setTagData(index, _tagData)
@@ -41,7 +41,7 @@ export const TagDetails = ({
     return (
         <div className="flexbox mb-8">
             <div
-                className={`dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ${tagData.propagate ? 'bcn-7' : ''}`}
+                className={`dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ${tagData.propagate ? 'bcn-7' : ''} ${tagData.key.startsWith("devtron.ai/") ? 'cursor-not-allowed bcn-1' : ''}`}
                 onClick={propagateTagToResource}
                 data-testid={`propagate-tag-${index}`}
             >

package/src/Common/CustomTagSelector/TagLabelSelect.tsx

@@ -13,7 +13,11 @@ export const TagLabelSelect = ({
 }: TagLabelSelectType) => {
     const setTagData = (index, tagValue): void => {
         const _tags = [...labelTags]
-        _tags[index] = tagValue
+        const _tagValue = tagValue
+        if(_tagValue.key.startsWith("devtron.ai/")){
+            _tagValue.propagate = false
+        }
+        _tags[index] = _tagValue
         setLabelTags(_tags)
     }
 

package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -50,7 +50,7 @@ export const TagLabelValueSelector = ({
                         ? !validationRules.propagateTagKey(selectedValue).isValid
                         : _tagData.value !== ''
             } else if (selectedValue || isRequired || _tagData.propagate) {
-                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid
+                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue, _tagData.key).isValid
                 _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey
             } else {
                 _tagData.isInvalidValue = false
@@ -80,7 +80,7 @@ export const TagLabelValueSelector = ({
                 field = validationRules.propagateTagKey(selectedValue)
             }
         } else if (isRequired || selectedValue || tagData.propagate) {
-            field = validationRules.propagateTagValue(selectedValue)
+            field = validationRules.propagateTagValue(selectedValue, tagData.key)
         }
         if (!field.isValid) {
             return (

package/src/Common/CustomTagSelector/ValidationRules.ts

@@ -21,33 +21,37 @@ export class ValidationRules {
         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')
+            if(!key.startsWith("devtron.ai/")){
+                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}`))
                 }
-                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 }
     }
 
-    propagateTagValue = (value: string): { isValid: boolean; messages: string[] } => {
+    propagateTagValue = (value: string, key: string): { isValid: boolean; messages: string[] } => {
         const errorList = []
         if (!value) {
             errorList.push('Value is required')
         } else {
-            errorList.push(...validateTagValue(value))
+            if(!key.startsWith("devtron.ai/")){
+                errorList.push(...validateTagValue(value))
+            }
         }
         return { isValid: errorList.length === 0, messages: errorList }
     }

package/src/Common/TippyCustomized.tsx

@@ -58,7 +58,7 @@ export function TippyCustomized(props: TippyCustomizedProps) {
                         <img
                             className={`icon-dim-${iconSize || 20} mr-6 ${iconClass || ''}`}
                             src={iconPath}
-                            alt={heading}
+                            alt={'Heading'}
                             onError={onImageLoadError}
                         />
                     ) : (

package/src/Common/Types.ts

@@ -51,7 +51,7 @@ export interface CheckboxProps {
 export interface TippyCustomizedProps {
     theme: TippyTheme
     visible?: boolean
-    heading?: string
+    heading?: ReactNode | string
     infoTextHeading?: string
     placement: Placement
     className?: string