@devtron-labs/devtron-fe-common-lib 0.0.7 → 0.0.9

package/src/Common/Helper.tsx

@@ -1,13 +1,29 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { ServerErrors } from './ServerError'
 import { toast } from 'react-toastify'
 import * as Sentry from '@sentry/browser'
 import { toastAccessDenied } from './ToastBody'
-import { useEffect, useRef } from 'react'
+import { ERROR_EMPTY_SCREEN, TOKEN_COOKIE_NAME } from './Constants'
+import { ReactComponent as FormError } from '../Assets/Icon/ic-warning.svg'
+
+toast.configure({
+    autoClose: 3000,
+    hideProgressBar: true,
+    pauseOnHover: true,
+    pauseOnFocusLoss: true,
+    closeOnClick: false,
+    newestOnTop: true,
+    toastClassName: 'devtron-toast',
+    bodyClassName: 'devtron-toast__body',
+})
 
 export function showError(serverError, showToastOnUnknownError = true, hideAccessError = false) {
     if (serverError instanceof ServerErrors && Array.isArray(serverError.errors)) {
         serverError.errors.map(({ userMessage, internalMessage }) => {
-            if (serverError.code === 403 && userMessage === 'unauthorized') {
+            if (
+                serverError.code === 403 &&
+                (userMessage === ERROR_EMPTY_SCREEN.UNAUTHORIZED || userMessage === ERROR_EMPTY_SCREEN.FORBIDDEN)
+            ) {
                 if (!hideAccessError) {
                     toastAccessDenied()
                 }
@@ -75,3 +91,243 @@ export function useThrottledEffect(callback, delay, deps = []) {
         }
     }, [delay, ...deps])
 }
+
+const colors = [
+    '#FFB900',
+    '#D83B01',
+    '#B50E0E',
+    '#E81123',
+    '#B4009E',
+    '#5C2D91',
+    '#0078D7',
+    '#00B4FF',
+    '#008272',
+    '#107C10',
+]
+
+export function getRandomColor(email: string): string {
+    let sum = 0
+    for (let i = 0; i < email.length; i++) {
+        sum += email.charCodeAt(i)
+    }
+    return colors[sum % colors.length]
+}
+
+export const getAlphabetIcon = (str: string) => {
+    if (!str) return null
+    return (
+        <span
+            className="alphabet-icon__initial fs-13 icon-dim-20 flex cn-0 mr-8"
+            style={{ backgroundColor: getRandomColor(str) }}
+        >
+            {str[0]}
+        </span>
+    )
+}
+
+export const getEmptyArrayOfLength = (length: number) => {
+    return Array.from({ length })
+}
+
+export function noop(...args): any {}
+
+export function not(e) {
+    return !e
+}
+
+export function useEffectAfterMount(cb, dependencies) {
+    const justMounted = React.useRef(true)
+    React.useEffect(() => {
+        if (!justMounted.current) {
+            return cb()
+        }
+        justMounted.current = false
+    }, dependencies)
+}
+
+export function getCookie(sKey) {
+    if (!sKey) {
+        return null
+    }
+    return (
+        document.cookie.replace(
+            new RegExp('(?:(?:^|.*;)\\s*' + sKey.replace(/[\-\.\+\*]/g, '\\$&') + '\\s*\\=\\s*([^;]*).*$)|^.*$'),
+            '$1',
+        ) || null
+    )
+}
+
+export function getLoginInfo() {
+    const argocdToken = getCookie(TOKEN_COOKIE_NAME)
+    if (argocdToken) {
+        const jwts = argocdToken.split('.')
+        try {
+            return JSON.parse(atob(jwts[1]))
+        } catch (err) {
+            console.error('error in setting user ', err)
+            return null
+        }
+    }
+}
+
+export function useForm(stateSchema, validationSchema = {}, callback) {
+    const [state, setState] = useState(stateSchema)
+    const [disable, setDisable] = useState(true)
+    const [isDirty, setIsDirty] = useState(false)
+
+    // Disable button in initial render.
+    useEffect(() => {
+        setDisable(true)
+    }, [])
+
+    // For every changed in our state this will be fired
+    // To be able to disable the button
+    useEffect(() => {
+        if (isDirty) {
+            setDisable(validateState(state))
+        }
+    }, [state, isDirty])
+
+    // Used to disable submit button if there's an error in state
+    // or the required field in state has no value.
+    // Wrapped in useCallback to cached the function to avoid intensive memory leaked
+    // in every re-render in component
+    const validateState = useCallback(
+        (state) => {
+            //check errors in all fields
+            const hasErrorInState = Object.keys(validationSchema).some((key) => {
+                const isInputFieldRequired = validationSchema[key].required
+                const stateValue = state[key].value // state value
+                const stateError = state[key].error // state error
+                return (isInputFieldRequired && !stateValue) || stateError
+            })
+            return hasErrorInState
+        },
+        [state, validationSchema],
+    )
+
+    function validateField(name, value): string | string[] {
+        if (validationSchema[name].required) {
+            if (!value) {
+                return 'This is a required field.'
+            }
+        }
+
+        function _validateSingleValidator(validator, value) {
+            if (value && !validator.regex.test(value)) {
+                return false
+            }
+            return true
+        }
+
+        // single validator
+        let _validator = validationSchema[name].validator
+        if (_validator && typeof _validator === 'object') {
+            if (!_validateSingleValidator(_validator, value)) {
+                return _validator.error
+            }
+        }
+
+        // multiple validators
+        let _validators = validationSchema[name].validators
+        if (_validators && typeof _validators === 'object' && Array.isArray(_validators)) {
+            let errors = []
+            _validators.forEach((_validator) => {
+                if (!_validateSingleValidator(_validator, value)) {
+                    errors.push(_validator.error)
+                }
+            })
+            if (errors.length > 0) {
+                return errors
+            }
+        }
+
+        return ''
+    }
+
+    const handleOnChange = useCallback(
+        (event) => {
+            setIsDirty(true)
+
+            const { name, value } = event.target
+            let error = validateField(name, value)
+            setState((prevState) => ({
+                ...prevState,
+                [name]: { value, error },
+            }))
+        },
+        [validationSchema],
+    )
+
+    const handleOnSubmit = (event) => {
+        event.preventDefault()
+        const newState = Object.keys(validationSchema).reduce((agg, curr) => {
+            agg[curr] = { ...state[curr], error: validateField(curr, state[curr].value) }
+            return agg
+        }, state)
+        if (!validateState(newState)) {
+            callback(state)
+        } else {
+            setState({ ...newState })
+        }
+    }
+    return { state, disable, handleOnChange, handleOnSubmit }
+}
+
+function handleError(error: any): any[] {
+    if (!error) {
+        return []
+    }
+
+    if (!Array.isArray(error)) {
+        return [error]
+    }
+
+    return error
+}
+
+export function CustomInput({
+    name,
+    value,
+    error,
+    onChange,
+    onBlur = (e) => {},
+    onFocus = (e) => {},
+    label,
+    type = 'text',
+    disabled = false,
+    autoComplete = 'off',
+    labelClassName = '',
+    placeholder = '',
+    tabIndex = 1,
+    dataTestid = '',
+}) {
+    return (
+        <div className="flex column left top">
+            <label className={`form__label ${labelClassName}`}>{label}</label>
+            <input
+                data-testid={dataTestid}
+                type={type}
+                name={name}
+                autoComplete="off"
+                className="form__input"
+                onChange={(e) => {
+                    e.persist()
+                    onChange(e)
+                }}
+                onBlur={onBlur}
+                onFocus={onFocus}
+                placeholder={placeholder}
+                value={value}
+                disabled={disabled}
+                tabIndex={tabIndex}
+            />
+            {handleError(error).map((err) => (
+                <div className="form__error">
+                    <FormError className="form__icon form__icon--error" />
+                    {err}
+                </div>
+            ))}
+        </div>
+    )
+}

package/src/Common/InfoColorBar/InfoColourbar.tsx

@@ -1,22 +1,8 @@
-import React, { CSSProperties } from 'react'
+import React from 'react'
 import { Link } from 'react-router-dom'
+import { InfoColourBarType } from '../Types'
 import './infoColourBar.scss'
 
-interface InfoColourBarType {
-    message: React.ReactNode
-    classname: string
-    Icon
-    iconClass?: string
-    iconSize?: number // E.g. 16, 20, etc.. Currently, there are around 12 sizes supported. Check `icons.css` or `base.scss` for supported sizes or add new size (class names starts with `icon-dim-`).
-    renderActionButton?: () => JSX.Element
-    linkText?: React.ReactNode
-    redirectLink?: string
-    linkOnClick?: () => void
-    linkClass?: string
-    internalLink?: boolean
-    styles?: CSSProperties
-}
-
 function InfoColourBar({
     message,
     classname,
@@ -40,6 +26,7 @@ function InfoColourBar({
                     <Link
                         to={redirectLink}
                         onClick={linkOnClick}
+                        data-testid="info-bar-internal-link"
                         className="cursor dc__link dc__underline-onhover mr-5"
                     >
                         {linkText}
@@ -52,6 +39,7 @@ function InfoColourBar({
                     href={redirectLink}
                     target="_blank"
                     onClick={linkOnClick}
+                    data-testid="info-bar-redirectLink"
                     className="cursor dc__link dc__underline-onhover mr-5"
                 >
                     {linkText}
@@ -61,7 +49,7 @@ function InfoColourBar({
 
         return (
             linkOnClick && (
-                <div onClick={linkOnClick} className="cursor dc__link dc__underline-onhover">
+                <div onClick={linkOnClick} className="cursor dc__link dc__underline-onhover" data-testid="info-bar-linkText">
                     {linkText}
                 </div>
             )
@@ -71,7 +59,7 @@ function InfoColourBar({
     return (
         <div className="info-bar-container">
             <div
-                className={`${classname} info_text flex dc__content-space pt-8 pb-8 pl-16 pr-16 br-4 top fs-13 fw-4`}
+                className={`${classname} info_text flex dc__content-space pt-8 pb-8 pl-12 pr-12 br-4 top fs-13 fw-4`}
                 style={styles}
             >
                 <div className={`flex top ${typeof renderActionButton === 'function' ? 'mr-5' : ''}`}>

package/src/Common/Modals/Modal.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect } from 'react'
 import ReactDOM from 'react-dom'
+import { ModalType } from '../Types'
+
 export const Modal = ({
     style = {},
     children,
@@ -8,7 +10,8 @@ export const Modal = ({
     onClick = null,
     callbackRef = null,
     preventWheelDisable = false,
-}) => {
+    noBackDrop,
+}: ModalType) => {
     const innerRef = React.useRef(null)
     function handleClick(e) {
         if (typeof onClick !== 'function') return
@@ -34,17 +37,20 @@ export const Modal = ({
         document.addEventListener('click', handleClick)
         let modal = document.getElementById('visible-modal')
         if (modal) modal.classList.add('show')
+        if (noBackDrop) modal.classList.add('no-back-drop')
         if (!preventWheelDisable) document.body.addEventListener('wheel', disableWheel, { passive: false })
         return () => {
             if (!preventWheelDisable) document.body.removeEventListener('wheel', disableWheel)
             document.removeEventListener('click', handleClick)
             if (modal) modal.classList.remove('show')
+            if (noBackDrop) modal.classList.remove('no-back-drop')
         }
     }, [])
     return ReactDOM.createPortal(
         <div
             tabIndex={0}
             onClick={onClick}
+            data-testid="common-modal"
             ref={(el) => {
                 if (typeof callbackRef === 'function') {
                     callbackRef(el)

package/src/Common/Modals/OpaqueModal.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom';
-import closeIcon from '../../Assets/Icon/ic-close.svg'
+import closeIcon from '../../Assets/Icon/ic-cross.svg'
 
 export interface OpaqueModalProps {
     className?: string;
@@ -28,7 +28,7 @@ export class OpaqueModal extends React.Component<OpaqueModalProps> {
         return ReactDOM.createPortal(
             <div className={`full-screen-modal__body-container ${className}`}>
                 {this.props.children}
-                {typeof onHide === 'function' && <div className="close-btn icon-dim-24" onClick={e => onHide(false)}>
+                {typeof onHide === 'function' && <div className="close-btn icon-dim-24" onClick={e => onHide(false)} data-testid="opaque-modal-close">
                     <img className="close-img" src={closeIcon} alt="close" />
                 </div>}
             </div>, document.getElementById('full-screen-modal'))

package/src/Common/Modals/VisibleModal.tsx

@@ -46,7 +46,7 @@ export class VisibleModal extends React.Component<{
 
     render() {
         return ReactDOM.createPortal(
-            <div className={`visible-modal__body ${this.props.className}`} onClick={this.props?.close}>
+            <div className={`visible-modal__body ${this.props.className}`} onClick={this.props?.close} data-testid="visible-modal-close">
                 {this.props.children}
             </div>,
             document.getElementById('visible-modal'),

package/src/Common/Modals/VisibleModal2.tsx

@@ -28,7 +28,7 @@ export class VisibleModal2 extends React.Component<{ className: string; close?:
 
     render() {
         return ReactDOM.createPortal(
-            <div className={`visible-modal__body ${this.props.className}`} onClick={this.props?.close}>
+            <div className={`visible-modal__body ${this.props.className}`} onClick={this.props?.close} data-testid="visible-modal2-close">
                 {this.props.children}
             </div>, document.getElementById('visible-modal-2'))
     }

package/src/Common/MultiSelectCustomization.tsx

@@ -87,9 +87,9 @@ export const MultiValueChipContainer = ({ validator, isAllSelected = false, ...p
 
     return (
         <components.MultiValueContainer {...{ data, innerProps, selectProps }}>
-            <div className={`flex fs-12 pl-4 pr-4`}>
+            <div className="flex left fs-12 pl-4 pr-4 dc__ellipsis-right">
                 {!isValidEmail && <RedWarning className="mr-4 icon-dim-16" />}
-                <div className={`${isValidEmail ? 'cn-9' : 'cr-5'}`}>{label}</div>
+                <div className={`dc__ellipsis-right ${isValidEmail ? 'cn-9' : 'cr-5'}`}>{label}</div>
             </div>
             {children[1]}
         </components.MultiValueContainer>
@@ -124,7 +124,7 @@ export const multiSelectStyles = {
     }),
 }
 
-interface CustomSelect {
+export interface CustomSelect {
     sortSelected?: boolean
     options: any[]
     onChange: (...args) => void

package/src/Common/PopupMenu.tsx

@@ -1,6 +1,8 @@
-import React, { useEffect } from 'react';
-import {Modal} from './Modals/Modal';
-const PopupContext = React.createContext(null);
+import React, { useEffect } from 'react'
+import { Modal } from './Modals/Modal'
+import { PopupMenuBodyType, PopupMenuButtonType, PopupMenuType } from './Types'
+
+const PopupContext = React.createContext(null)
 
 function usePopupContext() {
     const context = React.useContext(PopupContext)
@@ -10,7 +12,12 @@ function usePopupContext() {
     return context
 }
 
-function PopupMenu({ children = null, onToggleCallback = null, autoClose = false, autoPosition = false }) {
+function PopupMenu({
+    children = null,
+    onToggleCallback = null,
+    autoClose = false,
+    autoPosition = false,
+}: PopupMenuType) {
     const [popupPosition, setPopupPosition] = React.useState(null)
     const [opacity, setOpacity] = React.useState(0)
     const observer = React.useRef<IntersectionObserver | null>(null)
@@ -135,7 +142,8 @@ function Button({
     tabIndex = 0,
     onHover = false,
     isKebab = false,
-}) {
+    dataTestId = "",
+}: PopupMenuButtonType) {
     const { handleOpen, popupPosition, buttonRef, initialiseButtonWidth } = usePopupContext()
     return (
         <button
@@ -148,13 +156,21 @@ function Button({
             }`}
             onMouseEnter={onHover ? (disabled ? null : handleOpen) : () => {}}
             onClick={disabled ? null : handleOpen}
+            data-testid={dataTestId}
         >
             {children}
         </button>
     )
 }
 
-function Body({ children = null, rootClassName = '', style = {}, autoWidth = false, preventWheelDisable = false }) {
+function Body({
+    children = null,
+    rootClassName = '',
+    style = {},
+    autoWidth = false,
+    preventWheelDisable = false,
+    noBackDrop,
+}: PopupMenuBodyType) {
     const { handleClose, popupPosition, opacity, callbackRef, buttonWidth } = usePopupContext()
     return popupPosition ? (
         <Modal
@@ -170,6 +186,7 @@ function Body({ children = null, rootClassName = '', style = {}, autoWidth = fal
                 opacity: opacity,
             }}
             preventWheelDisable={preventWheelDisable}
+            noBackDrop={noBackDrop}
         >
             {children}
         </Modal>

package/src/Common/Progressing.tsx

@@ -1,19 +1,10 @@
 import React from 'react'
+import { ProgressingProps } from './Types'
 
-interface ProgressingProps {
-    pageLoader?: boolean
-    loadingText?: string
-    size?: number
-    fullHeight?: boolean
-    theme?: 'white' | 'default'
-    styles?: React.CSSProperties
-    children?: React.ReactNode
-}
-
-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}>
+        <div className={`loader ${theme || 'default'}-background`} style={styles} data-testid="progressing">
             <div style={{ width: loaderSize, height: loaderSize }}>
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="loader__svg">
                     <g fill="none" fillRule="evenodd" strokeLinecap="round">
@@ -27,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"
                         />
@@ -42,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/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,88 @@
+import Tippy from '@tippyjs/react'
+import React, { useState, useEffect } from 'react'
+import { ConditionalWrap } from '../Helper'
+import './radioGroup.scss'
+
+const RadioContext = React.createContext(null)
+
+function useRadioContext() {
+    const context = React.useContext(RadioContext)
+    if (!context) {
+        throw new Error(`Radio compound components cannot be rendered outside the Toggle component`)
+    }
+    return context
+}
+
+interface RadioGroupInterface {
+    name: string
+    onChange: any
+    className?: string
+    initialTab: string
+    disabled: boolean
+    showTippy?: boolean
+    tippyContent?: any
+    dataTestId?: string
+}
+
+interface RadioGroupComposition {
+    Radio?: React.FC<any>
+}
+
+const RadioGroup: React.FC<RadioGroupInterface> & RadioGroupComposition = React.memo(function RadioGroup({
+    name,
+    onChange,
+    children,
+    className = '',
+    initialTab,
+    disabled = false,
+    dataTestId 
+}) {
+    const [selected, select] = useState(null)
+
+    useEffect(() => {
+        if (initialTab === selected) return
+        select(initialTab)
+    }, [initialTab])
+
+    return (
+        <RadioContext.Provider value={{ name, selected, select, disabled, onChange }}>
+            <div className={`${className} radio-group`}>{children}</div>
+        </RadioContext.Provider>
+    )
+})
+
+function Radio({ value, children, className = '', showTippy = false, tippyContent = '', canSelect = true, isDisabled = false, tippyClass = '', dataTestId }) {
+    const { name, selected, select, disabled, onChange } = useRadioContext()
+    return (
+        <ConditionalWrap
+            condition={showTippy}
+            wrap={(children) => (
+                <Tippy className={`default-tt w-250 ${tippyClass}`} arrow={false} placement="bottom" content={tippyContent}>
+                    {children}
+                </Tippy>
+            )}
+        >
+            <label className={`${className} radio ${(isDisabled || disabled)? 'disabled': ''}`}>
+                <input
+                    type="checkbox"
+                    value={value}
+                    name={name}
+                    
+                    checked={value === selected}
+                    onChange={(e) => {
+                        e.persist()
+                        if (canSelect) {
+                            select(e.target.value)
+                        }
+                        onChange(e)
+                    }}
+                    disabled={isDisabled || disabled}
+                />
+                <span className="radio__item-label" data-testid={dataTestId}>{children}</span>
+            </label>
+        </ConditionalWrap>
+    )
+}
+
+RadioGroup.Radio = Radio
+export default RadioGroup

package/src/Common/RadioGroup/radioGroup.scss

@@ -0,0 +1,46 @@
+.radio-group {
+    .label,
+    .radio,
+    .checkbox {
+        margin: 0;
+    }
+    height: 30px;
+    background: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 4px;
+    border-radius: 4px;
+    .radio {
+        height: 100%;
+        width: auto;
+        color: var(--N400);
+        display: flex;
+        align-items: center;
+    }
+    .radio+.radio {
+        margin-top: 0;
+    }
+    input[type=checkbox] {
+        display: contents;
+        overflow: hidden;
+        max-width: 0px;
+        height: 0;
+        opacity: 0;
+        margin: unset;
+    }
+    input+.radio__item-label {
+        padding: 4px 6px;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        transition: all 0.5s;
+        cursor: pointer;
+    }
+    input[type=checkbox]:checked+.radio__item-label {
+        background: #2c3354;
+        color: white;
+        border-radius: 4px;
+    }
+}