@devtron-labs/devtron-fe-common-lib 0.0.48-beta-9 → 0.0.48-beta-11

package/src/Common/Dialogs/ConfirmationDialog.tsx

@@ -1,32 +1,32 @@
-import React from 'react'
 import { VisibleModal2 } from '../Modals/VisibleModal2'
-import { ConfirmationDialogBodyType, ConfirmationDialogButtonGroupType, ConfirmationDialogIconType, ConfirmationDialogType } from './Types'
+import {
+    ConfirmationDialogBodyType,
+    ConfirmationDialogButtonGroupType,
+    ConfirmationDialogIconType,
+    ConfirmationDialogType,
+} from './Types'
 
-function ConfirmationDialog({ className = '', children }: ConfirmationDialogType) {
-    return (
-        <VisibleModal2 className="confirmation-dialog">
-            <div className={`confirmation-dialog__body ${className}`}>{children}</div>
-        </VisibleModal2>
-    )
-}
+const ConfirmationDialog = ({ className = '', children }: ConfirmationDialogType) => (
+    <VisibleModal2 className="confirmation-dialog">
+        <div className={`confirmation-dialog__body ${className}`}>{children}</div>
+    </VisibleModal2>
+)
 
-function Icon({ src, className = '' }: ConfirmationDialogIconType) {
-    return <img src={src} className={`confirmation-dialog__icon ${className}`} alt="" />
-}
+const Icon = ({ src, className = '' }: ConfirmationDialogIconType) => (
+    <img src={src} className={`confirmation-dialog__icon ${className}`} alt="" />
+)
 
-function Body({ title, subtitle = null, children = null }: ConfirmationDialogBodyType) {
-    return (
-        <div className="flex left column ">
-            <h3 className="confirmation-dialog__title lh-1-5 dc__break-word w-100">{title}</h3>
-            {subtitle && <div className="confirmation-dialog__subtitle">{subtitle}</div>}
-            {children}
-        </div>
-    )
-}
+const Body = ({ title, subtitle = null, children = null }: ConfirmationDialogBodyType) => (
+    <div className="flex left column ">
+        <h3 className="confirmation-dialog__title lh-1-5 dc__break-word w-100">{title}</h3>
+        {subtitle && <div className="confirmation-dialog__subtitle">{subtitle}</div>}
+        {children}
+    </div>
+)
 
-function ButtonGroup({ children }: ConfirmationDialogButtonGroupType) {
-    return <div className="flex right confirmation-dialog__button-group">{children}</div>
-}
+const ButtonGroup = ({ children }: ConfirmationDialogButtonGroupType) => (
+    <div className="flex right confirmation-dialog__button-group">{children}</div>
+)
 
 ConfirmationDialog.Icon = Icon
 ConfirmationDialog.Body = Body

package/src/Common/Dialogs/DeleteDialog.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import * as React from 'react'
 import warn from '../../Assets/Img/delete-medium.svg'
 import { Progressing } from '../Progressing'
 import ConfirmationDialog from './ConfirmationDialog'
 import { DeleteDialogProps } from './Types'
 
