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

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { OptionType, TagType } from '../Types';
-export default function TagLabelValueSelector({ selectedTagIndex, tagData, setTagData, tagOptions, isRequired, type, }: {
+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;
+}) => JSX.Element;

package/dist/Common/TippyCustomized.d.ts

@@ -1,10 +1,7 @@
 import React, { ReactNode } from 'react';
 import { Placement } from 'tippy.js';
 import 'tippy.js/animations/shift-toward-subtle.css';
-export declare enum TippyTheme {
-    black = "black",
-    white = "white"
-}
+import { TippyTheme } from './Types';
 interface TippyCustomizedProps {
     theme: TippyTheme;
     visible?: boolean;
@@ -31,5 +28,5 @@ interface TippyCustomizedProps {
     documentationLinkText?: string;
     children: React.ReactElement<any>;
 }
-export default function TippyCustomized(props: TippyCustomizedProps): JSX.Element;
+export declare function TippyCustomized(props: TippyCustomizedProps): JSX.Element;
 export {};

package/dist/Common/Types.d.ts

@@ -21,3 +21,7 @@ export interface OptionType {
     label: string;
     value: string;
 }
+export declare enum TippyTheme {
+    black = "black",
+    white = "white"
+}

package/dist/Common/index.d.ts

@@ -19,3 +19,4 @@ export * from './RadioGroup';
 export { default as PopupMenu } from './PopupMenu';
 export * from './TippyCustomized';
 export * from './CustomTagSelector';
+export * from './Dialogs';

package/dist/index.js

@@ -147,6 +147,12 @@ var ServerErrors = /** @class */ (function (_super) {
     return ServerErrors;
 }(Error));
 
+var TippyTheme;
+(function (TippyTheme) {
+    TippyTheme["black"] = "black";
+    TippyTheme["white"] = "white";
+})(TippyTheme || (TippyTheme = {}));
+
 var responseMessages = {
     100: 'Continue',
     101: 'Switching Protocols',
@@ -3967,7 +3973,7 @@ var SvgIcClose = function SvgIcClose(props) {
     fillRule: "evenodd"
   })));
 };
-var closeIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%20%20%20%3Cdefs%3E%20%20%20%20%20%20%20%20%3Cpath%20id%3D%22a%22%20class%3D%22stroke-color%22%20d%3D%22M18.295%205.705a.997.997%200%200%200-1.41%200L12%2010.59%207.115%205.705a.997.997%200%201%200-1.41%201.41L10.59%2012l-4.885%204.885a.997.997%200%201%200%201.41%201.41L12%2013.41l4.885%204.885a.997.997%200%200%200%201.41-1.41L13.41%2012l4.885-4.885a.997.997%200%200%200%200-1.41z%22%2F%3E%20%20%20%20%3C%2Fdefs%3E%20%20%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22%22%2F%3E%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22%23999%22%20xlink%3Ahref%3D%22%23a%22%2F%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
+var close = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%20%20%20%3Cdefs%3E%20%20%20%20%20%20%20%20%3Cpath%20id%3D%22a%22%20class%3D%22stroke-color%22%20d%3D%22M18.295%205.705a.997.997%200%200%200-1.41%200L12%2010.59%207.115%205.705a.997.997%200%201%200-1.41%201.41L10.59%2012l-4.885%204.885a.997.997%200%201%200%201.41%201.41L12%2013.41l4.885%204.885a.997.997%200%200%200%201.41-1.41L13.41%2012l4.885-4.885a.997.997%200%200%200%200-1.41z%22%2F%3E%20%20%20%20%3C%2Fdefs%3E%20%20%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22%22%2F%3E%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22%23999%22%20xlink%3Ahref%3D%22%23a%22%2F%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
 
 var OpaqueModal = /** @class */ (function (_super) {
     __extends(OpaqueModal, _super);
@@ -3988,7 +3994,7 @@ var OpaqueModal = /** @class */ (function (_super) {
     };
     OpaqueModal.prototype.render = function () {
         var _a = __assign({}, this.props), _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.onHide, onHide = _c === void 0 ? null : _c;
-        return ReactDOM.createPortal(jsxs("div", __assign({ className: "full-screen-modal__body-container ".concat(className) }, { children: [this.props.children, typeof onHide === 'function' && jsx("div", __assign({ className: "close-btn icon-dim-24", onClick: function (e) { return onHide(false); } }, { children: jsx("img", { className: "close-img", src: closeIcon, alt: "close" }) }))] })), document.getElementById('full-screen-modal'));
+        return ReactDOM.createPortal(jsxs("div", __assign({ className: "full-screen-modal__body-container ".concat(className) }, { children: [this.props.children, typeof onHide === 'function' && jsx("div", __assign({ className: "close-btn icon-dim-24", onClick: function (e) { return onHide(false); } }, { children: jsx("img", { className: "close-img", src: close, alt: "close" }) }))] })), document.getElementById('full-screen-modal'));
     };
     return OpaqueModal;
 }(React__default.Component));
@@ -4043,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();
@@ -4065,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;
         });
