@devtron-labs/devtron-fe-common-lib 0.0.7-beta-30 → 0.0.7-beta-32

package/dist/Common/Modals/Modal.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { ModalType } from '../Types';
-export declare const Modal: ({ style, children, modal, rootClassName, onClick, callbackRef, preventWheelDisable, noBackDrop }: ModalType) => React.ReactPortal;
+export declare const Modal: ({ style, children, modal, rootClassName, onClick, callbackRef, preventWheelDisable, noBackDrop, }: ModalType) => React.ReactPortal;

package/dist/Common/PopupMenu.d.ts

@@ -2,7 +2,7 @@
 import { PopupMenuBodyType, PopupMenuButtonType, PopupMenuType } from './Types';
 declare function PopupMenu({ children, onToggleCallback, autoClose, autoPosition, }: PopupMenuType): any;
 declare namespace PopupMenu {
-    var Button: ({ children, disabled, rootClassName, tabIndex, onHover, isKebab, dataTestId }: PopupMenuButtonType) => JSX.Element;
-    var Body: ({ children, rootClassName, style, autoWidth, preventWheelDisable, noBackDrop, dataTestId }: PopupMenuBodyType) => JSX.Element;
+    var Button: ({ children, disabled, rootClassName, tabIndex, onHover, isKebab, dataTestId, }: PopupMenuButtonType) => JSX.Element;
+    var Body: ({ children, rootClassName, style, autoWidth, preventWheelDisable, noBackDrop, }: PopupMenuBodyType) => JSX.Element;
 }
 export default PopupMenu;

package/dist/Common/Progressing.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ProgressingProps } from './Types';
-export declare function Progressing({ pageLoader, size, theme, styles }: ProgressingProps): JSX.Element;
-export declare function DetailsProgressing({ loadingText, size, fullHeight, children, styles, }: ProgressingProps): JSX.Element;
+export declare function Progressing({ pageLoader, size, theme, styles, fillColor }: ProgressingProps): JSX.Element;
+export declare function DetailsProgressing({ loadingText, size, fullHeight, styles, fillColor, children, }: ProgressingProps): JSX.Element;

package/dist/Common/Types.d.ts

