@devtron-labs/devtron-fe-common-lib 0.0.10-beta-8 → 0.0.10-beta-9

package/dist/index.js

@@ -22830,7 +22830,9 @@ var ImageTagsContainer = function (_a) {
     };
     var handleDescriptionChange = function (e) {
         var description = e.target.value;
-        (description === null || description === void 0 ? void 0 : description.length) > 500 ? setDescriptionValidationMessage('comment length cannot exceed 500 characters') : setDescriptionValidationMessage('');
+        (description === null || description === void 0 ? void 0 : description.length) > 500
+            ? setDescriptionValidationMessage('comment length cannot exceed 500 characters')
+            : setDescriptionValidationMessage('');
         setNewDescription(description);
     };
     var handleCancel = function () {
@@ -22845,8 +22847,11 @@ var ImageTagsContainer = function (_a) {
     };
     var handleTagCreate = function (newValue) {
         var lowercaseValue = newValue.toLowerCase().trim();
-        if (lowercaseValue.length == 0 || lowercaseValue.length >= 128 || lowercaseValue[0] == '.' || lowercaseValue[0] == '-') {
-            setTagErrorMessage("tag name cannot be empty or exceed 128 characters or cannot start with . or -");
+        if (lowercaseValue.length == 0 ||
+            lowercaseValue.length >= 128 ||
+            lowercaseValue[0] == '.' ||
+            lowercaseValue[0] == '-') {
+            setTagErrorMessage('tag name cannot be empty or exceed 128 characters or cannot start with . or -');
             return;
         }
         setTagErrorMessage('');
@@ -22857,7 +22862,7 @@ var ImageTagsContainer = function (_a) {
                 isTagExistsInDisplayedTags = true;
         }
         if (isTagExistsInExistingTags || isTagExistsInDisplayedTags || lowercaseValue === 'latest') {
-            setTagErrorMessage("This tag ".concat(lowercaseValue, " is already applied on same/another image in this application"));
+            setTagErrorMessage('This tag is already being used in this application');
             return;
         }
         var newTag = {
@@ -22950,10 +22955,10 @@ var ImageTagsContainer = function (_a) {
         });
     }); };
     var renderInfoCard = function () {
-        return (jsxRuntime.jsx(TippyCustomized, __assign({ theme: exports.TippyTheme.white, className: "w-300 h-250 fcv-5 dc__overflow-scroll", placement: "right", Icon: SvgIcHelp, heading: "Release tags", infoText: "Release tags allow you to tag container images with readable and relatable tags eg. v1.0.", showCloseButton: true, trigger: "click", interactive: true, documentationLinkText: "View Documentation", additionalContent: getBuildContextAdditionalContent() }, { children: jsxRuntime.jsx("div", __assign({ className: "icon-dim-16 fcn-5 ml-8 cursor" }, { children: jsxRuntime.jsx(SvgIcHelpOutline, {}) })) })));
+        return (jsxRuntime.jsx(TippyCustomized, __assign({ theme: exports.TippyTheme.white, className: "w-300 fcv-5", placement: "right", Icon: SvgIcHelp, heading: "Release tags", showCloseButton: true, trigger: "click", interactive: true, documentationLinkText: "View Documentation", additionalContent: getBuildContextAdditionalContent() }, { children: jsxRuntime.jsx("div", __assign({ className: "icon-dim-16 fcn-5 ml-8 cursor" }, { children: jsxRuntime.jsx(SvgIcHelpOutline, {}) })) })));
     };
     var getBuildContextAdditionalContent = function () {
-        return (jsxRuntime.jsx("div", __assign({ className: "p-12 fs-13" }, { children: jsxRuntime.jsxs("ul", { children: [jsxRuntime.jsx("li", { children: "A release tag can only be added if a workflow has CD pipelines deploying to Production environments." }), jsxRuntime.jsx("li", { children: "Multiple tags can be added to an image." }), jsxRuntime.jsx("li", { children: "Multiple images in an application cannot have the same tag." }), jsxRuntime.jsx("li", { children: "Tags cannot be deleted once saved. Although, you can soft delete a tag if an unwanted tag has been added." })] }) })));
+        return (jsxRuntime.jsxs("div", __assign({ className: "h-250 fs-13 dc__overflow-scroll p-12" }, { children: [jsxRuntime.jsx("div", { children: "Release tags allow you to tag container images with readable and relatable tags eg. v1.0." }), jsxRuntime.jsxs("ul", __assign({ className: 'pl-20 mt-8' }, { children: [jsxRuntime.jsx("li", { children: "A release tag can only be added if a workflow has CD pipelines deploying to Production environments." }), jsxRuntime.jsx("li", { children: "Multiple tags can be added to an image." }), jsxRuntime.jsx("li", { children: "Multiple images in an application cannot have the same tag." }), jsxRuntime.jsx("li", { children: "Tags cannot be deleted once saved. Although, you can soft delete a tag if an unwanted tag has been added." })] }))] })));
     };
     var creatableRef = React.useRef(null);
     if (newDescription === '' && displayedTags.length === 0 && !isEditing) {
@@ -22965,7 +22970,7 @@ var ImageTagsContainer = function (_a) {
                         }, onHardDeleteClick: function (e) {
                             stopPropagation(e);
                             handleTagHardDelete(index);
-                        }, tagId: tag.id, softDeleteTags: softDeleteTags, isSuperAdmin: isSuperAdmin }, tag.id)); }) })), showTagsWarning && (jsxRuntime.jsxs("div", __assign({ className: "cn-7 mb-8 flex left" }, { children: [jsxRuntime.jsx(SvgIcInfoFilled, { className: "form__icon--info icon-dim-16 mr-2" }), "Tags cannot be edited/removed later"] }))), jsxRuntime.jsx("div", __assign({ className: "cn-7 mt-12" }, { children: "Comment" })), jsxRuntime.jsx("div", __assign({ className: "flex left flex-wrap dc__gap-8 w-100 mt-6", "data-testid": "add-image-comment-text-area" }, { children: jsxRuntime.jsx("textarea", { value: newDescription, onChange: handleDescriptionChange, className: "flex left flex-wrap dc__gap-8 dc__description-textarea", style: { height: '90px !important' } }) })), (descriptionValidationMessage !== '') && (jsxRuntime.jsxs("div", __assign({ className: "flex left" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), jsxRuntime.jsx("div", __assign({ className: "form__error" }, { children: descriptionValidationMessage }))] }))), jsxRuntime.jsxs("div", __assign({ className: "w-100 flex right mt-12" }, { children: [jsxRuntime.jsx("button", __assign({ className: "cta flex cancel h-32 lh-32-imp", type: "button", onClick: function (e) {
+                        }, tagId: tag.id, softDeleteTags: softDeleteTags, isSuperAdmin: isSuperAdmin }, tag.id)); }) })), showTagsWarning && (jsxRuntime.jsxs("div", __assign({ className: "cn-7 mb-8 flex left" }, { children: [jsxRuntime.jsx(SvgIcInfoFilled, { className: "form__icon--info icon-dim-16 mr-2" }), "Tags cannot be edited/removed later"] }))), jsxRuntime.jsx("div", __assign({ className: "cn-7 mt-12" }, { children: "Comment" })), jsxRuntime.jsx("div", __assign({ className: "flex left flex-wrap dc__gap-8 w-100 mt-6 mb-12", "data-testid": "add-image-comment-text-area" }, { children: jsxRuntime.jsx("textarea", { value: newDescription, onChange: handleDescriptionChange, className: "flex left flex-wrap dc__gap-8 dc__description-textarea", style: { height: '90px !important' } }) })), descriptionValidationMessage !== '' && (jsxRuntime.jsxs("div", __assign({ className: "flex left" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), jsxRuntime.jsx("div", __assign({ className: "form__error" }, { children: descriptionValidationMessage }))] }))), jsxRuntime.jsxs("div", __assign({ className: "w-100 flex right mt-12" }, { children: [jsxRuntime.jsx("button", __assign({ className: "cta flex cancel h-32 lh-32-imp", type: "button", onClick: function (e) {
                                 stopPropagation(e);
                                 handleCancel();
                             } }, { children: "Cancel" })), jsxRuntime.jsx("button", __assign({ className: "cta flex h-32 lh-32-imp ml-12", "data-testid": "save-tags-button", type: "button", onClick: function (e) {
@@ -22998,7 +23003,7 @@ var ImageTagButton = function (_a) {
     };
     var isInSoftDeleteTags = isSoftDeleted && softDeleteTags.some(function (tag) { return tag.tagName === text; });
     var canTagBeHardDelete = tagId === 0 || isSuperAdmin;
-    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 h-24 ".concat(isSoftDeleted ? 'cy-7 bcy-1 dc__strike-through ey-2' : ''), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex pt-2 pl-8 pr-8 pb-2" }, { children: [isHovered && isEditing && (isInSoftDeleteTags || (tagId !== 0 && !isSoftDeleted)) && (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(SvgIcCross, { className: "icon-dim-12 ml-4 fcn-6 cn-5 cursor", "data-testid": "".concat(text, "-tag-hard-delete"), onClick: onHardDeleteClick }))] })) })));
+    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 h-24 ".concat(isSoftDeleted ? 'cy-7 bcy-1 dc__strike-through ey-2' : ''), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex pt-2 pl-8 pr-8 pb-2" }, { children: [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 }) })))] })) })));
 };
 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-8",