@@ -4085,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) { } });
@@ -4232,13 +4238,13 @@ function Button(_a) {
     var _h = usePopupContext(), handleOpen = _h.handleOpen, popupPosition = _h.popupPosition; _h.buttonRef; var initialiseButtonWidth = _h.initialiseButtonWidth;
     return jsx("button", __assign({ ref: initialiseButtonWidth, type: "button", tabIndex: tabIndex, disabled: disabled, className: "".concat(rootClassName, " ").concat(popupPosition ? 'focused' : '', "  ").concat(isKebab ? 'popup-button-kebab' : "popup-button"), onMouseEnter: onHover ? (disabled ? null : handleOpen) : function () { }, onClick: disabled ? null : handleOpen }, { children: children }));
 }
-function Body(_a) {
+function Body$1(_a) {
     var _b = _a.children, children = _b === void 0 ? null : _b, _c = _a.rootClassName, rootClassName = _c === void 0 ? "" : _c, _d = _a.style, style = _d === void 0 ? {} : _d, _e = _a.autoWidth, autoWidth = _e === void 0 ? false : _e;
     var _f = usePopupContext(), handleClose = _f.handleClose, popupPosition = _f.popupPosition, opacity = _f.opacity, callbackRef = _f.callbackRef, buttonWidth = _f.buttonWidth;
     return popupPosition ? jsx(Modal, __assign({ callbackRef: callbackRef, onClick: handleClose, rootClassName: "".concat(rootClassName, " popup-body ").concat(!children ? 'popup-body--empty' : '', " ").concat(Object.keys(popupPosition).join(" ")), style: __assign(__assign(__assign(__assign({}, popupPosition), style), (autoWidth ? { width: buttonWidth.current } : {})), { opacity: opacity }) }, { children: children })) : null;
 }
 PopupMenu.Button = Button;
-PopupMenu.Body = Body;
+PopupMenu.Body = Body$1;
 
 var top = 'top';
 var bottom = 'bottom';
@@ -8247,11 +8253,6 @@ var Tippy = index;
 var css_248z = ".tippy-box[data-animation=shift-toward-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=top][data-state=hidden]{transform:translateY(-5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=bottom][data-state=hidden]{transform:translateY(5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=left][data-state=hidden]{transform:translateX(-5px)}.tippy-box[data-animation=shift-toward-subtle][data-state=hidden][data-placement^=right][data-state=hidden]{transform:translateX(5px)}";
 styleInject(css_248z);
 
-var TippyTheme;
-(function (TippyTheme) {
-    TippyTheme["black"] = "black";
-    TippyTheme["white"] = "white";
-})(TippyTheme || (TippyTheme = {}));
 // This component will handle some of the new tippy designs and interactions
 // So this can be updated to support further for new features or interactions
 function TippyCustomized(props) {
@@ -8422,7 +8423,7 @@ 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];
@@ -8492,7 +8493,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;
@@ -8527,4 +8528,91 @@ var TagLabelSelect = function (_a) {
     return (jsxs("div", { children: [jsxs("div", __assign({ className: "flexbox dc__content-space mb-8" }, { children: [jsx("span", { children: "Tags" }), jsx(PropagateTagInfo, {})] })), jsxs("div", { children: [jsxs("div", __assign({ className: "dc_width-max-content cb-5 fw-6 fs-13 flexbox mr-20 mb-8 cursor", onClick: addNewTag }, { children: [jsx(SvgIcAdd, { className: "icon-dim-20 fcb-5" }), " Add tag"] })), jsx("div", __assign({ className: "mb-8" }, { children: labelTags === null || labelTags === void 0 ? void 0 : labelTags.map(function (tagData, index) { return (jsx(TagDetails, { index: index, tagData: tagData, setTagData: setTagData, removeTag: removeTag }, "tag-".concat(index))); }) }))] })] }));
 };
 
-export { BreadCrumb, Store as BreadcrumbStore, ConditionalWrap, DetailsProgressing, Drawer, ErrorScreenManager, ErrorScreenNotAuthorized, Host, Modal, OpaqueModal, PATTERNS, PopupMenu, Progressing, RadioGroup, RadioGroupItem, RequestTimeout, ServerError, ServerErrors, TagLabelSelect, TippyTheme, ToastBody, ToastBody3, ToastBodyWithButton, VisibleModal, VisibleModal2, get, post, put, showError, toastAccessDenied, trash, useBreadcrumb };
+function ConfirmationDialog(_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, children = _a.children;
+    return (jsx(VisibleModal2, __assign({ className: "confirmation-dialog" }, { children: jsx("div", __assign({ className: "confirmation-dialog__body ".concat(className) }, { children: children })) })));
+}
+function Icon(_a) {
+    var src = _a.src, _b = _a.className, className = _b === void 0 ? '' : _b;
+    return jsx("img", { src: src, className: "confirmation-dialog__icon ".concat(className), alt: "" });
+}
+function Body(_a) {
+    var title = _a.title, _b = _a.subtitle, subtitle = _b === void 0 ? null : _b, _c = _a.children, children = _c === void 0 ? null : _c;
+    return (jsxs("div", __assign({ className: "flex left column " }, { children: [jsx("h3", __assign({ className: "confirmation-dialog__title lh-1-25 dc__break-word w-100" }, { children: title })), subtitle && jsx("div", __assign({ className: "confirmation-dialog__subtitle" }, { children: subtitle })), children] })));
+}
+function ButtonGroup(_a) {
+    var children = _a.children;
+    return jsx("div", __assign({ className: "flex right confirmation-dialog__button-group" }, { children: children }));
+}
+ConfirmationDialog.Icon = Icon;
+ConfirmationDialog.Body = Body;
+ConfirmationDialog.ButtonGroup = ButtonGroup;
+
+var warn = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%20%20%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%200h48v48H0z%22%2F%3E%20%20%20%20%20%20%20%20%3Cg%20fill%3D%22%23FFEBEB%22%20stroke%3D%22%23F33E3E%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M7%2024h24v17a4%204%200%200%201-4%204H11a4%204%200%200%201-4-4V24z%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M19%2029.5v10M24%2029.5v10M14%2029.5v10%22%2F%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3Cpath%20stroke%3D%22%23F33E3E%22%20stroke-dasharray%3D%2217%2C3%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M42%2010a3%203%200%200%201%200%206H31M38%2023a3%203%200%200%200-3-3h-8%22%2F%3E%20%20%20%20%20%20%20%20%3Cg%20stroke%3D%22%23F33E3E%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20transform%3D%22rotate%28-10%2036.29%20-8.86%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20width%3D%2230%22%20height%3D%225%22%20y%3D%226%22%20fill%3D%22%23FFEBEB%22%20rx%3D%221%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M11%200h8a2%202%200%200%201%202%202v4H9V2a2%202%200%200%201%202-2z%22%2F%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
+
+var DeleteDialog = function (props) {
+    return jsxs(ConfirmationDialog, __assign({ className: "confirmation-dialog__body--w-400" }, { children: [jsx(ConfirmationDialog.Icon, { src: warn }), jsx(ConfirmationDialog.Body, __assign({ title: props.title }, { children: jsxs("div", __assign({ className: "fs-13 cn-7 lh-1-54 w-100" }, { children: [props.description ? props.description : null, props.children] })) })), jsx(ConfirmationDialog.ButtonGroup, { children: jsxs("div", __assign({ className: "flex right" }, { children: [jsx("button", __assign({ type: "button", className: "cta cancel cta-cd-delete-modal ml-16", onClick: props.closeDelete, disabled: props.apiCallInProgress }, { children: "Cancel" })), jsx("button", __assign({ type: "button", className: "cta delete cta-cd-delete-modal ml-16", onClick: function () { return props.delete(); }, disabled: props.apiCallInProgress }, { children: props.apiCallInProgress ? jsx(Progressing, {}) : "".concat(props.deletePrefix || '', "Delete").concat(props.deletePostfix || '') }))] })) })] }));
+};
+function DeleteDialogDescription(props) {
+    return jsx(Fragment, { children: props.children });
+}
+DeleteDialog.Description = DeleteDialogDescription;
+
+//TODO: may not need context
+var DialogFormContext = createContext({ title: '', isLoading: false, close: function (event) { }, onSave: function (event) { } });
+var DialogForm = /** @class */ (function (_super) {
+    __extends(DialogForm, _super);
+    function DialogForm(props) {
+        var _this = _super.call(this, props) || this;
+        _this.escFunction = _this.escFunction.bind(_this);
+        return _this;
+    }
+    DialogForm.prototype.componentDidMount = function () {
+        document.addEventListener('keydown', this.escFunction);
+    };
+    DialogForm.prototype.componentWillUnmount = function () {
+        document.removeEventListener('keydown', this.escFunction);
+    };
+    DialogForm.prototype.escFunction = function (event) {
+        if (event.keyCode === 27 && this.props.closeOnESC) {
+            this.props.close(event);
+        }
+    };
+    DialogForm.prototype.render = function () {
+        var _this = this;
+        return (jsx(DialogFormContext.Provider, __assign({ value: {
+                title: this.props.title,
+                isLoading: this.props.isLoading,
+                close: this.props.close,
+                onSave: this.props.onSave,
+            } }, { children: jsx(VisibleModal, __assign({ className: "" }, { children: jsxs("div", __assign({ className: "modal__body ".concat(this.props.className || '') }, { children: [jsxs("div", __assign({ className: "modal__header ".concat(this.props.headerClassName || '') }, { children: [jsx("h1", __assign({ className: "modal__title" }, { children: this.props.title })), jsxs("button", __assign({ type: "button", className: "dc__transparent", onClick: this.props.close }, { children: [' ', jsx("img", { src: close, alt: "close" })] }))] })), jsx(DialogFormContext.Consumer, { children: function (context) {
+                                return (jsx("form", __assign({ noValidate: true, onSubmit: function (e) {
+                                        e.preventDefault();
+                                        if (!context.isLoading) {
+                                            context.onSave(e);
+                                        }
+                                    } }, { children: _this.props.children })));
+                            } })] })) })) })));
+    };
+    return DialogForm;
+}(Component));
+var DialogFormSubmit = /** @class */ (function (_super) {
+    __extends(DialogFormSubmit, _super);
+    function DialogFormSubmit() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DialogFormSubmit.prototype.render = function () {
+        var _this = this;
+        return (jsx(DialogFormContext.Consumer, { children: function (context) {
+                return (jsx("button", __assign({ type: "submit", className: "cta dc__align-right", tabIndex: _this.props.tabIndex }, { children: context.isLoading ? jsx(Progressing, {}) : _this.props.children })));
+            } }));
+    };
+    return DialogFormSubmit;
+}(Component));
+
+function ForceDeleteDialog(_a) {
+    var onClickDelete = _a.onClickDelete, closeDeleteModal = _a.closeDeleteModal, forceDeleteDialogTitle = _a.forceDeleteDialogTitle, forceDeleteDialogMessage = _a.forceDeleteDialogMessage;
+    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, 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-14",
+    "version": "0.0.6-beta-16",
     "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/PropagateTagInfo.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg'
 import { ReactComponent as Help } from '../../Assets/Icon/ic-help-outline.svg'
-import TippyCustomized, { TippyTheme } from '../TippyCustomized'
+import { TippyCustomized } from '../TippyCustomized'
+import { TippyTheme } from '../Types'
 
 export default function PropagateTagInfo() {
     const additionalInfo = () => {

package/src/Common/CustomTagSelector/TagDetails.tsx

@@ -2,7 +2,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 TagLabelValueSelector from './TagLabelValueSelector'
+import { TagLabelValueSelector } from './TagLabelValueSelector'
 
 export default function TagDetails({
     index,

package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -5,7 +5,7 @@ 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,
@@ -19,7 +19,7 @@ export default function TagLabelValueSelector({
     tagOptions?: OptionType[]
     isRequired?: boolean
     type?: string
-}) {
+}) => {
     const [selectedValue, setSelectedValue] = useState<string>('')
     const [isPopupOpen, togglePopup] = useState<boolean>(false)
 

package/src/Common/Dialogs/DeleteDialog.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import warn from '../../../Assets/Img/warning-medium.svg';
+import warn from '../../Assets/Img/warning-medium.svg';
 import { Progressing } from '../Progressing'
 import ConfirmationDialog from './ConfirmationDialog';
 import { DeleteDialogProps } from './Types';

package/src/Common/Dialogs/DialogForm.tsx

@@ -1,6 +1,6 @@
 import React, { Component, createContext } from 'react';
 import { VisibleModal } from '../Modals/VisibleModal';
-import close from '../../../Assets/Icons/ic-close.svg';
+import close from '../../Assets/Icon/ic-close.svg';
 import { Progressing } from '../Progressing'
 //TODO: may not need context
 const DialogFormContext = createContext({ title: '', isLoading: false, close: (event) => {}, onSave: (event) => {} });

package/src/Common/TippyCustomized.tsx

@@ -1,13 +1,9 @@
-import React, { ReactNode, useEffect, useRef } from 'react'
+import React, { ReactNode, useRef } from 'react'
 import Tippy from '@tippyjs/react'
 import { Placement } from 'tippy.js'
 import { ReactComponent as CloseIcon } from '../Assets/Icon/ic-close.svg'
 import 'tippy.js/animations/shift-toward-subtle.css'
-
-export enum TippyTheme {
-    black = 'black',
-    white = 'white',
-}
+import { TippyTheme } from './Types'
 
 interface TippyCustomizedProps {
     theme: TippyTheme
@@ -38,7 +34,7 @@ interface TippyCustomizedProps {
 
 // This component will handle some of the new tippy designs and interactions
 // So this can be updated to support further for new features or interactions
-export default function TippyCustomized(props: TippyCustomizedProps) {
+export function TippyCustomized(props: TippyCustomizedProps) {
     const tippyRef = useRef(null)
     const isWhiteTheme = props.theme === TippyTheme.white
 

package/src/Common/Types.ts

@@ -23,4 +23,9 @@ export interface TagType {
 export interface OptionType {
     label: string;
     value: string;
+}
+
+export enum TippyTheme {
+    black = 'black',
+    white = 'white',
 }

package/src/Common/index.ts

@@ -18,4 +18,5 @@ export { default as BreadcrumbStore } from './BreadCrumb/BreadcrumbStore'
 export * from './RadioGroup'
 export { default as PopupMenu } from './PopupMenu'
 export * from './TippyCustomized'
-export * from './CustomTagSelector'
+export * from './CustomTagSelector'
+export * from './Dialogs'