-export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.FC<any> } = function (props) {
+export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.FC<any> } = (props) => {
     const handleDelete = (e: React.MouseEvent) => {
         if (props.shouldStopPropagation) {
             e.stopPropagation()
@@ -62,8 +62,6 @@ export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.F
     )
 }
 
-function DeleteDialogDescription(props) {
-    return <>{props.children}</>
-}
+const DeleteDialogDescription = (props) => <>{props.children}</>
 
 DeleteDialog.Description = DeleteDialogDescription

package/src/Common/Dialogs/DialogForm.tsx

@@ -1,28 +1,28 @@
-import React, { Component, createContext } from 'react';
-import { VisibleModal } from '../Modals/VisibleModal';
-import close from '../../Assets/Icon/ic-cross.svg';
+import { Component, createContext } from 'react'
+import { VisibleModal } from '../Modals/VisibleModal'
+import close from '../../Assets/Icon/ic-cross.svg'
 import { Progressing } from '../Progressing'
-import { DialogFormProps } from './Types';
-//TODO: may not need context
-const DialogFormContext = createContext({ title: '', isLoading: false, close: (event) => {}, onSave: (event) => {} });
+import { DialogFormProps } from './Types'
+// TODO: may not need context
+const DialogFormContext = createContext({ title: '', isLoading: false, close: (event) => {}, onSave: (event) => {} })
 
 export class DialogForm extends Component<DialogFormProps> {
     constructor(props) {
-        super(props);
-        this.escFunction = this.escFunction.bind(this);
+        super(props)
+        this.escFunction = this.escFunction.bind(this)
     }
 
     componentDidMount() {
-        document.addEventListener('keydown', this.escFunction);
+        document.addEventListener('keydown', this.escFunction)
     }
 
     componentWillUnmount() {
-        document.removeEventListener('keydown', this.escFunction);
+        document.removeEventListener('keydown', this.escFunction)
     }
 
     escFunction(event) {
         if (event.keyCode === 27 && this.props.closeOnESC) {
-            this.props.close(event);
+            this.props.close(event)
         }
     }
 
@@ -46,26 +46,24 @@ export class DialogForm extends Component<DialogFormProps> {
                             </button>
                         </div>
                         <DialogFormContext.Consumer>
-                            {(context) => {
-                                return (
-                                    <form
-                                        noValidate
-                                        onSubmit={(e) => {
-                                            e.preventDefault();
-                                            if (!context.isLoading) {
-                                                context.onSave(e);
-                                            }
-                                        }}
-                                    >
-                                        {this.props.children}
-                                    </form>
-                                );
-                            }}
+                            {(context) => (
+                                <form
+                                    noValidate
+                                    onSubmit={(e) => {
+                                        e.preventDefault()
+                                        if (!context.isLoading) {
+                                            context.onSave(e)
+                                        }
+                                    }}
+                                >
+                                    {this.props.children}
+                                </form>
+                            )}
                         </DialogFormContext.Consumer>
                     </div>
                 </VisibleModal>
             </DialogFormContext.Provider>
-        );
+        )
     }
 }
 
@@ -73,14 +71,12 @@ export class DialogFormSubmit extends Component<{ tabIndex: number }> {
     render() {
         return (
             <DialogFormContext.Consumer>
-                {(context) => {
-                    return (
-                        <button type="submit" className="cta dc__align-right" tabIndex={this.props.tabIndex}>
-                            {context.isLoading ? <Progressing /> : this.props.children}
-                        </button>
-                    );
-                }}
+                {(context) => (
+                    <button type="submit" className="cta dc__align-right" tabIndex={this.props.tabIndex}>
+                        {context.isLoading ? <Progressing /> : this.props.children}
+                    </button>
+                )}
             </DialogFormContext.Consumer>
-        );
+        )
     }
 }

package/src/Common/Dialogs/ForceDeleteDialog.tsx

@@ -1,15 +1,21 @@
-import React from 'react'
-import { ForceDeleteDialogType } from './Types';
-import { DeleteDialog } from './DeleteDialog';
+import { ForceDeleteDialogType } from './Types'
+import { DeleteDialog } from './DeleteDialog'
 
