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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/Common/CustomTagSelector/ValidationRules.d.ts +1 -1
  2. package/dist/Common/Types.d.ts +1 -1
  3. package/dist/index.js +32 -24
  4. package/package.json +1 -1
  5. package/src/Common/CustomTagSelector/TagDetails.tsx +2 -2
  6. package/src/Common/CustomTagSelector/TagLabelSelect.tsx +5 -1
  7. package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx +2 -2
  8. package/src/Common/CustomTagSelector/ValidationRules.ts +21 -17
  9. package/src/Common/TippyCustomized.tsx +1 -1
  10. package/src/Common/Types.ts +1 -1
package/dist/Common/CustomTagSelector/ValidationRules.d.ts CHANGED
@@ -3,7 +3,7 @@ export declare class ValidationRules {
3
3
  isValid: boolean;
4
4
  messages: string[];
5
5
  };
6
- propagateTagValue: (value: string) => {
6
+ propagateTagValue: (value: string, key: string) => {
7
7
  isValid: boolean;
8
8
  messages: string[];
9
9
  };
package/dist/Common/Types.d.ts CHANGED
@@ -45,7 +45,7 @@ export interface CheckboxProps {
45
45
  export interface TippyCustomizedProps {
46
46
  theme: TippyTheme;
47
47
  visible?: boolean;
48
- heading?: string;
48
+ heading?: ReactNode | string;
49
49
  infoTextHeading?: string;
50
50
  placement: Placement;
51
51
  className?: string;
package/dist/index.js CHANGED
@@ -8655,7 +8655,7 @@ function TippyCustomized(props) {
8655
8655
  };
8656
8656
  var getTippyContent = function () {
8657
8657
  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;
8658
- 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
8658
+ 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
8659
8659
  ? 'p-12'
8660
8660
  : "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' })) })))] }));
8661
8661
  };
@@ -8795,35 +8795,39 @@ var ValidationRules = /** @class */ (function () {
8795
8795
  errorList.push('Key is required');
8796
8796
  }
8797
8797
  else {
8798
- var re = new RegExp('/', 'g');
8799
- var noOfSlashInKey = (_a = key.match(re)) === null || _a === void 0 ? void 0 : _a.length;
8800
- if (noOfSlashInKey > 1) {
8801
- errorList.push('Key: Max 1 ( / ) allowed');
8802
- }
8803
- else if (noOfSlashInKey === 1) {
8804
- var _b = __read(key.split('/'), 2), prefix = _b[0], name_1 = _b[1];
8805
- errorList.push.apply(errorList, __spreadArray([], __read(validateTagValue(name_1).map(function (error) { return "Name: ".concat(error); })), false));
8806
- if (prefix.length > 253) {
8807
- errorList.push('Prefix: Can be max 253 characters');
8798
+ if (!key.startsWith("devtron.ai/")) {
8799
+ var re = new RegExp('/', 'g');
8800
+ var noOfSlashInKey = (_a = key.match(re)) === null || _a === void 0 ? void 0 : _a.length;
8801
+ if (noOfSlashInKey > 1) {
8802
+ errorList.push('Key: Max 1 ( / ) allowed');
8808
8803
  }
8809
- var validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix);
8810
- if (!validPrefix) {
8811
- errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)');
8804
+ else if (noOfSlashInKey === 1) {
8805
+ var _b = __read(key.split('/'), 2), prefix = _b[0], name_1 = _b[1];
8806
+ errorList.push.apply(errorList, __spreadArray([], __read(validateTagValue(name_1).map(function (error) { return "Name: ".concat(error); })), false));
8807
+ if (prefix.length > 253) {
8808
+ errorList.push('Prefix: Can be max 253 characters');
8809
+ }
8810
+ var validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix);
8811
+ if (!validPrefix) {
8812
+ errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)');
8813
+ }
8814
+ }
8815
+ else {
8816
+ errorList.push.apply(errorList, __spreadArray([], __read(validateTagValue(key).map(function (error) { return "Name: ".concat(error); })), false));
8812
8817
  }
8813
- }
8814
- else {
8815
- errorList.push.apply(errorList, __spreadArray([], __read(validateTagValue(key).map(function (error) { return "Name: ".concat(error); })), false));
8816
8818
  }
8817
8819
  }
8818
8820
  return { isValid: errorList.length === 0, messages: errorList };
8819
8821
  };
8820
- this.propagateTagValue = function (value) {
8822
+ this.propagateTagValue = function (value, key) {
8821
8823
  var errorList = [];
8822
8824
  if (!value) {
8823
8825
  errorList.push('Value is required');
8824
8826
  }
8825
8827
  else {
8826
- errorList.push.apply(errorList, __spreadArray([], __read(validateTagValue(value)), false));
8828
+ if (!key.startsWith("devtron.ai/")) {
8829
+ errorList.push.apply(errorList, __spreadArray([], __read(validateTagValue(value)), false));
8830
+ }
8827
8831
  }
8828
8832
  return { isValid: errorList.length === 0, messages: errorList };
8829
8833
  };
@@ -8858,7 +8862,7 @@ var TagLabelValueSelector = function (_a) {
8858
8862
  : _tagData.value !== '';
8859
8863
  }
8860
8864
  else if (selectedValue || isRequired || _tagData.propagate) {
8861
- _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid;
8865
+ _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue, _tagData.key).isValid;
8862
8866
  _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey;
8863
8867
  }
8864
8868
  else {
@@ -8887,7 +8891,7 @@ var TagLabelValueSelector = function (_a) {
8887
8891
  }
8888
8892
  }
8889
8893
  else if (isRequired || selectedValue || tagData.propagate) {
8890
- field = validationRules.propagateTagValue(selectedValue);
8894
+ field = validationRules.propagateTagValue(selectedValue, tagData.key);
8891
8895
  }
8892
8896
  if (!field.isValid) {
8893
8897
  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) {
8939
8943
  _tagData.isInvalidKey =
8940
8944
  _tagData.key || _tagData.value ? !validationRules.propagateTagKey(_tagData.key).isValid : false;
8941
8945
  _tagData.isInvalidValue = _tagData.value
8942
- ? !validationRules.propagateTagValue(_tagData.value).isValid
8946
+ ? !validationRules.propagateTagValue(_tagData.value, _tagData.key).isValid
8943
8947
  : false;
8944
8948
  }
8945
8949
  setTagData(index, _tagData);
8946
8950
  };
8947
- 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" }) }))] })));
8951
+ 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" }) }))] })));
8948
8952
  };
