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

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/Common/Types.d.ts

@@ -324,6 +324,8 @@ export interface ImageTaggingContainerType {
     imageReleaseTags?: ReleaseTag[];
     appReleaseTagNames?: string[];
     tagsEditable?: boolean;
+    setAppReleaseTagNames?: (appReleaseTags: string[]) => void;
+    setTagsEditable?: (tagsEditable: boolean) => void;
     toggleCardMode?: (id: number) => void;
 }
 export interface ImageButtonType {

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,9 @@ 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 +22844,11 @@ 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 +22856,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 ".concat(lowercaseValue, " is already applied on same/another image in this application"));
             return;
         }
         var newTag = {
@@ -22892,51 +22903,50 @@ 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 () {
@@ -22955,7 +22965,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", "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) {
@@ -22992,7 +23002,8 @@ var ImageTagButton = function (_a) {
 };
 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-6",
+    "version": "0.0.10-beta-8",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Common/ImageTags.tsx

@@ -22,7 +22,9 @@ export const ImageTagsContainer = ({
     imageComment,
     imageReleaseTags,
     appReleaseTagNames,
+    setAppReleaseTagNames,
     tagsEditable,
+    setTagsEditable,
     toggleCardMode,
 }: ImageTaggingContainerType) => {
     const [initialTags, setInitialTags] = useState<ReleaseTag[]>(imageReleaseTags ? imageReleaseTags : [])
@@ -37,6 +39,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 +47,11 @@ export const ImageTagsContainer = ({
 
     useEffect(() => {
         reInitState()
-    }, [imageReleaseTags, imageComment, appReleaseTagNames, tagsEditable])
+    }, [imageReleaseTags,imageComment,tagsEditable])
+
+    useEffect(() => {
+        setExistingTags(appReleaseTagNames ? appReleaseTagNames : [])
+    },[appReleaseTagNames])
 
     async function initialise() {
         try {
@@ -58,11 +65,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 +90,9 @@ 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 +107,19 @@ 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 ${lowercaseValue} is already applied on same/another image in this application`)
             return
         }
         const newTag: ReleaseTag = {
@@ -167,31 +181,39 @@ 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
@@ -297,7 +319,7 @@ export const ImageTagsContainer = ({
                     )}
                     <div className="cn-7 mt-12">Comment</div>
                     <div
-                        className="flex left flex-wrap dc__gap-8 w-100 mt-6 mb-12"
+                        className="flex left flex-wrap dc__gap-8 w-100 mt-6"
                         data-testid="add-image-comment-text-area"
                     >
                         <textarea
@@ -307,7 +329,12 @@ 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"
@@ -437,7 +464,8 @@ export const ImageTagButton = ({
 }
 
 const AddImageButton = ({ handleEditClick }) => {
-    const handleClick = () => {
+    const handleClick = (e) => {
+        stopPropagation(e)
         handleEditClick()
     }
 

package/src/Common/Types.ts

@@ -357,6 +357,8 @@ export interface ImageTaggingContainerType {
     imageReleaseTags?: ReleaseTag[]
     appReleaseTagNames?: string[]
     tagsEditable?: boolean
+    setAppReleaseTagNames?: (appReleaseTags: string[]) => void
+    setTagsEditable?: (tagsEditable: boolean) => void
     toggleCardMode?: (id: number) => void
 }