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

package/dist/Common/ImageTags.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ImageButtonType, ImageTaggingContainerType } from './Types';
-export declare const ImageTagsContainer: ({ ciPipelineId, artifactId, imageComment, imageReleaseTags, appReleaseTagNames, setAppReleaseTagNames, tagsEditable, setTagsEditable, toggleCardMode, }: ImageTaggingContainerType) => JSX.Element;
+export declare const ImageTagsContainer: ({ ciPipelineId, artifactId, imageComment, imageReleaseTags, appReleaseTagNames, setAppReleaseTagNames, tagsEditable, setTagsEditable, toggleCardMode, hideHardDelete, }: ImageTaggingContainerType) => JSX.Element;
 export declare const ImageTagButton: ({ text, isSoftDeleted, isEditing, onSoftDeleteClick, onHardDeleteClick, tagId, softDeleteTags, isSuperAdmin, duplicateTag, }: ImageButtonType) => JSX.Element;

package/dist/Common/Types.d.ts

@@ -328,6 +328,7 @@ export interface ImageTaggingContainerType {
     setAppReleaseTagNames?: (appReleaseTags: string[]) => void;
     setTagsEditable?: (tagsEditable: boolean) => void;
     toggleCardMode?: (id: number) => void;
+    hideHardDelete?: boolean;
 }
 export interface ImageButtonType {
     text: string;

package/dist/index.js

@@ -22696,7 +22696,7 @@ var SvgIcEnter = function SvgIcEnter(props) {
 };
 
 var ImageTagsContainer = function (_a) {
-    var ciPipelineId = _a.ciPipelineId, artifactId = _a.artifactId, imageComment = _a.imageComment, imageReleaseTags = _a.imageReleaseTags, appReleaseTagNames = _a.appReleaseTagNames, setAppReleaseTagNames = _a.setAppReleaseTagNames, tagsEditable = _a.tagsEditable, setTagsEditable = _a.setTagsEditable, toggleCardMode = _a.toggleCardMode;
+    var ciPipelineId = _a.ciPipelineId, artifactId = _a.artifactId, imageComment = _a.imageComment, imageReleaseTags = _a.imageReleaseTags, appReleaseTagNames = _a.appReleaseTagNames, setAppReleaseTagNames = _a.setAppReleaseTagNames, tagsEditable = _a.tagsEditable, setTagsEditable = _a.setTagsEditable, toggleCardMode = _a.toggleCardMode; _a.hideHardDelete;
     var _b = __read(React.useState(imageReleaseTags ? imageReleaseTags : []), 2), initialTags = _b[0], setInitialTags = _b[1];
     var _c = __read(React.useState(imageComment ? imageComment.comment : ''), 2), initialDescription = _c[0], setInitialDescription = _c[1];
     var _d = __read(React.useState(appReleaseTagNames ? appReleaseTagNames : []), 2), existingTags = _d[0], setExistingTags = _d[1];
@@ -22944,7 +22944,8 @@ var ImageTagsContainer = function (_a) {
     var setInputValue = function (e) {
         setTextInput(e.target.value);
     };
-    var enterTagCreate = function () {
+    var enterTagCreate = function (e) {
+        stopPropagation(e);
         if (textInput.trim()) {
             handleTagCreate(textInput.trim());
         }
@@ -22986,17 +22987,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 +23000,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-14",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Common/ImageTags.tsx

@@ -29,6 +29,7 @@ export const ImageTagsContainer = ({
     tagsEditable,
     setTagsEditable,
     toggleCardMode,
+    hideHardDelete,
 }: ImageTaggingContainerType) => {
     const [initialTags, setInitialTags] = useState<ReleaseTag[]>(imageReleaseTags ? imageReleaseTags : [])
     const [initialDescription, setInitialDescription] = useState(imageComment ? imageComment.comment : '')
@@ -59,11 +60,11 @@ export const ImageTagsContainer = ({
     }, [appReleaseTagNames])
 
     useEffect(() => {
-        if(saveData){
+        if (saveData) {
             handleSave()
             setSaveData(false)
         }
-    },[saveData])
+    }, [saveData])
 
     async function initialise() {
         try {
@@ -207,8 +208,8 @@ export const ImageTagsContainer = ({
     }
 
     const handleSave = async () => {
-        if(tagErrorMessage) return
-        
+        if (tagErrorMessage) return
+
         const payload = {
             createTags: createTags,
             softDeleteTags: softDeleteTags,
@@ -330,14 +331,15 @@ export const ImageTagsContainer = ({
         setTextInput(e.target.value)
     }
 
-    const enterTagCreate = () => {
+    const enterTagCreate = (e) => {
+        stopPropagation(e)
         if (textInput.trim()) {
             handleTagCreate(textInput.trim())
         }
     }
 
     const onClickSave = () => {
-        if(textInput.trim()){
+        if (textInput.trim()) {
             handleTagCreate(textInput)
         }
         setSaveData(true)
@@ -515,19 +517,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 +532,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>
     )
 }

package/src/Common/Types.ts

@@ -361,6 +361,7 @@ export interface ImageTaggingContainerType {
     setAppReleaseTagNames?: (appReleaseTags: string[]) => void
     setTagsEditable?: (tagsEditable: boolean) => void
     toggleCardMode?: (id: number) => void
+    hideHardDelete?: boolean
 }
 
 export interface ImageButtonType {