@devtron-labs/devtron-fe-common-lib 0.0.58-beta-24 → 0.0.58-beta-25

package/dist/Common/CustomInput/CustomInput.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CustomInputProps } from './Types';
-export declare function CustomInput({ name, value, error, onChange, onFocus, label, type, disabled, labelClassName, placeholder, tabIndex, dataTestid, isRequiredField, autoFocus, rootClassName, autoComplete, helperText, handleOnBlur, readOnly, noTrim, ref, onKeyPress, defaultValue, onKeyDown, required, additionalErrorInfo, inputWrapClassName, inputProps, }: CustomInputProps): JSX.Element;
+export declare function CustomInput({ name, value, error, onChange, onFocus, label, type, disabled, labelClassName, placeholder, tabIndex, dataTestid, isRequiredField, autoFocus, rootClassName, autoComplete, helperText, handleOnBlur, readOnly, noTrim, ref, onKeyPress, defaultValue, onKeyDown, required, additionalErrorInfo, inputWrapClassName, }: CustomInputProps): JSX.Element;

package/dist/Common/CustomInput/Types.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react';
+import React, { HTMLInputTypeAttribute } from 'react';
 export interface CustomInputProps {
     name: string;
     value: string | number;
@@ -27,5 +27,4 @@ export interface CustomInputProps {
     required?: boolean;
     additionalErrorInfo?: React.ReactNode;
     inputWrapClassName?: string;
-    inputProps?: InputHTMLAttributes<HTMLInputElement>;
 }

package/dist/Common/Helper.d.ts

@@ -55,7 +55,10 @@ export declare const customStyles: {
     dropdownIndicator: (base: any, state: any) => any;
 };
 export declare const getFilteredChartVersions: (charts: any, selectedChartType: any) => any;
-export declare function getUnlockedJSON(json: any, jsonPathArray: any): any;
+export declare function getUnlockedJSON(json: any, jsonPathArray: any, removeParentKeysAndEmptyArrays?: boolean): {
+    newDocument: any;
+    removedPatches: any[];
+};
 export declare function getLockedJSON(json: any, jsonPathArray: string[]): any;
 /**
  * Returns a debounced variant of the function

package/dist/index.js

@@ -11804,42 +11804,59 @@ var getFilteredChartVersions = function (charts, selectedChartType) {
         chartRefId: item.chartRefId,
     }); });
 };
-function removeEmptyObjectKeysAndNullValues(obj) {
-    // It recursively removes empty object keys and array values that are null
-    for (var key in obj) {
+function removeEmptyObjectKeysAndNullValues(obj, originaljsonCopy) {
+    var _loop_1 = function (key) {
         if (Array.isArray(obj[key])) {
-            if (obj[key].length === 0)
-                continue;
-            obj[key] = obj[key].filter(function (item) { return item !== null; });
             // Check if the array is empty
-            if (obj[key].length === 0) {
-                delete obj[key]; // Delete the key if the array is empty
+            if (obj[key].length !== 0) {
+                obj[key].forEach(function (element, index) {
+                    if (element === null || (typeof element === 'object' && Object.keys(element).length === 0))
+                        obj[key].splice(index, 1);
+                    else
+                        removeEmptyObjectKeysAndNullValues(element, originaljsonCopy[key][index]);
+                });
+            }
+            if (obj[key].length === 0 && originaljsonCopy[key].length !== 0) {
+                delete obj[key];
             }
         }
         else if (obj[key] && typeof obj[key] === 'object') {
-            if (removeEmptyObjectKeysAndNullValues(obj[key])) {
+            if (removeEmptyObjectKeysAndNullValues(obj[key], originaljsonCopy[key]) &&
+                Object.keys(originaljsonCopy[key]).length !== 0) {
                 delete obj[key];
             }
         }
         else if (obj[key] === undefined) {
             delete obj[key];
         }
+    };
+    // It recursively removes empty object keys and empty array keys
+    for (var key in obj) {
+        _loop_1(key);
     }
     return Object.keys(obj).length === 0;
 }
-function getUnlockedJSON(json, jsonPathArray) {
+function getUnlockedJSON(json, jsonPathArray, removeParentKeysAndEmptyArrays) {
+    if (removeParentKeysAndEmptyArrays === void 0) { removeParentKeysAndEmptyArrays = false; }
+    if (!jsonPathArray.length)
+        return { newDocument: json, removedPatches: [] };
     var jsonCopy = JSON.parse(JSON.stringify(json));
+    var originaljsonCopy = JSON.parse(JSON.stringify(json));
+    var removedPatches = [];
     var patches = jsonPathArray.flatMap(function (jsonPath) {
         var pathsToRemove = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' });
+        //reversing patches to handle correct array index deletion
+        pathsToRemove.reverse();
         return pathsToRemove.map(function (result) {
-            return Array.isArray(result.parent)
-                ? { op: 'replace', path: result.pointer, value: null }
-                : { op: 'remove', path: result.pointer };
+            //storing removed patches to have functionality of undo
+            removedPatches.push({ op: 'add', path: result.pointer, value: result.value });
+            return { op: 'remove', path: result.pointer };
         });
     });
     var newDocument = applyPatch(jsonCopy, patches).newDocument;
-    removeEmptyObjectKeysAndNullValues(newDocument);
-    return newDocument;
+    if (removeParentKeysAndEmptyArrays)
+        removeEmptyObjectKeysAndNullValues(newDocument, originaljsonCopy);
+    return { newDocument: newDocument, removedPatches: removedPatches.reverse() };
 }
 function getLockedJSON(json, jsonPathArray) {
     var jsonCopy = JSON.parse(JSON.stringify(json));
@@ -24701,7 +24718,7 @@ var SearchBar = function (_a) {
         inputRef.current.value = '';
         _applySearch('');
     };
-    return (jsxRuntime.jsx("div", __assign({ className: containerClassName }, { children: jsxRuntime.jsxs("div", __assign({ className: "search-bar bc-n50 focus-within-border-b5 dc__hover-border-n300 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32" }, { children: [jsxRuntime.jsx(SvgIcSearch, { className: "search-bar__icon dc__position-abs icon-color-n6 icon-dim-16" }), jsxRuntime.jsx("input", __assign({ placeholder: inputProps.placeholder || 'Search', "data-testid": "search-bar", type: "text" }, inputProps, { defaultValue: initialSearchText, className: "search-bar__input dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ".concat(showClearButton ? 'pr-30' : 'pr-10'), onChange: handleChange, onKeyDown: handleKeyDown, ref: inputRef })), showClearButton && (jsxRuntime.jsx("button", __assign({ className: "flex search-bar__clear-button dc__position-abs dc__transparent mt-0 mb-0 mr-5 ml-5", type: "button", onClick: clearSearch, "aria-label": "Clear search" }, { children: jsxRuntime.jsx(SvgIcErrorCross, { className: "icon-dim-16 icon-n4 dc__vertical-align-middle" }) })))] })) })));
+    return (jsxRuntime.jsx("div", __assign({ className: containerClassName }, { children: jsxRuntime.jsxs("div", __assign({ className: "search-bar bcn-0 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32" }, { children: [jsxRuntime.jsx(SvgIcSearch, { className: "search-bar__icon dc__position-abs icon-color-n6 icon-dim-18" }), jsxRuntime.jsx("input", __assign({ placeholder: "Search", "data-testid": "search-bar", type: "text" }, inputProps, { defaultValue: initialSearchText, className: "search-bar__input bcn-0 dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ".concat(showClearButton ? 'pr-30' : 'pr-10'), onChange: handleChange, onKeyDown: handleKeyDown, ref: inputRef })), showClearButton && (jsxRuntime.jsx("button", __assign({ className: "flex search-bar__clear-button dc__position-abs dc__transparent mt-0 mb-0 mr-5 ml-5", type: "button", onClick: clearSearch, "aria-label": "Clear search" }, { children: jsxRuntime.jsx(SvgIcErrorCross, { className: "icon-dim-18 icon-n4 dc__vertical-align-middle" }) })))] })) })));
 };
 
 var css_248z$4 = ".toggle__switch {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n}\n.toggle__switch.disabled {\n  cursor: not-allowed;\n}\n.toggle__switch.disabled .toggle__slider {\n  cursor: not-allowed;\n}\n\n/* Hide default HTML checkbox */\n.toggle__switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n/* The slider */\n.toggle__slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #ccc;\n  transition: all 0.4s ease;\n}\n.toggle__slider.round {\n  border-radius: 34px;\n}\n.toggle__slider.round:before {\n  border-radius: 50%;\n}\n.toggle__slider:before {\n  position: absolute;\n  content: \"\";\n  height: calc(100% - 8px);\n  width: calc(50% - 4px);\n  left: 4px;\n  bottom: 4px;\n  background-color: white;\n  transition: all 0.4s ease;\n}\n.toggle__slider.with-icon {\n  background-color: var(--N000) !important;\n}\n.toggle__slider.with-icon svg {\n  position: absolute;\n  content: \"\";\n  top: -1px;\n  left: -1px;\n  background-color: var(--N300);\n  transition: all 0.4s ease;\n}\n\ninput:checked + .toggle__slider {\n  background-color: var(--color);\n}\ninput:checked + .toggle__slider:before {\n  transform: translateX(100%);\n}\ninput:checked + .toggle__slider.with-icon svg {\n  transform: translateX(100%);\n  background-color: var(--color);\n}\n\ninput:focus + .toggle__slider {\n  box-shadow: 0 0 1px var(--color);\n}";
@@ -28485,7 +28502,7 @@ var handleAddCD = function (_a) {
 };
 
 function CustomInput(_a) {
-    var name = _a.name, value = _a.value, error = _a.error, onChange = _a.onChange, _b = _a.onFocus, onFocus = _b === void 0 ? function (e) { } : _b, label = _a.label, _c = _a.type, type = _c === void 0 ? 'text' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.labelClassName, labelClassName = _e === void 0 ? '' : _e, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.tabIndex, tabIndex = _g === void 0 ? 1 : _g, _h = _a.dataTestid, dataTestid = _h === void 0 ? '' : _h, _j = _a.isRequiredField, isRequiredField = _j === void 0 ? false : _j, _k = _a.autoFocus, autoFocus = _k === void 0 ? false : _k, _l = _a.rootClassName, rootClassName = _l === void 0 ? '' : _l, _m = _a.autoComplete, autoComplete = _m === void 0 ? 'off' : _m, _o = _a.helperText, helperText = _o === void 0 ? '' : _o, handleOnBlur = _a.handleOnBlur, _p = _a.readOnly, readOnly = _p === void 0 ? false : _p, _q = _a.noTrim, noTrim = _q === void 0 ? false : _q, ref = _a.ref, onKeyPress = _a.onKeyPress, defaultValue = _a.defaultValue, onKeyDown = _a.onKeyDown, required = _a.required, additionalErrorInfo = _a.additionalErrorInfo, _r = _a.inputWrapClassName, inputWrapClassName = _r === void 0 ? '' : _r, _s = _a.inputProps, inputProps = _s === void 0 ? {} : _s;
+    var name = _a.name, value = _a.value, error = _a.error, onChange = _a.onChange, _b = _a.onFocus, onFocus = _b === void 0 ? function (e) { } : _b, label = _a.label, _c = _a.type, type = _c === void 0 ? 'text' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.labelClassName, labelClassName = _e === void 0 ? '' : _e, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f, _g = _a.tabIndex, tabIndex = _g === void 0 ? 1 : _g, _h = _a.dataTestid, dataTestid = _h === void 0 ? '' : _h, _j = _a.isRequiredField, isRequiredField = _j === void 0 ? false : _j, _k = _a.autoFocus, autoFocus = _k === void 0 ? false : _k, _l = _a.rootClassName, rootClassName = _l === void 0 ? '' : _l, _m = _a.autoComplete, autoComplete = _m === void 0 ? 'off' : _m, _o = _a.helperText, helperText = _o === void 0 ? '' : _o, handleOnBlur = _a.handleOnBlur, _p = _a.readOnly, readOnly = _p === void 0 ? false : _p, _q = _a.noTrim, noTrim = _q === void 0 ? false : _q, ref = _a.ref, onKeyPress = _a.onKeyPress, defaultValue = _a.defaultValue, onKeyDown = _a.onKeyDown, required = _a.required, additionalErrorInfo = _a.additionalErrorInfo, _r = _a.inputWrapClassName, inputWrapClassName = _r === void 0 ? '' : _r;
     function handleError(error) {
         if (!Array.isArray(error)) {
             return [error];
@@ -28534,10 +28551,10 @@ function CustomInput(_a) {
             return (jsxRuntime.jsx("label", __assign({ className: "form__label ".concat(labelClassName), "data-testid": "label-".concat(dataTestid) }, { children: renderInputLabelConditionally() })));
         }
     };
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex column left top ".concat(inputWrapClassName) }, { children: [renderInputLabel(), jsxRuntime.jsx("input", __assign({ "data-testid": dataTestid, type: type, name: name, autoComplete: autoComplete, className: "form__input ".concat(rootClassName), onChange: function (e) {
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex column left top ".concat(inputWrapClassName) }, { children: [renderInputLabel(), jsxRuntime.jsx("input", { "data-testid": dataTestid, type: type, name: name, autoComplete: autoComplete, className: "form__input ".concat(rootClassName), onChange: function (e) {
                     e.persist();
                     onChange(e);
-                }, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, value: value, disabled: disabled, tabIndex: tabIndex, autoFocus: autoFocus, readOnly: readOnly, ref: ref, onKeyPress: onKeyPress, defaultValue: defaultValue, onKeyDown: onKeyDown, required: required }, inputProps)), getInputError(), helperText && (jsxRuntime.jsxs("div", __assign({ className: "form__text-field-info" }, { children: [jsxRuntime.jsx(SvgIcInfoFilled, { className: "form__icon form__icon--info" }), jsxRuntime.jsx("p", __assign({ className: "sentence-case" }, { children: helperText }))] })))] })));
+                }, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, value: value, disabled: disabled, tabIndex: tabIndex, autoFocus: autoFocus, readOnly: readOnly, ref: ref, onKeyPress: onKeyPress, defaultValue: defaultValue, onKeyDown: onKeyDown, required: required }), getInputError(), helperText && (jsxRuntime.jsxs("div", __assign({ className: "form__text-field-info" }, { children: [jsxRuntime.jsx(SvgIcInfoFilled, { className: "form__icon form__icon--info" }), jsxRuntime.jsx("p", __assign({ className: "sentence-case" }, { children: helperText }))] })))] })));
 }
 
 exports.DraggablePositionVariant = void 0;

