@devtron-labs/devtron-fe-common-lib 0.0.6-beta-24 → 0.0.6-beta-26

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { ResizableTagTextAreaProps } from '../Types';
+import { ResizableTagTextAreaProps } from './Types';
 export declare function ResizableTagTextArea({ className, minHeight, maxHeight, value, onChange, onBlur, onFocus, placeholder, tabIndex, refVar, dependentRef, }: ResizableTagTextAreaProps): JSX.Element;

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

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

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

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

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { TagLabelValueSelectorType } from '../Types';
+import { TagLabelValueSelectorType } from './Types';
 export declare const TagLabelValueSelector: ({ selectedTagIndex, tagData, setTagData, tagOptions, isRequired, tagInputType, placeholder, tabIndex, refVar, dependentRef, }: TagLabelValueSelectorType) => JSX.Element;

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

@@ -0,0 +1,59 @@
+/// <reference types="react" />
+import { KEY_VALUE } from '../Constants';
+import { OptionType } from '../Types';
+export interface TagType {
+    id?: number;
+    key: string;
+    value?: string;
+    description?: string;
+    propagate: boolean;
+    mandatoryProjectIdsCsv?: string;
+    isInvalidKey?: boolean;
+    isInvalidValue?: boolean;
+    isSuggested?: boolean;
+}
+export interface TagErrorType {
+    isValid: boolean;
+    messages: string[];
+}
+export interface TagLabelSelectType {
+    isCreateApp?: boolean;
+    labelTags: TagType[];
+    setLabelTags: (tagList: TagType[]) => void;
+    tabIndex?: number;
+    selectedProjectId?: number;
+    suggestedTagsOptions?: OptionType[];
+}
+export interface TagDetailType {
+    index: number;
+    tagData: TagType;
+    setTagData: (index: number, tagData: TagType) => void;
+    removeTag?: (index: number) => void;
+    tabIndex?: number;
+    suggestedTagsOptions?: OptionType[];
+}
+export interface TagLabelValueSelectorType {
+    selectedTagIndex: number;
+    tagData: TagType;
+    setTagData: (index: number, tagData: TagType) => void;
+    tagOptions?: OptionType[];
+    isRequired?: boolean;
+    tagInputType?: KEY_VALUE;
+    placeholder?: string;
+    tabIndex?: number;
+    refVar?: React.MutableRefObject<HTMLTextAreaElement>;
+    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>;
+}
+export interface ResizableTagTextAreaProps {
+    className?: string;
+    minHeight?: number;
+    maxHeight?: number;
+    value?: string;
+    onChange?: (e: any) => void;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+    placeholder?: string;
+    tabIndex?: number;
+    refVar?: React.MutableRefObject<HTMLTextAreaElement>;
+    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>;
+}

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

@@ -1,3 +1,6 @@
+export { default as PropagateTagInfo } from './PropagateTagInfo';
+export * from './TagDetails';
 export * from './TagLabelSelect';
 export * from './TagLabelValueSelector';
 export * from './ResizableTagTextArea';
+export * from './Types';

