Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into feat/pipeline-deploy-config-diff-revamp

Author: RohitRaj011

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.3.6-beta-4",
+    "version": "0.3.12",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -66,7 +66,7 @@
         "react-mde": "^11.5.0",
         "react-toastify": "9.1.3",
         "typescript": "5.5.4",
-        "vite": "5.4.2",
+        "vite": "5.4.6",
         "vite-plugin-dts": "4.0.3",
         "vite-plugin-lib-inject-css": "2.1.1",
         "vite-plugin-svgr": "^2.4.0",
@@ -109,7 +109,7 @@
             "monaco-editor": "0.44.0"
         },
         "vite-plugin-svgr": {
-            "vite": "5.4.2"
+            "vite": "5.4.6"
         }
     }
 }

package.json

@@ -37,7 +37,7 @@ export const CustomInput = ({
     rootClassName = '',
     autoComplete = 'off',
     helperText = '',
-    handleOnBlur,
+    onBlur,
     readOnly = false,
     noTrim = false,
     onKeyPress,
@@ -66,15 +66,15 @@ export const CustomInput = ({
         return error
     }
 
-    const onBlur = (event) => {
+    const handleOnBlur = (event) => {
         // NOTE: This is to prevent the input from being trimmed when the user do not want to trim the input
         if (!noTrim) {
             event.stopPropagation()
             event.target.value = event.target.value?.trim()
             onChange(event)
         }
-        if (typeof handleOnBlur === 'function') {
-            handleOnBlur(event)
+        if (typeof onBlur === 'function') {
+            onBlur(event)
         }
     }
 
@@ -127,7 +127,7 @@ export const CustomInput = ({
                     e.persist()
                     onChange(e)
                 }}
-                onBlur={onBlur}
+                onBlur={handleOnBlur}
                 onFocus={onFocus}
                 placeholder={placeholder}
                 value={value}

src/Common/CustomInput/CustomInput.tsx

@@ -34,7 +34,7 @@ export interface CustomInputProps {
     rootClassName?: string
     error?: string[] | string
     helperText?: ReactNode
-    handleOnBlur?: (e) => void
+    onBlur?: (e) => void
     readOnly?: boolean
     noTrim?: boolean
     onKeyPress?: (e) => void

src/Common/CustomInput/Types.ts

@@ -60,7 +60,7 @@ export const TagDetails = ({
             {!hidePropagateTag && (
                 <div
                     className={`dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ${tagData.propagate ? 'bcn-7' : ''} ${tagData.key.startsWith('devtron.ai/') ? 'cursor-not-allowed bcn-1' : ''}`}
-                    onClick={propagateTagToResource}
+                    onClick={!tagData?.isPropagateDisabled ? propagateTagToResource : null}
                     data-testid={`propagate-tag-${index}`}
                 >
                     <InjectTag className={`icon-dim-20 mt-4 ${tagData.propagate ? 'scn-0' : ''}`} />

src/Common/CustomTagSelector/TagDetails.tsx

@@ -14,13 +14,14 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import info from '../../Assets/Icon/ic-info-filled.svg'
 import { ConfirmationDialog, DeleteDialog } from '../Dialogs'
 import { ServerErrors } from '../ServerError'
 import { DeleteComponentProps } from './types'
 import { ToastManager, ToastVariantType } from '@Shared/Services'
+import { showError } from '@Common/Helper'
 
 const DeleteComponent = ({
     setDeleting,
@@ -36,11 +37,13 @@ const DeleteComponent = ({
     configuration = '',
     closeCustomComponent,
 }: DeleteComponentProps) => {
+    const [isDeleting, setIsDeleting] = useState(false)
     const [showCannotDeleteDialogModal, setCannotDeleteDialogModal] = useState(false)
     const { push } = useHistory()
 
     async function handleDelete() {
-        setDeleting(true)
+        setDeleting?.(true)
+        setIsDeleting(true)
         try {
             await deleteComponent(payload)
             ToastManager.showToast({
@@ -59,9 +62,12 @@ const DeleteComponent = ({
         } catch (serverError) {
             if (serverError instanceof ServerErrors && serverError.code === 500) {
                 setCannotDeleteDialogModal(true)
+            } else {
+                showError(serverError)
             }
         } finally {
-            setDeleting(false)
+            setDeleting?.(false)
+            setIsDeleting(false)
         }
     }
 
@@ -92,6 +98,7 @@ const DeleteComponent = ({
             delete={handleDelete}
             closeDelete={() => toggleConfirmation(false)}
             dataTestId="delete-dialog"
+            apiCallInProgress={isDeleting}
         >
             <DeleteDialog.Description>
                 <p>Are you sure you want to delete this {configuration || component}? </p>

src/Common/DeleteComponentModal/DeleteComponent.tsx

@@ -15,7 +15,10 @@
  */
 
 export interface DeleteComponentProps {
-    setDeleting: (boolean) => void
+    /**
+     * @deprecated - Delete component internally handles loading for the `Delete Button`.
+     */
+    setDeleting?: (boolean) => void
     toggleConfirmation: any
     deleteComponent: (any) => Promise<any>
     title: string

src/Common/DeleteComponentModal/types.ts

@@ -41,6 +41,7 @@ export const Drawer = ({
     maxWidth,
     parentClassName,
     onEscape,
+    onClose,
 }: drawerInterface) => {
     const drawerRef = useRef(null)
     useEffect(() => {
@@ -61,7 +62,7 @@ export const Drawer = ({
         style['--height'] = height
     }
     return (
-        <VisibleModal className="drawer--container" parentClassName={parentClassName || ''} onEscape={onEscape}>
+        <VisibleModal className="drawer--container" parentClassName={parentClassName || ''} onEscape={onEscape} close={onClose}>
             <aside style={style} ref={drawerRef} className={`drawer ${position}`}>
                 {children}
             </aside>