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

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, tagsEditable, toggleCardMode, }: ImageTaggingContainerType) => JSX.Element;
+export declare const ImageTagsContainer: ({ ciPipelineId, artifactId, imageComment, imageReleaseTags, appReleaseTagNames, setAppReleaseTagNames, tagsEditable, setTagsEditable, toggleCardMode, }: ImageTaggingContainerType) => JSX.Element;
 export declare const ImageTagButton: ({ text, isSoftDeleted, isEditing, onSoftDeleteClick, onHardDeleteClick, tagId, softDeleteTags, isSuperAdmin, }: ImageButtonType) => JSX.Element;

package/dist/index.js

@@ -22763,7 +22763,7 @@ var SvgIcMinus = function SvgIcMinus(props) {
 };
 
 var ImageTagsContainer = function (_a) {
-    var ciPipelineId = _a.ciPipelineId, artifactId = _a.artifactId, imageComment = _a.imageComment, imageReleaseTags = _a.imageReleaseTags, appReleaseTagNames = _a.appReleaseTagNames, tagsEditable = _a.tagsEditable, 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;
     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];
@@ -22776,12 +22776,16 @@ var ImageTagsContainer = function (_a) {
     var _l = __read(React.useState([]), 2), softDeleteTags = _l[0], setSoftDeleteTags = _l[1];
     var _m = __read(React.useState([]), 2), hardDeleteTags = _m[0], setHardDeleteTags = _m[1];
     var _o = __read(React.useState(false), 2), isSuperAdmin = _o[0], setSuperAdmin = _o[1];
+    var _p = __read(React.useState(''), 2), descriptionValidationMessage = _p[0], setDescriptionValidationMessage = _p[1];
     React.useEffect(function () {
         initialise();
     }, []);
     React.useEffect(function () {
         reInitState();
-    }, [imageReleaseTags, imageComment, appReleaseTagNames, tagsEditable]);
+    }, [imageReleaseTags, imageComment, tagsEditable]);
+    React.useEffect(function () {
+        setExistingTags(appReleaseTagNames ? appReleaseTagNames : []);
+    }, [appReleaseTagNames]);
     function initialise() {
         var _a, _b;
         return __awaiter(this, void 0, void 0, function () {
@@ -22806,11 +22810,12 @@ var ImageTagsContainer = function (_a) {
         });
     }
     var reInitState = function () {
-        setInitialTags(imageReleaseTags ? imageReleaseTags : []);
-        setInitialDescription(imageComment ? imageComment.comment : '');
-        setExistingTags(appReleaseTagNames ? appReleaseTagNames : []);
-        setNewDescription(imageComment ? imageComment.comment : '');
-        setDisplayedTags(imageReleaseTags ? imageReleaseTags : []);
+        if (isEditing === false) {
+            setInitialTags(imageReleaseTags ? imageReleaseTags : []);
+            setInitialDescription(imageComment ? imageComment.comment : '');
+            setNewDescription(imageComment ? imageComment.comment : '');
+            setDisplayedTags(imageReleaseTags ? imageReleaseTags : []);
+        }
     };
     var CreatableComponents = React.useMemo(function () { return ({
         DropdownIndicator: function () { return null; },
@@ -22824,7 +22829,11 @@ var ImageTagsContainer = function (_a) {
         }
     };
     var handleDescriptionChange = function (e) {
-        setNewDescription(e.target.value);
+        var description = e.target.value;
+        (description === null || description === void 0 ? void 0 : description.length) > 500
+            ? setDescriptionValidationMessage('comment length cannot exceed 500 characters')
+            : setDescriptionValidationMessage('');
+        setNewDescription(description);
     };
     var handleCancel = function () {
         setDisplayedTags(initialTags);
@@ -22837,7 +22846,14 @@ var ImageTagsContainer = function (_a) {
         setTagErrorMessage('');
     };
     var handleTagCreate = function (newValue) {
-        var lowercaseValue = newValue.toLowerCase();
+        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 -');
+            return;
+        }
         setTagErrorMessage('');
         var isTagExistsInExistingTags = existingTags.includes(lowercaseValue);
         var isTagExistsInDisplayedTags = false;
@@ -22845,8 +22861,8 @@ var ImageTagsContainer = function (_a) {
             if (displayedTags[i].tagName.toLowerCase() === lowercaseValue)
                 isTagExistsInDisplayedTags = true;
         }
-        if (isTagExistsInExistingTags || isTagExistsInDisplayedTags) {
-            setTagErrorMessage('This tag is already applied on another image in this application');
+        if (isTagExistsInExistingTags || isTagExistsInDisplayedTags || lowercaseValue === 'latest') {
+            setTagErrorMessage('This tag is already being used in this application');
             return;
         }
         var newTag = {
@@ -22892,58 +22908,57 @@ var ImageTagsContainer = function (_a) {
         }
     };
     var handleSave = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var payload, response, tags, err_2;
-        var _a, _b, _c, _d, _e, _f;
-        return __generator(this, function (_g) {
-            switch (_g.label) {
-                case 0:
-                    payload = {
-                        createTags: createTags,
-                        softDeleteTags: softDeleteTags,
-                        imageComment: {
-                            id: 0,
-                            comment: newDescription.trim(),
-                            artifactId: 0,
-                        },
-                        hardDeleteTags: hardDeleteTags,
-                    };
-                    _g.label = 1;
-                case 1:
-                    _g.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, setImageTags(payload, ciPipelineId, artifactId)];
-                case 2:
-                    response = _g.sent();
-                    tags = (_b = (_a = response.result) === null || _a === void 0 ? void 0 : _a.imageReleaseTags) === null || _b === void 0 ? void 0 : _b.map(function (tag) { return ({
-                        id: tag.id,
-                        tagName: tag.tagName,
-                        deleted: tag.deleted,
-                        appId: 0,
-                        artifactId: 0,
-                    }); });
-                    setInitialTags(tags);
-                    setInitialDescription((_d = (_c = response.result) === null || _c === void 0 ? void 0 : _c.imageComment) === null || _d === void 0 ? void 0 : _d.comment);
-                    setDisplayedTags(tags);
-                    setNewDescription((_f = (_e = response.result) === null || _e === void 0 ? void 0 : _e.imageComment) === null || _f === void 0 ? void 0 : _f.comment);
-                    setCreateTags([]);
-                    setSoftDeleteTags([]);
-                    setHardDeleteTags([]);
-                    handleEditClick();
-                    setShowTagsWarning(false);
-                    setTagErrorMessage('');
-                    return [3 /*break*/, 4];
-                case 3:
-                    err_2 = _g.sent();
-                    showError(err_2);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
-            }
+        var payload;
+        return __generator(this, function (_a) {
+            payload = {
+                createTags: createTags,
+                softDeleteTags: softDeleteTags,
+                imageComment: {
+                    id: 0,
+                    comment: newDescription.trim(),
+                    artifactId: 0,
+                },
+                hardDeleteTags: hardDeleteTags,
+            };
+            // set loading state true
+            setImageTags(payload, ciPipelineId, artifactId)
+                .then(function (res) {
+                var _a, _b, _c, _d, _e, _f, _g, _h;
+                var tags = (_b = (_a = res.result) === null || _a === void 0 ? void 0 : _a.imageReleaseTags) === null || _b === void 0 ? void 0 : _b.map(function (tag) { return ({
+                    id: tag.id,
+                    tagName: tag.tagName,
+                    deleted: tag.deleted,
+                    appId: 0,
+                    artifactId: 0,
+                }); });
+                if (setAppReleaseTagNames) {
+                    setAppReleaseTagNames((_c = res.result) === null || _c === void 0 ? void 0 : _c.appReleaseTags);
+                }
+                if (setTagsEditable) {
+                    setTagsEditable((_d = res.result) === null || _d === void 0 ? void 0 : _d.tagsEditable);
+                }
+                setInitialTags(tags);
+                setInitialDescription((_f = (_e = res.result) === null || _e === void 0 ? void 0 : _e.imageComment) === null || _f === void 0 ? void 0 : _f.comment);
+                setDisplayedTags(tags);
+                setNewDescription((_h = (_g = res.result) === null || _g === void 0 ? void 0 : _g.imageComment) === null || _h === void 0 ? void 0 : _h.comment);
+                setCreateTags([]);
+                setSoftDeleteTags([]);
+                setHardDeleteTags([]);
+                handleEditClick();
+                setShowTagsWarning(false);
+                setTagErrorMessage('');
+            })
+                .catch(function (err) {
+                showError(err);
+            });
+            return [2 /*return*/];
         });
     }); };
     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) {
@@ -22955,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 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' } }) })), jsxRuntime.jsxs("div", __assign({ className: "w-100 flex right" }, { 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) {
@@ -22988,11 +23003,12 @@ 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;
-    var handleClick = function () {
+    var handleClick = function (e) {
+        stopPropagation(e);
         handleEditClick();
     };
     return (jsxRuntime.jsx("div", __assign({ className: "add-tag-button flex pt-12 pr-12", "data-testid": "add-tags-button", onClick: handleClick }, { children: jsxRuntime.jsxs("div", __assign({ className: "lh-16 flex" }, { children: [jsxRuntime.jsx(SvgIcAdd, { className: "icon-dim-16 cn-6" }), jsxRuntime.jsx("span", __assign({ className: "cn-7" }, { children: "Add tags/comment" }))] })) })));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.10-beta-7",
+    "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,
@@ -22,7 +23,9 @@ export const ImageTagsContainer = ({
     imageComment,
     imageReleaseTags,
     appReleaseTagNames,
+    setAppReleaseTagNames,
     tagsEditable,
+    setTagsEditable,
     toggleCardMode,
 }: ImageTaggingContainerType) => {
     const [initialTags, setInitialTags] = useState<ReleaseTag[]>(imageReleaseTags ? imageReleaseTags : [])
@@ -37,6 +40,7 @@ export const ImageTagsContainer = ({
     const [softDeleteTags, setSoftDeleteTags] = useState<ReleaseTag[]>([])
     const [hardDeleteTags, setHardDeleteTags] = useState<ReleaseTag[]>([])
     const [isSuperAdmin, setSuperAdmin] = useState<boolean>(false)
+    const [descriptionValidationMessage, setDescriptionValidationMessage] = useState<string>('')
 
     useEffect(() => {
         initialise()
@@ -44,7 +48,11 @@ export const ImageTagsContainer = ({
 
     useEffect(() => {
         reInitState()
-    }, [imageReleaseTags, imageComment, appReleaseTagNames, tagsEditable])
+    }, [imageReleaseTags, imageComment, tagsEditable])
+
+    useEffect(() => {
+        setExistingTags(appReleaseTagNames ? appReleaseTagNames : [])
+    }, [appReleaseTagNames])
 
     async function initialise() {
         try {
@@ -58,11 +66,12 @@ export const ImageTagsContainer = ({
     }
 
     const reInitState = () => {
-        setInitialTags(imageReleaseTags ? imageReleaseTags : [])
-        setInitialDescription(imageComment ? imageComment.comment : '')
-        setExistingTags(appReleaseTagNames ? appReleaseTagNames : [])
-        setNewDescription(imageComment ? imageComment.comment : '')
-        setDisplayedTags(imageReleaseTags ? imageReleaseTags : [])
+        if (isEditing === false) {
+            setInitialTags(imageReleaseTags ? imageReleaseTags : [])
+            setInitialDescription(imageComment ? imageComment.comment : '')
+            setNewDescription(imageComment ? imageComment.comment : '')
+            setDisplayedTags(imageReleaseTags ? imageReleaseTags : [])
+        }
     }
 
     const CreatableComponents = useMemo(
@@ -82,7 +91,11 @@ export const ImageTagsContainer = ({
     }
 
     const handleDescriptionChange = (e) => {
-        setNewDescription(e.target.value)
+        const description = e.target.value
+        description?.length > 500
+            ? setDescriptionValidationMessage('comment length cannot exceed 500 characters')
+            : setDescriptionValidationMessage('')
+        setNewDescription(description)
     }
 
     const handleCancel = () => {
@@ -97,15 +110,26 @@ export const ImageTagsContainer = ({
     }
 
     const handleTagCreate = (newValue) => {
-        const lowercaseValue = newValue.toLowerCase()
+        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 -')
+            return
+        }
         setTagErrorMessage('')
         const isTagExistsInExistingTags = existingTags.includes(lowercaseValue)
         let isTagExistsInDisplayedTags = false
         for (let i = 0; i < displayedTags?.length; i++) {
             if (displayedTags[i].tagName.toLowerCase() === lowercaseValue) isTagExistsInDisplayedTags = true
         }
-        if (isTagExistsInExistingTags || isTagExistsInDisplayedTags) {
-            setTagErrorMessage('This tag is already applied on another image in this application')
+        if (isTagExistsInExistingTags || isTagExistsInDisplayedTags || lowercaseValue === 'latest') {
+            setTagErrorMessage(
+                'This tag is already being used in this application',
+            )
             return
         }
         const newTag: ReleaseTag = {
@@ -167,40 +191,46 @@ export const ImageTagsContainer = ({
             hardDeleteTags: hardDeleteTags,
         }
 
-        try {
-            // set loading state true
-            let response = await setImageTags(payload, ciPipelineId, artifactId)
-            const tags = response.result?.imageReleaseTags?.map((tag) => ({
-                id: tag.id,
-                tagName: tag.tagName,
-                deleted: tag.deleted,
-                appId: 0,
-                artifactId: 0,
-            }))
-            setInitialTags(tags)
-            setInitialDescription(response.result?.imageComment?.comment)
-            setDisplayedTags(tags)
-            setNewDescription(response.result?.imageComment?.comment)
-            setCreateTags([])
-            setSoftDeleteTags([])
-            setHardDeleteTags([])
-            handleEditClick()
-            setShowTagsWarning(false)
-            setTagErrorMessage('')
-        } catch (err) {
-            showError(err)
-        }
+        // set loading state true
+        setImageTags(payload, ciPipelineId, artifactId)
+            .then((res) => {
+                const tags = res.result?.imageReleaseTags?.map((tag) => ({
+                    id: tag.id,
+                    tagName: tag.tagName,
+                    deleted: tag.deleted,
+                    appId: 0,
+                    artifactId: 0,
+                }))
+                if (setAppReleaseTagNames) {
+                    setAppReleaseTagNames(res.result?.appReleaseTags)
+                }
+                if (setTagsEditable) {
+                    setTagsEditable(res.result?.tagsEditable)
+                }
+                setInitialTags(tags)
+                setInitialDescription(res.result?.imageComment?.comment)
+                setDisplayedTags(tags)
+                setNewDescription(res.result?.imageComment?.comment)
+                setCreateTags([])
+                setSoftDeleteTags([])
+                setHardDeleteTags([])
+                handleEditClick()
+                setShowTagsWarning(false)
+                setTagErrorMessage('')
+            })
+            .catch((err) => {
+                showError(err)
+            })
     }
 
     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}
@@ -216,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.
@@ -296,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 mb-12"
-                        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}
@@ -307,7 +335,13 @@ export const ImageTagsContainer = ({
                             style={{ height: '90px !important' }}
                         />
                     </div>
-                    <div className="w-100 flex right">
+                    {descriptionValidationMessage !== '' && (
+                        <div className="flex left">
+                            <Error className="form__icon form__icon--error" />
+                            <div className="form__error">{descriptionValidationMessage}</div>
+                        </div>
+                    )}
+                    <div className="w-100 flex right mt-12">
                         <button
                             className="cta flex cancel h-32 lh-32-imp"
                             type="button"
@@ -417,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>
@@ -437,7 +480,8 @@ export const ImageTagButton = ({
 }
 
 const AddImageButton = ({ handleEditClick }) => {
-    const handleClick = () => {
+    const handleClick = (e) => {
+        stopPropagation(e)
         handleEditClick()
     }