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

package/src/Common/DeleteComponentModal/DeleteComponent.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react'
+import { useHistory } from 'react-router-dom'
+import { toast } from 'react-toastify'
+import info from '../../Assets/Icon/ic-info-filled.svg'
+import { ConfirmationDialog, DeleteDialog } from '../Dialogs'
+import { ServerErrors } from '../ServerError'
+import { DeleteComponentProps } from './types'
+
+
+function DeleteComponent({
+    setDeleting,
+    toggleConfirmation,
+    deleteComponent,
+    title,
+    component,
+    payload,
+    confirmationDialogDescription = '',
+    redirectTo = false,
+    url = '',
+    reload,
+    configuration = '',
+    closeCustomComponent,
+}: DeleteComponentProps) {
+    const [showCannotDeleteDialogModal, setCannotDeleteDialogModal] = useState(false)
+    const { push } = useHistory()
+
+    async function handleDelete() {
+        setDeleting(true)
+        try {
+            await deleteComponent(payload)
+            toast.success('Successfully deleted')
+            toggleConfirmation(false)
+            if (redirectTo) {
+                push(url)
+            } else {
+                reload()
+            }
+            if (typeof closeCustomComponent === 'function') {
+                closeCustomComponent()
+            }
+        } catch (serverError) {
+            if (serverError instanceof ServerErrors && serverError.code === 500) {
+                setCannotDeleteDialogModal(true)
+            }
+        } finally {
+            setDeleting(false)
+        }
+    }
+
+    const handleConfirmation = () => {
+        setCannotDeleteDialogModal(false)
+        toggleConfirmation(false)
+        if (typeof closeCustomComponent === 'function') {
+            closeCustomComponent()
+        }
+    }
+
+    const renderCannotDeleteDialogModal = () => {
+        return (
+            <ConfirmationDialog className="confirmation-dialog__body--w-360">
+                <ConfirmationDialog.Icon src={info} />
+                <ConfirmationDialog.Body title={`Cannot delete ${component} '${title}'`} />
+                <p className="fs-13 cn-7 ">{confirmationDialogDescription}</p>
+                <ConfirmationDialog.ButtonGroup>
+                    <button type="button" className="cta" onClick={handleConfirmation}>
+                        Okay
+                    </button>
+                </ConfirmationDialog.ButtonGroup>
+            </ConfirmationDialog>
+        )
+    }
+
+    const renderDeleteDialog = () => {
+        return (
+            <DeleteDialog
+                title={`Delete ${component} '${title}'`}
+                delete={handleDelete}
+                closeDelete={() => toggleConfirmation(false)}
+                dataTestId="delete-dialog"
+            >
+                <DeleteDialog.Description>
+                    <p>Are you sure you want to delete this {configuration ? configuration : component}? </p>
+                </DeleteDialog.Description>
+            </DeleteDialog>
+        )
+    }
+    return (
+        <div>
+            {!showCannotDeleteDialogModal && renderDeleteDialog()}
+            {showCannotDeleteDialogModal && renderCannotDeleteDialogModal()}
+        </div>
+    )
+}
+
+export default DeleteComponent

package/src/Common/DeleteComponentModal/types.ts

@@ -0,0 +1,15 @@
+export interface DeleteComponentProps {
+    setDeleting: (boolean) => void
+    toggleConfirmation: any
+    deleteComponent: (any) => Promise<any>
+    title: string
+    component: string
+    payload: any
+    confirmationDialogDescription?: string
+    redirectTo?: boolean
+    url?: string
+    reload?: () => void
+    configuration?: string
+    dataTestid?: string
+    closeCustomComponent?: () => void
+}

package/src/Common/Dialogs/ConfirmationDialog.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { VisibleModal2 } from '../Modals/VisibleModal2'
-function ConfirmationDialog({ className = '', children }) {
+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>
@@ -8,11 +10,11 @@ function ConfirmationDialog({ className = '', children }) {
     )
 }
 