-export default function ForceDeleteDialog({ onClickDelete, closeDeleteModal, forceDeleteDialogTitle, forceDeleteDialogMessage }: ForceDeleteDialogType) {
+export default function ForceDeleteDialog({
+    onClickDelete,
+    closeDeleteModal,
+    forceDeleteDialogTitle,
+    forceDeleteDialogMessage,
+}: ForceDeleteDialogType) {
     return (
         <div>
-            <DeleteDialog title={forceDeleteDialogTitle}
+            <DeleteDialog
+                title={forceDeleteDialogTitle}
                 delete={onClickDelete}
                 closeDelete={closeDeleteModal}
-                deletePrefix="Force ">
-                <DeleteDialog.Description >
+                deletePrefix="Force "
+            >
+                <DeleteDialog.Description>
                     <p className="mt-12 mb-12 p-8 dc__break-word dc__window-bg">Error: {forceDeleteDialogMessage}</p>
                     <p>Do you want to force delete?</p>
                 </DeleteDialog.Description>

package/src/Common/Dialogs/Types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react"
+import { ReactNode } from 'react'
 
 export interface DeleteDialogProps {
     title: string
@@ -15,10 +15,10 @@ export interface DeleteDialogProps {
 }
 
 export interface ForceDeleteDialogType {
-  onClickDelete: () => void
-  closeDeleteModal: () => void
-  forceDeleteDialogTitle: string
-  forceDeleteDialogMessage: string
+    onClickDelete: () => void
+    closeDeleteModal: () => void
+    forceDeleteDialogTitle: string
+    forceDeleteDialogMessage: string
 }
 export interface ConfirmationDialogType {
     className?: string
@@ -37,11 +37,11 @@ export interface ConfirmationDialogButtonGroupType {
     children: any
 }
 export interface DialogFormProps {
-    className: string;
-    title: string;
-    isLoading: boolean;
-    closeOnESC?: boolean;
-    close: (event) => void;
-    onSave: (event) => void;
-    headerClassName?: string;
+    className: string
+    title: string
+    isLoading: boolean
+    closeOnESC?: boolean
+    close: (event) => void
+    onSave: (event) => void
+    headerClassName?: string
 }

package/src/Common/Dialogs/index.ts

@@ -1,4 +1,4 @@
 export { default as ConfirmationDialog } from './ConfirmationDialog'
 export * from './DeleteDialog'
 export * from './DialogForm'
-export { default as ForceDeleteDialog } from './ForceDeleteDialog'
+export { default as ForceDeleteDialog } from './ForceDeleteDialog'

package/src/Common/Drawer/Drawer.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react'
+import { useRef, useEffect } from 'react'
 import { VisibleModal } from '../Modals/VisibleModal'
 import './Drawer.scss'
 

package/src/Common/EmptyState/EmptyState.tsx

@@ -1,14 +1,10 @@
-import React from 'react'
-import './emptyState.scss';
-import { ReactComponent as Progressing } from '../../Assets/Icon/ic-progressing.svg';
-
-function EmptyState({ children, className = '' }) {
-    return (
-        <div className={`flex column empty-state w-100 h-100 ${className}`}>
-            {children}
-        </div>
-    )
-}
+import * as React from 'react'
+import './emptyState.scss'
+import { ReactComponent as Progressing } from '../../Assets/Icon/ic-progressing.svg'
+
+const EmptyState = ({ children, className = '' }) => (
+    <div className={`flex column empty-state w-100 h-100 ${className}`}>{children}</div>
+)
 
 function Image({ children }) {
     return children
@@ -18,20 +14,20 @@ function Title({ children }) {
     return children
 }
 
-function Subtitle({ children, className }: { children: any; className?: string }) {
-    return <p className={`subtitle ${className || ''}`}>{children}</p>
-}
+const Subtitle = ({ children, className }: { children: any; className?: string }) => (
+    <p className={`subtitle ${className || ''}`}>{children}</p>
+)
 
 function Button({ children }) {
     return children
 }
 
-const Loading: React.FC<{ text: string }> = function (props) {
-    return <>
+const Loading: React.FC<{ text: string }> = (props) => (
+    <>
         <Progressing className="dc__block empty-state__loader" />
         <p className="empty-state__loading-text">{props.text}</p>
     </>
-}
+)
 
 EmptyState.Image = Image
 EmptyState.Title = Title

package/src/Common/EmptyState/GenericEmptyState.tsx

@@ -1,10 +1,9 @@
-import React from 'react'
 import AppNotDeployed from '../../Assets/Img/app-not-deployed.png'
 import { GenericEmptyStateType, ImageType } from '../Types'
 
 import './emptyState.scss'
 
-function GenericEmptyState({
+const GenericEmptyState = ({
     title,
     image,
     subTitle,
@@ -20,25 +19,12 @@ function GenericEmptyState({
     noImage,
     layout = 'column',
     contentClassName = '',
-}: GenericEmptyStateType): JSX.Element {
+}: GenericEmptyStateType): JSX.Element => {
     const isRowLayout = layout === 'row'
 
-    const getImageSize = () => {
-        switch (imageType) {
-            case ImageType.Medium:
-                return { width: '200', height: '160' }
-            case ImageType.Large:
-                return { width: '250', height: '200' }
-            default:
-                return { width: '200', height: '160' }
-        }
-    }
-
     return (
         <div
-            className={`flex ${isRowLayout ? 'dc__gap-32' : 'column dc__gap-20'} empty-state ${
-                classname ? classname : ''
-            }`}
+            className={`flex ${isRowLayout ? 'dc__gap-32' : 'column dc__gap-20'} empty-state ${classname || ''}`}
             style={styles}
             data-testid="generic-empty-state"
             {...(heightToDeduct >= 0 && { style: { ...styles, height: `calc(100vh - ${heightToDeduct}px)` } })}
@@ -46,15 +32,15 @@ function GenericEmptyState({
             {!SvgImage ? (
                 !noImage && (
                     <img
-                        className={imageClassName ? imageClassName : ''}
+                        className={imageClassName || ''}
                         src={image || AppNotDeployed}
-                        width={getImageSize().width}
-                        height={getImageSize().height}
+                        width={imageType === ImageType.Medium ? '200' : '250'}
+                        height={imageType === ImageType.Medium ? '160' : '200'}
                         alt="empty-state"
                     />
                 )
             ) : (
-                <SvgImage style={{ width: `${getImageSize().width}px`, height: `${getImageSize().height}px` }} />
+                <SvgImage />
             )}
             <div
                 className={`flex column dc__gap-10 dc__mxw-300 ${

package/src/Common/Error.tsx

@@ -1,4 +1,5 @@
-import React, { Component } from 'react'
+import { Component } from 'react'
+import * as React from 'react'
 import EmptyState from './EmptyState/EmptyState'
 import notAuthorized from '../Assets/Img/ic-not-authorized.svg'
 import ErrorScreenNotFound from './ErrorScreenNotFound'
@@ -20,9 +21,7 @@ export class ErrorScreenManager extends Component<{
             case 401:
                 return 'Unauthorized'
             case 403:
-                return (
-                    <ErrorScreenNotAuthorized subtitle={this.props.subtitle} />
-                )
+                return <ErrorScreenNotAuthorized subtitle={this.props.subtitle} />
             case 404:
                 return <ErrorScreenNotFound />
             case 500:
@@ -35,8 +34,9 @@ export class ErrorScreenManager extends Component<{
                 return <Reload className={this.props.reloadClass} />
         }
     }
+
     render() {
-        let msg = this.getMessage()
+        const msg = this.getMessage()
         return (
             <div>
                 <h1>{msg}</h1>

package/src/Common/ErrorScreenNotFound.tsx

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

package/src/Common/Grid/Grid.tsx

@@ -1,4 +1,3 @@
-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
@@ -11,7 +10,7 @@ export default function Grid({
     itemClass = '',
     children,
 }: GridProps) {
-    const containerStyles = container ? { gap: spacing + 'px' } : {}
+    const containerStyles = container ? { gap: `${spacing}px` } : {}
 
     if (item) {
         const getColumnWidth = () => {

package/src/Common/Helper.tsx

@@ -1,6 +1,7 @@
 import * as Sentry from '@sentry/browser'
 import moment from 'moment'
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import * as React from 'react'
 import { useLocation } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { ERROR_EMPTY_SCREEN, TOKEN_COOKIE_NAME } from './Constants'
@@ -77,16 +78,19 @@ export const stopPropagation = (event): void => {
 }
 
 export function useThrottledEffect(callback, delay, deps = []) {
-    //function will be executed only once in a given time interval.
+    // 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))
+        const handler = setTimeout(
+            () => {
+                if (Date.now() - lastRan.current >= delay) {
+                    callback()
+                    lastRan.current = Date.now()
+                }
+            },
+            delay - (Date.now() - lastRan.current),
+        )
 
         return () => {
             clearTimeout(handler)
@@ -115,7 +119,7 @@ export function getRandomColor(email: string): string {
     return colors[sum % colors.length]
 }
 
-export const getAlphabetIcon = (str: string, rootClassName: string = "") => {
+export const getAlphabetIcon = (str: string, rootClassName: string = '') => {
     if (!str) return null
     return (
         <span
@@ -127,9 +131,7 @@ export const getAlphabetIcon = (str: string, rootClassName: string = "") => {
     )
 }
 
-export const getEmptyArrayOfLength = (length: number) => {
-    return Array.from({ length })
-}
+export const getEmptyArrayOfLength = (length: number) => Array.from({ length })
 
 export function noop(...args): any {}
 
@@ -153,7 +155,7 @@ export function getCookie(sKey) {
     }
     return (
         document.cookie.replace(
-            new RegExp('(?:(?:^|.*;)\\s*' + sKey.replace(/[\-\.\+\*]/g, '\\$&') + '\\s*\\=\\s*([^;]*).*$)|^.*$'),
+            new RegExp(`(?:(?:^|.*;)\\s*${sKey.replace(/[\-\.\+\*]/g, '\\$&')}\\s*\\=\\s*([^;]*).*$)|^.*$`),
             '$1',
         ) || null
     )
@@ -196,7 +198,7 @@ export function useForm(stateSchema, validationSchema = {}, callback) {
     // in every re-render in component
     const validateState = useCallback(
         (state) => {
-            //check errors in all fields
+            // check errors in all fields
             const hasErrorInState = Object.keys(validationSchema).some((key) => {
                 const isInputFieldRequired = validationSchema[key].required
                 const stateValue = state[key].value // state value
@@ -223,7 +225,7 @@ export function useForm(stateSchema, validationSchema = {}, callback) {
         }
 
         // single validator
-        let _validator = validationSchema[name].validator
+        const _validator = validationSchema[name].validator
         if (_validator && typeof _validator === 'object') {
             if (!_validateSingleValidator(_validator, value)) {
                 return _validator.error
@@ -231,9 +233,9 @@ export function useForm(stateSchema, validationSchema = {}, callback) {
         }
 
         // multiple validators
-        let _validators = validationSchema[name].validators
+        const _validators = validationSchema[name].validators
         if (_validators && typeof _validators === 'object' && Array.isArray(_validators)) {
-            let errors = []
+            const errors = []
             _validators.forEach((_validator) => {
                 if (!_validateSingleValidator(_validator, value)) {
                     errors.push(_validator.error)
@@ -252,7 +254,7 @@ export function useForm(stateSchema, validationSchema = {}, callback) {
             setIsDirty(true)
 
             const { name, value } = event.target
-            let error = validateField(name, value)
+            const error = validateField(name, value)
             setState((prevState) => ({
                 ...prevState,
                 [name]: { value, error },
@@ -280,7 +282,7 @@ export function handleUTCTime(ts: string, isRelativeTime = false) {
     let timestamp = ''
     try {
         if (ts && ts.length) {
-            let date = moment(ts)
+            const date = moment(ts)
             if (isRelativeTime) timestamp = date.fromNow()
             else timestamp = date.format('ddd DD MMM YYYY HH:mm:ss')
         }
@@ -364,9 +366,7 @@ export function useAsync<T>(
         dependencies: dependencyArray,
     })
     const mounted = useRef(true)
-    const dependencies: any[] = useMemo(() => {
-        return [...dependencyArray, shouldRun]
-    }, [...dependencyArray, shouldRun])
+    const dependencies: any[] = useMemo(() => [...dependencyArray, shouldRun], [...dependencyArray, shouldRun])
 
     const reload = () => {
         async function call() {
@@ -432,9 +432,8 @@ export function useAsync<T>(
 export const processDeployedTime = (lastDeployed, isArgoInstalled) => {
     if (lastDeployed) {
         return handleUTCTime(lastDeployed, true)
-    } else {
-        return isArgoInstalled ? '' : 'Not deployed'
     }
+    return isArgoInstalled ? '' : 'Not deployed'
 }
 
 /**

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 
 export const useClickOutside = (ref: any, callback: () => void) => {
     useEffect(() => {

package/src/Common/Hooks/UseSuperAdmin/UseSuperAdmin.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { getUserRole } from '../../Common.service'
 import { useSuperAdminType } from './types'
 import { showError } from '../../Helper'

package/src/Common/ImageTags.Types.ts

@@ -13,13 +13,12 @@ export interface ImageComment {
     artifactId: number
 }
 
-
 export interface ImageTaggingContainerType {
     ciPipelineId?: number
     artifactId?: number
     imageComment?: ImageComment
     imageReleaseTags?: ReleaseTag[]
-    updateCurrentAppMaterial? : (matId:number, releaseTags?:ReleaseTag[], imageComment?:ImageComment) => void
+    updateCurrentAppMaterial?: (matId: number, releaseTags?: ReleaseTag[], imageComment?: ImageComment) => void
     appReleaseTagNames?: string[]
     tagsEditable?: boolean
     forceReInit?: boolean
@@ -41,4 +40,4 @@ export interface ImageButtonType {
     isSuperAdmin: any
     duplicateTag?: boolean
     hideHardDelete?: boolean
-}
+}