@devtron-labs/devtron-fe-common-lib 0.0.10-beta-15 → 0.0.10-beta-17

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

package/dist/Common/Types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, CSSProperties } from 'react';
+import React, { ReactNode, CSSProperties } from 'react';
 import { Placement } from 'tippy.js';
 export interface ResponseType {
     code: number;
@@ -323,6 +323,7 @@ export interface ImageTaggingContainerType {
     artifactId?: number;
     imageComment?: ImageComment;
     imageReleaseTags?: ReleaseTag[];
+    updateCurrentAppMaterial?: (matId: number, releaseTags?: ReleaseTag[], imageComment?: ImageComment) => void;
     appReleaseTagNames?: string[];
     tagsEditable?: boolean;
     forceReInit?: boolean;
@@ -341,5 +342,6 @@ export interface ImageButtonType {
     softDeleteTags: any;
     isSuperAdmin: any;
     duplicateTag?: boolean;
+    hideHardDelete?: boolean;
 }
 export {};

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; _a.hideHardDelete; var forceReInit = _a.forceReInit;
+    var ciPipelineId = _a.ciPipelineId, artifactId = _a.artifactId, imageComment = _a.imageComment, imageReleaseTags = _a.imageReleaseTags, updateCurrentAppMaterial = _a.updateCurrentAppMaterial, appReleaseTagNames = _a.appReleaseTagNames, setAppReleaseTagNames = _a.setAppReleaseTagNames, tagsEditable = _a.tagsEditable, setTagsEditable = _a.setTagsEditable, toggleCardMode = _a.toggleCardMode, hideHardDelete = _a.hideHardDelete, forceReInit = _a.forceReInit;
     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];
@@ -22782,8 +22782,7 @@ var ImageTagsContainer = function (_a) {
         setShowTagsWarning(false);
         setTagErrorMessage('');
     };
-    var handleTagCreate = function (newValue) {
-        var lowercaseValue = newValue.toLowerCase().trim();
+    var validateTag = function (lowercaseValue) {
         if (lowercaseValue.length == 0 ||
             lowercaseValue.length >= 128 ||
             lowercaseValue[0] == '.' ||
@@ -22802,6 +22801,10 @@ var ImageTagsContainer = function (_a) {
             setTagErrorMessage('This tag is already being used in this application');
             return;
         }
+    };
+    var handleTagCreate = function (newValue) {
+        var lowercaseValue = newValue.toLowerCase().trim();
+        validateTag(lowercaseValue);
         var newTag = {
             id: 0,
             tagName: lowercaseValue,
@@ -22885,7 +22888,7 @@ var ImageTagsContainer = function (_a) {
             // set loading state true
             setImageTags(payload, ciPipelineId, artifactId)
                 .then(function (res) {
-                var _a, _b, _c, _d, _e, _f, _g, _h;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
                 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,
@@ -22909,6 +22912,8 @@ var ImageTagsContainer = function (_a) {
                 handleEditClick();
                 setShowTagsWarning(false);
                 setTagErrorMessage('');
+                if (updateCurrentAppMaterial)
+                    updateCurrentAppMaterial(artifactId, tags, (_j = res.result) === null || _j === void 0 ? void 0 : _j.imageComment);
             })
                 .catch(function (err) {
                 var _a, _b, _c, _d, _e, _f, _g;
@@ -22943,6 +22948,7 @@ var ImageTagsContainer = function (_a) {
         }
     };
     var setInputValue = function (e) {
+        e.target.value && validateTag(e.target.value);
         setTextInput(e.target.value);
     };
     var enterTagCreate = function (e) {
@@ -22968,7 +22974,7 @@ var ImageTagsContainer = function (_a) {
                         }, onHardDeleteClick: function (e) {
                             stopPropagation(e);
                             handleTagHardDelete(index);
-                        }, tagId: tag.id, softDeleteTags: softDeleteTags, isSuperAdmin: isSuperAdmin, duplicateTag: tag === null || tag === void 0 ? void 0 : tag.duplicateTag }, 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) {
+                        }, tagId: tag.id, softDeleteTags: softDeleteTags, isSuperAdmin: isSuperAdmin, duplicateTag: tag === null || tag === void 0 ? void 0 : tag.duplicateTag, hideHardDelete: hideHardDelete }, 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) {
@@ -22980,16 +22986,16 @@ var ImageTagsContainer = function (_a) {
                                     }, onHardDeleteClick: function (e) {
                                         stopPropagation(e);
                                         handleTagHardDelete(index);
-                                    }, tagId: tag.id, softDeleteTags: softDeleteTags, isSuperAdmin: isSuperAdmin, duplicateTag: tag === null || tag === void 0 ? void 0 : tag.duplicateTag }, tag === null || tag === void 0 ? void 0 : tag.id)); }) }))] }) })), jsxRuntime.jsx("div", __assign({ className: "mt-8 mr-6 icon-dim-16" }, { children: tagsEditable && (jsxRuntime.jsx(SvgIcPencil, { className: "icon-dim-16 image-tags-container-edit__icon cursor", "data-testid": "edit-tags-icon", onClick: function (e) {
+                                    }, tagId: tag.id, softDeleteTags: softDeleteTags, isSuperAdmin: isSuperAdmin, duplicateTag: tag === null || tag === void 0 ? void 0 : tag.duplicateTag, hideHardDelete: hideHardDelete }, tag === null || tag === void 0 ? void 0 : tag.id)); }) }))] }) })), jsxRuntime.jsx("div", __assign({ className: "mt-8 mr-6 icon-dim-16" }, { children: tagsEditable && (jsxRuntime.jsx(SvgIcPencil, { className: "icon-dim-16 image-tags-container-edit__icon cursor", "data-testid": "edit-tags-icon", onClick: function (e) {
                             stopPropagation(e);
                             handleEditClick();
                         } })) }))] }))) })));
 };
 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 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, hideHardDelete = _a.hideHardDelete;
     var IconComponent = isSoftDeleted ? SvgIcArrowCounterClockwise : SvgIcMinus;
     var isInSoftDeleteTags = isSoftDeleted && softDeleteTags.some(function (tag) { return tag.tagName === text; });
