@devtron-labs/devtron-fe-common-lib 0.0.48-beta-6 → 0.0.48-beta-7

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,
@@ -19,24 +18,35 @@ function GenericEmptyState({
     SvgImage,
     noImage,
     layout = 'column',
-    contentClassName = ''
-}: GenericEmptyStateType): JSX.Element {
-    const isRowLayout = layout === 'row';
-    
+    contentClassName = '',
+}: GenericEmptyStateType): JSX.Element => {
+    const isRowLayout = layout === 'row'
+
     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)` } })}
-        >   
-            {!SvgImage ? !noImage && <img className={imageClassName ? imageClassName : ''}
-                src={image || AppNotDeployed}
-                width={imageType === ImageType.Medium ? '200' : '250'}
-                height={imageType === ImageType.Medium ? '160' : '200'}
-                alt="empty-state"
-            /> : <SvgImage />}
-            <div className={`flex column dc__gap-10 dc__mxw-300 ${isRowLayout ? 'dc__align-start' : ''} ${contentClassName}`}>
+        >
+            {!SvgImage ? (
+                !noImage && (
+                    <img
+                        className={imageClassName || ''}
+                        src={image || AppNotDeployed}
+                        width={imageType === ImageType.Medium ? '200' : '250'}
+                        height={imageType === ImageType.Medium ? '160' : '200'}
+                        alt="empty-state"
+                    />
+                )
+            ) : (
+                <SvgImage />
+            )}
+            <div
+                className={`flex column dc__gap-10 dc__mxw-300 ${
+                    isRowLayout ? 'dc__align-start' : ''
+                } ${contentClassName}`}
+            >
                 <h4 className="title fw-6 cn-9 mt-0 mb-0">{title}</h4>
                 {subTitle && <p className={`subtitle ${isRowLayout ? 'subtitle--text-start' : ''}`}>{subTitle}</p>}
                 {isButtonAvailable && renderButton()}

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 = () => {