@devtron-labs/devtron-fe-common-lib 0.0.10-beta-21 → 0.0.10-beta-22

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.10-beta-21",
+    "version": "0.0.10-beta-22",
     "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-enter.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 4C12.4899 4 12.3203 4.07024 12.1953 4.19526C12.0703 4.32029 12.0001 4.48986 12.0001 4.66667V7.33333C12.0001 7.51014 11.9298 7.67971 11.8048 7.80474C11.6798 7.92976 11.5102 8 11.3334 8H4.94005L5.80672 7.14C5.93226 7.01446 6.00278 6.8442 6.00278 6.66667C6.00278 6.48913 5.93226 6.31887 5.80672 6.19333C5.68118 6.0678 5.51092 5.99727 5.33339 5.99727C5.15585 5.99727 4.98559 6.0678 4.86005 6.19333L2.86005 8.19333C2.79936 8.25674 2.75178 8.3315 2.72005 8.41333C2.65337 8.57564 2.65337 8.75769 2.72005 8.92C2.75178 9.00183 2.79936 9.0766 2.86005 9.14L4.86005 11.14C4.92203 11.2025 4.99576 11.2521 5.077 11.2859C5.15824 11.3198 5.24538 11.3372 5.33339 11.3372C5.42139 11.3372 5.50853 11.3198 5.58977 11.2859C5.67101 11.2521 5.74474 11.2025 5.80672 11.14C5.86921 11.078 5.9188 11.0043 5.95265 10.9231C5.98649 10.8418 6.00392 10.7547 6.00392 10.6667C6.00392 10.5787 5.98649 10.4915 5.95265 10.4103C5.9188 10.329 5.86921 10.2553 5.80672 10.1933L4.94005 9.33333H11.3334C11.8638 9.33333 12.3725 9.12262 12.7476 8.74755C13.1227 8.37247 13.3334 7.86377 13.3334 7.33333V4.66667C13.3334 4.48986 13.2631 4.32029 13.1381 4.19526C13.0131 4.07024 12.8435 4 12.6667 4Z" fill="#3B444C"/>
+</svg>

