@devtron-labs/devtron-fe-common-lib 0.0.7-beta-41 → 0.0.7-beta-42

package/dist/Common/DeleteComponentModal/DeleteComponent.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DeleteComponentProps } from './types';
+declare function DeleteComponent({ setDeleting, toggleConfirmation, deleteComponent, title, component, payload, confirmationDialogDescription, redirectTo, url, reload, configuration, closeCustomComponent, }: DeleteComponentProps): JSX.Element;
+export default DeleteComponent;

package/dist/Common/DeleteComponentModal/types.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.7-beta-41",
+    "version": "0.0.7-beta-42",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Common/DeleteComponentModal/DeleteComponent.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react'
+import { toast } from 'react-toastify'
+import { useHistory } from 'react-router'
+import info from '../assets/icons/ic-info-filled.svg'
+import ConfirmationDialog from '../Dialogs/ConfirmationDialog'
+import { 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
+}