@devtron-labs/devtron-fe-common-lib 0.0.52-beta-3 → 0.0.52-beta-5

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'
 
-const ConfirmationDialog = ({ className = '', children }: ConfirmationDialogType) => (
-    <VisibleModal2 className="confirmation-dialog">
-        <div className={`confirmation-dialog__body ${className}`}>{children}</div>
-    </VisibleModal2>
-)
+function ConfirmationDialog({ className = '', children }: ConfirmationDialogType) {
+    return (
+        <VisibleModal2 className="confirmation-dialog">
+            <div className={`confirmation-dialog__body ${className}`}>{children}</div>
+        </VisibleModal2>
+    )
+}
 
-const Icon = ({ src, className = '' }: ConfirmationDialogIconType) => (
-    <img src={src} className={`confirmation-dialog__icon ${className}`} alt="" />
-)
+function Icon({ src, className = '' }: ConfirmationDialogIconType) {
+    return <img src={src} className={`confirmation-dialog__icon ${className}`} alt="" />
+}
 
-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 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 ButtonGroup = ({ children }: ConfirmationDialogButtonGroupType) => (
-    <div className="flex right confirmation-dialog__button-group">{children}</div>
-)
+function ButtonGroup({ children }: ConfirmationDialogButtonGroupType) {
+    return <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 * as React from 'react'
+import 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> } = (props) => {
+export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.FC<any> } = function (props) {
     const handleDelete = (e: React.MouseEvent) => {
         if (props.shouldStopPropagation) {
             e.stopPropagation()
@@ -62,6 +62,8 @@ export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.F
     )
 }
 
-const DeleteDialogDescription = (props) => <>{props.children}</>
+function DeleteDialogDescription(props) {
+    return <>{props.children}</>
+}
 
 DeleteDialog.Description = DeleteDialogDescription

package/src/Common/Dialogs/DialogForm.tsx

@@ -1,28 +1,28 @@
-import { Component, createContext } from 'react'
-import { VisibleModal } from '../Modals/VisibleModal'
-import close from '../../Assets/Icon/ic-cross.svg'
+import React, { 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,24 +46,26 @@ export class DialogForm extends Component<DialogFormProps> {
                             </button>
                         </div>
                         <DialogFormContext.Consumer>
-                            {(context) => (
-                                <form
-                                    noValidate
-                                    onSubmit={(e) => {
-                                        e.preventDefault()
-                                        if (!context.isLoading) {
-                                            context.onSave(e)
-                                        }
-                                    }}
-                                >
-                                    {this.props.children}
-                                </form>
-                            )}
+                            {(context) => {
+                                return (
+                                    <form
+                                        noValidate
+                                        onSubmit={(e) => {
+                                            e.preventDefault();
+                                            if (!context.isLoading) {
+                                                context.onSave(e);
+                                            }
+                                        }}
+                                    >
+                                        {this.props.children}
+                                    </form>
+                                );
+                            }}
                         </DialogFormContext.Consumer>
                     </div>
                 </VisibleModal>
             </DialogFormContext.Provider>
-        )
+        );
     }
 }
 
@@ -71,12 +73,14 @@ export class DialogFormSubmit extends Component<{ tabIndex: number }> {
     render() {
         return (
             <DialogFormContext.Consumer>
-                {(context) => (
-                    <button type="submit" className="cta dc__align-right" tabIndex={this.props.tabIndex}>
-                        {context.isLoading ? <Progressing /> : this.props.children}
-                    </button>
-                )}
+                {(context) => {
+                    return (
+                        <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,21 +1,15 @@
-import { ForceDeleteDialogType } from './Types'
-import { DeleteDialog } from './DeleteDialog'
+import React from 'react'
+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 { useRef, useEffect } from 'react'
+import React, { useRef, useEffect } from 'react'
 import { VisibleModal } from '../Modals/VisibleModal'
 import './Drawer.scss'
 

package/src/Common/EmptyState/EmptyState.tsx

@@ -1,10 +1,14 @@
-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>
-)
+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>
+    )
+}
 
 function Image({ children }) {
     return children
@@ -14,20 +18,20 @@ function Title({ children }) {
     return children
 }
 
-const Subtitle = ({ children, className }: { children: any; className?: string }) => (
-    <p className={`subtitle ${className || ''}`}>{children}</p>
-)
+function Subtitle({ children, className }: { children: any; className?: string }) {
+    return <p className={`subtitle ${className || ''}`}>{children}</p>
+}
 
 function Button({ children }) {
     return children
 }
 
-const Loading: React.FC<{ text: string }> = (props) => (
-    <>
+const Loading: React.FC<{ text: string }> = function (props) {
+    return <>
         <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,9 +1,10 @@
+import React from 'react';
 import AppNotDeployed from '../../Assets/Img/app-not-deployed.png'
 import { GenericEmptyStateType, ImageType } from '../Types'
 
 import './emptyState.scss'
 
-const GenericEmptyState = ({
+function GenericEmptyState({
     title,
     image,
     subTitle,
@@ -18,35 +19,24 @@ const 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={`flex ${isRowLayout ? 'dc__gap-32' : 'column dc__gap-20'} empty-state ${classname ? classname : ''}`}
             style={styles}
             data-testid="generic-empty-state"
             {...(heightToDeduct >= 0 && { style: { ...styles, height: `calc(100vh - ${heightToDeduct}px)` } })}
-        >
-            {!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}`}
-            >
+        >   
+            {!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}`}>
                 <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,5 +1,4 @@
-import { Component } from 'react'
-import * as React from 'react'
+import React, { Component } from 'react'
 import EmptyState from './EmptyState/EmptyState'
 import notAuthorized from '../Assets/Img/ic-not-authorized.svg'
 import ErrorScreenNotFound from './ErrorScreenNotFound'
@@ -21,7 +20,9 @@ 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:
@@ -34,9 +35,8 @@ export class ErrorScreenManager extends Component<{
                 return <Reload className={this.props.reloadClass} />
         }
     }
-
     render() {
-        const msg = this.getMessage()
+        let msg = this.getMessage()
         return (
             <div>
                 <h1>{msg}</h1>

package/src/Common/ErrorScreenNotFound.tsx

@@ -1,25 +1,28 @@
-import { useHistory } from 'react-router-dom'
+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'
 
-const ErrorScreenNotFound = () => {
-    const { push } = useHistory()
+function ErrorScreenNotFound() {
+    const {push} = useHistory()
     const redirectToHome = () => {
         push('/app/list')
     }
-    const renderGenerateButton = () => (
-        <button className="flex cta h-32" onClick={redirectToHome} data-testid="empty-screen-take-me-home">
-            {ERROR_EMPTY_SCREEN.TAKE_BACK_HOME}
-        </button>
-    )
+    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
+            isButtonAvailable={true}
             renderButton={renderGenerateButton}
         />
     )

package/src/Common/Grid/Grid.tsx

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