@devtron-labs/devtron-fe-common-lib 0.0.6-beta-15 → 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 default function 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

@@ -4049,7 +4049,7 @@ function useBreadcrumbContext() {
 
 React__default.createContext(null);
 function useBreadcrumb(props, deps) {
-    var sep = (props === null || props === void 0 ? void 0 : props.sep) || "/";
+    var sep = (props === null || props === void 0 ? void 0 : props.sep) || '/';
     deps = deps || [];
     var _a = useRouteMatch(), url = _a.url, path = _a.path;
     var params = useParams();
@@ -4071,12 +4071,12 @@ function useBreadcrumb(props, deps) {
         setState(function (state) { return (__assign(__assign({}, state), { alias: tempAlias })); });
     }
     var levels = useMemo(function () {
-        var paths = path.split("/").filter(Boolean);
-        var urls = url.split("/").filter(Boolean);
+        var paths = path.split('/').filter(Boolean);
+        var urls = url.split('/').filter(Boolean);
         return paths.map(function (path, idx) {
             var crumb = { to: urls[idx], name: path };
-            if (path.startsWith(":") && params[path.replace(":", "")]) {
-                crumb.className = "param";
+            if (path.startsWith(':') && params[path.replace(':', '')]) {
+                crumb.className = 'param';
             }
             return crumb;
         });
@@ -4091,22 +4091,22 @@ function useBreadcrumb(props, deps) {
                     ? "".concat(prefix).concat(to)
                     : null,
                 name: typeof state.alias[name] === 'object'
-                    ? !!((_d = state.alias[name]) === null || _d === void 0 ? void 0 : _d.component) ? state.alias[name].component : null
+                    ? !!((_d = state.alias[name]) === null || _d === void 0 ? void 0 : _d.component)
+                        ? state.alias[name].component
+                        : null
                     : state.alias[name] || name,
                 className: curr.className || '',
             });
             return { res: res, prefix: "".concat(prefix).concat(curr.to).concat(sep) };
-        }, { res: [], prefix: "/" });
+        }, { res: [], prefix: '/' });
     }, [levels, state]).res;
     return { breadcrumbs: breadcrumbs, setCrumb: setCrumb, resetCrumb: resetCrumb };
 }
 var BreadCrumb = function (_a) {
-    var breadcrumbs = _a.breadcrumbs, _b = _a.sep, sep = _b === void 0 ? "/" : _b, _c = _a.className, className = _c === void 0 ? "dc__devtron-breadcrumb__item" : _c;
+    var breadcrumbs = _a.breadcrumbs, _b = _a.sep, sep = _b === void 0 ? '/' : _b, _c = _a.className, className = _c === void 0 ? 'dc__devtron-breadcrumb__item' : _c;
     var url = useRouteMatch().url;
     var filteredCrumbs = breadcrumbs.filter(function (crumb) { return !!crumb.name; });
-    return jsx(React__default.Fragment, { children: filteredCrumbs.map(function (breadcrumb, idx) {
-            return jsxs(React__default.Fragment, { children: [jsx(ConditionalWrap, __assign({ condition: !!breadcrumb.to, wrap: function (children) { return jsx(Link, __assign({ className: "".concat(url === breadcrumb.to ? 'active' : '', " ").concat(className, " ").concat(breadcrumb.className || ""), to: breadcrumb.to }, { children: children })); } }, { children: breadcrumb.name })), idx + 1 !== filteredCrumbs.length && breadcrumb.name && jsx("span", __assign({ className: "".concat(className, "__separator cn-5") }, { children: sep }))] }, idx);
-        }) });
+    return (jsx(React__default.Fragment, { children: filteredCrumbs.map(function (breadcrumb, idx) { return (jsxs(React__default.Fragment, { children: [jsx(ConditionalWrap, __assign({ condition: !!breadcrumb.to, wrap: function (children) { return (jsx(Link, __assign({ className: "".concat(url === breadcrumb.to ? 'active' : '', " ").concat(className, " ").concat(breadcrumb.className || ''), to: breadcrumb.to }, { children: children }))); } }, { children: breadcrumb.name })), idx + 1 !== filteredCrumbs.length && breadcrumb.name && (jsx("span", __assign({ className: "".concat(className, "__separator cn-5") }, { children: sep })))] }, idx)); }) }));
 };
 
 var RadioGroupContext = createContext({ name: '', value: '', disabled: false, onChange: function (event) { } });
