@devtron-labs/devtron-fe-common-lib 0.0.48-beta-8 → 0.0.48-beta-9

package/src/Common/Constants.ts

@@ -1,4 +1,4 @@
-import { RegistryTypeDetailType } from './Types'
+import { RegistryTypeDetailType } from "./Types"
 
 export const RequestTimeout = 60000
 export const Host = process.env.REACT_APP_ORCHESTRATOR_ROOT
@@ -23,8 +23,8 @@ export const URLS = {
 export const ROUTES = {
     PROJECT_LIST_MIN: 'team/autocomplete',
     USER_CHECK_ROLE: 'user/check/roles',
-    IMAGE_TAGGING: 'app/image-tagging',
-    CD_MATERIAL_GET: 'app/cd-pipeline',
+    IMAGE_TAGGING:'app/image-tagging',
+    CD_MATERIAL_GET: 'app/cd-pipeline'
 }
 
 export enum KEY_VALUE {
@@ -65,9 +65,9 @@ export const TriggerTypeMap = {
 }
 
 export const BuildStageVariable = {
-    PreBuild: 'preBuildStage',
-    Build: 'buildStage',
-    PostBuild: 'postBuildStage',
+  PreBuild: 'preBuildStage',
+  Build: 'buildStage',
+  PostBuild: 'postBuildStage',
 }
 
 export const REGISTRY_TYPE_MAP: Record<string, RegistryTypeDetailType> = {
@@ -236,7 +236,12 @@ export const REGISTRY_TYPE_MAP: Record<string, RegistryTypeDetailType> = {
 }
 
 export const RepositoryAction = {
-    CONTAINER: 'CONTAINER',
-    CHART_PULL: 'CHART_PULL',
-    CHART_PUSH: 'CHART_PUSH',
+    CONTAINER: "CONTAINER",
+    CHART_PULL: "CHART_PULL",
+    CHART_PUSH: "CHART_PUSH"
 }
+
+export enum APPROVAL_MODAL_TYPE {
+    CONFIG = 'CONFIG',
+    IMAGE = 'IMAGE',
+}

package/src/Common/CustomInput/CustomInput.tsx

@@ -2,7 +2,7 @@ import { CustomInputProps } from './Types'
 import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled.svg'
 import { ReactComponent as ErrorIcon } from '../../Assets/Icon/ic-warning.svg'
 
-export const CustomInput = ({
+export function CustomInput({
     name,
     value,
     error,
@@ -29,7 +29,9 @@ export const CustomInput = ({
     onKeyDown,
     required,
     additionalErrorInfo,
-}: CustomInputProps) => {
+    inputWrapClassname = '',
+}: CustomInputProps) {
+
     function handleError(error: any): any[] {
         if (!Array.isArray(error)) {
             return [error]
@@ -38,7 +40,7 @@ export const CustomInput = ({
     }
 
     const onBlur = (event) => {
-        // NOTE: This is to prevent the input from being trimmed when the user do not want to trim the input
+        //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()
@@ -49,45 +51,50 @@ export const CustomInput = ({
         }
     }
 
-    const renderFormErrorWithIcon = (error: string) => (
-        <div className="form__error" key={error}>
-            <ErrorIcon className="form__icon form__icon--error" />
-            {error}
-            {typeof additionalErrorInfo === 'function' && additionalErrorInfo()}
-        </div>
-    )
+    const renderFormErrorWithIcon = (error: string) => {
+        return (
+            <div className="form__error" key={error}>
+                <ErrorIcon className="form__icon form__icon--error" />
+                {error}
+                {typeof additionalErrorInfo === 'function' && additionalErrorInfo()}
+            </div>
+        )
+    }
 
     const getInputError = () => {
         if (!error?.length) {
             return null
+        } else {
+            if (typeof error === 'object') {
+                return handleError(error).map((err: string) => renderFormErrorWithIcon(err))
+            }
+            return renderFormErrorWithIcon(error)
         }
-        if (typeof error === 'object') {
-            return handleError(error).map((err: string) => renderFormErrorWithIcon(err))
-        }
-        return renderFormErrorWithIcon(error)
     }
 
     const renderInputLabelConditionally = () => {
         if (typeof label === 'string') {
             return <span className={`${isRequiredField ? 'dc__required-field' : ''}`}>{label}</span>
+        } else {
+            return label
         }
-        return label
     }
 
     const renderInputLabel = () => {
         if (!label) {
             return null
+        } else {
+            return (
+                <label className={`form__label ${labelClassName}`} data-testid={`label-${dataTestid}`}>
+                    {renderInputLabelConditionally()}
+                </label>
+            )
         }
-        return (
-            <label className={`form__label ${labelClassName}`} data-testid={`label-${dataTestid}`}>
-                {renderInputLabelConditionally()}
-            </label>
-        )
     }
 
     return (
-        <div className="flex column left top">
-            {renderInputLabel()}
+        <div className={`flex column left top ${inputWrapClassname}`}>
+           {renderInputLabel()}
             <input
                 data-testid={dataTestid}
                 type={type}

package/src/Common/CustomInput/Types.ts

@@ -1,5 +1,4 @@
-import { HTMLInputTypeAttribute } from 'react'
-import * as React from 'react'
+import React, { HTMLInputTypeAttribute } from 'react'
 
 export interface CustomInputProps {
     name: string
@@ -7,7 +6,7 @@ export interface CustomInputProps {
     onChange: (e: any) => void
     onFocus?: (e: any) => void
     autoComplete?: string
-    label?: string | React.ReactNode
+    label?: string |  React.ReactNode
     labelClassName?: string
     type?: HTMLInputTypeAttribute
     disabled?: boolean
@@ -28,4 +27,5 @@ export interface CustomInputProps {
     onKeyDown?: (e) => void
     required?: boolean
     additionalErrorInfo?: React.ReactNode
-}
+    inputWrapClassname?: string
+}

package/src/Common/CustomInput/index.ts

@@ -1,2 +1,2 @@
 export * from './CustomInput'
-export * from './Types'
+export * from './Types'

package/src/Common/CustomTagSelector/PropagateTagInfo.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg'
 import { ReactComponent as Help } from '../../Assets/Icon/ic-help-outline.svg'
 import { TippyCustomized } from '../TippyCustomized'
@@ -5,31 +6,33 @@ import { TippyTheme } from '../Types'
 import { DOCUMENTATION } from '../Constants'
 
 export default function PropagateTagInfo({ isCreateApp }: { isCreateApp: boolean }) {
-    const additionalInfo = () => (
-        <div className="p-12 fs-13">
-            <div className="mb-20">
-                <span className="flex left">
-                    Add a tag and click on the
-                    <InjectTag className="icon-dim-16 ml-4 mr-4" />
-                    icon to
-                </span>
-                propagate tags as labels to Kubernetes resources
+    const additionalInfo = () => {
+        return (
+            <div className="p-12 fs-13">
+                <div className="mb-20">
+                    <span className="flex left">
+                        Add a tag and click on the
+                        <InjectTag className="icon-dim-16 ml-4 mr-4" />
+                        icon to
+                    </span>
+                    propagate tags as labels to Kubernetes resources
+                </div>
+                <div>Use these tags to filter/identify resources via CLI or in other Kubernetes tools.</div>
             </div>
-            <div>Use these tags to filter/identify resources via CLI or in other Kubernetes tools.</div>
-        </div>
-    )
+        )
+    }
     return (
         <TippyCustomized
             theme={TippyTheme.white}
             className="w-300"
             placement="top"
             Icon={InjectTag}
-            heading="Propagate tags to K8s resources"
+            heading={'Propagate tags to K8s resources'}
             infoText=""
             additionalContent={additionalInfo()}
-            showCloseButton
+            showCloseButton={true}
             trigger="click"
-            interactive
+            interactive={true}
             documentationLink={isCreateApp ? DOCUMENTATION.APP_TAGS : DOCUMENTATION.APP_OVERVIEW_TAGS}
             documentationLinkText="View Documentation"
         >

package/src/Common/CustomTagSelector/ResizableTagTextArea.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useThrottledEffect } from '../Helper'
 import { ResizableTagTextAreaProps } from './Types'
 
-export const ResizableTagTextArea = ({
+export function ResizableTagTextArea({
     className,
     minHeight,
     maxHeight,
@@ -16,7 +16,7 @@ export const ResizableTagTextArea = ({
     dependentRef,
     dataTestId,
     handleKeyDown,
-}: ResizableTagTextAreaProps) => {
+}: ResizableTagTextAreaProps) {
     const [text, setText] = useState('')
 
     useEffect(() => {
@@ -30,9 +30,9 @@ export const ResizableTagTextArea = ({
 
     const reInitHeight = () => {
         if (document.activeElement !== refVar.current) return
-        refVar.current.style.height = `${minHeight}px`
+        refVar.current.style.height = minHeight + 'px'
         if (dependentRef) {
-            dependentRef.current.style.height = `${minHeight}px`
+            dependentRef.current.style.height = minHeight + 'px'
         }
         let nextHeight = refVar.current.scrollHeight
         if (dependentRef && nextHeight < dependentRef.current.scrollHeight) {
@@ -44,18 +44,18 @@ export const ResizableTagTextArea = ({
         if (maxHeight && nextHeight > maxHeight) {
             nextHeight = maxHeight
         }
-        refVar.current.style.height = `${nextHeight}px`
+        refVar.current.style.height = nextHeight + 'px'
         if (dependentRef) {
-            dependentRef.current.style.height = `${nextHeight}px`
+            dependentRef.current.style.height = nextHeight + 'px'
         }
     }
 
     useThrottledEffect(reInitHeight, 500, [text])
 
     const handleOnBlur = (event) => {
-        refVar.current.style.height = `${minHeight}px`
+        refVar.current.style.height = minHeight + 'px'
         if (dependentRef) {
-            dependentRef.current.style.height = `${minHeight}px`
+            dependentRef.current.style.height = minHeight + 'px'
         }
         onBlur && onBlur(event)
     }

package/src/Common/CustomTagSelector/TagDetails.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import React, { useRef } from 'react'
 import { ReactComponent as DeleteCross } from '../../Assets/Icon/ic-cross.svg'
 import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg'
 import { TagLabelValueSelector } from './TagLabelValueSelector'
@@ -41,9 +41,7 @@ export const TagDetails = ({
     return (
         <div className="flexbox mb-8">
             <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' : ''
-                }`}
+                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}
                 data-testid={`propagate-tag-${index}`}
             >
@@ -70,11 +68,7 @@ export const TagDetails = ({
                 refVar={valueRef}
                 dependentRef={keyRef}
             />
-            <div
-                className="dc__border pl-4 pr-4 dc__right-radius-4 pointer flex top"
-                onClick={deleteTag}
-                data-testid={`delete-tag-${index}`}
-            >
+            <div className="dc__border pl-4 pr-4 dc__right-radius-4 pointer flex top" onClick={deleteTag} data-testid={`delete-tag-${index}`}>
                 <DeleteCross className="icon-dim-20 mt-4" />
             </div>
         </div>

package/src/Common/CustomTagSelector/TagLabelSelect.tsx

@@ -1,14 +1,20 @@
+import React from 'react'
 import PropagateTagInfo from './PropagateTagInfo'
 import { ReactComponent as Add } from '../../Assets/Icon/ic-add.svg'
 import { DEFAULT_TAG_DATA } from '../Constants'
 import { TagLabelSelectType } from './Types'
 import { TagDetails } from './TagDetails'
 
-export const TagLabelSelect = ({ isCreateApp, labelTags, setLabelTags, tabIndex = 0 }: TagLabelSelectType) => {
+export const TagLabelSelect = ({
+    isCreateApp,
+    labelTags,
+    setLabelTags,
+    tabIndex = 0
+}: TagLabelSelectType) => {
     const setTagData = (index, tagValue): void => {
         const _tags = [...labelTags]
         const _tagValue = tagValue
-        if (_tagValue.key.startsWith('devtron.ai/')) {
+        if(_tagValue.key.startsWith("devtron.ai/")){
             _tagValue.propagate = false
         }
         _tags[index] = _tagValue
@@ -34,11 +40,7 @@ export const TagLabelSelect = ({ isCreateApp, labelTags, setLabelTags, tabIndex
                 <PropagateTagInfo isCreateApp={isCreateApp} />
             </div>
             <div>
-                <div
-                    className="dc_width-max-content cb-5 fw-6 fs-13 flexbox mr-20 mb-8 cursor"
-                    onClick={addNewTag}
-                    data-testid="add-tag-button"
-                >
+                <div className="dc_width-max-content cb-5 fw-6 fs-13 flexbox mr-20 mb-8 cursor" onClick={addNewTag} data-testid="add-tag-button">
                     <Add className="icon-dim-20 fcb-5" /> Add tag
                 </div>
                 <div className="mb-8" data-testid="tag-rows-container">

package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -1,5 +1,4 @@
-import { useState, useEffect } from 'react'
-import Tippy from '@tippyjs/react'
+import React, { useState, useEffect } from 'react'
 import PopupMenu from '../PopupMenu'
 import { ReactComponent as ErrorCross } from '../../Assets/Icon/ic-cross.svg'
 import { ReactComponent as Info } from '../../Assets/Icon/ic-info-outlined.svg'
@@ -7,6 +6,7 @@ import { KEY_VALUE } from '../Constants'
 import { stopPropagation } from '../Helper'
 import { ResizableTagTextArea } from './ResizableTagTextArea'
 import { SuggestedTagOptionType, TagLabelValueSelectorType } from './Types'
+import Tippy from '@tippyjs/react'
 import { ValidationRules } from './ValidationRules'
 
 export const TagLabelValueSelector = ({
@@ -107,34 +107,38 @@ export const TagLabelValueSelector = ({
         return null
     }
 
-    const option = (tag: SuggestedTagOptionType, index: number): JSX.Element => (
-        <div
-            key={`${tag.value}-${index}`}
-            data-key={tag.label}
-            data-propagate={tag.propagate}
-            className="dc__hover-n50 dc__ellipsis-right lh-20 fs-13 fw-4 pt-6 pr-8 pb-6 pl-8 cursor"
-            onClick={onSelectValue}
-            data-testid={`tag-label-value-${index}`}
-        >
-            {tag.label}
-        </div>
-    )
+    const option = (tag: SuggestedTagOptionType, index: number): JSX.Element => {
+        return (
+            <div
+                key={`${tag.value}-${index}`}
+                data-key={tag.label}
+                data-propagate={tag.propagate}
+                className="dc__hover-n50 dc__ellipsis-right lh-20 fs-13 fw-4 pt-6 pr-8 pb-6 pl-8 cursor"
+                onClick={onSelectValue}
+                data-testid={`tag-label-value-${index}`}
+            >
+                {tag.label}
+            </div>
+        )
+    }
 
-    const optionWithTippy = (tag: SuggestedTagOptionType, index: number): JSX.Element => (
-        <Tippy
-            className="default-tt"
-            arrow={false}
-            placement="right"
-            content={
-                <div>
-                    <div className="mb-10 fs-12 fw-6 cn-0 dc__break-word">{tag.label}</div>
-                    <div className="fs-12 fw-4 cn-0 dc__break-word">{tag.description}</div>
-                </div>
-            }
-        >
-            {option(tag, index)}
-        </Tippy>
-    )
+    const optionWithTippy = (tag: SuggestedTagOptionType, index: number): JSX.Element => {
+        return (
+            <Tippy
+                className="default-tt"
+                arrow={false}
+                placement="right"
+                content={
+                    <div>
+                        <div className="mb-10 fs-12 fw-6 cn-0 dc__break-word">{tag.label}</div>
+                        <div className="fs-12 fw-4 cn-0 dc__break-word">{tag.description}</div>
+                    </div>
+                }
+            >
+                {option(tag, index)}
+            </Tippy>
+        )
+    }
 
     const renderSuggestions = (): JSX.Element => {
         if (tagOptions?.length) {
@@ -182,8 +186,8 @@ export const TagLabelValueSelector = ({
             {popupMenuBody && (
                 <PopupMenu.Body
                     rootClassName={`mxh-210 dc__overflow-auto tag-${selectedTagIndex}-class`}
-                    autoWidth
-                    preventWheelDisable
+                    autoWidth={true}
+                    preventWheelDisable={true}
                     noBackDrop={noBackDrop}
                 >
                     {popupMenuBody}

package/src/Common/CustomTagSelector/TagSelector.utils.ts

@@ -59,9 +59,10 @@ export const validateKubernetesKey = (key: string) => {
         if (noOfSlashInKey > 1) {
             invalidMessageList.push('Key: Max 1 ( / ) allowed')
         } else {
-            const name = key
+          let name = key
             if (noOfSlashInKey === 1) {
-                const [prefix, name] = key.split('/')
+              const [prefix, name]=key.split('/')
+
             }
         }
     }

package/src/Common/CustomTagSelector/Types.ts

@@ -68,5 +68,5 @@ export interface ResizableTagTextAreaProps {
     refVar?: React.MutableRefObject<HTMLTextAreaElement>
     dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
     dataTestId?: string
-    handleKeyDown?: any
+    handleKeyDown?: any   
 }

package/src/Common/CustomTagSelector/ValidationRules.ts

@@ -20,23 +20,25 @@ export class ValidationRules {
         const errorList = []
         if (!key) {
             errorList.push('Key is required')
-        } else if (!key.startsWith('devtron.ai/')) {
-            const re = new RegExp('/', 'g')
-            const noOfSlashInKey = key.match(re)?.length
-            if (noOfSlashInKey > 1) {
-                errorList.push('Key: Max 1 ( / ) allowed')
-            } else if (noOfSlashInKey === 1) {
-                const [prefix, name] = key.split('/')
-                errorList.push(...validateTagValue(name).map((error) => `Name: ${error}`))
-                if (prefix.length > 253) {
-                    errorList.push('Prefix: Can be max 253 characters')
+        } else {
+            if(!key.startsWith("devtron.ai/")){
+                const re = new RegExp('/', 'g')
+                const noOfSlashInKey = key.match(re)?.length
+                if (noOfSlashInKey > 1) {
+                    errorList.push('Key: Max 1 ( / ) allowed')
+                } else if (noOfSlashInKey === 1) {
+                    const [prefix, name] = key.split('/')
+                    errorList.push(...validateTagValue(name).map((error) => `Name: ${error}`))
+                    if (prefix.length > 253) {
+                        errorList.push('Prefix: Can be max 253 characters')
+                    }
+                    const validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix)
+                    if (!validPrefix) {
+                        errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)')
+                    }
+                } else {
+                    errorList.push(...validateTagValue(key).map((error) => `Name: ${error}`))
                 }
-                const validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix)
-                if (!validPrefix) {
-                    errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)')
-                }
-            } else {
-                errorList.push(...validateTagValue(key).map((error) => `Name: ${error}`))
             }
         }
         return { isValid: errorList.length === 0, messages: errorList }
@@ -46,8 +48,10 @@ export class ValidationRules {
         const errorList = []
         if (!value) {
             errorList.push('Value is required')
-        } else if (!key.startsWith('devtron.ai/')) {
-            errorList.push(...validateTagValue(value))
+        } else {
+            if(!key.startsWith("devtron.ai/")){
+                errorList.push(...validateTagValue(value))
+            }
         }
         return { isValid: errorList.length === 0, messages: errorList }
     }

package/src/Common/CustomTagSelector/index.ts

@@ -1,6 +1,6 @@
-export { default as PropagateTagInfo } from './PropagateTagInfo'
+export {default as PropagateTagInfo} from './PropagateTagInfo'
 export * from './TagDetails'
 export * from './TagLabelSelect'
 export * from './TagLabelValueSelector'
 export * from './ResizableTagTextArea'
-export * from './Types'
+export * from './Types'

package/src/Common/DebouncedSearch/DebouncedSearch.tsx

@@ -1,5 +1,4 @@
-import { useEffect, useState } from 'react'
-import * as React from 'react'
+import React, { useEffect, useState } from 'react'
 import { useDebouncedEffect } from './Utils'
 import { ReactComponent as ICClear } from '../../Assets/Icon/ic-error-cross.svg'
 import { DebouncedSearchProps } from './Types'

package/src/Common/DebouncedSearch/__tests__/DebouncedSearch.test.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { ReactComponent as ICClear } from '../../../../assets/icons/ic-error.svg'
 import DebouncedSearch from '../DebouncedSearch'

package/src/Common/DeleteComponentModal/DeleteComponent.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import React, { useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import info from '../../Assets/Icon/ic-info-filled.svg'
@@ -6,7 +6,8 @@ import { ConfirmationDialog, DeleteDialog } from '../Dialogs'
 import { ServerErrors } from '../ServerError'
 import { DeleteComponentProps } from './types'
 
-const DeleteComponent = ({
+
+function DeleteComponent({
     setDeleting,
     toggleConfirmation,
     deleteComponent,
@@ -19,7 +20,7 @@ const DeleteComponent = ({
     reload,
     configuration = '',
     closeCustomComponent,
-}: DeleteComponentProps) => {
+}: DeleteComponentProps) {
     const [showCannotDeleteDialogModal, setCannotDeleteDialogModal] = useState(false)
     const { push } = useHistory()
 
@@ -54,31 +55,35 @@ const DeleteComponent = ({
         }
     }
 
-    const renderCannotDeleteDialogModal = () => (
-        <ConfirmationDialog className="confirmation-dialog__body--w-360">
-            <ConfirmationDialog.Icon src={info} />
-            <ConfirmationDialog.Body title={`Cannot delete ${component} '${title}'`} />
-            <p className="fs-13 cn-7 ">{confirmationDialogDescription}</p>
-            <ConfirmationDialog.ButtonGroup>
-                <button type="button" className="cta" onClick={handleConfirmation}>
-                    Okay
-                </button>
-            </ConfirmationDialog.ButtonGroup>
-        </ConfirmationDialog>
-    )
+    const renderCannotDeleteDialogModal = () => {
+        return (
+            <ConfirmationDialog className="confirmation-dialog__body--w-360">
+                <ConfirmationDialog.Icon src={info} />
+                <ConfirmationDialog.Body title={`Cannot delete ${component} '${title}'`} />
+                <p className="fs-13 cn-7 ">{confirmationDialogDescription}</p>
+                <ConfirmationDialog.ButtonGroup>
+                    <button type="button" className="cta" onClick={handleConfirmation}>
+                        Okay
+                    </button>
+                </ConfirmationDialog.ButtonGroup>
+            </ConfirmationDialog>
+        )
+    }
 
-    const renderDeleteDialog = () => (
-        <DeleteDialog
-            title={`Delete ${component} '${title}'`}
-            delete={handleDelete}
-            closeDelete={() => toggleConfirmation(false)}
-            dataTestId="delete-dialog"
-        >
-            <DeleteDialog.Description>
-                <p>Are you sure you want to delete this {configuration || component}? </p>
-            </DeleteDialog.Description>
-        </DeleteDialog>
-    )
+    const renderDeleteDialog = () => {
+        return (
+            <DeleteDialog
+                title={`Delete ${component} '${title}'`}
+                delete={handleDelete}
+                closeDelete={() => toggleConfirmation(false)}
+                dataTestId="delete-dialog"
+            >
+                <DeleteDialog.Description>
+                    <p>Are you sure you want to delete this {configuration ? configuration : component}? </p>
+                </DeleteDialog.Description>
+            </DeleteDialog>
+        )
+    }
     return (
         <div>
             {!showCannotDeleteDialogModal && renderDeleteDialog()}

package/src/Common/DeleteComponentModal/types.ts

@@ -12,4 +12,4 @@ export interface DeleteComponentProps {
     configuration?: string
     dataTestid?: string
     closeCustomComponent?: () => void
-}
+}

package/src/Common/DevtronProgressing/DevtronProgressing.tsx

@@ -1,8 +1,11 @@
+import React from 'react'
 import { ReactComponent as ICRotateDevtron } from '../../Assets/Icon/ic-rotate-devtron.svg'
 import { DevtronProgressingProps } from './types'
 
-export const DevtronProgressing = ({ classes, parentClasses }: DevtronProgressingProps): JSX.Element => (
-    <div className={parentClasses || ''}>
-        <ICRotateDevtron className={classes || ''} />
-    </div>
-)
+export function DevtronProgressing({ classes, parentClasses }: DevtronProgressingProps): JSX.Element {
+    return (
+        <div className={parentClasses ? parentClasses : ''}>
+            <ICRotateDevtron className={classes ? classes : ''} />
+        </div>
+    )
+}