@devtron-labs/devtron-fe-common-lib 0.0.63-beta-1 → 0.0.63-beta-4

package/src/Common/ErrorScreenNotFound.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import notFound from '../Assets/Img/ic-empty-error@2x.png'
+import { useHistory } from 'react-router-dom'
+import { ERROR_EMPTY_SCREEN } from './Constants'
+import GenericEmptyState from './EmptyState/GenericEmptyState'
+
+function ErrorScreenNotFound() {
+    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>
+        )
+    }
+
+    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

package/src/Common/Grid/Grid.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { GridProps } from './types'
+
+// This is meant to be a reusable component that will provide a grid like dynamic layout where xs is the number of columns out of 12 that the item will take up
+export default function Grid({
+    container,
+    spacing = 0,
+    item,
+    xs,
+    containerClass = '',
+    itemClass = '',
+    children,
+    ...containerDivProps
+}: GridProps) {
+    const containerStyles = container ? { gap: spacing + 'px' } : {}
+
+    if (item) {
+        const getColumnWidth = () => {
+            const percentageWidth = (xs / 12) * 100
+            // DONT CHANGE IT FROM CALC SINCE CALC CONVERTS TO PX which is needed to handle text overflow
+            return `calc(${percentageWidth}%)`
+        }
+
+        const itemStyles = {
+            flex: `1 1 ${getColumnWidth()}`,
+        }
+
+        return (
+            <div className={`p-0 ${itemClass}`} style={itemStyles} {...containerDivProps}>
+                {children}
+            </div>
+        )
+    }
+
+    return (
+        <div
+            className={`flex-wrap flexbox ${container ? containerClass : ''}`}
+            style={containerStyles}
+            {...containerDivProps}
+        >
+            {children}
+        </div>
+    )
+}

package/src/Common/Grid/types.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react'
+
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    container?: boolean
+    spacing?: number
+    item?: boolean
+    xs?: number
+    containerClass?: string
+    itemClass?: string
+    children?: React.ReactNode
+}

package/src/Common/Helper.tsx

