@devtron-labs/devtron-fe-common-lib 0.0.6-beta-16 → 0.0.6-beta-17

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

@@ -1,8 +1,3 @@
 /// <reference types="react" />
-import { TagType } from '../Types';
-export default function TagDetails({ index, tagData, setTagData, removeTag, }: {
-    index: number;
-    tagData: TagType;
-    setTagData: (index: number, tagData: TagType) => void;
-    removeTag: (index: number) => void;
-}): JSX.Element;
+import { TagDetailType } from '../Types';
+export default function TagDetails({ index, tagData, setTagData, removeTag, }: TagDetailType): JSX.Element;

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

@@ -1,6 +1,3 @@
 /// <reference types="react" />
-import { TagType } from '../Types';
-export declare const TagLabelSelect: ({ labelTags, setLabelTags, }: {
-    labelTags: TagType[];
-    setLabelTags: (tagList: TagType[]) => void;
-}) => JSX.Element;
+import { TagLabelSelectType } from '../Types';
+export declare const TagLabelSelect: ({ labelTags, setLabelTags }: TagLabelSelectType) => JSX.Element;

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

@@ -1,10 +1,3 @@
 /// <reference types="react" />
-import { OptionType, TagType } from '../Types';
-export declare const TagLabelValueSelector: ({ selectedTagIndex, tagData, setTagData, tagOptions, isRequired, type, }: {
-    selectedTagIndex: number;
-    tagData: TagType;
-    setTagData: (index: number, tagData: TagType) => void;
-    tagOptions?: OptionType[];
-    isRequired?: boolean;
-    type?: string;
-}) => JSX.Element;
+import { TagLabelValueSelectorType } from '../Types';
+export declare const TagLabelValueSelector: ({ selectedTagIndex, tagData, setTagData, tagOptions, isRequired, type, }: TagLabelValueSelectorType) => JSX.Element;

package/dist/Common/Types.d.ts

@@ -25,3 +25,21 @@ export declare enum TippyTheme {
     black = "black",
     white = "white"
 }
+export interface TagLabelSelectType {
+    labelTags: TagType[];
+    setLabelTags: (tagList: TagType[]) => void;
+}
+export interface TagDetailType {
+    index: number;
+    tagData: TagType;
+    setTagData: (index: number, tagData: TagType) => void;
+    removeTag: (index: number) => void;
+}
+export interface TagLabelValueSelectorType {
+    selectedTagIndex: number;
+    tagData: TagType;
+    setTagData: (index: number, tagData: TagType) => void;
+    tagOptions?: OptionType[];
+    isRequired?: boolean;
+    type?: string;
+}

package/dist/index.js

