@devtron-labs/devtron-fe-common-lib 0.0.10-beta-12 → 0.0.10-beta-13

package/dist/index.js

@@ -22986,17 +22986,6 @@ var ImageTagsContainer = function (_a) {
 var ImageTagButton = function (_a) {
     var text = _a.text, isSoftDeleted = _a.isSoftDeleted, isEditing = _a.isEditing, onSoftDeleteClick = _a.onSoftDeleteClick, onHardDeleteClick = _a.onHardDeleteClick, tagId = _a.tagId, softDeleteTags = _a.softDeleteTags, isSuperAdmin = _a.isSuperAdmin, duplicateTag = _a.duplicateTag;
     var IconComponent = isSoftDeleted ? SvgIcArrowCounterClockwise : SvgIcMinus;
-    var _b = __read(React.useState(false), 2), isHovered = _b[0], setIsHovered = _b[1];
-    var handleMouseEnter = function () {
-        if (isEditing) {
-            setIsHovered(true);
-        }
-    };
-    var handleMouseLeave = function () {
-        if (isEditing) {
-            setIsHovered(false);
-        }
-    };
     var isInSoftDeleteTags = isSoftDeleted && softDeleteTags.some(function (tag) { return tag.tagName === text; });
     var canTagBeHardDelete = tagId === 0 || isSuperAdmin;
     var tabColor = function () {
@@ -23010,9 +22999,7 @@ var ImageTagButton = function (_a) {
             return 'cn-9';
         }
     };
-    return (jsxRuntime.jsx("div", __assign({ className: "br-4 en-2 bw-1 dc__w-fit-content dc__word-wrap-anywhere mr-8 bcn-0 flex mb-4 ".concat(tabColor()), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex pt-2 pl-8 pr-8 pb-2" }, { children: [duplicateTag ? (jsxRuntime.jsx(SvgIcErrorExclamation, { className: "icon-dim-12 mr-4" })) : (isHovered &&
-                    isEditing &&
-                    (isInSoftDeleteTags || (tagId !== 0 && !isSoftDeleted)) && (jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: true, placement: "top", content: isInSoftDeleteTags ? 'Restore tag' : 'Soft delete tag' }, { children: jsxRuntime.jsx(IconComponent, { className: "icon-dim-12 mr-4 cursor ".concat(isSoftDeleted ? 'scn-6' : 'fcn-6'), "data-testid": "".concat(text, "-tag-soft-delete"), onClick: onSoftDeleteClick }) })))), text, isHovered && isEditing && canTagBeHardDelete && (jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: true, placement: "top", content: "Remove tag" }, { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-12 ml-4 fcn-6 cn-5 cursor", "data-testid": "".concat(text, "-tag-hard-delete"), onClick: onHardDeleteClick }) })))] })) })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "br-4 en-2 bw-1 mr-8 bcn-0 mb-4 pt-2 pr-8 pb-2 pl-8 tag-class flex ".concat(isEditing ? 'icon-hover' : '', " ").concat(tabColor()) }, { children: [duplicateTag ? (jsxRuntime.jsx(SvgIcErrorExclamation, { className: "icon-dim-12 mr-4" })) : (jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: true, placement: "top", content: isInSoftDeleteTags ? 'Restore tag' : 'Soft delete tag' }, { children: jsxRuntime.jsx("div", __assign({ className: "action-icon mr-4 lh-16 pt-3 ".concat(isInSoftDeleteTags || (tagId !== 0 && !isSoftDeleted) ? 'show-icon' : '') }, { children: jsxRuntime.jsx(IconComponent, { className: "icon-dim-12 cursor".concat(isSoftDeleted ? 'scn-6' : 'fcn-6', " "), "data-testid": "".concat(text, "-tag-soft-delete"), onClick: onSoftDeleteClick }) })) }))), text, jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: true, placement: "top", content: "Remove tag" }, { children: jsxRuntime.jsx("div", __assign({ className: "action-icon ml-4 lh-16 pt-3 ".concat(canTagBeHardDelete ? 'show-icon' : '') }, { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-12 fcn-6 cursor", "data-testid": "".concat(text, "-tag-hard-delete"), onClick: onHardDeleteClick }) })) }))] })));
 };
 var AddImageButton = function (_a) {
     var handleEditClick = _a.handleEditClick;

package/package.json

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

package/src/Common/ImageTags.tsx

@@ -59,11 +59,11 @@ export const ImageTagsContainer = ({
     }, [appReleaseTagNames])
 
     useEffect(() => {
-        if(saveData){
+        if (saveData) {
             handleSave()
             setSaveData(false)
         }
-    },[saveData])
+    }, [saveData])
 
     async function initialise() {
         try {
@@ -207,8 +207,8 @@ export const ImageTagsContainer = ({
     }
 
     const handleSave = async () => {
-        if(tagErrorMessage) return
-        
+        if (tagErrorMessage) return
+
         const payload = {
             createTags: createTags,
             softDeleteTags: softDeleteTags,
@@ -337,7 +337,7 @@ export const ImageTagsContainer = ({
     }
 
     const onClickSave = () => {
-        if(textInput.trim()){
+        if (textInput.trim()) {
             handleTagCreate(textInput)
         }
         setSaveData(true)
@@ -515,19 +515,6 @@ export const ImageTagButton = ({
     duplicateTag,
 }: ImageButtonType) => {
     const IconComponent = isSoftDeleted ? Redo : Minus
-
-    const [isHovered, setIsHovered] = useState(false)
-    const handleMouseEnter = () => {
-        if (isEditing) {
-            setIsHovered(true)
-        }
-    }
-    const handleMouseLeave = () => {
-        if (isEditing) {
-            setIsHovered(false)
-        }
-    }
-
     const isInSoftDeleteTags = isSoftDeleted && softDeleteTags.some((tag) => tag.tagName === text)
     const canTagBeHardDelete = tagId === 0 || isSuperAdmin
 
@@ -543,42 +530,42 @@ export const ImageTagButton = ({
 
     return (
         <div
-            className={`br-4 en-2 bw-1 dc__w-fit-content dc__word-wrap-anywhere mr-8 bcn-0 flex mb-4 ${tabColor()}`}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
+            className={`br-4 en-2 bw-1 mr-8 bcn-0 mb-4 pt-2 pr-8 pb-2 pl-8 tag-class flex ${
+                isEditing ? 'icon-hover' : ''
+            } ${tabColor()}`}
         >
-            <div className="flex pt-2 pl-8 pr-8 pb-2">
-                {duplicateTag ? (
-                    <Warning className="icon-dim-12 mr-4" />
-                ) : (
-                    isHovered &&
-                    isEditing &&
-                    (isInSoftDeleteTags || (tagId !== 0 && !isSoftDeleted)) && (
-                        <Tippy
-                            className="default-tt"
-                            arrow={true}
-                            placement="top"
-                            content={isInSoftDeleteTags ? 'Restore tag' : 'Soft delete tag'}
-                        >
-                            <IconComponent
-                                className={`icon-dim-12 mr-4 cursor ${isSoftDeleted ? 'scn-6' : 'fcn-6'}`}
-                                data-testid={`${text}-tag-soft-delete`}
-                                onClick={onSoftDeleteClick}
-                            />
-                        </Tippy>
-                    )
-                )}
-                {text}
-                {isHovered && isEditing && canTagBeHardDelete && (
-                    <Tippy className="default-tt" arrow={true} placement="top" content="Remove tag">
-                        <Close
-                            className="icon-dim-12 ml-4 fcn-6 cn-5 cursor"
-                            data-testid={`${text}-tag-hard-delete`}
-                            onClick={onHardDeleteClick}
+            {duplicateTag ? (
+                <Warning className="icon-dim-12 mr-4" />
+            ) : (
+                <Tippy
+                    className="default-tt"
+                    arrow={true}
+                    placement="top"
+                    content={isInSoftDeleteTags ? 'Restore tag' : 'Soft delete tag'}
+                >
+                    <div
+                        className={`action-icon mr-4 lh-16 pt-3 ${
+                            isInSoftDeleteTags || (tagId !== 0 && !isSoftDeleted) ? 'show-icon' : ''
+                        }`}
+                    >
+                        <IconComponent
+                            className={`icon-dim-12 cursor${isSoftDeleted ? 'scn-6' : 'fcn-6'} `}
+                            data-testid={`${text}-tag-soft-delete`}
+                            onClick={onSoftDeleteClick}
                         />
-                    </Tippy>
-                )}
-            </div>
+                    </div>
+                </Tippy>
+            )}
+            {text}
+            <Tippy className="default-tt" arrow={true} placement="top" content="Remove tag">
+                <div className={`action-icon ml-4 lh-16 pt-3 ${canTagBeHardDelete ? 'show-icon' : ''}`}>
+                    <Close
+                        className="icon-dim-12 fcn-6 cursor"
+                        data-testid={`${text}-tag-hard-delete`}
+                        onClick={onHardDeleteClick}
+                    />
+                </div>
+            </Tippy>
         </div>
     )
 }