+    "version": "0.0.10-beta-9",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Common/ImageTags.tsx

@@ -15,6 +15,7 @@ import { ImageButtonType, ImageTaggingContainerType, ReleaseTag, TippyTheme } fr
 import { showError, stopPropagation } from './Helper'
 import { TippyCustomized } from './TippyCustomized'
 import { setImageTags, getUserRole } from './Common.service'
+import Tippy from '@tippyjs/react'
 
 export const ImageTagsContainer = ({
     ciPipelineId,
@@ -47,11 +48,11 @@ export const ImageTagsContainer = ({
 
     useEffect(() => {
         reInitState()
-    }, [imageReleaseTags,imageComment,tagsEditable])
+    }, [imageReleaseTags, imageComment, tagsEditable])
 
     useEffect(() => {
         setExistingTags(appReleaseTagNames ? appReleaseTagNames : [])
-    },[appReleaseTagNames])
+    }, [appReleaseTagNames])
 
     async function initialise() {
         try {
@@ -91,7 +92,9 @@ export const ImageTagsContainer = ({
 
     const handleDescriptionChange = (e) => {
         const description = e.target.value
-        description?.length > 500 ? setDescriptionValidationMessage('comment length cannot exceed 500 characters') : setDescriptionValidationMessage('')
+        description?.length > 500
+            ? setDescriptionValidationMessage('comment length cannot exceed 500 characters')
+            : setDescriptionValidationMessage('')
         setNewDescription(description)
     }
 
@@ -108,8 +111,13 @@ export const ImageTagsContainer = ({
 
     const handleTagCreate = (newValue) => {
         const lowercaseValue = newValue.toLowerCase().trim()
-        if(lowercaseValue.length == 0 || lowercaseValue.length >= 128 || lowercaseValue[0] == '.' || lowercaseValue[0] == '-') {
-            setTagErrorMessage("tag name cannot be empty or exceed 128 characters or cannot start with . or -")
+        if (
+            lowercaseValue.length == 0 ||
+            lowercaseValue.length >= 128 ||
+            lowercaseValue[0] == '.' ||
+            lowercaseValue[0] == '-'
+        ) {
+            setTagErrorMessage('tag name cannot be empty or exceed 128 characters or cannot start with . or -')
             return
         }
         setTagErrorMessage('')
@@ -119,7 +127,9 @@ export const ImageTagsContainer = ({
             if (displayedTags[i].tagName.toLowerCase() === lowercaseValue) isTagExistsInDisplayedTags = true
         }
         if (isTagExistsInExistingTags || isTagExistsInDisplayedTags || lowercaseValue === 'latest') {
-            setTagErrorMessage(`This tag ${lowercaseValue} is already applied on same/another image in this application`)
+            setTagErrorMessage(
+                'This tag is already being used in this application',
+            )
             return
         }
         const newTag: ReleaseTag = {
@@ -213,16 +223,14 @@ export const ImageTagsContainer = ({
             })
     }
 
-
     const renderInfoCard = (): JSX.Element => {
         return (
             <TippyCustomized
                 theme={TippyTheme.white}
-                className="w-300 h-250 fcv-5 dc__overflow-scroll"
+                className="w-300 fcv-5"
                 placement="right"
                 Icon={QuestionFilled}
                 heading="Release tags"
-                infoText="Release tags allow you to tag container images with readable and relatable tags eg. v1.0."
                 showCloseButton={true}
                 trigger="click"
                 interactive={true}
@@ -238,8 +246,9 @@ export const ImageTagsContainer = ({
 
     const getBuildContextAdditionalContent = () => {
         return (
-            <div className="p-12 fs-13">
-                <ul>
+            <div className="h-250 fs-13 dc__overflow-scroll p-12">
+                <div>Release tags allow you to tag container images with readable and relatable tags eg. v1.0.</div>
+                <ul className='pl-20 mt-8'>
                     <li>
                         A release tag can only be added if a workflow has CD pipelines deploying to Production
                         environments.
@@ -318,10 +327,7 @@ export const ImageTagsContainer = ({
                         </div>
                     )}
                     <div className="cn-7 mt-12">Comment</div>
-                    <div
-                        className="flex left flex-wrap dc__gap-8 w-100 mt-6"
-                        data-testid="add-image-comment-text-area"
-                    >
+                    <div  className="flex left flex-wrap dc__gap-8 w-100 mt-6 mb-12" data-testid="add-image-comment-text-area">
                         <textarea
                             value={newDescription}
                             onChange={handleDescriptionChange}
@@ -329,7 +335,8 @@ export const ImageTagsContainer = ({
                             style={{ height: '90px !important' }}
                         />
                     </div>
-                    { (descriptionValidationMessage !== '') && (<div className="flex left">
+                    {descriptionValidationMessage !== '' && (
+                        <div className="flex left">
                             <Error className="form__icon form__icon--error" />
                             <div className="form__error">{descriptionValidationMessage}</div>
                         </div>
@@ -444,19 +451,28 @@ export const ImageTagButton = ({
         >
             <div className="flex pt-2 pl-8 pr-8 pb-2">
                 {isHovered && isEditing && (isInSoftDeleteTags || (tagId !== 0 && !isSoftDeleted)) && (
-                    <IconComponent
-                        className={`icon-dim-12 mr-4 cursor ${isSoftDeleted ? 'scn-6' : 'fcn-6'}`}
-                        data-testid={`${text}-tag-soft-delete`}
-                        onClick={onSoftDeleteClick}
-                    />
+                    <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 && (
-                    <Close
-                        className="icon-dim-12 ml-4 fcn-6 cn-5 cursor"
-                        data-testid={`${text}-tag-hard-delete`}
-                        onClick={onHardDeleteClick}
-                    />
+                    <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}
+                        />
+                    </Tippy>
                 )}
             </div>
         </div>