-    var canTagBeHardDelete = tagId === 0 || isSuperAdmin;
+    var canTagBeHardDelete = tagId === 0 || (isSuperAdmin && !hideHardDelete);
     var tabColor = function () {
         if (duplicateTag) {
             return 'cr-5 bcr-1 er-2';

package/package.json

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

package/src/Common/ImageTags.tsx

@@ -24,13 +24,14 @@ export const ImageTagsContainer = ({
     artifactId,
     imageComment,
     imageReleaseTags,
+    updateCurrentAppMaterial,
     appReleaseTagNames,
     setAppReleaseTagNames,
     tagsEditable,
     setTagsEditable,
     toggleCardMode,
     hideHardDelete,
-    forceReInit
+    forceReInit,
 }: ImageTaggingContainerType) => {
     const [initialTags, setInitialTags] = useState<ReleaseTag[]>(imageReleaseTags ? imageReleaseTags : [])
     const [initialDescription, setInitialDescription] = useState(imageComment ? imageComment.comment : '')
@@ -114,8 +115,7 @@ export const ImageTagsContainer = ({
         setTagErrorMessage('')
     }
 
-    const handleTagCreate = (newValue) => {
-        const lowercaseValue = newValue.toLowerCase().trim()
+    const validateTag = (lowercaseValue) => {
         if (
             lowercaseValue.length == 0 ||
             lowercaseValue.length >= 128 ||
@@ -135,6 +135,11 @@ export const ImageTagsContainer = ({
             setTagErrorMessage('This tag is already being used in this application')
             return
         }
+    }
+
+    const handleTagCreate = (newValue) => {
+        const lowercaseValue = newValue.toLowerCase().trim()
+        validateTag(lowercaseValue)
         const newTag: ReleaseTag = {
             id: 0,
             tagName: lowercaseValue,
@@ -249,6 +254,7 @@ export const ImageTagsContainer = ({
                 handleEditClick()
                 setShowTagsWarning(false)
                 setTagErrorMessage('')
+                if(updateCurrentAppMaterial)updateCurrentAppMaterial(artifactId,tags,res.result?.imageComment)
             })
             .catch((err) => {
                 // Fix toast message
@@ -330,6 +336,7 @@ export const ImageTagsContainer = ({
     }
 
     const setInputValue = (e) => {
+        e.target.value && validateTag(e.target.value)
         setTextInput(e.target.value)
     }
 
@@ -406,6 +413,7 @@ export const ImageTagsContainer = ({
                                 softDeleteTags={softDeleteTags}
                                 isSuperAdmin={isSuperAdmin}
                                 duplicateTag={tag?.duplicateTag}
+                                hideHardDelete={hideHardDelete}
                             />
                         ))}
                     </div>
@@ -484,6 +492,7 @@ export const ImageTagsContainer = ({
                                         softDeleteTags={softDeleteTags}
                                         isSuperAdmin={isSuperAdmin}
                                         duplicateTag={tag?.duplicateTag}
+                                        hideHardDelete={hideHardDelete}
                                     />
                                 ))}
                             </div>
@@ -517,10 +526,11 @@ export const ImageTagButton = ({
     softDeleteTags,
     isSuperAdmin,
     duplicateTag,
+    hideHardDelete,
 }: ImageButtonType) => {
     const IconComponent = isSoftDeleted ? Redo : Minus
     const isInSoftDeleteTags = isSoftDeleted && softDeleteTags.some((tag) => tag.tagName === text)
-    const canTagBeHardDelete = tagId === 0 || isSuperAdmin
+    const canTagBeHardDelete = tagId === 0 || (isSuperAdmin && !hideHardDelete)
 
     const tabColor = () => {
         if (duplicateTag) {

package/src/Common/Types.ts

@@ -1,4 +1,4 @@
-import { ReactNode, CSSProperties } from 'react'
+import React, { ReactNode, CSSProperties } from 'react'
 import { Placement } from 'tippy.js'
 export interface ResponseType {
     code: number
@@ -356,6 +356,7 @@ export interface ImageTaggingContainerType {
     artifactId?: number
     imageComment?: ImageComment
     imageReleaseTags?: ReleaseTag[]
+    updateCurrentAppMaterial? : (matId:number, releaseTags?:ReleaseTag[], imageComment?:ImageComment) => void
     appReleaseTagNames?: string[]
     tagsEditable?: boolean
     forceReInit?: boolean
@@ -375,6 +376,7 @@ export interface ImageButtonType {
     softDeleteTags: any
     isSuperAdmin: any
     duplicateTag?: boolean
+    hideHardDelete?: boolean
 }