@devtron-labs/devtron-fe-common-lib 0.0.7-beta-47 → 0.0.7-beta-40

package/dist/Common/CustomTagSelector/ValidationRules.d.ts

@@ -3,7 +3,7 @@ export declare class ValidationRules {
         isValid: boolean;
         messages: string[];
     };
-    propagateTagValue: (value: string) => {
+    propagateTagValue: (value: string, key: string) => {
         isValid: boolean;
         messages: string[];
     };

package/dist/Common/Helper.d.ts

@@ -17,26 +17,4 @@ export declare function not(e: any): boolean;
 export declare function useEffectAfterMount(cb: any, dependencies: any): void;
 export declare function getCookie(sKey: any): string;
 export declare function getLoginInfo(): any;
-export declare function useForm(stateSchema: any, validationSchema: {}, callback: any): {
-    state: any;
-    disable: boolean;
-    handleOnChange: (event: any) => void;
-    handleOnSubmit: (event: any) => void;
-};
-export declare function CustomInput({ name, value, error, onChange, onBlur, onFocus, label, type, disabled, autoComplete, labelClassName, placeholder, tabIndex, dataTestid, }: {
-    name: any;
-    value: any;
-    error: any;
-    onChange: any;
-    onBlur?: (e: any) => void;
-    onFocus?: (e: any) => void;
-    label: any;
-    type?: string;
-    disabled?: boolean;
-    autoComplete?: string;
-    labelClassName?: string;
-    placeholder?: string;
-    tabIndex?: number;
-    dataTestid?: string;
-}): JSX.Element;
 export {};

package/dist/Common/Types.d.ts

@@ -234,7 +234,6 @@ export interface CommonNodeAttr {
     approvalUsers?: string[];
     userApprovalConfig?: UserApprovalConfigType;
     requestedUserId?: number;
-    isVirtualEnvironment?: boolean;
 }
 export interface VulnerabilityType {
     name: string;

package/dist/Common/index.d.ts

@@ -29,4 +29,3 @@ 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

@@ -503,15 +503,15 @@ function styleInject(css, ref) {
 var css_248z$6 = ".empty-state {\n  height: 100%;\n}\n.empty-state img {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n  max-width: 250px;\n}\n.empty-state svg {\n  height: 40%;\n  max-height: 200px;\n  width: auto;\n}\n.empty-state h1,\n.empty-state h2,\n.empty-state h3,\n.empty-state h4,\n.empty-state h5,\n.empty-state h6 {\n  color: var(--N900);\n}\n.empty-state .subtitle {\n  font-size: 13px;\n  width: 300px;\n  font-weight: 400;\n  text-align: center;\n  line-height: 1.5;\n  margin-bottom: 20px;\n}\n.empty-state .cta {\n  height: 36px;\n}\n.empty-state p {\n  width: 300px;\n  text-align: center;\n  font-size: 13px;\n  color: var(--N700);\n}\n.empty-state strong {\n  font-size: 16px;\n  margin-bottom: 4px;\n  color: var(--N900);\n  font-weight: normal;\n}\n.empty-state .select-popup {\n  height: min-content;\n  max-height: 250px;\n  overflow: auto;\n  padding: 8px 0;\n}\n.empty-state .empty-state__loader {\n  width: 34px;\n  height: 34px;\n  margin-bottom: 16px;\n}\n.empty-state .empty-state__loading-text {\n  font-size: 12px;\n  width: 200px;\n  font-weight: normal;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: 1.5;\n  letter-spacing: normal;\n  text-align: center;\n  color: var(--N900);\n}\n.empty-state .button__icon {\n  width: 16px;\n  height: 16px;\n  margin-left: 8px;\n}";
 styleInject(css_248z$6);
 
-var _g$3;
-function _extends$b() { _extends$b = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
+var _g$2;
+function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
 var SvgIcProgressing = function SvgIcProgressing(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     width: "1em",
     height: "1em"
-  }, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
+  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none"
   }, /*#__PURE__*/React__namespace.createElement("animateTransform", {
     attributeName: "transform",
@@ -558,8 +558,8 @@ EmptyState.Loading = Loading;
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
-function _extends$a() {
-  _extends$a = Object.assign || function (target) {
+function _extends$9() {
+  _extends$9 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -573,7 +573,7 @@ function _extends$a() {
     return target;
   };
 
-  return _extends$a.apply(this, arguments);
+  return _extends$9.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose$2(source, excluded) {
@@ -1299,7 +1299,7 @@ function ProgressBar(_ref) {
       isIn = _ref.isIn,
       theme = _ref.theme;
 
-  var style = _extends$a({}, userStyle, {
+  var style = _extends$9({}, userStyle, {
     animationDuration: delay + "ms",
     animationPlayState: isRunning ? 'running' : 'paused',
     opacity: hide ? 0 : 1
@@ -1576,9 +1576,9 @@ var ToastContainer = function ToastContainer(props) {
     ,
     id: containerId
   }, getToastToRender(function (position, toastList) {
-    var containerStyle = !toastList.length ? _extends$a({}, style, {
+    var containerStyle = !toastList.length ? _extends$9({}, style, {
       pointerEvents: 'none'
-    }) : _extends$a({}, style);
+    }) : _extends$9({}, style);
     return React.createElement("div", {
       className: getClassName(position),
       style: containerStyle,
@@ -1685,7 +1685,7 @@ function dispatchToast(content, options) {
 
 
 function mergeOptions(type, options) {
-  return _extends$a({}, options, {
+  return _extends$9({}, options, {
     type: options && options.type || type,
     toastId: getToastId(options)
   });
@@ -1702,7 +1702,7 @@ function toast(content, options) {
 }
 
 toast.loading = function (content, options) {
-  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$a({
+  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$9({
     isLoading: true,
     autoClose: false,
     closeOnClick: false,
@@ -1718,7 +1718,7 @@ function handlePromise(promise, _ref2, options) {
   var id;
 
   if (pending) {
-    id = isStr(pending) ? toast.loading(pending, options) : toast.loading(pending.render, _extends$a({}, options, pending));
+    id = isStr(pending) ? toast.loading(pending, options) : toast.loading(pending.render, _extends$9({}, options, pending));
   }
 
   var resetParams = {
@@ -1737,7 +1737,7 @@ function handlePromise(promise, _ref2, options) {
       return;
     }
 
-    var baseParams = _extends$a({
+    var baseParams = _extends$9({
       type: type
     }, resetParams, options, {
       data: result
@@ -1748,10 +1748,10 @@ function handlePromise(promise, _ref2, options) {
     } : input; // if the id is set we know that it's an update
 
     if (id) {
-      toast.update(id, _extends$a({}, baseParams, params));
+      toast.update(id, _extends$9({}, baseParams, params));
     } else {
       // using toast.promise without loading
-      toast(params.render, _extends$a({}, baseParams, params));
+      toast(params.render, _extends$9({}, baseParams, params));
     }
 
     return result;
@@ -1775,7 +1775,7 @@ toast.warning = /*#__PURE__*/createToastByType(TYPE.WARNING);
 toast.warn = toast.warning;
 
 toast.dark = function (content, options) {
-  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$a({
+  return dispatchToast(content, mergeOptions(TYPE.DEFAULT, _extends$9({
     theme: 'dark'
   }, options)));
 };
@@ -1832,7 +1832,7 @@ toast.update = function (toastId, options) {
       var oldOptions = toast.props,
           oldContent = toast.content;
 
-      var nextOptions = _extends$a({}, oldOptions, options, {
+      var nextOptions = _extends$9({}, oldOptions, options, {
         toastId: options.toastId || toastId,
         updateId: generateToastId()
       });
@@ -3927,28 +3927,6 @@ function captureException(exception, captureContext) {
   return getCurrentHub().captureException(exception, { captureContext });
 }
 
-var _g$2;
-function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
-var SvgIcWarning = function SvgIcWarning(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "1em",
-    height: "1em",
-    viewBox: "0 0 32 32"
-  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M0 0h32v32H0z"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "#FFCB5D",
-    d: "M18.315 5.052 29.72 25.01A2.667 2.667 0 0 1 27.405 29H4.595a2.667 2.667 0 0 1-2.315-3.99L13.685 5.052a2.667 2.667 0 0 1 4.63 0z"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "#FFF",
-    d: "M16 22.667a1.333 1.333 0 1 1 0 2.666 1.333 1.333 0 0 1 0-2.666zM16 12c.736 0 1.333.597 1.333 1.333v6.334a1.333 1.333 0 1 1-2.666 0v-6.334c0-.736.597-1.333 1.333-1.333z"
-  }))));
-};
-
 toast.configure({
     autoClose: 3000,
     hideProgressBar: true,
@@ -4087,110 +4065,6 @@ function getLoginInfo() {
             return null;
         }
     }
-}
-function useForm(stateSchema, validationSchema, callback) {
-    if (validationSchema === void 0) { validationSchema = {}; }
-    var _a = __read(React.useState(stateSchema), 2), state = _a[0], setState = _a[1];
-    var _b = __read(React.useState(true), 2), disable = _b[0], setDisable = _b[1];
-    var _c = __read(React.useState(false), 2), isDirty = _c[0], setIsDirty = _c[1];
-    // Disable button in initial render.
-    React.useEffect(function () {
-        setDisable(true);
-    }, []);
-    // For every changed in our state this will be fired
-    // To be able to disable the button
-    React.useEffect(function () {
-        if (isDirty) {
-            setDisable(validateState(state));
-        }
-    }, [state, isDirty]);
-    // Used to disable submit button if there's an error in state
-    // or the required field in state has no value.
-    // Wrapped in useCallback to cached the function to avoid intensive memory leaked
-    // in every re-render in component
-    var validateState = React.useCallback(function (state) {
-        //check errors in all fields
-        var hasErrorInState = Object.keys(validationSchema).some(function (key) {
-            var isInputFieldRequired = validationSchema[key].required;
-            var stateValue = state[key].value; // state value
-            var stateError = state[key].error; // state error
-            return (isInputFieldRequired && !stateValue) || stateError;
-        });
-        return hasErrorInState;
-    }, [state, validationSchema]);
-    function validateField(name, value) {
-        if (validationSchema[name].required) {
-            if (!value) {
-                return 'This is a required field.';
-            }
-        }
-        function _validateSingleValidator(validator, value) {
-            if (value && !validator.regex.test(value)) {
-                return false;
-            }
-            return true;
-        }
-        // single validator
-        var _validator = validationSchema[name].validator;
-        if (_validator && typeof _validator === 'object') {
-            if (!_validateSingleValidator(_validator, value)) {
-                return _validator.error;
-            }
-        }
-        // multiple validators
-        var _validators = validationSchema[name].validators;
-        if (_validators && typeof _validators === 'object' && Array.isArray(_validators)) {
-            var errors_1 = [];
-            _validators.forEach(function (_validator) {
-                if (!_validateSingleValidator(_validator, value)) {
-                    errors_1.push(_validator.error);
-                }
-            });
-            if (errors_1.length > 0) {
-                return errors_1;
-            }
-        }
-        return '';
-    }
-    var handleOnChange = React.useCallback(function (event) {
-        setIsDirty(true);
-        var _a = event.target, name = _a.name, value = _a.value;
-        var error = validateField(name, value);
-        setState(function (prevState) {
-            var _a;
-            return (__assign(__assign({}, prevState), (_a = {}, _a[name] = { value: value, error: error }, _a)));
-        });
-    }, [validationSchema]);
-    var handleOnSubmit = function (event) {
-        event.preventDefault();
-        var newState = Object.keys(validationSchema).reduce(function (agg, curr) {
-            agg[curr] = __assign(__assign({}, state[curr]), { error: validateField(curr, state[curr].value) });
-            return agg;
-        }, state);
-        if (!validateState(newState)) {
-            callback(state);
-        }
-        else {
-            setState(__assign({}, newState));
-        }
-    };
-    return { state: state, disable: disable, handleOnChange: handleOnChange, handleOnSubmit: handleOnSubmit };
-}
-function handleError(error) {
-    if (!error) {
-        return [];
-    }
-    if (!Array.isArray(error)) {
-        return [error];
-    }
-    return error;
-}
-function CustomInput(_a) {
-    var name = _a.name, value = _a.value, error = _a.error, onChange = _a.onChange, _b = _a.onBlur, onBlur = _b === void 0 ? function (e) { } : _b, _c = _a.onFocus, onFocus = _c === void 0 ? function (e) { } : _c, label = _a.label, _d = _a.type, type = _d === void 0 ? 'text' : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e; _a.autoComplete; var _g = _a.labelClassName, labelClassName = _g === void 0 ? '' : _g, _h = _a.placeholder, placeholder = _h === void 0 ? '' : _h, _j = _a.tabIndex, tabIndex = _j === void 0 ? 1 : _j, _k = _a.dataTestid, dataTestid = _k === void 0 ? '' : _k;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex column left top" }, { children: [jsxRuntime.jsx("label", __assign({ className: "form__label ".concat(labelClassName) }, { children: label })), jsxRuntime.jsx("input", { "data-testid": dataTestid, type: type, name: name, autoComplete: "off", className: "form__input", onChange: function (e) {
-                    e.persist();
-                    onChange(e);
-                }, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, value: value, disabled: disabled, tabIndex: tabIndex }), handleError(error).map(function (err) { return (jsxRuntime.jsxs("div", __assign({ className: "form__error" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), err] }))); })] })));
 }
 
 function Progressing(_a) {
@@ -8795,35 +8669,39 @@ var ValidationRules = /** @class */ (function () {
                 errorList.push('Key is required');
             }
             else {
-                var re = new RegExp('/', 'g');
-                var noOfSlashInKey = (_a = key.match(re)) === null || _a === void 0 ? void 0 : _a.length;
-                if (noOfSlashInKey > 1) {
-                    errorList.push('Key: Max 1 ( / ) allowed');
-                }
-                else if (noOfSlashInKey === 1) {
-                    var _b = __read(key.split('/'), 2), prefix = _b[0], name_1 = _b[1];
-                    errorList.push.apply(errorList, __spreadArray([], __read(validateTagValue(name_1).map(function (error) { return "Name: ".concat(error); })), false));
-                    if (prefix.length > 253) {
-                        errorList.push('Prefix: Can be max 253 characters');
+                if (!key.startsWith("devtron.ai/")) {
+                    var re = new RegExp('/', 'g');
+                    var noOfSlashInKey = (_a = key.match(re)) === null || _a === void 0 ? void 0 : _a.length;
+                    if (noOfSlashInKey > 1) {
+                        errorList.push('Key: Max 1 ( / ) allowed');
+                    }
+                    else if (noOfSlashInKey === 1) {
+                        var _b = __read(key.split('/'), 2), prefix = _b[0], name_1 = _b[1];
+                        errorList.push.apply(errorList, __spreadArray([], __read(validateTagValue(name_1).map(function (error) { return "Name: ".concat(error); })), false));
+                        if (prefix.length > 253) {
+                            errorList.push('Prefix: Can be max 253 characters');
+                        }
+                        var validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix);
+                        if (!validPrefix) {
+                            errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)');
+                        }
                     }
-                    var validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix);
-                    if (!validPrefix) {
-                        errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)');
+                    else {
+                        errorList.push.apply(errorList, __spreadArray([], __read(validateTagValue(key).map(function (error) { return "Name: ".concat(error); })), false));
                     }
                 }
-                else {
-                    errorList.push.apply(errorList, __spreadArray([], __read(validateTagValue(key).map(function (error) { return "Name: ".concat(error); })), false));
-                }
             }
             return { isValid: errorList.length === 0, messages: errorList };
         };
-        this.propagateTagValue = function (value) {
+        this.propagateTagValue = function (value, key) {
             var errorList = [];
             if (!value) {
                 errorList.push('Value is required');
             }
             else {
-                errorList.push.apply(errorList, __spreadArray([], __read(validateTagValue(value)), false));
+                if (!key.startsWith("devtron.ai/")) {
+                    errorList.push.apply(errorList, __spreadArray([], __read(validateTagValue(value)), false));
+                }
             }
             return { isValid: errorList.length === 0, messages: errorList };
         };
@@ -8858,7 +8736,7 @@ var TagLabelValueSelector = function (_a) {
                         : _tagData.value !== '';
             }
             else if (selectedValue || isRequired || _tagData.propagate) {
-                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid;
+                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue, _tagData.key).isValid;
                 _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey;
             }
             else {
@@ -8887,7 +8765,7 @@ var TagLabelValueSelector = function (_a) {
             }
         }
         else if (isRequired || selectedValue || tagData.propagate) {
-            field = validationRules.propagateTagValue(selectedValue);
+            field = validationRules.propagateTagValue(selectedValue, tagData.key);
         }
         if (!field.isValid) {
             return (jsxRuntime.jsxs("div", __assign({ className: "p-4", onClick: stopPropagation, "data-testid": "tag-label-cross-stop-propagation" }, { children: [field.messages.map(function (error) { return (jsxRuntime.jsxs("div", __assign({ className: "flexbox pr-4 pl-4" }, { children: [jsxRuntime.jsx("span", { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-14 scr-5 mt-3 mr-4" }) }), jsxRuntime.jsx("span", { children: error })] }), error)); }), tagInputType === exports.KEY_VALUE.KEY && (jsxRuntime.jsxs("div", __assign({ className: "flexbox pr-4 pl-4" }, { children: [jsxRuntime.jsx("span", { children: jsxRuntime.jsx(SvgIcInfoOutlined, { className: "icon-dim-14 mt-3 mr-4" }) }), jsxRuntime.jsx("span", __assign({ className: "dc__italic-font-style" }, { children: "Key format: prefix/name or name" }))] })))] })));
@@ -8939,12 +8817,12 @@ var TagDetails = function (_a) {
             _tagData.isInvalidKey =
                 _tagData.key || _tagData.value ? !validationRules.propagateTagKey(_tagData.key).isValid : false;
             _tagData.isInvalidValue = _tagData.value
-                ? !validationRules.propagateTagValue(_tagData.value).isValid
+                ? !validationRules.propagateTagValue(_tagData.value, _tagData.key).isValid
                 : false;
         }
         setTagData(index, _tagData);
     };
-    return (jsxRuntime.jsxs("div", __assign({ className: "flexbox mb-8" }, { children: [jsxRuntime.jsx("div", __assign({ className: "dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ".concat(tagData.propagate ? 'bcn-7' : ''), onClick: propagateTagToResource, "data-testid": "propagate-tag-".concat(index) }, { children: jsxRuntime.jsx(SvgInjectTag, { className: "icon-dim-20 mt-4 ".concat(tagData.propagate ? 'scn-0' : '') }) })), jsxRuntime.jsx(TagLabelValueSelector, { selectedTagIndex: index, tagData: tagData, setTagData: setTagData, tagInputType: exports.KEY_VALUE.KEY, placeholder: "Enter key", tabIndex: tabIndex - 1, refVar: keyRef, dependentRef: valueRef, tagOptions: suggestedTagsOptions }), jsxRuntime.jsx(TagLabelValueSelector, { selectedTagIndex: index, tagData: tagData, setTagData: setTagData, tagInputType: exports.KEY_VALUE.VALUE, placeholder: "Enter value", tabIndex: tabIndex, refVar: valueRef, dependentRef: keyRef }), jsxRuntime.jsx("div", __assign({ className: "dc__border pl-4 pr-4 dc__right-radius-4 pointer flex top", onClick: deleteTag, "data-testid": "delete-tag-".concat(index) }, { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-20 mt-4" }) }))] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "flexbox mb-8" }, { children: [jsxRuntime.jsx("div", __assign({ className: "dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ".concat(tagData.propagate ? 'bcn-7' : '', " ").concat(tagData.key.startsWith("devtron.ai/") ? 'cursor-not-allowed bcn-1' : ''), onClick: propagateTagToResource, "data-testid": "propagate-tag-".concat(index) }, { children: jsxRuntime.jsx(SvgInjectTag, { className: "icon-dim-20 mt-4 ".concat(tagData.propagate ? 'scn-0' : '') }) })), jsxRuntime.jsx(TagLabelValueSelector, { selectedTagIndex: index, tagData: tagData, setTagData: setTagData, tagInputType: exports.KEY_VALUE.KEY, placeholder: "Enter key", tabIndex: tabIndex - 1, refVar: keyRef, dependentRef: valueRef, tagOptions: suggestedTagsOptions }), jsxRuntime.jsx(TagLabelValueSelector, { selectedTagIndex: index, tagData: tagData, setTagData: setTagData, tagInputType: exports.KEY_VALUE.VALUE, placeholder: "Enter value", tabIndex: tabIndex, refVar: valueRef, dependentRef: keyRef }), jsxRuntime.jsx("div", __assign({ className: "dc__border pl-4 pr-4 dc__right-radius-4 pointer flex top", onClick: deleteTag, "data-testid": "delete-tag-".concat(index) }, { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-20 mt-4" }) }))] })));
 };
 
 var _path$1;
@@ -8966,7 +8844,11 @@ var TagLabelSelect = function (_a) {
     var isCreateApp = _a.isCreateApp, labelTags = _a.labelTags, setLabelTags = _a.setLabelTags, _b = _a.tabIndex, tabIndex = _b === void 0 ? 0 : _b;
     var setTagData = function (index, tagValue) {
         var _tags = __spreadArray([], __read(labelTags), false);
-        _tags[index] = tagValue;
+        var _tagValue = tagValue;
+        if (_tagValue.key.startsWith("devtron.ai/")) {
+            _tagValue.propagate = false;
+        }
+        _tags[index] = _tagValue;
         setLabelTags(_tags);
     };
     var addNewTag = function () {
@@ -16704,67 +16586,6 @@ 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 = reactRouterDom.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;
@@ -16772,12 +16593,10 @@ exports.Checkbox = Checkbox;
 exports.ClearIndicator = ClearIndicator;
 exports.ConditionalWrap = ConditionalWrap;
 exports.ConfirmationDialog = ConfirmationDialog;
-exports.CustomInput = CustomInput;
 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;
@@ -16845,5 +16664,4 @@ exports.toastAccessDenied = toastAccessDenied;
 exports.trash = trash;
 exports.useBreadcrumb = useBreadcrumb;
 exports.useEffectAfterMount = useEffectAfterMount;
-exports.useForm = useForm;
 exports.useThrottledEffect = useThrottledEffect;

package/package.json

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

package/src/Common/CustomTagSelector/TagDetails.tsx

@@ -33,7 +33,7 @@ export const TagDetails = ({
             _tagData.isInvalidKey =
                 _tagData.key || _tagData.value ? !validationRules.propagateTagKey(_tagData.key).isValid : false
             _tagData.isInvalidValue = _tagData.value
-                ? !validationRules.propagateTagValue(_tagData.value).isValid
+                ? !validationRules.propagateTagValue(_tagData.value, _tagData.key).isValid
                 : false
         }
         setTagData(index, _tagData)
@@ -41,7 +41,7 @@ export const TagDetails = ({
     return (
         <div className="flexbox mb-8">
             <div
-                className={`dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ${tagData.propagate ? 'bcn-7' : ''}`}
+                className={`dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ${tagData.propagate ? 'bcn-7' : ''} ${tagData.key.startsWith("devtron.ai/") ? 'cursor-not-allowed bcn-1' : ''}`}
                 onClick={propagateTagToResource}
                 data-testid={`propagate-tag-${index}`}
             >

package/src/Common/CustomTagSelector/TagLabelSelect.tsx

@@ -13,7 +13,11 @@ export const TagLabelSelect = ({
 }: TagLabelSelectType) => {
     const setTagData = (index, tagValue): void => {
         const _tags = [...labelTags]
-        _tags[index] = tagValue
+        const _tagValue = tagValue
+        if(_tagValue.key.startsWith("devtron.ai/")){
+            _tagValue.propagate = false
+        }
+        _tags[index] = _tagValue
         setLabelTags(_tags)
     }
 

package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -50,7 +50,7 @@ export const TagLabelValueSelector = ({
                         ? !validationRules.propagateTagKey(selectedValue).isValid
                         : _tagData.value !== ''
             } else if (selectedValue || isRequired || _tagData.propagate) {
-                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid
+                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue, _tagData.key).isValid
                 _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey
             } else {
                 _tagData.isInvalidValue = false
@@ -80,7 +80,7 @@ export const TagLabelValueSelector = ({
                 field = validationRules.propagateTagKey(selectedValue)
             }
         } else if (isRequired || selectedValue || tagData.propagate) {
-            field = validationRules.propagateTagValue(selectedValue)
+            field = validationRules.propagateTagValue(selectedValue, tagData.key)
         }
         if (!field.isValid) {
             return (

package/src/Common/CustomTagSelector/ValidationRules.ts

@@ -21,33 +21,37 @@ export class ValidationRules {
         if (!key) {
             errorList.push('Key is required')
         } else {
-            const re = new RegExp('/', 'g')
-            const noOfSlashInKey = key.match(re)?.length
-            if (noOfSlashInKey > 1) {
-                errorList.push('Key: Max 1 ( / ) allowed')
-            } else if (noOfSlashInKey === 1) {
-                const [prefix, name] = key.split('/')
-                errorList.push(...validateTagValue(name).map((error) => `Name: ${error}`))
-                if (prefix.length > 253) {
-                    errorList.push('Prefix: Can be max 253 characters')
+            if(!key.startsWith("devtron.ai/")){
+                const re = new RegExp('/', 'g')
+                const noOfSlashInKey = key.match(re)?.length
+                if (noOfSlashInKey > 1) {
+                    errorList.push('Key: Max 1 ( / ) allowed')
+                } else if (noOfSlashInKey === 1) {
+                    const [prefix, name] = key.split('/')
+                    errorList.push(...validateTagValue(name).map((error) => `Name: ${error}`))
+                    if (prefix.length > 253) {
+                        errorList.push('Prefix: Can be max 253 characters')
+                    }
+                    const validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix)
+                    if (!validPrefix) {
+                        errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)')
+                    }
+                } else {
+                    errorList.push(...validateTagValue(key).map((error) => `Name: ${error}`))
                 }
-                const validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix)
-                if (!validPrefix) {
-                    errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)')
-                }
-            } else {
-                errorList.push(...validateTagValue(key).map((error) => `Name: ${error}`))
             }
         }
         return { isValid: errorList.length === 0, messages: errorList }
     }
 
-    propagateTagValue = (value: string): { isValid: boolean; messages: string[] } => {
+    propagateTagValue = (value: string, key: string): { isValid: boolean; messages: string[] } => {
         const errorList = []
         if (!value) {
             errorList.push('Value is required')
         } else {
-            errorList.push(...validateTagValue(value))
+            if(!key.startsWith("devtron.ai/")){
+                errorList.push(...validateTagValue(value))
+            }
         }
         return { isValid: errorList.length === 0, messages: errorList }
     }

package/src/Common/Helper.tsx

@@ -1,49 +1,48 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { ServerErrors } from './ServerError'
 import { toast } from 'react-toastify'
 import * as Sentry from '@sentry/browser'
 import { toastAccessDenied } from './ToastBody'
 import { ERROR_EMPTY_SCREEN, TOKEN_COOKIE_NAME } from './Constants'
-import { ReactComponent as FormError } from '../Assets/Icon/ic-warning.svg'
 
 toast.configure({
-    autoClose: 3000,
-    hideProgressBar: true,
-    pauseOnHover: true,
-    pauseOnFocusLoss: true,
-    closeOnClick: false,
-    newestOnTop: true,
-    toastClassName: 'devtron-toast',
-    bodyClassName: 'devtron-toast__body',
+  autoClose: 3000,
+  hideProgressBar: true,
+  pauseOnHover: true,
+  pauseOnFocusLoss: true,
+  closeOnClick: false,
+  newestOnTop: true,
+  toastClassName: 'devtron-toast',
+  bodyClassName: 'devtron-toast__body',
 })
 
 export function showError(serverError, showToastOnUnknownError = true, hideAccessError = false) {
-    if (serverError instanceof ServerErrors && Array.isArray(serverError.errors)) {
-        serverError.errors.map(({ userMessage, internalMessage }) => {
-            if (
-                serverError.code === 403 &&
-                (userMessage === ERROR_EMPTY_SCREEN.UNAUTHORIZED || userMessage === ERROR_EMPTY_SCREEN.FORBIDDEN)
-            ) {
-                if (!hideAccessError) {
-                    toastAccessDenied()
-                }
-            } else {
-                toast.error(userMessage || internalMessage)
-            }
-        })
-    } else {
-        if (serverError.code !== 403 && serverError.code !== 408) {
-            Sentry.captureException(serverError)
-        }
-
-        if (showToastOnUnknownError) {
-            if (serverError.message) {
-                toast.error(serverError.message)
-            } else {
-                toast.error('Some Error Occurred')
-            }
-        }
-    }
+  if (serverError instanceof ServerErrors && Array.isArray(serverError.errors)) {
+      serverError.errors.map(({ userMessage, internalMessage }) => {
+          if (
+              serverError.code === 403 &&
+              (userMessage === ERROR_EMPTY_SCREEN.UNAUTHORIZED || userMessage === ERROR_EMPTY_SCREEN.FORBIDDEN)
+          ) {
+              if (!hideAccessError) {
+                  toastAccessDenied()
+              }
+          } else {
+              toast.error(userMessage || internalMessage)
+          }
+      })
+  } else {
+      if (serverError.code !== 403 && serverError.code !== 408) {
+          Sentry.captureException(serverError)
+      }
+
+      if (showToastOnUnknownError) {
+          if (serverError.message) {
+              toast.error(serverError.message)
+          } else {
+              toast.error('Some Error Occurred')
+          }
+      }
+  }
 }
 
 interface ConditionalWrapper<T> {
@@ -168,166 +167,4 @@ export function getLoginInfo() {
             return null
         }
     }
-}
-
-export function useForm(stateSchema, validationSchema = {}, callback) {
-    const [state, setState] = useState(stateSchema)
-    const [disable, setDisable] = useState(true)
-    const [isDirty, setIsDirty] = useState(false)
-
-    // Disable button in initial render.
-    useEffect(() => {
-        setDisable(true)
-    }, [])
-
-    // For every changed in our state this will be fired
-    // To be able to disable the button
-    useEffect(() => {
-        if (isDirty) {
-            setDisable(validateState(state))
-        }
-    }, [state, isDirty])
-
-    // Used to disable submit button if there's an error in state
-    // or the required field in state has no value.
-    // Wrapped in useCallback to cached the function to avoid intensive memory leaked
-    // in every re-render in component
-    const validateState = useCallback(
-        (state) => {
-            //check errors in all fields
-            const hasErrorInState = Object.keys(validationSchema).some((key) => {
-                const isInputFieldRequired = validationSchema[key].required
-                const stateValue = state[key].value // state value
-                const stateError = state[key].error // state error
-                return (isInputFieldRequired && !stateValue) || stateError
-            })
-            return hasErrorInState
-        },
-        [state, validationSchema],
-    )
-
-    function validateField(name, value): string | string[] {
-        if (validationSchema[name].required) {
-            if (!value) {
-                return 'This is a required field.'
-            }
-        }
-
-        function _validateSingleValidator(validator, value) {
-            if (value && !validator.regex.test(value)) {
-                return false
-            }
-            return true
-        }
-
-        // single validator
-        let _validator = validationSchema[name].validator
-        if (_validator && typeof _validator === 'object') {
-            if (!_validateSingleValidator(_validator, value)) {
-                return _validator.error
-            }
-        }
-
-        // multiple validators
-        let _validators = validationSchema[name].validators
-        if (_validators && typeof _validators === 'object' && Array.isArray(_validators)) {
-            let errors = []
-            _validators.forEach((_validator) => {
-                if (!_validateSingleValidator(_validator, value)) {
-                    errors.push(_validator.error)
-                }
-            })
-            if (errors.length > 0) {
-                return errors
-            }
-        }
-
-        return ''
-    }
-
-    const handleOnChange = useCallback(
-        (event) => {
-            setIsDirty(true)
-
-            const { name, value } = event.target
-            let error = validateField(name, value)
-            setState((prevState) => ({
-                ...prevState,
-                [name]: { value, error },
-            }))
-        },
-        [validationSchema],
-    )
-
-    const handleOnSubmit = (event) => {
-        event.preventDefault()
-        const newState = Object.keys(validationSchema).reduce((agg, curr) => {
-            agg[curr] = { ...state[curr], error: validateField(curr, state[curr].value) }
-            return agg
-        }, state)
-        if (!validateState(newState)) {
-            callback(state)
-        } else {
-            setState({ ...newState })
-        }
-    }
-    return { state, disable, handleOnChange, handleOnSubmit }
-}
-
-function handleError(error: any): any[] {
-    if (!error) {
-        return []
-    }
-
-    if (!Array.isArray(error)) {
-        return [error]
-    }
-
-    return error
-}
-
-export function CustomInput({
-    name,
-    value,
-    error,
-    onChange,
-    onBlur = (e) => {},
-    onFocus = (e) => {},
-    label,
-    type = 'text',
-    disabled = false,
-    autoComplete = 'off',
-    labelClassName = '',
-    placeholder = '',
-    tabIndex = 1,
-    dataTestid = '',
-}) {
-    return (
-        <div className="flex column left top">
-            <label className={`form__label ${labelClassName}`}>{label}</label>
-            <input
-                data-testid={dataTestid}
-                type={type}
-                name={name}
-                autoComplete="off"
-                className="form__input"
-                onChange={(e) => {
-                    e.persist()
-                    onChange(e)
-                }}
-                onBlur={onBlur}
-                onFocus={onFocus}
-                placeholder={placeholder}
-                value={value}
-                disabled={disabled}
-                tabIndex={tabIndex}
-            />
-            {handleError(error).map((err) => (
-                <div className="form__error">
-                    <FormError className="form__icon form__icon--error" />
-                    {err}
-                </div>
-            ))}
-        </div>
-    )
-}
+}

package/src/Common/Types.ts

@@ -257,7 +257,6 @@ export interface CommonNodeAttr {
     approvalUsers?: string[]
     userApprovalConfig?: UserApprovalConfigType
     requestedUserId?: number
-    isVirtualEnvironment?: boolean
 }
 
 

package/src/Common/index.ts

@@ -29,4 +29,3 @@ 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/Common/DeleteComponentModal/DeleteComponent.d.ts

@@ -1,4 +0,0 @@
-/// <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

@@ -1,15 +0,0 @@
-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/src/Assets/Icon/ic-info-filled.svg

@@ -1,7 +0,0 @@
-<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/Assets/Icon/ic-warning.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h32v32H0z"/>
-        <path fill="#FFCB5D" d="M18.315 5.052L29.72 25.01A2.667 2.667 0 0 1 27.405 29H4.595a2.667 2.667 0 0 1-2.315-3.99L13.685 5.052a2.667 2.667 0 0 1 4.63 0z"/>
-        <path fill="#FFF" d="M16 22.667a1.333 1.333 0 1 1 0 2.666 1.333 1.333 0 0 1 0-2.666zM16 12c.736 0 1.333.597 1.333 1.333v6.334a1.333 1.333 0 1 1-2.666 0v-6.334c0-.736.597-1.333 1.333-1.333z"/>
-    </g>
-</svg>

package/src/Common/DeleteComponentModal/DeleteComponent.tsx

@@ -1,95 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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
-}