@@ -0,0 +1,596 @@
+import * as Sentry from '@sentry/browser'
+import moment from 'moment'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useLocation } from 'react-router-dom'
+import { toast } from 'react-toastify'
+import { ERROR_EMPTY_SCREEN, TOKEN_COOKIE_NAME } from './Constants'
+import { ServerErrors } from './ServerError'
+import { toastAccessDenied } from './ToastBody'
+import { AsyncOptions, AsyncState, UseSearchString } from './Types'
+import { JSONPath } from 'jsonpath-plus'
+import * as jsonpatch from 'fast-json-patch'
+
+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 === ERROR_EMPTY_SCREEN.UNAUTHORIZED || userMessage === ERROR_EMPTY_SCREEN.FORBIDDEN)
+            ) {
+                if (!hideAccessError) {
+                    toastAccessDenied()
+                }
+            } else {
+                toast.error(userMessage || internalMessage)
+            }
+        })
+    } else {
+        if (serverError.code !== 403 && serverError.code !== 408) {
+            Sentry.captureException(serverError)
+        }
+
+        if (showToastOnUnknownError) {
+            if (serverError.message) {
+                toast.error(serverError.message)
+            } else {
+                toast.error('Some Error Occurred')
+            }
+        }
+    }
+}
+
+interface ConditionalWrapper<T> {
+    condition: boolean
+    wrap: (children: T) => T
+    children: T
+}
+export const ConditionalWrap: React.FC<ConditionalWrapper<any>> = ({ condition, wrap, children }) =>
+    condition ? wrap(children) : <>{children}</>
+
+export function sortCallback(key: string, a: any, b: any, isCaseSensitive?: boolean) {
+    let x = a[key]
+    let y = b[key]
+    if (isCaseSensitive) {
+        x = x.toLowerCase()
+        y = y.toLowerCase()
+    }
+    if (x < y) {
+        return -1
+    }
+    if (x > y) {
+        return 1
+    }
+    return 0
+}
+
+export const stopPropagation = (event): void => {
+    event.stopPropagation()
+}
+
+export function useThrottledEffect(callback, delay, deps = []) {
+    //function will be executed only once in a given time interval.
+    const lastRan = useRef(Date.now())
+
+    useEffect(() => {
+        const handler = setTimeout(function () {
+            if (Date.now() - lastRan.current >= delay) {
+                callback()
+                lastRan.current = Date.now()
+            }
+        }, delay - (Date.now() - lastRan.current))
+
+        return () => {
+            clearTimeout(handler)
+        }
+    }, [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, rootClassName: string = "") => {
+    if (!str) return null
+    return (
+        <span
+            className={`${rootClassName} 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 }
+}
+
+export function handleUTCTime(ts: string, isRelativeTime = false) {
+    let timestamp = ''
+    try {
+        if (ts && ts.length) {
+            let date = moment(ts)
+            if (isRelativeTime) timestamp = date.fromNow()
+            else timestamp = date.format('ddd DD MMM YYYY HH:mm:ss')
+        }
+    } catch (error) {
+        console.error('Error Parsing Date:', ts)
+    }
+    return timestamp
+}
+
+export function useSearchString(): UseSearchString {
+    const location = useLocation()
+    const queryParams: URLSearchParams = useMemo(() => {
+        const queryParams = new URLSearchParams(location.search)
+        return queryParams
+    }, [location])
+
+    // const searchParams={}
+    // for (let [key, value] of queryParams.entries()){
+    //     searchParams[key]=value
+    // }
+    const searchParams = Array.from(queryParams.entries()).reduce((agg, curr, idx) => {
+        agg[curr[0]] = curr[1]
+        return agg
+    }, {})
+
+    return { queryParams, searchParams }
+}
+
+export const closeOnEscKeyPressed = (e: any, actionClose: () => void) => {
+    if (e.keyCode === 27 || e.key === 'Escape') {
+        actionClose()
+    }
+}
+
+const unsecureCopyToClipboard = (str, callback = noop) => {
+    const listener = function (ev) {
+        ev.preventDefault()
+        ev.clipboardData.setData('text/plain', str)
+    }
+    document.addEventListener('copy', listener)
+    document.execCommand('copy')
+    document.removeEventListener('copy', listener)
+    callback()
+}
+
+/**
+ * It will copy the passed content to clipboard and invoke the callback function, in case of error it will show the toast message.
+ * On HTTP system clipboard is not supported, so it will use the unsecureCopyToClipboard function
+ * @param str
+ * @param callback
+ */
+export function copyToClipboard(str, callback = noop) {
+    if (!str) {
+        return
+    }
+
+    if (window.isSecureContext && navigator.clipboard) {
+        navigator.clipboard
+            .writeText(str)
+            .then(() => {
+                callback()
+            })
+            .catch(() => {
+                toast.error('Failed to copy to clipboard')
+            })
+    } else {
+        unsecureCopyToClipboard(str, callback)
+    }
+}
+
+export function useAsync<T>(
+    func: (...rest) => Promise<T>,
+    dependencyArray: any[] = [],
+    shouldRun = true,
+    options: AsyncOptions = { resetOnChange: true },
+): [boolean, T, any | null, () => void, React.Dispatch<any>, any[]] {
+    const [state, setState] = useState<AsyncState<T>>({
+        loading: true,
+        result: null,
+        error: null,
+        dependencies: dependencyArray,
+    })
+    const mounted = useRef(true)
+    const dependencies: any[] = useMemo(() => {
+        return [...dependencyArray, shouldRun]
+    }, [...dependencyArray, shouldRun])
+
+    const reload = () => {
+        async function call() {
+            try {
+                setState((state) => ({
+                    ...state,
+                    loading: true,
+                }))
+                const result = await func()
+                if (mounted.current)
+                    setState((state) => ({
+                        ...state,
+                        result,
+                        error: null,
+                        loading: false,
+                    }))
+            } catch (error: any) {
+                if (mounted.current)
+                    setState((state) => ({
+                        ...state,
+                        error,
+                        loading: false,
+                    }))
+            }
+        }
+        call()
+    }
+
+    useEffect(() => {
+        if (!shouldRun) {
+            setState((state) => ({ ...state, loading: false }))
+            return
+        }
+        setState((state) => ({ ...state, dependencies: dependencyArray }))
+        reload()
+        return () =>
+            setState((state) => ({
+                ...state,
+                loading: false,
+                error: null,
+                ...(options.resetOnChange ? { result: null } : {}),
+            }))
+    }, dependencies)
+
+    useEffect(() => {
+        mounted.current = true
+        return () => {
+            mounted.current = false
+        }
+    }, [])
+
+    const setResult = (param) => {
+        if (typeof param === 'function') {
+            setState((state) => ({ ...state, result: param(state.result) }))
+        } else {
+            setState((state) => ({ ...state, result: param }))
+        }
+    }
+
+    return [state.loading, state.result, state.error, reload, setResult, state.dependencies]
+}
+
+export const processDeployedTime = (lastDeployed, isArgoInstalled) => {
+    if (lastDeployed) {
+        return handleUTCTime(lastDeployed, true)
+    } else {
+        return isArgoInstalled ? '' : 'Not deployed'
+    }
+}
+
+/**
+ * Appends search parameters to the url as a query string
+ *
+ * @param url URL to which the search params needs to be added
+ * @param params Object for the search parameters
+ */
+export const getUrlWithSearchParams = (url: string, params: Record<string | number, any>) => {
+    const searchParams = new URLSearchParams()
+    Object.keys(params).forEach((key) => {
+        if (params[key]) {
+            if (Array.isArray(params[key])) {
+                params[key].forEach((val) => {
+                    searchParams.append(key, val)
+                })
+            } else {
+                searchParams.set(key, params[key])
+            }
+        }
+    })
+    const queryString = searchParams.toString()
+    return url + (queryString ? `?${queryString}` : '')
+}
+
+/**
+ * Custom exception logger function for logging errors to sentry
+ */
+export const logExceptionToSentry = Sentry.captureException.bind(window)
+
+export const customStyles = {
+    control: (base, state) => ({
+        ...base,
+        minHeight: '32px',
+        boxShadow: 'none',
+        border: 'none',
+        cursor: 'pointer',
+        background: 'transparent',
+    }),
+    indicatorSeparator: (base, state) => ({
+        ...base,
+        width: 0,
+    }),
+    valueContainer: (base, state) => ({
+        ...base,
+        padding: '0',
+        fontSize: '13px',
+        fontWeight: '600',
+    }),
+    dropdownIndicator: (base, state) => ({
+        ...base,
+        color: 'var(--N400)',
+        padding: '0 8px',
+        transition: 'all .2s ease',
+        transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+    }),
+}
+
+export const getFilteredChartVersions = (charts, selectedChartType) => {
+    // Filter chart versions based on selected chart type
+    return charts
+        .filter((item) => item?.chartType === selectedChartType.value)
+        .map((item) => ({
+            value: item?.chartVersion,
+            label: item?.chartVersion,
+            chartRefId: item.chartRefId,
+        }))
+}
+
+function removeEmptyObjectKeysAndNullValues(obj, originaljsonCopy) {
+    // It recursively removes empty object keys and empty array keys
+    for (let key in obj) {
+        if (Array.isArray(obj[key])) {
+            // Check if the array is empty
+            if (obj[key].length !== 0) {
+                obj[key].forEach((element, index) => {
+                    if (element === null || (typeof element === 'object' && Object.keys(element).length === 0))
+                        obj[key].splice(index, 1)
+                    else removeEmptyObjectKeysAndNullValues(element, originaljsonCopy[key][index])
+                })
+            }
+            if (obj[key].length === 0 && originaljsonCopy[key].length !== 0) {
+                delete obj[key]
+            }
+        } else if (obj[key] && typeof obj[key] === 'object') {
+            if (
+                removeEmptyObjectKeysAndNullValues(obj[key], originaljsonCopy[key]) &&
+                Object.keys(originaljsonCopy[key]).length !== 0
+            ) {
+                delete obj[key]
+            }
+        } else if (obj[key] === undefined) {
+            delete obj[key]
+        }
+    }
+    return Object.keys(obj).length === 0
+}
+
+export function getUnlockedJSON(json, jsonPathArray, removeParentKeysAndEmptyArrays = false) {
+    if (!jsonPathArray.length) return { newDocument: json, removedPatches: [] }
+    
+    const jsonCopy = JSON.parse(JSON.stringify(json))
+    const originaljsonCopy = JSON.parse(JSON.stringify(json))
+    let removedPatches = []
+    let patches = jsonPathArray.flatMap((jsonPath) => {
+        const pathsToRemove = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' })
+        //reversing patches to handle correct array index deletion
+        pathsToRemove.reverse()
+        return pathsToRemove.map((result) => {
+            //storing removed patches to have functionality of undo
+            removedPatches.push({ op: 'add', path: result.pointer, value: result.value })
+            return { op: 'remove', path: result.pointer }
+        })
+    })
+    let newDocument = jsonpatch.applyPatch(jsonCopy, patches).newDocument
+    if (removeParentKeysAndEmptyArrays) removeEmptyObjectKeysAndNullValues(newDocument, originaljsonCopy)
+    return { newDocument, removedPatches: removedPatches.reverse() }
+}
+
+export function getLockedJSON(json, jsonPathArray: string[]) {
+    const jsonCopy = JSON.parse(JSON.stringify(json))
+    let resultJson = {}
+    jsonPathArray.forEach((jsonPath) => {
+        const elements = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' })
+        elements.forEach((element) => {
+            const pathArray: string[] = JSONPath.toPathArray(element.path)
+            const lastPath = pathArray.pop()
+            let current = resultJson
+            for (let i = 0; i < pathArray.length; i++) {
+                let key = isNaN(Number(pathArray[i])) ? pathArray[i] : parseInt(pathArray[i])
+                if (!current[key]) {
+                    current[key] = isNaN(Number(pathArray[i + 1]??lastPath)) ? {} : []
+                }
+                current = current[key]
+            }
+            let key = isNaN(Number(lastPath)) ? lastPath : parseInt(lastPath)
+            current[key] = element.value
+        })
+    })
+    return resultJson['$']
+}
+
+/**
+ * Returns a debounced variant of the function
+ */
+export const debounce = (func, timeout = 500) => {
+    let timer
+
+    return function (this, ...args) {
+        const context = this
+        if (timer) clearTimeout(timer)
+        timer = setTimeout(() => {
+            timer = null
+            func.apply(context, args)
+        }, timeout)
+    }
+}

package/src/Common/Hooks/UseClickOutside/UseClickOutside.tsx

@@ -0,0 +1,15 @@
+import React, { useEffect } from 'react'
+
+export const useClickOutside = (ref: any, callback: () => void) => {
+    useEffect(() => {
+        const handleClickOutside = (e: any) => {
+            if (ref?.current && !ref.current.contains(e.target)) {
+                callback()
+            }
+        }
+        document.addEventListener('click', handleClickOutside)
+        return () => {
+            document.removeEventListener('click', handleClickOutside)
+        }
+    }, [ref, callback])
+}