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

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 { default as DeleteComponent } 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');
+var reactRouter = require('react-router');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -16704,6 +16705,67 @@ function Radio(_a) {
 }
 RadioGroup.Radio = Radio;
 
+var info = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2032%2032%22%3E%20%20%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%200h32v32H0z%22%2F%3E%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%2306C%22%20d%3D%22M16%202.667C8.64%202.667%202.667%208.64%202.667%2016S8.64%2029.333%2016%2029.333%2029.333%2023.36%2029.333%2016%2023.36%202.667%2016%202.667z%22%2F%3E%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M16%2014.667c.736%200%201.333.597%201.333%201.333v5.333a1.333%201.333%200%201%201-2.666%200V16c0-.736.597-1.333%201.333-1.333zm0-5.334A1.333%201.333%200%201%201%2016%2012a1.333%201.333%200%200%201%200-2.667z%22%2F%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
+
+function DeleteComponent(_a) {
+    var setDeleting = _a.setDeleting, toggleConfirmation = _a.toggleConfirmation, deleteComponent = _a.deleteComponent, title = _a.title, component = _a.component, payload = _a.payload, _b = _a.confirmationDialogDescription, confirmationDialogDescription = _b === void 0 ? '' : _b, _c = _a.redirectTo, redirectTo = _c === void 0 ? false : _c, _d = _a.url, url = _d === void 0 ? '' : _d, reload = _a.reload, _e = _a.configuration, configuration = _e === void 0 ? '' : _e, closeCustomComponent = _a.closeCustomComponent;
+    var _f = __read(React.useState(false), 2), showCannotDeleteDialogModal = _f[0], setCannotDeleteDialogModal = _f[1];
+    var push = reactRouter.useHistory().push;
+    function handleDelete() {
+        return __awaiter(this, void 0, void 0, function () {
+            var serverError_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        setDeleting(true);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, 4, 5]);
+                        return [4 /*yield*/, deleteComponent(payload)];
+                    case 2:
+                        _a.sent();
+                        toast.success('Successfully deleted');
+                        toggleConfirmation(false);
+                        if (redirectTo) {
+                            push(url);
+                        }
+                        else {
+                            reload();
+                        }
+                        if (typeof closeCustomComponent === 'function') {
+                            closeCustomComponent();
+                        }
+                        return [3 /*break*/, 5];
+                    case 3:
+                        serverError_1 = _a.sent();
+                        if (serverError_1 instanceof ServerErrors && serverError_1.code === 500) {
+                            setCannotDeleteDialogModal(true);
+                        }
+                        return [3 /*break*/, 5];
+                    case 4:
+                        setDeleting(false);
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        });
+    }
+    var handleConfirmation = function () {
+        setCannotDeleteDialogModal(false);
+        toggleConfirmation(false);
+        if (typeof closeCustomComponent === 'function') {
+            closeCustomComponent();
+        }
+    };
+    var renderCannotDeleteDialogModal = function () {
+        return (jsxRuntime.jsxs(ConfirmationDialog, __assign({ className: "confirmation-dialog__body--w-360" }, { children: [jsxRuntime.jsx(ConfirmationDialog.Icon, { src: info }), jsxRuntime.jsx(ConfirmationDialog.Body, { title: "Cannot delete ".concat(component, " '").concat(title, "'") }), jsxRuntime.jsx("p", __assign({ className: "fs-13 cn-7 " }, { children: confirmationDialogDescription })), jsxRuntime.jsx(ConfirmationDialog.ButtonGroup, { children: jsxRuntime.jsx("button", __assign({ type: "button", className: "cta", onClick: handleConfirmation }, { children: "Okay" })) })] })));
+    };
+    var renderDeleteDialog = function () {
+        return (jsxRuntime.jsx(DeleteDialog, __assign({ title: "Delete ".concat(component, " '").concat(title, "'"), delete: handleDelete, closeDelete: function () { return toggleConfirmation(false); }, dataTestId: "delete-dialog" }, { children: jsxRuntime.jsx(DeleteDialog.Description, { children: jsxRuntime.jsxs("p", { children: ["Are you sure you want to delete this ", configuration ? configuration : component, "? "] }) }) })));
+    };
+    return (jsxRuntime.jsxs("div", { children: [!showCannotDeleteDialogModal && renderDeleteDialog(), showCannotDeleteDialogModal && renderCannotDeleteDialogModal()] }));
+}
+
 exports.BreadCrumb = BreadCrumb;
 exports.BreadcrumbStore = Store;
 exports.CDModalTab = CDModalTab;
@@ -16716,6 +16778,7 @@ exports.CustomSelect = CustomSelect;
 exports.DEFAULT_TAG_DATA = DEFAULT_TAG_DATA;
 exports.DOCUMENTATION = DOCUMENTATION;
 exports.DOCUMENTATION_HOME_PAGE = DOCUMENTATION_HOME_PAGE;
+exports.DeleteComponent = DeleteComponent;
 exports.DeleteDialog = DeleteDialog;
 exports.DetailsProgressing = DetailsProgressing;
 exports.DialogForm = DialogForm;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.7-beta-42",
+    "version": "0.0.7-beta-45",
     "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

@@ -1,12 +1,12 @@
 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 { 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,

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 { default as DeleteComponent } from './DeleteComponentModal/DeleteComponent'