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

package/package.json

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

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/Common/ImageTags.tsx

@@ -1,6 +1,5 @@
 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'
@@ -11,11 +10,14 @@ 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 { 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,
@@ -41,6 +43,8 @@ export const ImageTagsContainer = ({
     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()
@@ -54,6 +58,13 @@ export const ImageTagsContainer = ({
         setExistingTags(appReleaseTagNames ? appReleaseTagNames : [])
     }, [appReleaseTagNames])
 
+    useEffect(() => {
+        if (saveData) {
+            handleSave()
+            setSaveData(false)
+        }
+    }, [saveData])
+
     async function initialise() {
         try {
             const userRole = await getUserRole()
@@ -74,15 +85,6 @@ export const ImageTagsContainer = ({
         }
     }
 
-    const CreatableComponents = useMemo(
-        () => ({
-            DropdownIndicator: () => null,
-            IndicatorSeparator: () => null,
-            Menu: () => null,
-        }),
-        [],
-    )
-
     const handleEditClick = () => {
         setIsEditing(!isEditing)
         if (typeof toggleCardMode === 'function') {
@@ -127,9 +129,7 @@ export const ImageTagsContainer = ({
             if (displayedTags[i].tagName.toLowerCase() === lowercaseValue) isTagExistsInDisplayedTags = true
         }
         if (isTagExistsInExistingTags || isTagExistsInDisplayedTags || lowercaseValue === 'latest') {
-            setTagErrorMessage(
-                'This tag is already being used in this application',
-            )
+            setTagErrorMessage('This tag is already being used in this application')
             return
         }
         const newTag: ReleaseTag = {
@@ -138,10 +138,12 @@ export const ImageTagsContainer = ({
             appId: 0,
             deleted: false,
             artifactId: 0,
+            duplicateTag: false,
         }
         setCreateTags([...createTags, newTag])
         setDisplayedTags([...displayedTags, newTag])
         setShowTagsWarning(true)
+        setTextInput('')
     }
 
     const handleTagSoftDelete = (index) => {
@@ -179,7 +181,34 @@ export const ImageTagsContainer = ({
         }
     }
 
+    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,
@@ -219,7 +248,22 @@ export const ImageTagsContainer = ({
                 setTagErrorMessage('')
             })
             .catch((err) => {
-                showError(err)
+                // Fix toast message
+                if (err.errors?.[0]?.userMessage?.appReleaseTags?.length) {
+                    const customError: ServerErrors = {
+                        ...err,
+                        errors: [
+                            {
+                                ...err.errors?.[0],
+                                userMessage: err.errors?.[0]?.internalMessage,
+                            },
+                        ],
+                    }
+                    showError(customError)
+                    errorStateHandling(err.errors)
+                } else {
+                    showError(err)
+                }
             })
     }
 
@@ -248,7 +292,7 @@ export const ImageTagsContainer = ({
         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'>
+                <ul className="pl-20 mt-8">
                     <li>
                         A release tag can only be added if a workflow has CD pipelines deploying to Production
                         environments.
@@ -268,7 +312,7 @@ export const ImageTagsContainer = ({
 
     if (newDescription === '' && displayedTags.length === 0 && !isEditing) {
         return tagsEditable ? (
-            <div className="bcn-0 mt-8">
+            <div className="bcn-0 mt-8 add-image-button">
                 <AddImageButton handleEditClick={handleEditClick} />
             </div>
         ) : (
@@ -276,6 +320,29 @@ export const ImageTagsContainer = ({
         )
     }
 
+    const handleKeydown = (event) => {
+        if (event.key === 'Enter' && event.target.value.trim()) {
+            handleTagCreate(event.target.value.trim())
+        }
+    }
+
+    const setInputValue = (e) => {
+        setTextInput(e.target.value)
+    }
+
+    const enterTagCreate = () => {
+        if (textInput.trim()) {
+            handleTagCreate(textInput.trim())
+        }
+    }
+
+    const onClickSave = () => {
+        if (textInput.trim()) {
+            handleTagCreate(textInput)
+        }
+        setSaveData(true)
+    }
+
     return (
         <div className="mt-8">
             {isEditing && tagsEditable ? (
@@ -284,13 +351,30 @@ export const ImageTagsContainer = ({
                         <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
+                    <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"
-                            onCreateOption={handleTagCreate}
+                            onKeyDown={handleKeydown}
                             ref={creatableRef}
-                            components={CreatableComponents}
                         />
+                        {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 && (
@@ -317,6 +401,7 @@ export const ImageTagsContainer = ({
                                 tagId={tag.id}
                                 softDeleteTags={softDeleteTags}
                                 isSuperAdmin={isSuperAdmin}
+                                duplicateTag={tag?.duplicateTag}
                             />
                         ))}
                     </div>
@@ -327,7 +412,10 @@ export const ImageTagsContainer = ({
                         </div>
                     )}
                     <div className="cn-7 mt-12">Comment</div>
-                    <div  className="flex left flex-wrap dc__gap-8 w-100 mt-6 mb-12" data-testid="add-image-comment-text-area">
+                    <div
+                        className="flex left flex-wrap dc__gap-8 w-100 mt-6 mb-12"
+                        data-testid="add-image-comment-text-area"
+                    >
                         <textarea
                             value={newDescription}
                             onChange={handleDescriptionChange}
@@ -358,7 +446,7 @@ export const ImageTagsContainer = ({
                             type="button"
                             onClick={(e) => {
                                 stopPropagation(e)
-                                handleSave()
+                                onClickSave()
                             }}
                         >
                             Save
@@ -391,6 +479,7 @@ export const ImageTagsContainer = ({
                                         tagId={tag.id}
                                         softDeleteTags={softDeleteTags}
                                         isSuperAdmin={isSuperAdmin}
+                                        duplicateTag={tag?.duplicateTag}
                                     />
                                 ))}
                             </div>
@@ -423,58 +512,60 @@ export const ImageTagButton = ({
     tagId,
     softDeleteTags,
     isSuperAdmin,
+    duplicateTag,
 }: ImageButtonType) => {
     const IconComponent = isSoftDeleted ? Redo : Minus
+    const isInSoftDeleteTags = isSoftDeleted && softDeleteTags.some((tag) => tag.tagName === text)
+    const canTagBeHardDelete = tagId === 0 || isSuperAdmin
 
-    const [isHovered, setIsHovered] = useState(false)
-    const handleMouseEnter = () => {
-        if (isEditing) {
-            setIsHovered(true)
-        }
-    }
-    const handleMouseLeave = () => {
-        if (isEditing) {
-            setIsHovered(false)
+    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'
         }
     }
 
-    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}
+            className={`br-4 en-2 bw-1 mr-8 bcn-0 mb-4 pt-2 pr-8 pb-2 pl-8 tag-class flex ${
+                isEditing ? 'icon-hover' : ''
+            } ${tabColor()}`}
         >
-            <div className="flex pt-2 pl-8 pr-8 pb-2">
-                {isHovered && isEditing && (isInSoftDeleteTags || (tagId !== 0 && !isSoftDeleted)) && (
-                    <Tippy
-                        className="default-tt"
-                        arrow={true}
-                        placement="top"
-                        content={isInSoftDeleteTags ? 'Restore tag' : 'Soft delete tag'}
+            {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 mr-4 cursor ${isSoftDeleted ? 'scn-6' : 'fcn-6'}`}
+                            className={`icon-dim-12 cursor${isSoftDeleted ? 'scn-6' : 'fcn-6'} `}
                             data-testid={`${text}-tag-soft-delete`}
                             onClick={onSoftDeleteClick}
                         />
-                    </Tippy>
-                )}
-                {text}
-                {isHovered && isEditing && canTagBeHardDelete && (
-                    <Tippy className="default-tt" arrow={true} placement="top" content="Remove tag">
-                        <Close
-                            className="icon-dim-12 ml-4 fcn-6 cn-5 cursor"
-                            data-testid={`${text}-tag-hard-delete`}
-                            onClick={onHardDeleteClick}
-                        />
-                    </Tippy>
-                )}
-            </div>
+                    </div>
+                </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>
     )
 }

package/src/Common/Types.ts

@@ -341,6 +341,7 @@ export interface ReleaseTag {
     appId: number
     deleted: boolean
     artifactId: number
+    duplicateTag: boolean
 }
 
 export interface ImageComment {
@@ -371,6 +372,7 @@ export interface ImageButtonType {
     tagId: number
     softDeleteTags: any
     isSuperAdmin: any
+    duplicateTag?: boolean
 }