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

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/dist/Common/index.d.ts

@@ -29,3 +29,4 @@ export { default as GenericEmptyState } from './EmptyState/GenericEmptyState';
 export { default as Toggle } from './Toggle/Toggle';
 export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable';
 export { default as StyledRadioGroup } from './RadioGroup/RadioGroup';
+export * from './DeleteComponentModal/DeleteComponent';

package/dist/index.js

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var reactRouterDom = require('react-router-dom');
+require('react-router');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);

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-44",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Assets/Icon/ic-info-filled.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h32v32H0z"/>
+        <path fill="#06C" d="M16 2.667C8.64 2.667 2.667 8.64 2.667 16S8.64 29.333 16 29.333 29.333 23.36 29.333 16 23.36 2.667 16 2.667z"/>
+        <path fill="#FFF" d="M16 14.667c.736 0 1.333.597 1.333 1.333v5.333a1.333 1.333 0 1 1-2.666 0V16c0-.736.597-1.333 1.333-1.333zm0-5.334A1.333 1.333 0 1 1 16 12a1.333 1.333 0 0 1 0-2.667z"/>
+    </g>
+</svg>

package/src/Common/DeleteComponentModal/DeleteComponent.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react'
+import { useHistory } from 'react-router'
+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/index.ts

@@ -29,3 +29,4 @@ export { default as GenericEmptyState } from './EmptyState/GenericEmptyState'
 export { default as Toggle } from './Toggle/Toggle'
 export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable'
 export { default as StyledRadioGroup } from './RadioGroup/RadioGroup'
+export * from './DeleteComponentModal/DeleteComponent'