@@ -8429,13 +8429,12 @@ var TagLabelValueSelector = function (_a) {
     var _c = __read(useState(false), 2), isPopupOpen = _c[0], togglePopup = _c[1];
     var validationRules = new ValidationRules();
     useEffect(function () {
-        var _tagData = __assign({}, tagData);
-        setSelectedValue(_tagData[type]);
+        setSelectedValue((tagData === null || tagData === void 0 ? void 0 : tagData[type]) || '');
     }, [selectedTagIndex, tagData, type]);
     var handleOnBlur = function (e) {
         if (!e.relatedTarget ||
             !e.relatedTarget.classList.value ||
-            e.relatedTarget.classList.value.indexOf("tag-".concat(selectedTagIndex, "-class")) === -1) {
+            !e.relatedTarget.classList.value.includes("tag-".concat(selectedTagIndex, "-class"))) {
             var _tagData = __assign({}, tagData);
             _tagData[type] = selectedValue;
             if (type === 'key') {
@@ -8443,15 +8442,13 @@ var TagLabelValueSelector = function (_a) {
                     ? !validationRules.propagateTagKey(selectedValue).isValid
                     : _tagData.value !== '';
             }
+            else if (selectedValue) {
+                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid;
+                _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey;
+            }
             else {
-                if (selectedValue) {
-                    _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid;
-                    _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey;
-                }
-                else {
-                    _tagData.isInvalidValue = false;
-                    _tagData.isInvalidKey = !_tagData.key ? false : _tagData.isInvalidKey;
-                }
+                _tagData.isInvalidValue = false;
+                _tagData.isInvalidKey = !_tagData.key ? false : _tagData.isInvalidKey;
             }
             setTagData(selectedTagIndex, _tagData);
         }
@@ -8466,14 +8463,12 @@ var TagLabelValueSelector = function (_a) {
     };
     var renderValidationsSuggestions = function () {
         var field = { isValid: true, messages: [] };
-        if (type === 'value') {
-            if (isRequired || selectedValue) {
-                field = validationRules.propagateTagValue(selectedValue);
-            }
-        }
-        else {
+        if (type === 'key') {
             field = validationRules.propagateTagKey(selectedValue);
         }
+        else if (isRequired || selectedValue) {
+            field = validationRules.propagateTagValue(selectedValue);
+        }
         if (!field.isValid) {
             return (jsxs("div", __assign({ className: "p-4" }, { children: [field.messages.map(function (error) { return (jsxs("div", __assign({ className: "flexbox p-4" }, { children: [jsx("span", { children: jsx(SvgIcClose, { className: "icon-dim-14 scr-5 mt-3 mr-4" }) }), jsx("span", { children: error })] }), error)); }), type === 'key' && (jsxs("div", __assign({ className: "flexbox p-4" }, { children: [jsx("span", { children: jsx(SvgIcInfoOutlined, { className: "icon-dim-14 mt-3 mr-4" }) }), jsx("span", __assign({ className: "dc__italic-font-style" }, { children: "Key format: prefix/name or name" }))] })))] })));
         }

package/package.json

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

package/src/Common/CustomTagSelector/TagDetails.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { ReactComponent as DeleteCross } from '../../Assets/Icon/ic-close.svg'
 import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg'
-import { TagType } from '../Types'
+import { TagDetailType } from '../Types'
 import { TagLabelValueSelector } from './TagLabelValueSelector'
 
 export default function TagDetails({
@@ -9,12 +9,7 @@ export default function TagDetails({
     tagData,
     setTagData,
     removeTag,
-}: {
-    index: number
-    tagData: TagType
-    setTagData: (index: number, tagData: TagType) => void
-    removeTag: (index: number) => void
-}) {
+}: TagDetailType) {
     const deleteTag = (): void => {
         removeTag(index)
     }

package/src/Common/CustomTagSelector/TagLabelSelect.tsx

@@ -2,15 +2,9 @@ import React from 'react'
 import PropagateTagInfo from './PropagateTagInfo'
 import { ReactComponent as Add } from '../../Assets/Icon/ic-add.svg'
 import TagDetails from './TagDetails'
-import { TagType } from '../Types'
+import { TagLabelSelectType } from '../Types'
 
-export const TagLabelSelect = ({
-    labelTags,
-    setLabelTags,
-}: {
-    labelTags: TagType[]
-    setLabelTags: (tagList: TagType[]) => void
-}) => {
+export const TagLabelSelect = ({ labelTags, setLabelTags }: TagLabelSelectType) => {
     const setTagData = (index, tagValue): void => {
         const _tags = [...labelTags]
         _tags[index] = tagValue

package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { OptionType, TagType } from '../Types'
+import { TagLabelValueSelectorType } from '../Types'
 import PopupMenu from '../PopupMenu'
 import { ValidationRules } from './ValidationRules'
 import { ReactComponent as ErrorCross } from '../../Assets/Icon/ic-close.svg'
@@ -12,29 +12,21 @@ export const TagLabelValueSelector = ({
     tagOptions,
     isRequired,
     type,
-}: {
-    selectedTagIndex: number
-    tagData: TagType
-    setTagData: (index: number, tagData: TagType) => void
-    tagOptions?: OptionType[]
-    isRequired?: boolean
-    type?: string
-}) => {
+}: TagLabelValueSelectorType) => {
     const [selectedValue, setSelectedValue] = useState<string>('')
     const [isPopupOpen, togglePopup] = useState<boolean>(false)
 
     const validationRules = new ValidationRules()
 
     useEffect(() => {
-        const _tagData = { ...tagData }
-        setSelectedValue(_tagData[type])
+        setSelectedValue(tagData?.[type] || '')
     }, [selectedTagIndex, tagData, type])
 
     const handleOnBlur = (e) => {
         if (
             !e.relatedTarget ||
             !e.relatedTarget.classList.value ||
-            e.relatedTarget.classList.value.indexOf(`tag-${selectedTagIndex}-class`) === -1
+            !e.relatedTarget.classList.value.includes(`tag-${selectedTagIndex}-class`)
         ) {
             const _tagData = { ...tagData }
             _tagData[type] = selectedValue
@@ -42,14 +34,12 @@ export const TagLabelValueSelector = ({
                 _tagData.isInvalidKey = selectedValue
                     ? !validationRules.propagateTagKey(selectedValue).isValid
                     : _tagData.value !== ''
+            } else if (selectedValue) {
+                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid
+                _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey
             } else {
-                if (selectedValue) {
-                    _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid
-                    _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey
-                } else {
-                    _tagData.isInvalidValue = false
-                    _tagData.isInvalidKey = !_tagData.key ? false : _tagData.isInvalidKey
-                }
+                _tagData.isInvalidValue = false
+                _tagData.isInvalidKey = !_tagData.key ? false : _tagData.isInvalidKey
             }
             setTagData(selectedTagIndex, _tagData)
         }
@@ -67,12 +57,10 @@ export const TagLabelValueSelector = ({
 
     const renderValidationsSuggestions = (): JSX.Element => {
         let field = { isValid: true, messages: [] }
-        if (type === 'value') {
-            if (isRequired || selectedValue) {
-                field = validationRules.propagateTagValue(selectedValue)
-            }
-        } else {
+        if (type === 'key') {
             field = validationRules.propagateTagKey(selectedValue)
+        } else if (isRequired || selectedValue) {
+            field = validationRules.propagateTagValue(selectedValue)
         }
         if (!field.isValid) {
             return (

package/src/Common/CustomTagSelector/ValidationRules.ts

@@ -5,11 +5,11 @@ const validateTagValue = (value: string): string[] => {
     if (value.length > 63) {
         errorList.push('Can be max 63 characters')
     }
-    let firstLastAlphanumeric = PATTERNS.START_END_ALPHANUMERIC.test(value)
+    const firstLastAlphanumeric = PATTERNS.START_END_ALPHANUMERIC.test(value)
     if (!firstLastAlphanumeric) {
         errorList.push('Must start and end with an alphanumeric character')
     }
-    let validValue = PATTERNS.ALPHANUMERIC_WITH_SPECIAL_CHAR.test(value)
+    const validValue = PATTERNS.ALPHANUMERIC_WITH_SPECIAL_CHAR.test(value)
     if (!validValue) {
         errorList.push('Can only contain alphanumeric chars and (-), (_), (.)')
     }
@@ -32,7 +32,7 @@ export class ValidationRules {
                 if (prefix.length > 253) {
                     errorList.push('Prefix: Can be max 253 characters')
                 }
-                let validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix)
+                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 (.)')
                 }

package/src/Common/Types.ts

@@ -1,3 +1,5 @@
+import { TagLabelSelect } from './CustomTagSelector'
+
 export interface ResponseType {
     code: number
     status: string
@@ -12,20 +14,41 @@ export interface APIOptions {
 }
 
 export interface TagType {
-  key:string
-  value?: string
-  description?: string
-  propagate: boolean
-  isInvalidKey?: boolean
-  isInvalidValue?: boolean
+    key: string
+    value?: string
+    description?: string
+    propagate: boolean
+    isInvalidKey?: boolean
+    isInvalidValue?: boolean
 }
 
 export interface OptionType {
-    label: string;
-    value: string;
+    label: string
+    value: string
 }
 
 export enum TippyTheme {
     black = 'black',
     white = 'white',
+}
+
+export interface TagLabelSelectType {
+    labelTags: TagType[]
+    setLabelTags: (tagList: TagType[]) => void
+}
+
+export interface TagDetailType {
+    index: number
+    tagData: TagType
+    setTagData: (index: number, tagData: TagType) => void
+    removeTag: (index: number) => void
+}
+
+export interface TagLabelValueSelectorType {
+  selectedTagIndex: number
+  tagData: TagType
+  setTagData: (index: number, tagData: TagType) => void
+  tagOptions?: OptionType[]
+  isRequired?: boolean
+  type?: string
 }