@@ -8423,19 +8423,18 @@ var SvgIcInfoOutlined = function SvgIcInfoOutlined(props) {
   })));
 };
 
-function TagLabelValueSelector(_a) {
+var TagLabelValueSelector = function (_a) {
     var selectedTagIndex = _a.selectedTagIndex, tagData = _a.tagData, setTagData = _a.setTagData, tagOptions = _a.tagOptions, isRequired = _a.isRequired, type = _a.type;
     var _b = __read(useState(''), 2), selectedValue = _b[0], setSelectedValue = _b[1];
     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 @@ function TagLabelValueSelector(_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 @@ function TagLabelValueSelector(_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" }))] })))] })));
         }
@@ -8493,7 +8488,7 @@ function TagLabelValueSelector(_a) {
     return (jsxs(PopupMenu, __assign({ onToggleCallback: function (isOpen) { return togglePopup(isOpen); }, autoClose: true }, { children: [jsx(PopupMenu.Button, __assign({ rootClassName: "".concat(type === 'key'
                     ? "dc__no-right-radius"
                     : "dc__no-border-radius dc__no-right-border dc__no-left-border", " ").concat(tagData[type === 'key' ? 'isInvalidKey' : 'isInvalidValue'] ? 'er-5 bw-1' : '') }, { children: jsx("input", { type: "text", className: "form__input pt-4-imp pb-4-imp dc__no-border", value: selectedValue, onChange: handleInputChange, onBlur: handleOnBlur }) })), jsx(PopupMenu.Body, __assign({ rootClassName: "tag-".concat(selectedTagIndex, "-class"), autoWidth: true }, { children: isPopupOpen && renderSuggestions() }))] })));
-}
+};
 
 function TagDetails(_a) {
     var index = _a.index, tagData = _a.tagData, setTagData = _a.setTagData, removeTag = _a.removeTag;
@@ -8615,4 +8610,4 @@ function ForceDeleteDialog(_a) {
     return (jsx("div", { children: jsx(DeleteDialog, __assign({ title: forceDeleteDialogTitle, delete: onClickDelete, closeDelete: closeDeleteModal, deletePrefix: "Force " }, { children: jsxs(DeleteDialog.Description, { children: [jsxs("p", __assign({ className: "mt-12 mb-12 p-8 dc__break-word dc__window-bg" }, { children: ["Error: ", forceDeleteDialogMessage] })), jsx("p", { children: "Do you want to force delete?" })] }) })) }));
 }
 
-export { BreadCrumb, Store as BreadcrumbStore, ConditionalWrap, ConfirmationDialog, DeleteDialog, DetailsProgressing, DialogForm, DialogFormSubmit, Drawer, ErrorScreenManager, ErrorScreenNotAuthorized, ForceDeleteDialog, Host, Modal, OpaqueModal, PATTERNS, PopupMenu, Progressing, RadioGroup, RadioGroupItem, RequestTimeout, ServerError, ServerErrors, TagLabelSelect, TippyCustomized, TippyTheme, ToastBody, ToastBody3, ToastBodyWithButton, VisibleModal, VisibleModal2, get, post, put, showError, toastAccessDenied, trash, useBreadcrumb };
+export { BreadCrumb, Store as BreadcrumbStore, ConditionalWrap, ConfirmationDialog, DeleteDialog, DetailsProgressing, DialogForm, DialogFormSubmit, Drawer, ErrorScreenManager, ErrorScreenNotAuthorized, ForceDeleteDialog, Host, Modal, OpaqueModal, PATTERNS, PopupMenu, Progressing, RadioGroup, RadioGroupItem, RequestTimeout, ServerError, ServerErrors, TagLabelSelect, TagLabelValueSelector, TippyCustomized, TippyTheme, ToastBody, ToastBody3, ToastBodyWithButton, VisibleModal, VisibleModal2, get, post, put, showError, toastAccessDenied, trash, useBreadcrumb };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.6-beta-15",
+    "version": "0.0.6-beta-17",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
@@ -40,6 +40,7 @@
     "peerDependencies": {
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-router": "^5.3.0",
         "react-router-dom": "^5.3.0"
     },
     "dependencies": {

package/src/Common/BreadCrumb/BreadCrumb.tsx

@@ -1,36 +1,35 @@
 import React, { useMemo, useEffect } from 'react'
-import { Link, useRouteMatch, useParams } from 'react-router-dom';
+import { Link, useRouteMatch, useParams } from 'react-router-dom'
 import { useBreadcrumbContext } from './BreadcrumbStore'
-import { ConditionalWrap } from '../Helper';
+import { ConditionalWrap } from '../Helper'
 export const BreadcrumbContext = React.createContext(null)
 
-
 interface Breadcrumb {
-    to: string;
-    name: string;
-    className?: string;
+    to: string
+    name: string
+    className?: string
 }
 
 interface UseBreadcrumbState {
-    breadcrumbs: Breadcrumb[];
-    setCrumb: (props: { [key: string]: any; }) => void;
-    resetCrumb: (props: string[]) => void;
+    breadcrumbs: Breadcrumb[]
+    setCrumb: (props: { [key: string]: any }) => void
+    resetCrumb: (props: string[]) => void
 }
 
 interface AdvancedAlias {
-    component: any;
-    linked: boolean;
+    component: any
+    linked: boolean
 }
 
 interface UseBreadcrumbProps {
-    sep?: string;
-    alias?: { [key: string]: AdvancedAlias | any; }
+    sep?: string
+    alias?: { [key: string]: AdvancedAlias | any }
 }
 
 type UseBreadcrumbOptionalProps = UseBreadcrumbProps | null
 
 export function useBreadcrumb(props?: UseBreadcrumbOptionalProps, deps?: any[]): UseBreadcrumbState {
-    let sep = props?.sep || "/"
+    let sep = props?.sep || '/'
     deps = deps || []
     const { url, path } = useRouteMatch()
     const params = useParams()
@@ -38,12 +37,12 @@ export function useBreadcrumb(props?: UseBreadcrumbOptionalProps, deps?: any[]):
 
     useEffect(() => {
         if (!props || !props.alias) return
-        setState(state => ({ ...state, alias: { ...state.alias, ...props.alias } }))
+        setState((state) => ({ ...state, alias: { ...state.alias, ...props.alias } }))
         return () => resetCrumb(Object.keys(props.alias))
     }, deps)
 
     function setCrumb(props) {
-        setState(state => ({ ...state, alias: { ...state.alias, ...props } }))
+        setState((state) => ({ ...state, alias: { ...state.alias, ...props } }))
     }
 
     function resetCrumb(props: string[]) {
@@ -51,36 +50,42 @@ export function useBreadcrumb(props?: UseBreadcrumbOptionalProps, deps?: any[]):
             delete agg[curr]
             return agg
         }, state.alias)
-        setState(state => ({ ...state, alias: tempAlias }))
+        setState((state) => ({ ...state, alias: tempAlias }))
     }
 
     let levels: Breadcrumb[] = useMemo(() => {
-        const paths = path.split("/").filter(Boolean)
-        const urls = url.split("/").filter(Boolean)
+        const paths = path.split('/').filter(Boolean)
+        const urls = url.split('/').filter(Boolean)
         return paths.map((path, idx) => {
             const crumb: Breadcrumb = { to: urls[idx], name: path }
-            if (path.startsWith(":") && params[path.replace(":", "")]) {
-                crumb.className = "param"
+            if (path.startsWith(':') && params[path.replace(':', '')]) {
+                crumb.className = 'param'
             }
             return crumb
         })
     }, [path, url])
     const { res: breadcrumbs } = useMemo(() => {
-        return levels.reduce((agg, curr, idx) => {
-            const { res, prefix } = agg
-            const { to, name } = curr
-            res.push({
-                to:
-                    !state.alias[name]?.component || (state.alias[name]?.component && state.alias[name]?.linked)
-                        ? `${prefix}${to}`
-                        : null,
-                name: typeof state.alias[name] === 'object'
-                    ? !!state.alias[name]?.component ? state.alias[name].component : null
-                    : state.alias[name] || name,
-                className: curr.className || '',
-            });
-            return { res, prefix: `${prefix}${curr.to}${sep}` }
-        }, { res: [], prefix: "/" })
+        return levels.reduce(
+            (agg, curr, idx) => {
+                const { res, prefix } = agg
+                const { to, name } = curr
+                res.push({
+                    to:
+                        !state.alias[name]?.component || (state.alias[name]?.component && state.alias[name]?.linked)
+                            ? `${prefix}${to}`
+                            : null,
+                    name:
+                        typeof state.alias[name] === 'object'
+                            ? !!state.alias[name]?.component
+                                ? state.alias[name].component
+                                : null
+                            : state.alias[name] || name,
+                    className: curr.className || '',
+                })
+                return { res, prefix: `${prefix}${curr.to}${sep}` }
+            },
+            { res: [], prefix: '/' },
+        )
     }, [levels, state])
 
     return { breadcrumbs, setCrumb, resetCrumb }
@@ -88,27 +93,42 @@ export function useBreadcrumb(props?: UseBreadcrumbOptionalProps, deps?: any[]):
 
 interface Breadcrumbs {
     breadcrumbs: Breadcrumb[]
-    sep?: string;
-    className?: string;
-};
+    sep?: string
+    className?: string
+}
 
-export const BreadCrumb: React.FC<Breadcrumbs> = ({ breadcrumbs, sep = "/", className = "dc__devtron-breadcrumb__item" }) => {
+export const BreadCrumb: React.FC<Breadcrumbs> = ({
+    breadcrumbs,
+    sep = '/',
+    className = 'dc__devtron-breadcrumb__item',
+}) => {
     const { url } = useRouteMatch()
-    const filteredCrumbs = breadcrumbs.filter(crumb => !!crumb.name)
-    return <React.Fragment>
-        {filteredCrumbs.map((breadcrumb, idx) =>
-            <React.Fragment key={idx}>
-                <ConditionalWrap
-                    condition={!!breadcrumb.to}
-                    wrap={children => <Link className={`${url === breadcrumb.to ? 'active' : ''} ${className} ${breadcrumb.className || ""}`} to={breadcrumb.to}>
-                        {children}
-                    </Link>}
-                >
-                    {breadcrumb.name}
-                </ConditionalWrap>
+    const filteredCrumbs = breadcrumbs.filter((crumb) => !!crumb.name)
+    return (
+        <React.Fragment>
+            {filteredCrumbs.map((breadcrumb, idx) => (
+                <React.Fragment key={idx}>
+                    <ConditionalWrap
+                        condition={!!breadcrumb.to}
+                        wrap={(children) => (
+                            <Link
+                                className={`${url === breadcrumb.to ? 'active' : ''} ${className} ${
+                                    breadcrumb.className || ''
+                                }`}
+                                to={breadcrumb.to}
+                            >
+                                {children}
+                            </Link>
+                        )}
+                    >
+                        {breadcrumb.name}
+                    </ConditionalWrap>
 
-                {idx + 1 !== filteredCrumbs.length && breadcrumb.name && <span className={`${className}__separator cn-5`}>{sep}</span>}
-            </React.Fragment>
-        )}
-    </React.Fragment>
-}
+                    {idx + 1 !== filteredCrumbs.length && breadcrumb.name && (
+                        <span className={`${className}__separator cn-5`}>{sep}</span>
+                    )}
+                </React.Fragment>
+            ))}
+        </React.Fragment>
+    )
+}

package/src/Common/CustomTagSelector/TagDetails.tsx

@@ -1,20 +1,15 @@
 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 TagLabelValueSelector from './TagLabelValueSelector'
+import { TagDetailType } from '../Types'
+import { TagLabelValueSelector } from './TagLabelValueSelector'
 
 export default function TagDetails({
     index,
     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,40 +1,32 @@
 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'
 import { ReactComponent as Info } from '../../Assets/Icon/ic-info-outlined.svg'
 
-export default function TagLabelValueSelector({
+export const TagLabelValueSelector = ({
     selectedTagIndex,
     tagData,
     setTagData,
     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 default function 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 default function 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
 }