@devtron-labs/devtron-fe-common-lib 0.0.6-beta-15 → 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/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,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];
@@ -8493,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;
@@ -8615,4 +8615,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-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/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)