8949
8953
 
8950
8954
  var _path$1;
@@ -8966,7 +8970,11 @@ var TagLabelSelect = function (_a) {
8966
8970
  var isCreateApp = _a.isCreateApp, labelTags = _a.labelTags, setLabelTags = _a.setLabelTags, _b = _a.tabIndex, tabIndex = _b === void 0 ? 0 : _b;
8967
8971
  var setTagData = function (index, tagValue) {
8968
8972
  var _tags = __spreadArray([], __read(labelTags), false);
8969
- _tags[index] = tagValue;
8973
+ var _tagValue = tagValue;
8974
+ if (_tagValue.key.startsWith("devtron.ai/")) {
8975
+ _tagValue.propagate = false;
8976
+ }
8977
+ _tags[index] = _tagValue;
8970
8978
  setLabelTags(_tags);
8971
8979
  };
8972
8980
  var addNewTag = function () {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@devtron-labs/devtron-fe-common-lib",
3
- "version": "0.0.7-beta-47",
3
+ "version": "0.0.7-beta-49",
4
4
  "description": "Supporting common component library",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/Common/CustomTagSelector/TagDetails.tsx CHANGED
@@ -33,7 +33,7 @@ export const TagDetails = ({
33
33
  _tagData.isInvalidKey =
34
34
  _tagData.key || _tagData.value ? !validationRules.propagateTagKey(_tagData.key).isValid : false
35
35
  _tagData.isInvalidValue = _tagData.value
36
- ? !validationRules.propagateTagValue(_tagData.value).isValid
36
+ ? !validationRules.propagateTagValue(_tagData.value, _tagData.key).isValid
37
37
  : false
38
38
  }
39
39
  setTagData(index, _tagData)
@@ -41,7 +41,7 @@ export const TagDetails = ({
41
41
  return (
42
42
  <div className="flexbox mb-8">
43
43
  <div
44
- className={`dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ${tagData.propagate ? 'bcn-7' : ''}`}
44
+ 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' : ''}`}
45
45
  onClick={propagateTagToResource}
46
46
  data-testid={`propagate-tag-${index}`}
47
47
  >
package/src/Common/CustomTagSelector/TagLabelSelect.tsx CHANGED
@@ -13,7 +13,11 @@ export const TagLabelSelect = ({
13
13
  }: TagLabelSelectType) => {
14
14
  const setTagData = (index, tagValue): void => {
15
15
  const _tags = [...labelTags]
16
- _tags[index] = tagValue
16
+ const _tagValue = tagValue
17
+ if(_tagValue.key.startsWith("devtron.ai/")){
18
+ _tagValue.propagate = false
19
+ }
20
+ _tags[index] = _tagValue
17
21
  setLabelTags(_tags)
18
22
  }
19
23
 
package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx CHANGED
@@ -50,7 +50,7 @@ export const TagLabelValueSelector = ({
50
50
  ? !validationRules.propagateTagKey(selectedValue).isValid
51
51
  : _tagData.value !== ''
52
52
  } else if (selectedValue || isRequired || _tagData.propagate) {
53
- _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid
53
+ _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue, _tagData.key).isValid
54
54
  _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey
55
55
  } else {
56
56
  _tagData.isInvalidValue = false
@@ -80,7 +80,7 @@ export const TagLabelValueSelector = ({
80
80
  field = validationRules.propagateTagKey(selectedValue)
81
81
  }
82
82
  } else if (isRequired || selectedValue || tagData.propagate) {
83
- field = validationRules.propagateTagValue(selectedValue)
83
+ field = validationRules.propagateTagValue(selectedValue, tagData.key)
84
84
  }
85
85
  if (!field.isValid) {
86
86
  return (
package/src/Common/CustomTagSelector/ValidationRules.ts CHANGED
@@ -21,33 +21,37 @@ export class ValidationRules {
21
21
  if (!key) {
22
22
  errorList.push('Key is required')
23
23
  } else {
24
- const re = new RegExp('/', 'g')
25
- const noOfSlashInKey = key.match(re)?.length
26
- if (noOfSlashInKey > 1) {
27
- errorList.push('Key: Max 1 ( / ) allowed')
28
- } else if (noOfSlashInKey === 1) {
29
- const [prefix, name] = key.split('/')
30
- errorList.push(...validateTagValue(name).map((error) => `Name: ${error}`))
31
- if (prefix.length > 253) {
32
- errorList.push('Prefix: Can be max 253 characters')
24
+ if(!key.startsWith("devtron.ai/")){
25
+ const re = new RegExp('/', 'g')
26
+ const noOfSlashInKey = key.match(re)?.length
27
+ if (noOfSlashInKey > 1) {
28
+ errorList.push('Key: Max 1 ( / ) allowed')
29
+ } else if (noOfSlashInKey === 1) {
30
+ const [prefix, name] = key.split('/')
31
+ errorList.push(...validateTagValue(name).map((error) => `Name: ${error}`))
32
+ if (prefix.length > 253) {
33
+ errorList.push('Prefix: Can be max 253 characters')
34
+ }
35
+ const validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix)
36
+ if (!validPrefix) {
37
+ errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)')
38
+ }
39
+ } else {
40
+ errorList.push(...validateTagValue(key).map((error) => `Name: ${error}`))
33
41
  }
34
- const validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix)
35
- if (!validPrefix) {
36
- errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)')
37
- }
38
- } else {
39
- errorList.push(...validateTagValue(key).map((error) => `Name: ${error}`))
40
42
  }
41
43
  }
42
44
  return { isValid: errorList.length === 0, messages: errorList }
43
45
  }
44
46
 
45
- propagateTagValue = (value: string): { isValid: boolean; messages: string[] } => {
47
+ propagateTagValue = (value: string, key: string): { isValid: boolean; messages: string[] } => {
46
48
  const errorList = []
47
49
  if (!value) {
48
50
  errorList.push('Value is required')
49
51
  } else {
50
- errorList.push(...validateTagValue(value))
52
+ if(!key.startsWith("devtron.ai/")){
53
+ errorList.push(...validateTagValue(value))
54
+ }
51
55
  }
52
56
  return { isValid: errorList.length === 0, messages: errorList }
53
57
  }
package/src/Common/TippyCustomized.tsx CHANGED
@@ -58,7 +58,7 @@ export function TippyCustomized(props: TippyCustomizedProps) {
58
58
  <img
59
59
  className={`icon-dim-${iconSize || 20} mr-6 ${iconClass || ''}`}
60
60
  src={iconPath}
61
- alt={heading}
61
+ alt={'Heading'}
62
62
  onError={onImageLoadError}
63
63
  />
64
64
  ) : (
package/src/Common/Types.ts CHANGED
@@ -51,7 +51,7 @@ export interface CheckboxProps {
51
51
  export interface TippyCustomizedProps {
52
52
  theme: TippyTheme
53
53
  visible?: boolean
54
- heading?: string
54
+ heading?: ReactNode | string
55
55
  infoTextHeading?: string
56
56
  placement: Placement
57
57
  className?: string