package/package.json

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

package/src/Common/CustomInput/CustomInput.tsx

@@ -30,7 +30,6 @@ export function CustomInput({
     required,
     additionalErrorInfo,
     inputWrapClassName = '',
-    inputProps = {},
 }: CustomInputProps) {
     function handleError(error: any): any[] {
         if (!Array.isArray(error)) {
@@ -94,7 +93,7 @@ export function CustomInput({
 
     return (
         <div className={`flex column left top ${inputWrapClassName}`}>
-            {renderInputLabel()}
+           {renderInputLabel()}
             <input
                 data-testid={dataTestid}
                 type={type}
@@ -118,7 +117,6 @@ export function CustomInput({
                 defaultValue={defaultValue}
                 onKeyDown={onKeyDown}
                 required={required}
-                {...inputProps}
             />
 
             {getInputError()}

package/src/Common/CustomInput/Types.ts

@@ -1,4 +1,4 @@
-import React, { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react'
+import React, { HTMLInputTypeAttribute } from 'react'
 
 export interface CustomInputProps {
     name: string
@@ -6,7 +6,7 @@ export interface CustomInputProps {
     onChange: (e: any) => void
     onFocus?: (e: any) => void
     autoComplete?: string
-    label?: string | React.ReactNode
+    label?: string |  React.ReactNode
     labelClassName?: string
     type?: HTMLInputTypeAttribute
     disabled?: boolean
@@ -28,5 +28,4 @@ export interface CustomInputProps {
     required?: boolean
     additionalErrorInfo?: React.ReactNode
     inputWrapClassName?: string
-    inputProps?: InputHTMLAttributes<HTMLInputElement>
-}
+}

package/src/Common/Helper.tsx

@@ -499,18 +499,27 @@ export const getFilteredChartVersions = (charts, selectedChartType) => {
             chartRefId: item.chartRefId,
         }))
 }
-function removeEmptyObjectKeysAndNullValues(obj) {
-    // It recursively removes empty object keys and array values that are null
+
+function removeEmptyObjectKeysAndNullValues(obj, originaljsonCopy) {
+    // It recursively removes empty object keys and empty array keys
     for (let key in obj) {
         if (Array.isArray(obj[key])) {
-            if (obj[key].length === 0) continue
-            obj[key] = obj[key].filter((item) => item !== null)
             // Check if the array is empty
-            if (obj[key].length === 0) {
-                delete obj[key] // Delete the key if the array is empty
+            if (obj[key].length !== 0) {
+                obj[key].forEach((element, index) => {
+                    if (element === null || (typeof element === 'object' && Object.keys(element).length === 0))
+                        obj[key].splice(index, 1)
+                    else removeEmptyObjectKeysAndNullValues(element, originaljsonCopy[key][index])
+                })
+            }
+            if (obj[key].length === 0 && originaljsonCopy[key].length !== 0) {
+                delete obj[key]
             }
         } else if (obj[key] && typeof obj[key] === 'object') {
-            if (removeEmptyObjectKeysAndNullValues(obj[key])) {
+            if (
+                removeEmptyObjectKeysAndNullValues(obj[key], originaljsonCopy[key]) &&
+                Object.keys(originaljsonCopy[key]).length !== 0
+            ) {
                 delete obj[key]
             }
         } else if (obj[key] === undefined) {
@@ -520,20 +529,25 @@ function removeEmptyObjectKeysAndNullValues(obj) {
     return Object.keys(obj).length === 0
 }
 
-export function getUnlockedJSON(json, jsonPathArray) {
+export function getUnlockedJSON(json, jsonPathArray, removeParentKeysAndEmptyArrays = false) {
+    if (!jsonPathArray.length) return { newDocument: json, removedPatches: [] }
+    
     const jsonCopy = JSON.parse(JSON.stringify(json))
+    const originaljsonCopy = JSON.parse(JSON.stringify(json))
+    let removedPatches = []
     let patches = jsonPathArray.flatMap((jsonPath) => {
         const pathsToRemove = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' })
-        return pathsToRemove.map((result) =>
-            Array.isArray(result.parent)
-                ? { op: 'replace', path: result.pointer, value: null }
-                : { op: 'remove', path: result.pointer },
-        )
+        //reversing patches to handle correct array index deletion
+        pathsToRemove.reverse()
+        return pathsToRemove.map((result) => {
+            //storing removed patches to have functionality of undo
+            removedPatches.push({ op: 'add', path: result.pointer, value: result.value })
+            return { op: 'remove', path: result.pointer }
+        })
     })
     let newDocument = jsonpatch.applyPatch(jsonCopy, patches).newDocument
-
-    removeEmptyObjectKeysAndNullValues(newDocument)
-    return newDocument
+    if (removeParentKeysAndEmptyArrays) removeEmptyObjectKeysAndNullValues(newDocument, originaljsonCopy)
+    return { newDocument, removedPatches: removedPatches.reverse() }
 }
 
 export function getLockedJSON(json, jsonPathArray: string[]) {

package/src/Common/SearchBar/SearchBar.component.tsx

@@ -84,17 +84,18 @@ const SearchBar = ({
         inputRef.current.value = ''
         _applySearch('')
     }
+
     return (
         <div className={containerClassName}>
-            <div className="search-bar bc-n50 focus-within-border-b5 dc__hover-border-n300 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32">
-                <Search className="search-bar__icon dc__position-abs icon-color-n6 icon-dim-16" />
+            <div className="search-bar bcn-0 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32">
+                <Search className="search-bar__icon dc__position-abs icon-color-n6 icon-dim-18" />
                 <input
-                    placeholder={inputProps.placeholder || 'Search'}
+                    placeholder="Search"
                     data-testid="search-bar"
                     type="text"
                     {...inputProps}
                     defaultValue={initialSearchText}
-                    className={`search-bar__input dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ${
+                    className={`search-bar__input bcn-0 dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ${
                         showClearButton ? 'pr-30' : 'pr-10'
                     }`}
                     onChange={handleChange}
@@ -108,7 +109,7 @@ const SearchBar = ({
                         onClick={clearSearch}
                         aria-label="Clear search"
                     >
-                        <Clear className="icon-dim-16 icon-n4 dc__vertical-align-middle" />
+                        <Clear className="icon-dim-18 icon-n4 dc__vertical-align-middle" />
                     </button>
                 )}
             </div>