package/src/Assets/Icon/ic-error-exclamation.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#FFF" d="M5 5H15V15H5z"/>
+        <path fill="#F33E3E" d="M10 18.333c-4.6 0-8.333-3.733-8.333-8.333S5.4 1.667 10 1.667 18.333 5.4 18.333 10 14.6 18.333 10 18.333zm0-12.5c-.46 0-.833.373-.833.834V10c0 .46.373.833.833.833.46 0 .833-.373.833-.833V6.667c0-.46-.373-.834-.833-.834zm0 6.667c-.46 0-.833.373-.833.833 0 .46.373.834.833.834.46 0 .833-.373.833-.834 0-.46-.373-.833-.833-.833z"/>
+    </g>
+</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,594 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { ReactComponent as Add } from '../Assets/Icon/ic-add.svg'
+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 { toast } from 'react-toastify'
+import { ReactComponent as Info } from '../Assets/Icon/ic-info-filled.svg'
+import { ReactComponent as Error } from '../Assets/Icon/ic-warning.svg'
+import { ReactComponent as Warning } from '../Assets/Icon/ic-error-exclamation.svg'
+import { ReactComponent as Enter } from '../Assets/Icon/ic-enter.svg'
+import { ImageButtonType, ImageTaggingContainerType, ReleaseTag, TippyTheme } from './Types'
+import { showError, stopPropagation } from './Helper'
+import { TippyCustomized } from './TippyCustomized'
+import { setImageTags, getUserRole } from './Common.service'
+import Tippy from '@tippyjs/react'
+import { ServerErrors } from './ServerError'
+
+export const ImageTagsContainer = ({
+    ciPipelineId,
+    artifactId,
+    imageComment,
+    imageReleaseTags,
+    updateCurrentAppMaterial,
+    appReleaseTagNames,
+    setAppReleaseTagNames,
+    tagsEditable,
+    setTagsEditable,
+    toggleCardMode,
+    hideHardDelete,
+    forceReInit,
+}: 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)
+    const [descriptionValidationMessage, setDescriptionValidationMessage] = useState<string>('')
+    const [textInput, setTextInput] = useState<string>('')
+    const [saveData, setSaveData] = useState<boolean>(false)
+
+    useEffect(() => {
+        initialise()
+    }, [])
+
+    useEffect(() => {
+        reInitState()
+    }, [imageReleaseTags, imageComment, tagsEditable])
+
+    useEffect(() => {
+        setExistingTags(appReleaseTagNames ? appReleaseTagNames : [])
+    }, [appReleaseTagNames])
+
+    useEffect(() => {
+        if (saveData) {
+            handleSave()
+            setSaveData(false)
+        }
+    }, [saveData])
+
+    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 = () => {
+        if (forceReInit || !isEditing) {
+            setInitialTags(imageReleaseTags ? imageReleaseTags : [])
+            setInitialDescription(imageComment ? imageComment.comment : '')
+            setNewDescription(imageComment ? imageComment.comment : '')
+            setDisplayedTags(imageReleaseTags ? imageReleaseTags : [])
+            setIsEditing(false)
+        }
+    }
+
+    const handleEditClick = () => {
+        setIsEditing(!isEditing)
+        if (typeof toggleCardMode === 'function') {
+            toggleCardMode(artifactId)
+        }
+    }
+
+    const handleDescriptionChange = (e) => {
+        const description = e.target.value
+        description?.length > 500
+            ? setDescriptionValidationMessage('comment length cannot exceed 500 characters')
+            : setDescriptionValidationMessage('')
+        setNewDescription(description)
+    }
+
+    const handleCancel = () => {
+        setDisplayedTags(initialTags)
+        setNewDescription(initialDescription)
+        setCreateTags([])
+        setSoftDeleteTags([])
+        setHardDeleteTags([])
+        handleEditClick()
+        setShowTagsWarning(false)
+        setTagErrorMessage('')
+    }
+
+    const validateTag = (lowercaseValue) : boolean => {
+        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 false
+        }
+        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 || lowercaseValue === 'latest') {
+            setTagErrorMessage('This tag is already being used in this application')
+            return false
+        }
+        return true
+    }
+
+    const handleTagCreate = (newValue) => {
+        const lowercaseValue = newValue.toLowerCase().trim()
+        if(validateTag(lowercaseValue)) {
+            const newTag: ReleaseTag = {
+                id: 0,
+                tagName: lowercaseValue,
+                appId: 0,
+                deleted: false,
+                artifactId: 0,
+                duplicateTag: false,
+            }
+            setCreateTags([...createTags, newTag])
+            setDisplayedTags([...displayedTags, newTag])
+            setShowTagsWarning(true)
+            setTextInput('')
+        }
+    }
+
+    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 errorStateHandling = (err) => {
+        err.forEach(({ userMessage }) => {
+            const tagList = createTags.map((tags) => {
+                if (userMessage?.appReleaseTags?.includes(tags.tagName)) {
+                    return {
+                        ...tags,
+                        duplicateTag: true,
+                    }
+                }
+                return tags
+            })
+            setCreateTags(tagList)
+
+            const displayList = displayedTags.map((obj) => {
+                const matchingTag = tagList.find((tag) => tag.tagName === obj.tagName)
+                if (matchingTag) {
+                    return { ...obj, duplicateTag: matchingTag.duplicateTag }
+                }
+                return obj
+            })
+
+            setDisplayedTags(displayList)
+        })
+    }
+
+    const handleSave = async () => {
+        if (tagErrorMessage) return
+
+        const payload = {
+            createTags: createTags,
+            softDeleteTags: softDeleteTags,
+            imageComment: {
+                id: 0,
+                comment: newDescription.trim(),
+                artifactId: 0,
+            },
+            hardDeleteTags: hardDeleteTags,
+        }
+
+        // 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('')
+                if(updateCurrentAppMaterial)updateCurrentAppMaterial(artifactId,tags,res.result?.imageComment)
+            })
+            .catch((err) => {
+                // Fix toast message
+                if (err.errors?.[0]?.userMessage?.appReleaseTags?.length) {
+                    toast.error(err.errors?.[0]?.internalMessage)
+                    errorStateHandling(err.errors)
+                } else {
+                    showError(err)
+                }
+            })
+    }
+
+    const renderInfoCard = (): JSX.Element => {
+        return (
+            <TippyCustomized
+                theme={TippyTheme.white}
+                className="w-300 fcv-5"
+                placement="right"
+                Icon={QuestionFilled}
+                heading="Release tags"
+                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="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.
+                    </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 add-image-button">
+                <AddImageButton handleEditClick={handleEditClick} />
+            </div>
+        ) : (
+            <div></div>
+        )
+    }
+
+    const handleKeydown = (event) => {
+        if (event.key === 'Enter' && event.target.value.trim()) {
+            handleTagCreate(event.target.value.trim())
+        }
+    }
+
+    const setInputValue = (e) => {
+        e.target.value && validateTag(e.target.value)
+        setTextInput(e.target.value)
+    }
+
+    const enterTagCreate = (e) => {
+        stopPropagation(e)
+        if (textInput.trim()) {
+            handleTagCreate(textInput.trim())
+        }
+    }
+
+    const onClickSave = () => {
+        if (textInput.trim()) {
+            handleTagCreate(textInput)
+        }
+        setSaveData(true)
+    }
+
+    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 dc__position-rel-imp" data-testid="add-tag-text-area">
+                        <input
+                            className="form__input"
+                            value={textInput}
+                            onChange={setInputValue}
+                            placeholder="Type a tag and press enter"
+                            onKeyDown={handleKeydown}
+                            ref={creatableRef}
+                        />
+                        {textInput.length > 0 && (
+                            <div
+                                onClick={enterTagCreate}
+                                className="dc__position-abs bcn-0 flex cursor pt-2 pb-2 pr-4 pl-4 br-2 cn-7 dc__border dc__border-bottom-2"
+                                style={{
+                                    top: '50%',
+                                    fontFamily: 'monospace',
+                                    right: '8px',
+                                    transform: 'translateY(-50%)',
+                                }}
+                            >
+                                <Enter className="icon-dim-16 mr-4" />
+                                Enter
+                            </div>
+                        )}
+                    </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}
+                                duplicateTag={tag?.duplicateTag}
+                                hideHardDelete={hideHardDelete}
+                            />
+                        ))}
+                    </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>
+                    {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"
+                            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)
+                                onClickSave()
+                            }}
+                        >
+                            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 className='w-100'>
+                            {initialDescription && <div className="mb-6 fs-13 dc__word-break-all">{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}
+                                        duplicateTag={tag?.duplicateTag}
+                                        hideHardDelete={hideHardDelete}
+                                    />
+                                ))}
+                            </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,
+    duplicateTag,
+    hideHardDelete,
+}: ImageButtonType) => {
+    const IconComponent = isSoftDeleted ? Redo : Minus
+    const isInSoftDeleteTags = isSoftDeleted && softDeleteTags.some((tag) => tag.tagName === text)
+    const canTagBeHardDelete = tagId === 0 || (isSuperAdmin && !hideHardDelete)
+
+    const tabColor = () => {
+        if (duplicateTag) {
+            return 'cr-5 bcr-1 er-2'
+        } else if (isSoftDeleted) {
+            return 'cy-7 bcy-1 dc__strike-through ey-2'
+        } else {
+            return 'cn-9'
+        }
+    }
+
+    return (
+        <div
+            className={`br-4 en-2 bw-1 mr-8 bcn-0 mb-4 pt-2 pr-8 pb-2 pl-8 tag-class dc__word-break-all flex ${
+                isEditing ? 'icon-hover' : ''
+            } ${tabColor()}`}
+        >
+            {duplicateTag ? (
+                <Warning className="icon-dim-12 mr-4" />
+            ) : (
+                <Tippy
+                    className="default-tt"
+                    arrow={true}
+                    placement="top"
+                    content={isInSoftDeleteTags ? 'Restore tag' : 'Soft delete tag'}
+                >
+                    <div
+                        className={`action-icon mr-4 lh-16 pt-3 ${
+                            isInSoftDeleteTags || (tagId !== 0 && !isSoftDeleted) ? 'show-icon' : ''
+                        }`}
+                    >
+                        <IconComponent
+                            className={`icon-dim-12 cursor${isSoftDeleted ? 'scn-6' : 'fcn-6'} `}
+                            data-testid={`${text}-tag-soft-delete`}
+                            onClick={onSoftDeleteClick}
+                        />
+                    </div>
+                </Tippy>
+            )}
+            {text}
+            <Tippy className="default-tt" arrow={true} placement="top" content="Remove tag">
+                <div className={`action-icon ml-4 lh-16 pt-3 ${canTagBeHardDelete ? 'show-icon' : ''}`}>
+                    <Close
+                        className="icon-dim-12 fcn-6 cursor"
+                        data-testid={`${text}-tag-hard-delete`}
+                        onClick={onHardDeleteClick}
+                    />
+                </div>
+            </Tippy>
+        </div>
+    )
+}
+
+const AddImageButton = ({ handleEditClick }) => {
+    const handleClick = (e) => {
+        stopPropagation(e)
+        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>
+    )
+}