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

package/src/Common/EmptyState/GenericEmptyState.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import AppNotDeployed from '../../Assets/Img/app-not-deployed.png'
+import { GenericEmptyStateType, ImageType } from '../Types'
+import './emptyState.scss'
+
+function GenericEmptyState({
+    title,
+    image,
+    subTitle,
+    isButtonAvailable,
+    classname,
+    styles,
+    heightToDeduct,
+    imageType,
+    renderButton,
+    imageClassName,
+    children,
+    noImage
+}: GenericEmptyStateType): JSX.Element {
+    return (
+        <div
+            className={`flex column empty-state dc__align-reload-center ${classname ? classname : ''}`}
+            style={styles}
+            data-testid="generic-empty-state"
+            {...(heightToDeduct >= 0 && { style: { ...styles, height: `calc(100vh - ${heightToDeduct}px)` } })}
+        >
+            {!noImage && <img className={imageClassName ? imageClassName : ''}
+                src={image || AppNotDeployed}
+                width={imageType === ImageType.Medium ? '200' : '250'}
+                height={imageType === ImageType.Medium ? '160' : '200'}
+                alt="empty-state"
+            />}
+            <h4 className="title fw-6 cn-9 mb-8 mt-20">{title}</h4>
+            {subTitle && <p className="subtitle">{subTitle}</p>}
+            {isButtonAvailable && renderButton()}
+              {children}
+        </div>
+    )
+}
+
+export default GenericEmptyState

package/src/Common/EmptyState/emptyState.scss

@@ -19,12 +19,9 @@
     h6 {
         color: var(--N900);
     }
-    .title {
-        font-weight: 600;
-    }
     .subtitle {
         font-size: 13px;
-        width: 250px;
+        width: 300px;
         font-weight: 400;
         text-align: center;
         line-height: 1.5;
@@ -34,7 +31,7 @@
         height: 36px;
     }
     p {
-        width: 250px;
+        width: 300px;
         text-align: center;
         font-size: 13px;
         color: var(--N700);
@@ -68,16 +65,8 @@
         color: var(--N900);
     }
     .button__icon {
-        width:16px;
-        height:16px;
+        width: 16px;
+        height: 16px;
         margin-left: 8px;
     }
-    //TODO: use name
-    // .subtitle a {
-    //     color: inherit;
-    // }
-    // .subtitle a:focus,
-    // .subtitle a:hover {
-    //     color: inherit;
-    // }
 }

package/src/Common/Error.tsx

@@ -1,8 +1,10 @@
 import React, { Component } from 'react'
 import EmptyState from './EmptyState/EmptyState'
 import notAuthorized from '../Assets/Img/ic-not-authorized.svg'
-import Reload from './Reload'
 import ErrorScreenNotFound from './ErrorScreenNotFound'
+import { ERROR_EMPTY_SCREEN } from './Constants'
+import GenericEmptyState from './EmptyState/GenericEmptyState'
+import Reload from './Reload'
 
 export class ErrorScreenManager extends Component<{
     code?: number
@@ -19,7 +21,7 @@ export class ErrorScreenManager extends Component<{
                 return 'Unauthorized'
             case 403:
                 return (
-                    <ErrorScreenNotAuthorized subtitle={this.props.subtitle} subtitleClass={this.props.subtitleClass} />
+                    <ErrorScreenNotAuthorized subtitle={this.props.subtitle} />
                 )
             case 404:
                 return <ErrorScreenNotFound />
@@ -43,22 +45,17 @@ export class ErrorScreenManager extends Component<{
     }
 }
 
-export class ErrorScreenNotAuthorized extends Component<{ subtitle: React.ReactChild; subtitleClass?: string }> {
+export class ErrorScreenNotAuthorized extends Component<{
+    subtitle?: React.ReactChild
+    title?: string
+}> {
     render() {
         return (
-            <EmptyState>
-                <EmptyState.Image>
-                    <img src={notAuthorized} alt="Not Authorized" />
-                </EmptyState.Image>
-                <EmptyState.Title>
-                    <h3 className="title">Not authorized</h3>
-                </EmptyState.Title>
-                <EmptyState.Subtitle className={this.props.subtitleClass}>
-                    {this.props.subtitle
-                        ? this.props.subtitle
-                        : "Looks like you don't have access to information on this page. Please contact your manager to request access."}
-                </EmptyState.Subtitle>
-            </EmptyState>
+            <GenericEmptyState
+                image={notAuthorized}
+                title={this.props.title ?? ERROR_EMPTY_SCREEN.NOT_AUTHORIZED}
+                subTitle={this.props.subtitle ?? ERROR_EMPTY_SCREEN.ONLY_FOR_SUPERADMIN}
+            />
         )
     }
 }

package/src/Common/ErrorScreenNotFound.tsx

@@ -1,38 +1,31 @@
 import React from 'react'
 import notFound from '../Assets/Img/ic-empty-error@2x.png'
-import { useHistory } from 'react-router'
-import EmptyState from './EmptyState/EmptyState'
+import { useHistory } from 'react-router-dom'
 import { ERROR_EMPTY_SCREEN } from './Constants'
+import GenericEmptyState from './EmptyState/GenericEmptyState'
 
 function ErrorScreenNotFound() {
-  const history = useHistory()
+    const {push} = useHistory()
+    const redirectToHome = () => {
+        push('/app/list')
+    }
+    const renderGenerateButton = () => {
+        return (
+            <button className="flex cta h-32" onClick={redirectToHome} data-testid="empty-screen-take-me-home">
+                {ERROR_EMPTY_SCREEN.TAKE_BACK_HOME}
+            </button>
+        )
+    }
 
-  const redirectToHome = () => {
-    history.push('/app/list')
-  }
-
-  return (
-    <div>
-         <EmptyState>
-              <EmptyState.Image>
-                  <img src={notFound} alt="Not Found" />
-              </EmptyState.Image>
-              <EmptyState.Title>
-                  <h3 className="title">{ERROR_EMPTY_SCREEN.PAGE_NOT_FOUND}</h3>
-              </EmptyState.Title>
-              <EmptyState.Subtitle >
-                   <p>{ERROR_EMPTY_SCREEN.PAGE_NOT_EXIST}</p>
-              </EmptyState.Subtitle>
-              <EmptyState.Button>
-                        <button className="flex cta h-32"
-                        onClick={redirectToHome}
-                        >
-                            {ERROR_EMPTY_SCREEN.TAKE_BACK_HOME}
-                        </button>
-                    </EmptyState.Button>
-          </EmptyState>
-    </div>
-  )
+    return (
+        <GenericEmptyState
+            image={notFound}
+            title={ERROR_EMPTY_SCREEN.PAGE_NOT_FOUND}
+            subTitle={ERROR_EMPTY_SCREEN.PAGE_NOT_EXIST}
+            isButtonAvailable={true}
+            renderButton={renderGenerateButton}
+        />
+    )
 }
 
-export default ErrorScreenNotFound
+export default ErrorScreenNotFound

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