package/dist/Common/Types.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-import { KEY_VALUE } from './Constants';
 export interface ResponseType {
     code: number;
     status: string;
@@ -19,58 +17,6 @@ export declare enum TippyTheme {
     black = "black",
     white = "white"
 }
-export interface TagType {
-    id?: number;
-    key: string;
-    value?: string;
-    description?: string;
-    propagate: boolean;
-    mandatoryProjectIdsCsv?: string;
-    isInvalidKey?: boolean;
-    isInvalidValue?: boolean;
-}
-export interface TagErrorType {
-    isValid: boolean;
-    messages: string[];
-}
-export interface TagLabelSelectType {
-    isCreateApp?: boolean;
-    labelTags: TagType[];
-    setLabelTags: (tagList: TagType[]) => void;
-    tabIndex?: number;
-}
-export interface TagDetailType {
-    index: number;
-    tagData: TagType;
-    setTagData: (index: number, tagData: TagType) => void;
-    removeTag: (index: number) => void;
-    tabIndex?: number;
-}
-export interface TagLabelValueSelectorType {
-    selectedTagIndex: number;
-    tagData: TagType;
-    setTagData: (index: number, tagData: TagType) => void;
-    tagOptions?: OptionType[];
-    isRequired?: boolean;
-    tagInputType?: KEY_VALUE;
-    placeholder?: string;
-    tabIndex?: number;
-    refVar?: React.MutableRefObject<HTMLTextAreaElement>;
-    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>;
-}
-export interface ResizableTagTextAreaProps {
-    className?: string;
-    minHeight?: number;
-    maxHeight?: number;
-    value?: string;
-    onChange?: (e: any) => void;
-    onBlur?: (e: any) => void;
-    onFocus?: (e: any) => void;
-    placeholder?: string;
-    tabIndex?: number;
-    refVar?: React.MutableRefObject<HTMLTextAreaElement>;
-    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>;
-}
 export interface TeamList extends ResponseType {
     result: Teams[];
 }

package/dist/index.js

@@ -8480,21 +8480,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 _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 SvgIcAdd = function SvgIcAdd(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 24 24"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
-    className: "ic-add_svg__fill-color",
-    fill: "#999",
-    d: "M18 13h-5v5a1 1 0 0 1-2 0v-5H6a1 1 0 0 1 0-2h5V6a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"
-  })));
-};
-
 var validateTagValue = function (value) {
     var errorList = [];
     if (value.length > 63) {
@@ -8555,15 +8540,15 @@ var ValidationRules = /** @class */ (function () {
     return ValidationRules;
 }());
 
-var _path$1;
-function _extends$4() { _extends$4 = 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$4.apply(this, arguments); }
+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) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 20"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M10 1.667c4.6 0 8.333 3.733 8.333 8.333S14.6 18.333 10 18.333 1.667 14.6 1.667 10 5.4 1.667 10 1.667zm0 1.666A6.67 6.67 0 0 0 3.333 10 6.67 6.67 0 0 0 10 16.667 6.67 6.67 0 0 0 16.667 10 6.67 6.67 0 0 0 10 3.333zm0 5.834c.46 0 .833.373.833.833v3.333a.834.834 0 1 1-1.666 0V10c0-.46.373-.833.833-.833zm0-3.334A.833.833 0 1 1 10 7.5a.833.833 0 0 1 0-1.667z",
     fill: "#06C",
     fillRule: "evenodd"
@@ -8625,10 +8610,10 @@ var TagLabelValueSelector = function (_a) {
         }, 300);
     };
     var handleOnBlur = function (e) {
-        setActiveElement('');
         if (!e.relatedTarget ||
             !e.relatedTarget.classList.value ||
             !e.relatedTarget.classList.value.includes("tag-".concat(selectedTagIndex, "-class"))) {
+            setActiveElement('');
             var _tagData = __assign({}, tagData);
             _tagData[tagInputType] = selectedValue;
             if (tagInputType === exports.KEY_VALUE.KEY) {
@@ -8675,9 +8660,7 @@ var TagLabelValueSelector = function (_a) {
         if (tagOptions === null || tagOptions === void 0 ? void 0 : tagOptions.length) {
             var filteredTags = tagOptions.filter(function (tag) { return tag.value.indexOf(selectedValue) >= 0; });
             if (filteredTags.length) {
-                return (jsxRuntime.jsx("div", __assign({ className: "p-8" }, { children: tagOptions
-                        .filter(function (tag) { return tag.value.indexOf(selectedValue) >= 0; })
-                        .map(function (tag, index) { return (jsxRuntime.jsx("div", __assign({ "data-key": "".concat(tag.value, "-").concat(index), className: "cursor", onClick: onSelectValue }, { children: tag.label }))); }) })));
+                return (jsxRuntime.jsx("div", { children: filteredTags.map(function (tag, index) { return (jsxRuntime.jsx("div", __assign({ "data-key": tag.label, className: "dc__hover-n50 lh-20 fs-13 fw-6 pt-6 pr-8 pb-6 pl-8 cursor", onClick: onSelectValue }, { children: tag.label }), "".concat(tag.value, "-").concat(index))); }) }));
             }
         }
         return renderValidationsSuggestions();
@@ -8689,8 +8672,8 @@ var TagLabelValueSelector = function (_a) {
                         : ''), value: selectedValue, onChange: handleInputChange, onBlur: handleOnBlur, onFocus: handleOnFocus, placeholder: placeholder, tabIndex: tabIndex, refVar: refVar, dependentRef: dependentRef }) })), jsxRuntime.jsx(PopupMenu.Body, __assign({ rootClassName: "tag-".concat(selectedTagIndex, "-class"), autoWidth: true, preventWheelDisable: true }, { children: activeElement === "tag-".concat(tagInputType, "-").concat(selectedTagIndex) && renderSuggestions() }))] })));
 };
 
