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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.10-beta-8",
+    "version": "0.0.10-beta-12",
     "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,10 +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,
@@ -40,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()
@@ -47,11 +52,18 @@ export const ImageTagsContainer = ({
 
     useEffect(() => {
         reInitState()
-    }, [imageReleaseTags,imageComment,tagsEditable])
+    }, [imageReleaseTags, imageComment, tagsEditable])
 
     useEffect(() => {
         setExistingTags(appReleaseTagNames ? appReleaseTagNames : [])
-    },[appReleaseTagNames])
+    }, [appReleaseTagNames])
+
+    useEffect(() => {
+        if(saveData){
+            handleSave()
+            setSaveData(false)
+        }
+    },[saveData])
 
     async function initialise() {
         try {
@@ -73,15 +85,6 @@ export const ImageTagsContainer = ({
         }
     }
 
-    const CreatableComponents = useMemo(
-        () => ({
-            DropdownIndicator: () => null,
-            IndicatorSeparator: () => null,
-            Menu: () => null,
-        }),
-        [],
-    )
-
     const handleEditClick = () => {
         setIsEditing(!isEditing)
         if (typeof toggleCardMode === 'function') {
@@ -91,7 +94,9 @@ export const ImageTagsContainer = ({
 
     const handleDescriptionChange = (e) => {
         const description = e.target.value
-        description?.length > 500 ? setDescriptionValidationMessage('comment length cannot exceed 500 characters') : setDescriptionValidationMessage('')
+        description?.length > 500
+            ? setDescriptionValidationMessage('comment length cannot exceed 500 characters')
+            : setDescriptionValidationMessage('')
         setNewDescription(description)
     }
 
@@ -108,8 +113,13 @@ export const ImageTagsContainer = ({
 
     const handleTagCreate = (newValue) => {
         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 -")
+        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('')
@@ -119,7 +129,7 @@ export const ImageTagsContainer = ({
             if (displayedTags[i].tagName.toLowerCase() === lowercaseValue) isTagExistsInDisplayedTags = true
         }
         if (isTagExistsInExistingTags || isTagExistsInDisplayedTags || lowercaseValue === 'latest') {
-            setTagErrorMessage(`This tag ${lowercaseValue} is already applied on same/another image in this application`)
+            setTagErrorMessage('This tag is already being used in this application')
             return
         }
         const newTag: ReleaseTag = {
@@ -128,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) => {
@@ -169,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,
@@ -209,20 +248,33 @@ 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)
+                }
             })
     }
 
-
     const renderInfoCard = (): JSX.Element => {
         return (
             <TippyCustomized
                 theme={TippyTheme.white}
-                className="w-300 h-250 fcv-5 dc__overflow-scroll"
+                className="w-300 fcv-5"
                 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}
@@ -238,8 +290,9 @@ export const ImageTagsContainer = ({
 
     const getBuildContextAdditionalContent = () => {
         return (
-            <div className="p-12 fs-13">
-                <ul>
+            <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.
@@ -259,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>
         ) : (
@@ -267,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 ? (
@@ -275,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 && (
@@ -308,6 +401,7 @@ export const ImageTagsContainer = ({
                                 tagId={tag.id}
                                 softDeleteTags={softDeleteTags}
                                 isSuperAdmin={isSuperAdmin}
+                                duplicateTag={tag?.duplicateTag}
                             />
                         ))}
                     </div>
@@ -319,7 +413,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"
+                        className="flex left flex-wrap dc__gap-8 w-100 mt-6 mb-12"
                         data-testid="add-image-comment-text-area"
                     >
                         <textarea
@@ -329,7 +423,8 @@ export const ImageTagsContainer = ({
                             style={{ height: '90px !important' }}
                         />
                     </div>
-                    { (descriptionValidationMessage !== '') && (<div className="flex left">
+                    {descriptionValidationMessage !== '' && (
+                        <div className="flex left">
                             <Error className="form__icon form__icon--error" />
                             <div className="form__error">{descriptionValidationMessage}</div>
                         </div>
@@ -351,7 +446,7 @@ export const ImageTagsContainer = ({
                             type="button"
                             onClick={(e) => {
                                 stopPropagation(e)
-                                handleSave()
+                                onClickSave()
                             }}
                         >
                             Save
@@ -384,6 +479,7 @@ export const ImageTagsContainer = ({
                                         tagId={tag.id}
                                         softDeleteTags={softDeleteTags}
                                         isSuperAdmin={isSuperAdmin}
+                                        duplicateTag={tag?.duplicateTag}
                                     />
                                 ))}
                             </div>
@@ -416,6 +512,7 @@ export const ImageTagButton = ({
     tagId,
     softDeleteTags,
     isSuperAdmin,
+    duplicateTag,
 }: ImageButtonType) => {
     const IconComponent = isSoftDeleted ? Redo : Minus
 
@@ -434,29 +531,52 @@ export const ImageTagButton = ({
     const isInSoftDeleteTags = isSoftDeleted && softDeleteTags.some((tag) => tag.tagName === text)
     const canTagBeHardDelete = tagId === 0 || isSuperAdmin
 
+    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 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' : ''
-            }`}
+            className={`br-4 en-2 bw-1 dc__w-fit-content dc__word-wrap-anywhere mr-8 bcn-0 flex mb-4 ${tabColor()}`}
             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}
-                    />
+                {duplicateTag ? (
+                    <Warning className="icon-dim-12 mr-4" />
+                ) : (
+                    isHovered &&
+                    isEditing &&
+                    (isInSoftDeleteTags || (tagId !== 0 && !isSoftDeleted)) && (
+                        <Tippy
+                            className="default-tt"
+                            arrow={true}
+                            placement="top"
+                            content={isInSoftDeleteTags ? 'Restore tag' : 'Soft delete tag'}
+                        >
+                            <IconComponent
+                                className={`icon-dim-12 mr-4 cursor ${isSoftDeleted ? 'scn-6' : 'fcn-6'}`}
+                                data-testid={`${text}-tag-soft-delete`}
+                                onClick={onSoftDeleteClick}
+                            />
+                        </Tippy>
+                    )
                 )}
                 {text}
                 {isHovered && isEditing && canTagBeHardDelete && (
-                    <Close
-                        className="icon-dim-12 ml-4 fcn-6 cn-5 cursor"
-                        data-testid={`${text}-tag-hard-delete`}
-                        onClick={onHardDeleteClick}
-                    />
+                    <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>

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
 }