@@ -123,6 +123,7 @@ export interface ProgressingProps {
     theme?: 'white' | 'default';
     styles?: React.CSSProperties;
     children?: React.ReactNode;
+    fillColor?: string;
 }
 export interface PopupMenuType {
     children?: any;
@@ -146,7 +147,6 @@ export interface PopupMenuBodyType {
     autoWidth?: boolean;
     preventWheelDisable?: boolean;
     noBackDrop?: boolean;
-    dataTestId?: string;
 }
 export interface ModalType {
     style?: React.CSSProperties;

package/dist/index.js

@@ -506,7 +506,7 @@ var SvgIcProgressing = function SvgIcProgressing(props) {
 
 function EmptyState(_a) {
     var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b;
-    return (jsxRuntime.jsx("div", __assign({ className: "flex column empty-state ".concat(className), "w-100": true, "h-100": true }, { children: children })));
+    return (jsxRuntime.jsx("div", __assign({ className: "flex column empty-state w-100 h-100 ".concat(className) }, { children: children })));
 }
 function Image(_a) {
     var children = _a.children;
@@ -3985,13 +3985,13 @@ function useThrottledEffect(callback, delay, deps) {
 }
 
 function Progressing(_a) {
-    var pageLoader = _a.pageLoader, size = _a.size, theme = _a.theme, styles = _a.styles;
+    var pageLoader = _a.pageLoader, size = _a.size, theme = _a.theme, styles = _a.styles, fillColor = _a.fillColor;
     var loaderSize = size ? "".concat(size, "px") : pageLoader ? '48px' : '20px';
-    return (jsxRuntime.jsx("div", __assign({ className: "loader ".concat(theme || 'default', "-background"), style: styles, "data-testid": "progressing" }, { children: jsxRuntime.jsx("div", __assign({ style: { width: loaderSize, height: loaderSize } }, { children: jsxRuntime.jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: "loader__svg" }, { children: jsxRuntime.jsxs("g", __assign({ fill: "none", fillRule: "evenodd", strokeLinecap: "round" }, { children: [jsxRuntime.jsx("animateTransform", { attributeName: "transform", attributeType: "XML", dur: "0.5s", from: "0 12 12", repeatCount: "indefinite", to: "360 12 12", type: "rotate" }), jsxRuntime.jsx("path", { fill: "#06C", fillRule: "nonzero", d: "M12 2.5A9.5 9.5 0 1 1 2.5 12a1.5 1.5 0 0 1 3 0A6.5 6.5 0 1 0 12 5.5a1.5 1.5 0 0 1 0-3z" })] })) })) })) })));
+    return (jsxRuntime.jsx("div", __assign({ className: "loader ".concat(theme || 'default', "-background"), style: styles, "data-testid": "progressing" }, { children: jsxRuntime.jsx("div", __assign({ style: { width: loaderSize, height: loaderSize } }, { children: jsxRuntime.jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: "loader__svg" }, { children: jsxRuntime.jsxs("g", __assign({ fill: "none", fillRule: "evenodd", strokeLinecap: "round" }, { children: [jsxRuntime.jsx("animateTransform", { attributeName: "transform", attributeType: "XML", dur: "0.5s", from: "0 12 12", repeatCount: "indefinite", to: "360 12 12", type: "rotate" }), jsxRuntime.jsx("path", { fill: fillColor || '#06C', fillRule: "nonzero", d: "M12 2.5A9.5 9.5 0 1 1 2.5 12a1.5 1.5 0 0 1 3 0A6.5 6.5 0 1 0 12 5.5a1.5 1.5 0 0 1 0-3z" })] })) })) })) })));
 }
 function DetailsProgressing(_a) {
-    var loadingText = _a.loadingText, _b = _a.size, size = _b === void 0 ? 24 : _b, _c = _a.fullHeight, fullHeight = _c === void 0 ? false : _c, children = _a.children, styles = _a.styles;
-    return (jsxRuntime.jsxs("div", __assign({ className: "details-loader bcn-0 flex column fs-14 fw-6 ".concat(fullHeight ? 'h-100' : 'details-loader-height'), style: styles }, { children: [jsxRuntime.jsx("span", __assign({ style: { width: "".concat(size, "px"), height: "".concat(size, "px") } }, { children: jsxRuntime.jsx(Progressing, { size: size }) })), loadingText && jsxRuntime.jsx("span", __assign({ className: "mt-10" }, { children: loadingText })), children] })));
+    var loadingText = _a.loadingText, _b = _a.size, size = _b === void 0 ? 24 : _b, _c = _a.fullHeight, fullHeight = _c === void 0 ? false : _c, styles = _a.styles, fillColor = _a.fillColor, children = _a.children;
+    return (jsxRuntime.jsxs("div", __assign({ className: "details-loader bcn-0 flex column fs-14 fw-6 ".concat(fullHeight ? 'h-100' : 'details-loader-height'), style: styles, "data-testid": "details-progressing" }, { children: [jsxRuntime.jsx("span", __assign({ style: { width: "".concat(size, "px"), height: "".concat(size, "px") } }, { children: jsxRuntime.jsx(Progressing, { size: size, fillColor: fillColor }) })), loadingText && jsxRuntime.jsx("span", __assign({ className: "mt-10" }, { children: loadingText })), children] })));
 }
 
 var VisibleModal = /** @class */ (function (_super) {
@@ -4101,7 +4101,7 @@ var Modal = function (_a) {
                 modal.classList.remove('no-back-drop');
         };
     }, []);
