@devtron-labs/devtron-fe-common-lib 0.0.10-beta-1 → 0.0.10-beta-3

package/dist/Common/Common.service.d.ts

@@ -1,2 +1,11 @@
-import { TeamList } from './Types';
+import { TeamList, ResponseType } from './Types';
 export declare const getTeamListMin: () => Promise<TeamList>;
+interface UserRole extends ResponseType {
+    result?: {
+        roles: string[];
+        superAdmin: boolean;
+    };
+}
+export declare function getUserRole(appName?: string): Promise<UserRole>;
+export declare function setImageTags(request: any, pipelineId: number, artifactId: number): Promise<ResponseType>;
+export {};

package/dist/Common/Constants.d.ts

@@ -16,6 +16,8 @@ export declare const URLS: {
 };
 export declare const ROUTES: {
     PROJECT_LIST_MIN: string;
+    USER_CHECK_ROLE: string;
+    IMAGE_TAGGING: string;
 };
 export declare enum KEY_VALUE {
     KEY = "key",

package/dist/Common/ImageTags.d.ts

@@ -0,0 +1,3 @@
+import { ImageButtonType, ImageTaggingContainerType } from './Types';
+export declare const ImageTagsContainer: ({ ciPipelineId, artifactId, imageComment, imageReleaseTags, appReleaseTagNames, tagsEditable, 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

@@ -212,6 +212,7 @@ export interface CDMaterialType {
     triggeredBy?: number;
     imageComment?: ImageComment;
     imageReleaseTags?: ReleaseTag[];
+    artifactStatus?: string;
 }
 export interface CommonNodeAttr {
     connectingCiPipelineId?: number;
@@ -316,4 +317,23 @@ export interface ImageComment {
     comment: string;
     artifactId: number;
 }
+export interface ImageTaggingContainerType {
+    ciPipelineId?: number;
+    artifactId?: number;
+    imageComment?: ImageComment;
+    imageReleaseTags?: ReleaseTag[];
+    appReleaseTagNames?: string[];
+    tagsEditable?: boolean;
+    toggleCardMode?: (id: number) => void;
+}
+export interface ImageButtonType {
+    text: string;
+    isSoftDeleted: boolean;
+    isEditing: boolean;
+    onSoftDeleteClick?: any;
+    onHardDeleteClick?: any;
+    tagId: number;
+    softDeleteTags: any;
+    isSuperAdmin: any;
+}
 export {};

package/dist/index.js

@@ -42,6 +42,8 @@ var URLS = {
 };
 var ROUTES = {
     PROJECT_LIST_MIN: 'team/autocomplete',
+    USER_CHECK_ROLE: 'user/check/roles',
+    IMAGE_TAGGING: 'app/image-tagging',
 };
 exports.KEY_VALUE = void 0;
 (function (KEY_VALUE) {
@@ -22350,7 +22352,13 @@ var getTeamListMin = function () {
             result: list,
         };
     });
-};
+};
+function getUserRole(appName) {
+    return get("".concat(ROUTES.USER_CHECK_ROLE).concat(appName ? "?appName=".concat(appName) : ''));
+}
+function setImageTags(request, pipelineId, artifactId) {
+    return post("".concat(ROUTES.IMAGE_TAGGING, "/").concat(pipelineId, "/").concat(artifactId), request);
+}
 
 /*
 Valid States of Checkbox:
@@ -22639,12 +22647,14 @@ exports.getEmptyArrayOfLength = getEmptyArrayOfLength;
 exports.getLoginInfo = getLoginInfo;
 exports.getRandomColor = getRandomColor;
 exports.getTeamListMin = getTeamListMin;
+exports.getUserRole = getUserRole;
 exports.handleUTCTime = handleUTCTime;
 exports.multiSelectStyles = multiSelectStyles;
 exports.noop = noop$1;
 exports.not = not;
 exports.post = post;
 exports.put = put;
+exports.setImageTags = setImageTags;
 exports.showError = showError;
 exports.sortCallback = sortCallback;
 exports.stopPropagation = stopPropagation;

package/package.json

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

package/src/Assets/Icon/ic-arrow-counter-clockwise.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.74216 4.67419H1.49216V2.42419" fill="#767D84"/>
+    <path d="M3.74216 4.67419H1.49216V2.42419" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M3.08318 8.91682C3.66007 9.49371 4.39507 9.88658 5.19525 10.0457C5.99542 10.2049 6.82482 10.1232 7.57856 9.811C8.33231 9.49879 8.97654 8.97008 9.42981 8.29173C9.88307 7.61338 10.125 6.81585 10.125 6C10.125 5.18415 9.88307 4.38663 9.42981 3.70827C8.97654 3.02992 8.33231 2.50121 7.57856 2.189C6.82482 1.87679 5.99542 1.7951 5.19525 1.95426C4.39507 2.11343 3.66007 2.50629 3.08318 3.08319L1.49219 4.67418" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/Assets/Icon/ic-minus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+    <path fill="#959BA1" class="fill-color" fill-rule="evenodd" d="M10.5 7.583h-7c-.322 0-.583-.26-.583-.583 0-.322.26-.583.583-.583h7c.322 0 .583.26.583.583 0 .322-.26.583-.583.583z"/>
+</svg>

package/src/Assets/Icon/ic-pencil.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.625 4.99991L15 9.37491M7.5 16.8749H3.75C3.58424 16.8749 3.42527 16.8091 3.30806 16.6918C3.19085 16.5746 3.125 16.4157 3.125 16.2499V12.7588C3.125 12.6767 3.14117 12.5954 3.17258 12.5196C3.20398 12.4438 3.25002 12.3749 3.30806 12.3168L12.6831 2.94185C12.8003 2.82464 12.9592 2.75879 13.125 2.75879C13.2908 2.75879 13.4497 2.82464 13.5669 2.94185L17.0581 6.43296C17.1753 6.55017 17.2411 6.70915 17.2411 6.87491C17.2411 7.04067 17.1753 7.19964 17.0581 7.31685L7.5 16.8749Z" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/Common/Common.service.ts

@@ -1,7 +1,7 @@
-import { get } from './Api';
+import {get, post} from './Api';
 import { ROUTES } from './Constants'
 import { sortCallback } from './Helper';
-import { TeamList } from './Types';
+import { TeamList ,ResponseType } from './Types';
 
 export const getTeamListMin = (): Promise<TeamList> => {
   // ignore active field
@@ -20,4 +20,19 @@ export const getTeamListMin = (): Promise<TeamList> => {
           result: list,
       };
   });
-};
+};
+
+interface UserRole extends ResponseType {
+    result?: {
+        roles: string[]
+        superAdmin: boolean
+    }
+}
+
+export function getUserRole(appName?: string): Promise<UserRole> {
+    return get(`${ROUTES.USER_CHECK_ROLE}${appName ? `?appName=${appName}` : ''}`)
+}
+
+export function setImageTags(request, pipelineId: number, artifactId: number){
+    return post(`${ROUTES.IMAGE_TAGGING}/${pipelineId}/${artifactId}`,request )
+}

package/src/Common/Constants.ts

@@ -20,6 +20,8 @@ export const URLS = {
 
 export const ROUTES = {
     PROJECT_LIST_MIN: 'team/autocomplete',
+    USER_CHECK_ROLE: 'user/check/roles',
+    IMAGE_TAGGING:'app/image-tagging',
 }
 
 export enum KEY_VALUE {

package/src/Common/ImageTags.tsx

@@ -0,0 +1,452 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { ReactComponent as Add } from '../Assets/Icon/ic-add.svg'
+import Creatable from 'react-select/creatable'
+import { ReactComponent as Close } from '../Assets/Icon/ic-cross.svg'
+import { ReactComponent as QuestionFilled } from '../Assets/Icon/ic-help.svg'
+import { ReactComponent as Question } from '../Assets/Icon/ic-help-outline.svg'
+
+import { ReactComponent as EditIcon } from '../Assets/icon/ic-pencil.svg'
+import { ReactComponent as Redo } from '../Assets/Icon/ic-arrow-counter-clockwise.svg'
+import { ReactComponent as Minus } from '../Assets/Icon/ic-minus.svg'
+
+import { ReactComponent as Info } from '../Assets/Icon/ic-info-filled.svg'
+import { ReactComponent as Error } from '../Assets/Icon/ic-warning.svg'
+import { ImageButtonType, ImageTaggingContainerType, ReleaseTag, TippyTheme } from './Types'
+import { showError, stopPropagation } from './Helper'
+import { TippyCustomized } from './TippyCustomized'
+import { setImageTags, getUserRole } from './Common.service'
+
+export const ImageTagsContainer = ({
+    ciPipelineId,
+    artifactId,
+    imageComment,
+    imageReleaseTags,
+    appReleaseTagNames,
+    tagsEditable,
+    toggleCardMode,
+}: ImageTaggingContainerType) => {
+    const [initialTags, setInitialTags] = useState<ReleaseTag[]>(imageReleaseTags ? imageReleaseTags : [])
+    const [initialDescription, setInitialDescription] = useState(imageComment ? imageComment.comment : '')
+    const [existingTags, setExistingTags] = useState(appReleaseTagNames ? appReleaseTagNames : [])
+    const [newDescription, setNewDescription] = useState(imageComment ? imageComment.comment : '')
+    const [isEditing, setIsEditing] = useState(false)
+    const [showTagsWarning, setShowTagsWarning] = useState(false)
+    const [displayedTags, setDisplayedTags] = useState<ReleaseTag[]>(imageReleaseTags ? imageReleaseTags : [])
+    const [tagErrorMessage, setTagErrorMessage] = useState('')
+    const [createTags, setCreateTags] = useState<ReleaseTag[]>([])
+    const [softDeleteTags, setSoftDeleteTags] = useState<ReleaseTag[]>([])
+    const [hardDeleteTags, setHardDeleteTags] = useState<ReleaseTag[]>([])
+    const [isSuperAdmin, setSuperAdmin] = useState<boolean>(false)
+
+    useEffect(() => {
+        initialise()
+    }, [])
+
+    useEffect(() => {
+        reInitState()
+    }, [imageReleaseTags, imageComment, appReleaseTagNames, tagsEditable])
+
+    async function initialise() {
+        try {
+            const userRole = await getUserRole()
+
+            const superAdmin = userRole?.result?.roles?.includes('role:super-admin___')
+            setSuperAdmin(superAdmin)
+        } catch (err) {
+            showError(err)
+        }
+    }
+
+    const reInitState = () => {
+        setInitialTags(imageReleaseTags ? imageReleaseTags : [])
+        setInitialDescription(imageComment ? imageComment.comment : '')
+        setExistingTags(appReleaseTagNames ? appReleaseTagNames : [])
+        setNewDescription(imageComment ? imageComment.comment : '')
+        setDisplayedTags(imageReleaseTags ? imageReleaseTags : [])
+    }
+
+    const CreatableComponents = useMemo(
+        () => ({
+            DropdownIndicator: () => null,
+            IndicatorSeparator: () => null,
+            Menu: () => null,
+        }),
+        [],
+    )
+
+    const handleEditClick = () => {
+        setIsEditing(!isEditing)
+        if (typeof toggleCardMode === 'function') {
+            toggleCardMode(artifactId)
+        }
+    }
+
+    const handleDescriptionChange = (e) => {
+        setNewDescription(e.target.value)
+    }
+
+    const handleCancel = () => {
+        setDisplayedTags(initialTags)
+        setNewDescription(initialDescription)
+        setCreateTags([])
+        setSoftDeleteTags([])
+        setHardDeleteTags([])
+        handleEditClick()
+        setShowTagsWarning(false)
+        setTagErrorMessage('')
+    }
+
+    const handleTagCreate = (newValue) => {
+        const lowercaseValue = newValue.toLowerCase()
+        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')
+            return
+        }
+        const newTag: ReleaseTag = {
+            id: 0,
+            tagName: lowercaseValue,
+            appId: 0,
+            deleted: false,
+            artifactId: 0,
+        }
+        setCreateTags([...createTags, newTag])
+        setDisplayedTags([...displayedTags, newTag])
+        setShowTagsWarning(true)
+    }
+
+    const handleTagSoftDelete = (index) => {
+        const updatedTags = [...displayedTags]
+        updatedTags[index] = {
+            ...updatedTags[index],
+            deleted: !updatedTags[index].deleted,
+        }
+        const updatedTag = updatedTags[index]
+        let updatedSoftDeleteTags = [...softDeleteTags]
+        const tagIndex = updatedSoftDeleteTags.findIndex((tag) => tag.tagName === updatedTag.tagName)
+        if (tagIndex !== -1) {
+            // Tag already exists in softDeleteTags array, remove it
+            updatedSoftDeleteTags.splice(tagIndex, 1)
+        } else {
+            // Tag doesn't exist in softDeleteTags array, add it
+            updatedSoftDeleteTags.push(updatedTag)
+        }
+        setDisplayedTags(updatedTags)
+        setSoftDeleteTags(updatedSoftDeleteTags)
+    }
+
+    const handleTagHardDelete = (index) => {
+        const deletedTag = displayedTags[index]
+        const updatedCreateTags = createTags.filter((tag) => tag.tagName !== deletedTag.tagName)
+        setCreateTags(updatedCreateTags)
+        const updatedDisplayedTags = [...displayedTags]
+        updatedDisplayedTags.splice(index, 1)
+        setDisplayedTags(updatedDisplayedTags)
+        const updatedExistingTags = existingTags.filter((tag) => tag.toLowerCase() !== deletedTag.tagName.toLowerCase())
+        setExistingTags(updatedExistingTags)
+        if (deletedTag.id !== 0) {
+            const updatedHardDeleteTags = [...hardDeleteTags, deletedTag]
+            setHardDeleteTags(updatedHardDeleteTags)
+        }
+    }
+
+    const handleSave = async () => {
+        const payload = {
+            createTags: createTags,
+            softDeleteTags: softDeleteTags,
+            imageComment: {
+                id: 0,
+                comment: newDescription.trim(),
+                artifactId: 0,
+            },
+            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)
+        }
+    }
+
+    const renderInfoCard = (): JSX.Element => {
+        return (
+            <TippyCustomized
+                theme={TippyTheme.white}
+                className="w-300 h-250 fcv-5 dc__overflow-scroll"
+                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}
+                documentationLinkText="View Documentation"
+                additionalContent={getBuildContextAdditionalContent()}
+            >
+                <div className="icon-dim-16 fcn-5 ml-8 cursor">
+                    <Question />
+                </div>
+            </TippyCustomized>
+        )
+    }
+
+    const getBuildContextAdditionalContent = () => {
+        return (
+            <div className="p-12 fs-13">
+                <ul>
+                    <li>
+                        A release tag can only be added if a workflow has CD pipelines deploying to Production
+                        environments.
+                    </li>
+                    <li>Multiple tags can be added to an image.</li>
+                    <li>Multiple images in an application cannot have the same tag.</li>
+                    <li>
+                        Tags cannot be deleted once saved. Although, you can soft delete a tag if an unwanted tag has
+                        been added.
+                    </li>
+                </ul>
+            </div>
+        )
+    }
+
+    const creatableRef = useRef(null)
+
+    if (newDescription === '' && displayedTags.length === 0 && !isEditing) {
+        return tagsEditable ? (
+            <div className="bcn-0 mt-8">
+                <AddImageButton handleEditClick={handleEditClick} />
+            </div>
+        ) : (
+            <div></div>
+        )
+    }
+
+    return (
+        <div className="mt-8">
+            {isEditing && tagsEditable ? (
+                <div className="bcn-0 dc__border-top-n1 ">
+                    <div className="cn-7 mt-12 flex left">
+                        <span>Release tags (eg. v1.0)</span>
+                        <div className="flex row ml-0">{renderInfoCard()}</div>
+                    </div>
+                    <div className="mt-6" data-testid="add-tag-text-area">
+                        <Creatable
+                            placeholder="Type a tag and press enter"
+                            onCreateOption={handleTagCreate}
+                            ref={creatableRef}
+                            components={CreatableComponents}
+                        />
+                    </div>
+
+                    {tagErrorMessage && (
+                        <div className="flex left">
+                            <Error className="form__icon form__icon--error" />
+                            <div className="form__error">{tagErrorMessage}</div>
+                        </div>
+                    )}
+                    <div className="flex-wrap mt-8 flex left">
+                        {displayedTags?.map((tag, index) => (
+                            <ImageTagButton
+                                key={tag.id}
+                                text={tag?.tagName}
+                                isSoftDeleted={tag?.deleted}
+                                isEditing={isEditing}
+                                onSoftDeleteClick={(e) => {
+                                    stopPropagation(e)
+                                    handleTagSoftDelete(index)
+                                }}
+                                onHardDeleteClick={(e) => {
+                                    stopPropagation(e)
+                                    handleTagHardDelete(index)
+                                }}
+                                tagId={tag.id}
+                                softDeleteTags={softDeleteTags}
+                                isSuperAdmin={isSuperAdmin}
+                            />
+                        ))}
+                    </div>
+                    {showTagsWarning && (
+                        <div className="cn-7 mb-8 flex left">
+                            <Info className="form__icon--info icon-dim-16 mr-2" />
+                            Tags cannot be edited/removed later
+                        </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"
+                    >
+                        <textarea
+                            value={newDescription}
+                            onChange={handleDescriptionChange}
+                            className="flex left flex-wrap dc__gap-8 dc__description-textarea"
+                            style={{ height: '90px !important' }}
+                        />
+                    </div>
+                    <div className="w-100 flex right">
+                        <button
+                            className="cta flex cancel h-32 lh-32-imp"
+                            type="button"
+                            onClick={(e) => {
+                                stopPropagation(e)
+                                handleCancel()
+                            }}
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            className="cta flex h-32 lh-32-imp ml-12"
+                            data-testid="save-tags-button"
+                            type="button"
+                            onClick={(e) => {
+                                stopPropagation(e)
+                                handleSave()
+                            }}
+                        >
+                            Save
+                        </button>
+                    </div>
+                </div>
+            ) : (
+                <div className="top br-4 bcn-0 image-tags-container flexbox">
+                    <div
+                        className="flex left image-tag-left-border w-100 mt-8 mb-8 pr-10 pl-10"
+                        data-testid="image-tags-container-hover"
+                    >
+                        <div>
+                            {initialDescription && <div className="mb-6 fs-13">{initialDescription}</div>}
+                            <div className="flex-wrap flex left">
+                                {initialTags?.map((tag, index) => (
+                                    <ImageTagButton
+                                        key={tag?.id}
+                                        text={tag?.tagName}
+                                        isSoftDeleted={tag?.deleted}
+                                        isEditing={isEditing}
+                                        onSoftDeleteClick={(e) => {
+                                            stopPropagation(e)
+                                            handleTagSoftDelete(index)
+                                        }}
+                                        onHardDeleteClick={(e) => {
+                                            stopPropagation(e)
+                                            handleTagHardDelete(index)
+                                        }}
+                                        tagId={tag.id}
+                                        softDeleteTags={softDeleteTags}
+                                        isSuperAdmin={isSuperAdmin}
+                                    />
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                    <div className="mt-8 mr-6 icon-dim-16">
+                        {tagsEditable && (
+                            <EditIcon
+                                className="icon-dim-16 image-tags-container-edit__icon cursor"
+                                data-testid="edit-tags-icon"
+                                onClick={(e) => {
+                                    stopPropagation(e)
+                                    handleEditClick()
+                                }}
+                            />
+                        )}
+                    </div>
+                </div>
+            )}
+        </div>
+    )
+}
+
+export const ImageTagButton = ({
+    text,
+    isSoftDeleted,
+    isEditing,
+    onSoftDeleteClick,
+    onHardDeleteClick,
+    tagId,
+    softDeleteTags,
+    isSuperAdmin,
+}: 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
+
+    return (
+        <div
+            className={`br-4 en-2 bw-1 dc__w-fit-content dc__word-wrap-anywhere mr-8 bcn-0 flex h-24 ${
+                isSoftDeleted ? 'cy-7 bcy-1 dc__strike-through ey-2' : ''
+            }`}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+        >
+            <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}
+                    />
+                )}
+                {text}
+                {isHovered && isEditing && canTagBeHardDelete && (
+                    <Close
+                        className="icon-dim-12 ml-4 fcn-6 cn-5 cursor"
+                        data-testid={`${text}-tag-hard-delete`}
+                        onClick={onHardDeleteClick}
+                    />
+                )}
+            </div>
+        </div>
+    )
+}
+
+const AddImageButton = ({ handleEditClick }) => {
+    const handleClick = () => {
+        handleEditClick()
+    }
+
+    return (
+        <div className="add-tag-button flex pt-12 pr-12" data-testid="add-tags-button" onClick={handleClick}>
+            <div className="lh-16 flex">
+                <Add className="icon-dim-16 cn-6" />
+                <span className="cn-7">Add tags/comment</span>
+            </div>
+        </div>
+    )
+}

package/src/Common/Types.ts

@@ -236,6 +236,7 @@ export interface CDMaterialType {
     triggeredBy?: number
     imageComment?: ImageComment
     imageReleaseTags?: ReleaseTag[]
+    artifactStatus?: string
 }
 
 export interface CommonNodeAttr {
@@ -349,4 +350,25 @@ export interface ImageComment {
 }
 
 
+export interface ImageTaggingContainerType {
+    ciPipelineId?: number
+    artifactId?: number
+    imageComment?: ImageComment
+    imageReleaseTags?: ReleaseTag[]
+    appReleaseTagNames?: string[]
+    tagsEditable?: boolean
+    toggleCardMode?: (id: number) => void
+}
+
+export interface ImageButtonType {
+    text: string
+    isSoftDeleted: boolean
+    isEditing: boolean
+    onSoftDeleteClick?: any
+    onHardDeleteClick?: any
+    tagId: number
+    softDeleteTags: any
+    isSuperAdmin: any
+}
+