-function TagDetails(_a) {
-    var index = _a.index, tagData = _a.tagData, setTagData = _a.setTagData, removeTag = _a.removeTag, _b = _a.tabIndex, tabIndex = _b === void 0 ? 1 : _b;
+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 deleteTag = function (e) {
@@ -8702,8 +8685,23 @@ function TagDetails(_a) {
         _tagData.propagate = !_tagData.propagate;
         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 }, { 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 }), 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 }, { children: jsxRuntime.jsx(SvgIcClose, { 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' : ''), onClick: propagateTagToResource }, { 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 }, { children: jsxRuntime.jsx(SvgIcClose, { className: "icon-dim-20 mt-4" }) }))] })));
+};
+
+var _path$1;
+function _extends$4() { _extends$4 = 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$4.apply(this, arguments); }
+var SvgIcAdd = function SvgIcAdd(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "ic-add_svg__fill-color",
+    fill: "#999",
+    d: "M18 13h-5v5a1 1 0 0 1-2 0v-5H6a1 1 0 0 1 0-2h5V6a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"
+  })));
+};
 
 var TagLabelSelect = function (_a) {
     var isCreateApp = _a.isCreateApp, labelTags = _a.labelTags, setLabelTags = _a.setLabelTags, _b = _a.tabIndex, tabIndex = _b === void 0 ? 0 : _b;
@@ -16393,6 +16391,7 @@ exports.Option = Option;
 exports.PATTERNS = PATTERNS;
 exports.PopupMenu = PopupMenu;
 exports.Progressing = Progressing;
+exports.PropagateTagInfo = PropagateTagInfo;
 exports.ROUTES = ROUTES;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
@@ -16402,6 +16401,7 @@ exports.ServerError = ServerError;
 exports.ServerErrors = ServerErrors;
 exports.SingleSelectOption = SingleSelectOption;
 exports.TOAST_ACCESS_DENIED = TOAST_ACCESS_DENIED;
+exports.TagDetails = TagDetails;
 exports.TagLabelSelect = TagLabelSelect;
 exports.TagLabelValueSelector = TagLabelValueSelector;
 exports.TippyCustomized = TippyCustomized;

package/package.json

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

package/src/Common/CustomTagSelector/ResizableTagTextArea.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useThrottledEffect } from '../Helper'
-import { ResizableTagTextAreaProps } from '../Types'
+import { ResizableTagTextAreaProps } from './Types'
 
 export function ResizableTagTextArea({
     className,

package/src/Common/CustomTagSelector/TagDetails.tsx

@@ -1,12 +1,19 @@
 import React, { useRef } from 'react'
 import { ReactComponent as DeleteCross } from '../../Assets/Icon/ic-close.svg'
 import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg'
-import { TagDetailType } from '../Types'
 import { TagLabelValueSelector } from './TagLabelValueSelector'
 import { KEY_VALUE } from '../Constants'
 import { stopPropagation } from '../Helper'
+import { TagDetailType } from './Types'
 
-export default function TagDetails({ index, tagData, setTagData, removeTag, tabIndex = 1 }: TagDetailType) {
+export const TagDetails = ({
+    index,
+    tagData,
+    setTagData,
+    removeTag,
+    tabIndex = 1,
+    suggestedTagsOptions,
+}: TagDetailType) => {
     const keyRef = useRef(null)
     const valueRef = useRef(null)
 
@@ -36,6 +43,7 @@ export default function TagDetails({ index, tagData, setTagData, removeTag, tabI
                 tabIndex={tabIndex - 1}
                 refVar={keyRef}
                 dependentRef={valueRef}
+                tagOptions={suggestedTagsOptions}
             />
             <TagLabelValueSelector
                 selectedTagIndex={index}

package/src/Common/CustomTagSelector/TagLabelSelect.tsx

@@ -1,11 +1,16 @@
 import React from 'react'
 import PropagateTagInfo from './PropagateTagInfo'
 import { ReactComponent as Add } from '../../Assets/Icon/ic-add.svg'
-import TagDetails from './TagDetails'
-import { TagLabelSelectType } from '../Types'
 import { DEFAULT_TAG_DATA } from '../Constants'
+import { TagLabelSelectType } from './Types'
+import { TagDetails } from './TagDetails'
 
-export const TagLabelSelect = ({ isCreateApp, labelTags, setLabelTags, tabIndex = 0 }: TagLabelSelectType) => {
+export const TagLabelSelect = ({
+    isCreateApp,
+    labelTags,
+    setLabelTags,
+    tabIndex = 0
+}: TagLabelSelectType) => {
     const setTagData = (index, tagValue): void => {
         const _tags = [...labelTags]
         _tags[index] = tagValue

package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react'
-import { TagLabelValueSelectorType } from '../Types'
 import PopupMenu from '../PopupMenu'
 import { ValidationRules } from './ValidationRules'
 import { ReactComponent as ErrorCross } from '../../Assets/Icon/ic-cross.svg'
@@ -7,6 +6,7 @@ import { ReactComponent as Info } from '../../Assets/Icon/ic-info-outlined.svg'
 import { KEY_VALUE } from '../Constants'
 import { stopPropagation } from '../Helper'
 import { ResizableTagTextArea } from './ResizableTagTextArea'
+import { TagLabelValueSelectorType } from './Types'
 
 export const TagLabelValueSelector = ({
     selectedTagIndex,
@@ -34,12 +34,12 @@ export const TagLabelValueSelector = ({
         }, 300)
     }
     const handleOnBlur = (e) => {
-        setActiveElement('')
         if (
             !e.relatedTarget ||
             !e.relatedTarget.classList.value ||
             !e.relatedTarget.classList.value.includes(`tag-${selectedTagIndex}-class`)
         ) {
+            setActiveElement('')
             const _tagData = { ...tagData }
             _tagData[tagInputType] = selectedValue
             if (tagInputType === KEY_VALUE.KEY) {
@@ -107,14 +107,17 @@ export const TagLabelValueSelector = ({
             const filteredTags = tagOptions.filter((tag) => tag.value.indexOf(selectedValue) >= 0)
             if (filteredTags.length) {
                 return (
-                    <div className="p-8">
-                        {tagOptions
-                            .filter((tag) => tag.value.indexOf(selectedValue) >= 0)
-                            .map((tag, index) => (
-                                <div data-key={`${tag.value}-${index}`} className="cursor" onClick={onSelectValue}>
-                                    {tag.label}
-                                </div>
-                            ))}
+                    <div>
+                        {filteredTags.map((tag, index) => (
+                            <div
+                                key={`${tag.value}-${index}`}
+                                data-key={tag.label}
+                                className="dc__hover-n50 lh-20 fs-13 fw-6 pt-6 pr-8 pb-6 pl-8 cursor"
+                                onClick={onSelectValue}
+                            >
+                                {tag.label}
+                            </div>
+                        ))}
                     </div>
                 )
             }

package/src/Common/CustomTagSelector/Types.ts

@@ -0,0 +1,63 @@
+import { KEY_VALUE } from '../Constants'
+import { OptionType } from '../Types'
+
+export interface TagType {
+    id?: number
+    key: string
+    value?: string
+    description?: string
+    propagate: boolean
+    mandatoryProjectIdsCsv?: string
+    isInvalidKey?: boolean
+    isInvalidValue?: boolean
+    isSuggested?: boolean
+}
+
+export interface TagErrorType {
+    isValid: boolean
+    messages: string[]
+}
+export interface TagLabelSelectType {
+    isCreateApp?: boolean
+    labelTags: TagType[]
+    setLabelTags: (tagList: TagType[]) => void
+    tabIndex?: number
+    selectedProjectId?: number
+    suggestedTagsOptions?: OptionType[]
+}
+
+export interface TagDetailType {
+    index: number
+    tagData: TagType
+    setTagData: (index: number, tagData: TagType) => void
+    removeTag?: (index: number) => void
+    tabIndex?: number
+    suggestedTagsOptions?: OptionType[]
+}
+
+export interface TagLabelValueSelectorType {
+    selectedTagIndex: number
+    tagData: TagType
+    setTagData: (index: number, tagData: TagType) => void
+    tagOptions?: OptionType[]
+    isRequired?: boolean
+    tagInputType?: KEY_VALUE
+    placeholder?: string
+    tabIndex?: number
+    refVar?: React.MutableRefObject<HTMLTextAreaElement>
+    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
+}
+
+export interface ResizableTagTextAreaProps {
+    className?: string
+    minHeight?: number
+    maxHeight?: number
+    value?: string
+    onChange?: (e) => void
+    onBlur?: (e) => void
+    onFocus?: (e) => void
+    placeholder?: string
+    tabIndex?: number
+    refVar?: React.MutableRefObject<HTMLTextAreaElement>
+    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
+}

package/src/Common/CustomTagSelector/index.ts

@@ -1,3 +1,6 @@
+export {default as PropagateTagInfo} from './PropagateTagInfo'
+export * from './TagDetails'
 export * from './TagLabelSelect'
 export * from './TagLabelValueSelector'
-export * from './ResizableTagTextArea'
+export * from './ResizableTagTextArea'
+export * from './Types'

package/src/Common/Types.ts

@@ -1,5 +1,3 @@
-import { KEY_VALUE } from './Constants'
-
 export interface ResponseType {
     code: number
     status: string
@@ -22,64 +20,6 @@ export enum TippyTheme {
     black = 'black',
     white = 'white',
 }
-
-export interface TagType {
-    id?: number
-    key: string
-    value?: string
-    description?: string
-    propagate: boolean
-    mandatoryProjectIdsCsv?: string
-    isInvalidKey?: boolean
-    isInvalidValue?: boolean
-}
-
-export interface TagErrorType {
-    isValid: boolean
-    messages: string[]
-}
-export interface TagLabelSelectType {
-    isCreateApp?: boolean
-    labelTags: TagType[]
-    setLabelTags: (tagList: TagType[]) => void
-    tabIndex?: number
-}
-
-export interface TagDetailType {
-    index: number
-    tagData: TagType
-    setTagData: (index: number, tagData: TagType) => void
-    removeTag: (index: number) => void
-    tabIndex?: number
-}
-
-export interface TagLabelValueSelectorType {
-    selectedTagIndex: number
-    tagData: TagType
-    setTagData: (index: number, tagData: TagType) => void
-    tagOptions?: OptionType[]
-    isRequired?: boolean
-    tagInputType?: KEY_VALUE
-    placeholder?: string
-    tabIndex?: number
-    refVar?: React.MutableRefObject<HTMLTextAreaElement>
-    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
-}
-
-export interface ResizableTagTextAreaProps {
-    className?: string
-    minHeight?: number
-    maxHeight?: number
-    value?: string
-    onChange?: (e) => void
-    onBlur?: (e) => void
-    onFocus?: (e) => void
-    placeholder?: string
-    tabIndex?: number
-    refVar?: React.MutableRefObject<HTMLTextAreaElement>
-    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
-}
-
 export interface TeamList extends ResponseType {
     result: Teams[]
 }