-    return ReactDOM.createPortal(jsxRuntime.jsx("div", __assign({ tabIndex: 0, onClick: onClick, "data-testid": "modal", ref: function (el) {
+    return ReactDOM.createPortal(jsxRuntime.jsx("div", __assign({ tabIndex: 0, onClick: onClick, "data-testid": "common-modal", ref: function (el) {
             if (typeof callbackRef === 'function') {
                 callbackRef(el);
             }
@@ -4406,9 +4406,9 @@ function Button(_a) {
     return (jsxRuntime.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, "data-testid": dataTestId }, { children: children })));
 }
 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, _f = _a.preventWheelDisable, preventWheelDisable = _f === void 0 ? false : _f, noBackDrop = _a.noBackDrop, _g = _a.dataTestId, dataTestId = _g === void 0 ? "" : _g;
-    var _h = usePopupContext(), handleClose = _h.handleClose, popupPosition = _h.popupPosition, opacity = _h.opacity, callbackRef = _h.callbackRef, buttonWidth = _h.buttonWidth;
-    return popupPosition ? (jsxRuntime.jsx(Modal, __assign({ callbackRef: callbackRef, onClick: handleClose, "data-testid": dataTestId, 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 }), preventWheelDisable: preventWheelDisable, noBackDrop: noBackDrop }, { children: children }))) : null;
+    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, _f = _a.preventWheelDisable, preventWheelDisable = _f === void 0 ? false : _f, noBackDrop = _a.noBackDrop;
+    var _g = usePopupContext(), handleClose = _g.handleClose, popupPosition = _g.popupPosition, opacity = _g.opacity, callbackRef = _g.callbackRef, buttonWidth = _g.buttonWidth;
+    return popupPosition ? (jsxRuntime.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 }), preventWheelDisable: preventWheelDisable, noBackDrop: noBackDrop }, { children: children }))) : null;
 }
 PopupMenu.Button = Button;
 PopupMenu.Body = Body$1;
@@ -16370,7 +16370,7 @@ function InfoColourBar(_a) {
         }
         else if (redirectLink) {
             if (internalLink) {
-                return (jsxRuntime.jsx(reactRouterDom.Link, __assign({ to: redirectLink, onClick: linkOnClick, "data-testId": "info-bar-internal-link", className: "cursor dc__link dc__underline-onhover mr-5" }, { children: linkText })));
+                return (jsxRuntime.jsx(reactRouterDom.Link, __assign({ to: redirectLink, onClick: linkOnClick, "data-testid": "info-bar-internal-link", className: "cursor dc__link dc__underline-onhover mr-5" }, { children: linkText })));
             }
             return (jsxRuntime.jsx("a", __assign({ href: redirectLink, target: "_blank", onClick: linkOnClick, "data-testid": "info-bar-redirectLink", className: "cursor dc__link dc__underline-onhover mr-5" }, { children: linkText })));
         }

package/package.json

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

package/src/Common/EmptyState/EmptyState.tsx

