@devtron-labs/devtron-fe-common-lib 0.0.52-beta-2 → 0.0.52-beta-3

package/src/Common/Constants.ts

@@ -1,4 +1,4 @@
-import { RegistryTypeDetailType } from "./Types"
+import { RegistryTypeDetailType } from './Types'
 
 export const FALLBACK_REQUEST_TIMEOUT = 60000
 export const Host = process.env.REACT_APP_ORCHESTRATOR_ROOT
@@ -23,9 +23,9 @@ export const URLS = {
 export const ROUTES = {
     PROJECT_LIST_MIN: 'team/autocomplete',
     USER_CHECK_ROLE: 'user/check/roles',
-    IMAGE_TAGGING:'app/image-tagging',
+    IMAGE_TAGGING: 'app/image-tagging',
     CD_MATERIAL_GET: 'app/cd-pipeline',
-    DEPLOYMENT_TEMPLATE_LIST: 'app/template/list'
+    DEPLOYMENT_TEMPLATE_LIST: 'app/template/list',
 }
 
 export enum KEY_VALUE {
@@ -66,9 +66,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> = {
@@ -237,13 +237,9 @@ 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',
-    DEPLOYMENT = 'DEPLOYMENT',
-}
 export const MAX_Z_INDEX = 2147483647

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 function CustomInput({
+export const CustomInput = ({
     name,
     value,
     error,
@@ -29,9 +29,7 @@ export function CustomInput({
     onKeyDown,
     required,
     additionalErrorInfo,
-    inputWrapClassName = '',
-}: CustomInputProps) {
-
+}: CustomInputProps) => {
     function handleError(error: any): any[] {
         if (!Array.isArray(error)) {
             return [error]
@@ -40,7 +38,7 @@ export function 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()
@@ -51,50 +49,45 @@ export function CustomInput({
         }
     }
 
-    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 renderFormErrorWithIcon = (error: string) => (
+        <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 ${inputWrapClassName}`}>
-           {renderInputLabel()}
+        <div className="flex column left top">
+            {renderInputLabel()}
             <input
                 data-testid={dataTestid}
                 type={type}

package/src/Common/CustomInput/Types.ts

@@ -1,4 +1,5 @@
-import React, { HTMLInputTypeAttribute } from 'react'
+import { HTMLInputTypeAttribute } from 'react'
+import * as React from 'react'
 
 export interface CustomInputProps {
     name: string
@@ -6,7 +7,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
@@ -27,5 +28,4 @@ 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,4 +1,3 @@
-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'
@@ -6,33 +5,31 @@ import { TippyTheme } from '../Types'
 import { DOCUMENTATION } from '../Constants'
 
 export default function PropagateTagInfo({ isCreateApp }: { isCreateApp: boolean }) {
-    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>
+    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
             </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={true}
+            showCloseButton
             trigger="click"
-            interactive={true}
+            interactive
             documentationLink={isCreateApp ? DOCUMENTATION.APP_TAGS : DOCUMENTATION.APP_OVERVIEW_TAGS}
             documentationLinkText="View Documentation"
         >

package/src/Common/CustomTagSelector/ResizableTagTextArea.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useThrottledEffect } from '../Helper'
 import { ResizableTagTextAreaProps } from './Types'
 
-export function ResizableTagTextArea({
+export const ResizableTagTextArea = ({
     className,
     minHeight,
     maxHeight,
@@ -16,7 +16,7 @@ export function ResizableTagTextArea({
     dependentRef,
     dataTestId,
     handleKeyDown,
-}: ResizableTagTextAreaProps) {
+}: ResizableTagTextAreaProps) => {
     const [text, setText] = useState('')
 
     useEffect(() => {
@@ -30,9 +30,9 @@ export function 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 function 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 React, { useRef } from 'react'
+import { 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,7 +41,9 @@ 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}`}
             >
@@ -68,7 +70,11 @@ 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,20 +1,14 @@
-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
@@ -40,7 +34,11 @@ export const TagLabelSelect = ({
                 <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,4 +1,5 @@
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
+import Tippy from '@tippyjs/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'
@@ -6,7 +7,6 @@ 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,38 +107,34 @@ export const TagLabelValueSelector = ({
         return null
     }
 
-    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 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 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 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 renderSuggestions = (): JSX.Element => {
         if (tagOptions?.length) {
@@ -186,8 +182,8 @@ export const TagLabelValueSelector = ({
             {popupMenuBody && (
                 <PopupMenu.Body
                     rootClassName={`mxh-210 dc__overflow-auto tag-${selectedTagIndex}-class`}
-                    autoWidth={true}
-                    preventWheelDisable={true}
+                    autoWidth
+                    preventWheelDisable
                     noBackDrop={noBackDrop}
                 >
                     {popupMenuBody}

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

@@ -59,10 +59,9 @@ export const validateKubernetesKey = (key: string) => {
         if (noOfSlashInKey > 1) {
             invalidMessageList.push('Key: Max 1 ( / ) allowed')
         } else {
-          let name = key
+            const 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,25 +20,23 @@ 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')
-                    }
-                    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}`))
+        } 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}`))
             }
         }
         return { isValid: errorList.length === 0, messages: errorList }
@@ -48,10 +46,8 @@ 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,4 +1,5 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
+import * as React 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,4 +1,3 @@
-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 React, { useState } from 'react'
+import { useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import info from '../../Assets/Icon/ic-info-filled.svg'
@@ -6,8 +6,7 @@ import { ConfirmationDialog, DeleteDialog } from '../Dialogs'
 import { ServerErrors } from '../ServerError'
 import { DeleteComponentProps } from './types'
 
-
-function DeleteComponent({
+const DeleteComponent = ({
     setDeleting,
     toggleConfirmation,
     deleteComponent,
@@ -20,7 +19,7 @@ function DeleteComponent({
     reload,
     configuration = '',
     closeCustomComponent,
-}: DeleteComponentProps) {
+}: DeleteComponentProps) => {
     const [showCannotDeleteDialogModal, setCannotDeleteDialogModal] = useState(false)
     const { push } = useHistory()
 
@@ -55,35 +54,31 @@ function DeleteComponent({
         }
     }
 
-    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 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 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>
-        )
-    }
+    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>
+    )
     return (
         <div>
             {!showCannotDeleteDialogModal && renderDeleteDialog()}

package/src/Common/DeleteComponentModal/types.ts

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