-function Icon({ src, className = '' }) {
+function Icon({ src, className = '' }: ConfirmationDialogIconType) {
     return <img src={src} className={`confirmation-dialog__icon ${className}`} alt="" />
 }
 
-function Body({ title, subtitle = null, children = null }) {
+function Body({ title, subtitle = null, children = null }: ConfirmationDialogBodyType) {
     return (
         <div className="flex left column ">
             <h3 className="confirmation-dialog__title lh-1-25 dc__break-word w-100">{title}</h3>
@@ -22,7 +24,7 @@ function Body({ title, subtitle = null, children = null }) {
     )
 }
 
-function ButtonGroup({ children }) {
+function ButtonGroup({ children }: ConfirmationDialogButtonGroupType) {
     return <div className="flex right confirmation-dialog__button-group">{children}</div>
 }
 

package/src/Common/Dialogs/DeleteDialog.tsx

@@ -16,8 +16,8 @@ export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.F
         </ConfirmationDialog.Body>
         <ConfirmationDialog.ButtonGroup>
             <div className="flex right">
-                <button type="button" className="cta cancel cta-cd-delete-modal ml-16" onClick={props.closeDelete} disabled={props.apiCallInProgress}>Cancel</button>
-                <button type="button" className="cta delete cta-cd-delete-modal ml-16" onClick={() => props.delete()} disabled={props.apiCallInProgress}>
+                <button type="button" className="cta cancel cta-cd-delete-modal ml-16" onClick={props.closeDelete} disabled={props.apiCallInProgress} data-testid="dialog-cancel">Cancel</button>
+                <button type="button" className="cta delete cta-cd-delete-modal ml-16" onClick={() => props.delete()} disabled={props.apiCallInProgress} data-testid="dialog-delete">
                     {props.apiCallInProgress ? <Progressing /> :  `${props.deletePrefix || ''}Delete${props.deletePostfix || ''}`}
                 </button>
             </div>

package/src/Common/Dialogs/DialogForm.tsx

@@ -1,20 +1,11 @@
 import React, { Component, createContext } from 'react';
 import { VisibleModal } from '../Modals/VisibleModal';
-import close from '../../Assets/Icon/ic-close.svg';
+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) => {} });
 
-export interface DialogFormProps {
-    className: string;
-    title: string;
-    isLoading: boolean;
-    closeOnESC?: boolean;
-    close: (event) => void;
-    onSave: (event) => void;
-    headerClassName?: string;
-}
-
 export class DialogForm extends Component<DialogFormProps> {
     constructor(props) {
         super(props);

package/src/Common/Dialogs/Types.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from "react"
+
 export interface DeleteDialogProps {
     title: string
     description?: string
@@ -6,6 +8,7 @@ export interface DeleteDialogProps {
     deletePrefix?: string
     deletePostfix?: string
     apiCallInProgress?: boolean
+    dataTestId?: string
 }
 
 export interface ForceDeleteDialogType {
@@ -14,3 +17,28 @@ export interface ForceDeleteDialogType {
   forceDeleteDialogTitle: string
   forceDeleteDialogMessage: string
 }
+export interface ConfirmationDialogType {
+    className?: string
+    children: any
+}
+export interface ConfirmationDialogIconType {
+    src: string
+    className?: string
+}
+export interface ConfirmationDialogBodyType {
+    title: string
+    subtitle?: ReactNode
+    children?: any
+}
+export interface ConfirmationDialogButtonGroupType {
+    children: any
+}
+export interface DialogFormProps {
+    className: string;
+    title: string;
+    isLoading: boolean;
+    closeOnESC?: boolean;
+    close: (event) => void;
+    onSave: (event) => void;
+    headerClassName?: string;
+}

package/src/Common/Drawer/Drawer.scss

@@ -1,39 +1,40 @@
-.drawer{
+.drawer {
     position: absolute;
     overflow: hidden;
-    &.left, &.right{
+    &.left,
+    &.right {
         top: 0;
         bottom: 0;
         width: 0;
         transition: width 200ms;
-        &.show{
+        &.show {
             min-width: var(--minWidth);
             width: var(--width);
             max-width: var(--maxWidth);
         }
     }
 
-    &.top, &.bottom{
+    &.top,
+    &.bottom {
         left: 0;
         right: 0;
         height: 0;
         transition: height 200ms;
-        &.show{
+        &.show {
             height: var(--height);
         }
     }
-    &.right{
+    &.right {
         right: 0;
     }
-    &.left{
+    &.left {
         left: 0;
-
     }
-    &.top{
+    &.top {
         top: 0;
     }
 
-    &.bottom{
+    &.bottom {
         bottom: 0;
     }
-}
+}

package/src/Common/EmptyState/EmptyState.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import './emptyState.scss';
 import { ReactComponent as Progressing } from '../../Assets/Icon/ic-progressing.svg';
 
-function EmptyState({ children }) {
+function EmptyState({ children, className = '' }) {
     return (
-        <div className="flex column empty-state" style={{ width: '100%', height: '100%' }}>
+        <div className={`flex column empty-state w-100 h-100 ${className}`}>
             {children}
         </div>
     )
@@ -18,8 +18,8 @@ function Title({ children }) {
     return children
 }
 
-function Subtitle({ children, className }:{children: any, className?: string}) {
-    return <p className={`subtitle ${className}`}>{children}</p>
+function Subtitle({ children, className }: { children: any; className?: string }) {
+    return <p className={`subtitle ${className || ''}`}>{children}</p>
 }
 
 function Button({ children }) {
@@ -39,4 +39,4 @@ EmptyState.Subtitle = Subtitle
 EmptyState.Button = Button
 EmptyState.Loading = Loading
 
-export default EmptyState
+export default EmptyState

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