@@ -4,7 +4,7 @@ import { ReactComponent as Progressing } from '../../Assets/Icon/ic-progressing.
 
 function EmptyState({ children, className = '' }) {
     return (
-        <div className={`flex column empty-state ${className}`} w-100 h-100>
+        <div className={`flex column empty-state w-100 h-100 ${className}`}>
             {children}
         </div>
     )
@@ -39,4 +39,4 @@ EmptyState.Subtitle = Subtitle
 EmptyState.Button = Button
 EmptyState.Loading = Loading
 
-export default EmptyState
+export default EmptyState

package/src/Common/InfoColorBar/InfoColourbar.tsx

@@ -26,7 +26,7 @@ function InfoColourBar({
                     <Link
                         to={redirectLink}
                         onClick={linkOnClick}
-                        data-testId= "info-bar-internal-link"
+                        data-testid="info-bar-internal-link"
                         className="cursor dc__link dc__underline-onhover mr-5"
                     >
                         {linkText}
@@ -39,7 +39,7 @@ function InfoColourBar({
                     href={redirectLink}
                     target="_blank"
                     onClick={linkOnClick}
-                    data-testid= "info-bar-redirectLink"
+                    data-testid="info-bar-redirectLink"
                     className="cursor dc__link dc__underline-onhover mr-5"
                 >
                     {linkText}
@@ -49,7 +49,7 @@ function InfoColourBar({
 
         return (
             linkOnClick && (
-                <div onClick={linkOnClick} className="cursor dc__link dc__underline-onhover" data-testid= "info-bar-linkText">
+                <div onClick={linkOnClick} className="cursor dc__link dc__underline-onhover" data-testid="info-bar-linkText">
                     {linkText}
                 </div>
             )

package/src/Common/Modals/Modal.tsx

@@ -10,7 +10,7 @@ export const Modal = ({
     onClick = null,
     callbackRef = null,
     preventWheelDisable = false,
-    noBackDrop
+    noBackDrop,
 }: ModalType) => {
     const innerRef = React.useRef(null)
     function handleClick(e) {
@@ -50,7 +50,7 @@ export const Modal = ({
         <div
             tabIndex={0}
             onClick={onClick}
-            data-testid= "modal"
+            data-testid="common-modal"
             ref={(el) => {
                 if (typeof callbackRef === 'function') {
                     callbackRef(el)

package/src/Common/PopupMenu.tsx

@@ -142,7 +142,7 @@ function Button({
     tabIndex = 0,
     onHover = false,
     isKebab = false,
-    dataTestId= ""
+    dataTestId = "",
 }: PopupMenuButtonType) {
     const { handleOpen, popupPosition, buttonRef, initialiseButtonWidth } = usePopupContext()
     return (
@@ -170,14 +170,12 @@ function Body({
     autoWidth = false,
     preventWheelDisable = false,
     noBackDrop,
-    dataTestId= ""
 }: PopupMenuBodyType) {
     const { handleClose, popupPosition, opacity, callbackRef, buttonWidth } = usePopupContext()
     return popupPosition ? (
         <Modal
             callbackRef={callbackRef}
             onClick={handleClose}
-            data-testid={dataTestId}
             rootClassName={`${rootClassName} popup-body ${!children ? 'popup-body--empty' : ''} ${Object.keys(
                 popupPosition,
             ).join(' ')}`}

package/src/Common/Progressing.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { ProgressingProps } from './Types'
 
-export function Progressing({ pageLoader, size, theme, styles }: ProgressingProps): JSX.Element {
+export function Progressing({ pageLoader, size, theme, styles, fillColor }: ProgressingProps): JSX.Element {
     const loaderSize = size ? `${size}px` : pageLoader ? '48px' : '20px'
     return (
         <div className={`loader ${theme || 'default'}-background`} style={styles} data-testid="progressing">
@@ -18,7 +18,7 @@ export function Progressing({ pageLoader, size, theme, styles }: ProgressingProp
                             type="rotate"
                         />
                         <path
-                            fill="#06C"
+                            fill={fillColor || '#06C'}
                             fillRule="nonzero"
                             d="M12 2.5A9.5 9.5 0 1 1 2.5 12a1.5 1.5 0 0 1 3 0A6.5 6.5 0 1 0 12 5.5a1.5 1.5 0 0 1 0-3z"
                         />
@@ -33,16 +33,18 @@ export function DetailsProgressing({
     loadingText,
     size = 24,
     fullHeight = false,
-    children,
     styles,
+    fillColor,
+    children,
 }: ProgressingProps): JSX.Element {
     return (
         <div
             className={`details-loader bcn-0 flex column fs-14 fw-6 ${fullHeight ? 'h-100' : 'details-loader-height'}`}
             style={styles}
+            data-testid="details-progressing"
         >
             <span style={{ width: `${size}px`, height: `${size}px` }}>
-                <Progressing size={size} />
+                <Progressing size={size} fillColor={fillColor} />
             </span>
             {loadingText && <span className="mt-10">{loadingText}</span>}
             {children}

package/src/Common/Types.ts

@@ -135,6 +135,7 @@ export interface ProgressingProps {
     theme?: 'white' | 'default'
     styles?: React.CSSProperties
     children?: React.ReactNode
+    fillColor?: string
 }
 
 export interface PopupMenuType {
@@ -151,7 +152,7 @@ export interface PopupMenuButtonType {
     tabIndex?: number
     onHover?: boolean
     isKebab?: boolean
-    dataTestId?: string;
+    dataTestId?: string
 }
 
 export interface PopupMenuBodyType {
@@ -161,7 +162,6 @@ export interface PopupMenuBodyType {
     autoWidth?: boolean
     preventWheelDisable?: boolean
     noBackDrop?: boolean
-    dataTestId?: string
 }
 
 export interface ModalType {