@devtron-labs/devtron-fe-common-lib 0.0.6-beta-10 → 0.0.6-beta-13

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.6-beta-10",
+    "version": "0.0.6-beta-13",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
@@ -21,7 +21,6 @@
     "devDependencies": {
         "@rollup/plugin-babel": "^6.0.3",
         "@rollup/plugin-node-resolve": "^15.0.1",
-        "@rollup/plugin-terser": "^0.2.0",
         "@rollup/plugin-image": "3.0.1",
         "rollup-plugin-peer-deps-external": "^2.2.4",
         "rollup-plugin-postcss": "^4.0.2",
@@ -35,6 +34,7 @@
         "@rollup/plugin-url": "8.0.1",
         "typescript": "^4.9.4",
         "react-toastify": "^8.2.0",
+        "@tippyjs/react": "^4.2.0",
         "@sentry/browser": "^7.3.1"
     },
     "peerDependencies": {

package/rollup.config.js

@@ -3,7 +3,6 @@ import resolve from '@rollup/plugin-node-resolve'
 import typescript from 'rollup-plugin-typescript2'
 import postcss from 'rollup-plugin-postcss'
 import { babel } from '@rollup/plugin-babel'
-import terser from '@rollup/plugin-terser'
 import del from 'rollup-plugin-delete'
 import pkg from './package.json'
 import svgr from '@svgr/rollup';
@@ -19,13 +18,12 @@ export default {
         postcss({
             extensions: ['.css'],
         }),
-        terser(),
         babel({
             exclude: 'node_modules/**',
         }),
         del({ targets: ['dist/*'] }),
         url(),
-        svgr(),
+        svgr()
     ],
     external: Object.keys(pkg.peerDependencies || {}),
 }

package/src/Assets/Icon/ic-help-outline.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 16">
+    <path fill="#767D84" fill-rule="evenodd" d="M9 1.333c3.682 0 6.667 2.985 6.667 6.667S12.682 14.667 9 14.667 2.333 11.682 2.333 8 5.318 1.333 9 1.333zm0 1.334C6.054 2.667 3.667 5.054 3.667 8S6.054 13.333 9 13.333 14.333 10.946 14.333 8 11.946 2.667 9 2.667zm-.137 7.245c.41 0 .747.337.747.747s-.337.747-.747.747-.747-.336-.747-.747c0-.41.338-.747.747-.747zm.046-5.245c1.166 0 2.313.537 2.313 1.82 0 1.185-1.357 1.64-1.648 2.068-.22.319-.146.766-.747.766-.392 0-.583-.319-.583-.61 0-1.085 1.593-1.33 1.593-2.223 0-.492-.327-.783-.873-.783-1.166 0-.711 1.202-1.594 1.202-.319 0-.592-.191-.592-.556 0-.893 1.02-1.684 2.13-1.684z"/>
+</svg>

package/src/Assets/Icon/ic-info-outlined.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <g fill="none" fill-rule="evenodd">
+        <g fill="#06C">
+            <g>
+                <g>
+                    <g>
+                        <path d="M10 1.667c4.6 0 8.333 3.733 8.333 8.333S14.6 18.333 10 18.333 1.667 14.6 1.667 10 5.4 1.667 10 1.667zm0 1.666C6.32 3.333 3.333 6.32 3.333 10c0 3.68 2.987 6.667 6.667 6.667 3.68 0 6.667-2.987 6.667-6.667 0-3.68-2.987-6.667-6.667-6.667zm0 5.834c.46 0 .833.373.833.833v3.333c0 .46-.373.834-.833.834-.46 0-.833-.373-.833-.834V10c0-.46.373-.833.833-.833zm0-3.334c.46 0 .833.373.833.834 0 .46-.373.833-.833.833-.46 0-.833-.373-.833-.833 0-.46.373-.834.833-.834z" transform="translate(-315.000000, -313.000000) translate(303.000000, 256.000000) translate(4.000000, 49.000000) translate(8.000000, 8.000000)"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/Assets/Icon/inject-tag.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 10H3.33333" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="9.99992" cy="9.99967" r="1.66667" fill="#596168"/>
+<path d="M4.41455 6.40325L9.76177 3.39544C9.83454 3.35451 9.91661 3.33301 10.0001 3.33301C10.0836 3.33301 10.1657 3.35451 10.2384 3.39544L15.5856 6.40325C15.6608 6.44554 15.7234 6.50706 15.7669 6.58152C15.8105 6.65598 15.8334 6.74068 15.8334 6.82693V12.8208C15.8334 12.9071 15.8105 12.9918 15.7669 13.0662C15.7234 13.1407 15.6608 13.2022 15.5856 13.2445L10.2384 16.2523C10.1657 16.2933 10.0836 16.3148 10.0001 16.3148C9.91661 16.3148 9.83454 16.2933 9.76177 16.2523L4.41455 13.2445" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/Assets/Img/warning-medium.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h48v48H0z"/>
+        <g fill="#FFEBEB" stroke="#F33E3E" stroke-linejoin="round" stroke-width="2">
+            <path d="M7 24h24v17a4 4 0 0 1-4 4H11a4 4 0 0 1-4-4V24z"/>
+            <path stroke-linecap="round" d="M19 29.5v10M24 29.5v10M14 29.5v10"/>
+        </g>
+        <path stroke="#F33E3E" stroke-dasharray="17,3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M42 10a3 3 0 0 1 0 6H31M38 23a3 3 0 0 0-3-3h-8"/>
+        <g stroke="#F33E3E" stroke-linejoin="round" stroke-width="2" transform="rotate(-10 36.29 -8.86)">
+            <rect width="30" height="5" y="6" fill="#FFEBEB" rx="1"/>
+            <path d="M11 0h8a2 2 0 0 1 2 2v4H9V2a2 2 0 0 1 2-2z"/>
+        </g>
+    </g>
+</svg>

package/src/Common/BreadCrumb/BreadCrumb.tsx

@@ -1,6 +1,5 @@
 import React, { useMemo, useEffect } from 'react'
-import { useRouteMatch, useParams } from 'react-router'
-import { Link } from 'react-router-dom';
+import { Link, useRouteMatch, useParams } from 'react-router-dom';
 import { useBreadcrumbContext } from './BreadcrumbStore'
 import { ConditionalWrap } from '../Helper';
 export const BreadcrumbContext = React.createContext(null)

package/src/Common/Constants.ts

@@ -1,2 +1,9 @@
 export const RequestTimeout = 60000
 export const Host = process.env.REACT_APP_ORCHESTRATOR_ROOT
+
+export const PATTERNS = {
+  KUBERNETES_KEY_PREFIX: /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/,
+  KUBERNETES_KEY_NAME: /^(([A-Za-z0-9][-A-Za-z0-9_.]*)?[A-Za-z0-9])$/,
+  START_END_ALPHANUMERIC: /^([A-Za-z0-9].*[A-Za-z0-9])$|[A-Za-z0-9]$/,
+  ALPHANUMERIC_WITH_SPECIAL_CHAR: /^[A-Za-z0-9._-]+$/, // allow alphanumeric,(.) ,(-),(_)
+}

package/src/Common/CustomTagSelector/PropagateTagInfo.tsx

@@ -0,0 +1,36 @@
+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, { TippyTheme } from '../TippyCustomized'
+
+export default function PropagateTagInfo() {
+    const additionalInfo = () => {
+        return (
+            <div className="p-12 fs-13">
+                Use these tags to filter/identify resources via CLI or in other Kubernetes tools.
+            </div>
+        )
+    }
+    return (
+        <div className="flexbox">
+            <InjectTag className="icon-dim-16 mt-2 mr-4" />
+            <span>Propagate tags</span>
+            <TippyCustomized
+                theme={TippyTheme.white}
+                className="w-300"
+                placement="top"
+                Icon={InjectTag}
+                heading={'Propagate tags to K8s resources'}
+                infoText={`Add a tag and click on the ⬡ icon to propagate tags as labels to Kubernetes resources.`}
+                additionalContent={additionalInfo()}
+                showCloseButton={true}
+                trigger="click"
+                interactive={true}
+                documentationLink={''}
+                documentationLinkText={'View Documentation'}
+            >
+                <Help className="icon-dim-16 mt-2 ml-4 cursor" />
+            </TippyCustomized>
+        </div>
+    )
+}

package/src/Common/CustomTagSelector/TagDetails.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { ReactComponent as DeleteCross } from '../../Assets/Icon/ic-close.svg'
+import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg'
+import { TagType } from '../Types'
+import TagLabelValueSelector from './TagLabelValueSelector'
+
+export default function TagDetails({
+    index,
+    tagData,
+    setTagData,
+    removeTag,
+}: {
+    index: number
+    tagData: TagType
+    setTagData: (index: number, tagData: TagType) => void
+    removeTag: (index: number) => void
+}) {
+    const deleteTag = (): void => {
+        removeTag(index)
+    }
+    const propagateTagToResource = (): void => {
+        const _tagData = { ...tagData }
+        _tagData.propagate = !_tagData.propagate
+        setTagData(index, _tagData)
+    }
+    return (
+        <div className="flexbox mb-8">
+            <div
+                className={`dc__border pl-4 pr-4 br-4 mr-8 pointer ${tagData.propagate ? 'bcn-7' : ''}`}
+                onClick={propagateTagToResource}
+            >
+                <InjectTag className={`icon-dim-20 mt-4 ${tagData.propagate ? 'scn-0' : ''}`} />
+            </div>
+            <TagLabelValueSelector selectedTagIndex={index} tagData={tagData} setTagData={setTagData} type="key" />
+            <TagLabelValueSelector selectedTagIndex={index} tagData={tagData} setTagData={setTagData} type="value" />
+            <div className="dc__border pl-4 pr-4 dc__right-radius-4 pointer" onClick={deleteTag}>
+                <DeleteCross className="icon-dim-20 mt-4" />
+            </div>
+        </div>
+    )
+}

package/src/Common/CustomTagSelector/TagLabelSelect.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import PropagateTagInfo from './PropagateTagInfo'
+import { ReactComponent as Add } from '../../Assets/Icon/ic-add.svg'
+import TagDetails from './TagDetails'
+
+export default function TagLabelSelect({ labelTags, setLabelTags }) {
+    const setTagData = (index, tagValue): void => {
+        const _tags = [...labelTags]
+        _tags[index] = tagValue
+        setLabelTags(_tags)
+    }
+
+    const addNewTag = (): void => {
+        const _tags = [...labelTags]
+        _tags.splice(0, 0, { key: '', value: '', propagate: false, isInvalidKey: false, isInvalidValue: false })
+        setLabelTags(_tags)
+    }
+
+    const removeTag = (index: number): void => {
+        const _tags = [...labelTags]
+        _tags.splice(index, 1)
+        setLabelTags(_tags)
+    }
+
+    return (
+        <div>
+            <div className="flexbox dc__content-space mb-8">
+                <span>Tags</span>
+                <PropagateTagInfo />
+            </div>
+            <div>
+                <div className="dc_width-max-content cb-5 fw-6 fs-13 flexbox mr-20 mb-8 cursor" onClick={addNewTag}>
+                    <Add className="icon-dim-20 fcb-5" /> Add tag
+                </div>
+                <div className="mb-8">
+                    {labelTags?.map((tagData, index) => (
+                        <TagDetails
+                            key={`tag-${index}`}
+                            index={index}
+                            tagData={tagData}
+                            setTagData={setTagData}
+                            removeTag={removeTag}
+                        />
+                    ))}
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -0,0 +1,144 @@
+import React, { useState, useEffect } from 'react'
+import { OptionType, TagType } from '../Types'
+import PopupMenu from '../PopupMenu'
+import { ValidationRules } from './ValidationRules'
+import { ReactComponent as ErrorCross } from '../../Assets/Icon/ic-close.svg'
+import { ReactComponent as Info } from '../../Assets/Icon/ic-info-outlined.svg'
+
+export default function TagLabelValueSelector({
+    selectedTagIndex,
+    tagData,
+    setTagData,
+    tagOptions,
+    isRequired,
+    type,
+}: {
+    selectedTagIndex: number
+    tagData: TagType
+    setTagData: (index: number, tagData: TagType) => void
+    tagOptions?: OptionType[]
+    isRequired?: boolean
+    type?: string
+}) {
+    const [selectedValue, setSelectedValue] = useState<string>('')
+    const [isPopupOpen, togglePopup] = useState<boolean>(false)
+
+    const validationRules = new ValidationRules()
+
+    useEffect(() => {
+        const _tagData = { ...tagData }
+        setSelectedValue(_tagData[type])
+    }, [selectedTagIndex, tagData, type])
+
+    const handleOnBlur = (e) => {
+        if (
+            !e.relatedTarget ||
+            !e.relatedTarget.classList.value ||
+            e.relatedTarget.classList.value.indexOf(`tag-${selectedTagIndex}-class`) === -1
+        ) {
+            const _tagData = { ...tagData }
+            _tagData[type] = selectedValue
+            if (type === 'key') {
+                _tagData.isInvalidKey = selectedValue
+                    ? !validationRules.propagateTagKey(selectedValue).isValid
+                    : _tagData.value !== ''
+            } else {
+                if (selectedValue) {
+                    _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid
+                    _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey
+                } else {
+                    _tagData.isInvalidValue = false
+                    _tagData.isInvalidKey = !_tagData.key ? false : _tagData.isInvalidKey
+                }
+            }
+            setTagData(selectedTagIndex, _tagData)
+        }
+    }
+
+    const handleInputChange = (e): void => {
+        setSelectedValue(e.target.value)
+    }
+
+    const onSelectValue = (e): void => {
+        const _tagData = { ...tagData }
+        _tagData[type] = e.currentTarget.dataset.key
+        setTagData(selectedTagIndex, _tagData)
+    }
+
+    const renderValidationsSuggestions = (): JSX.Element => {
+        let field = { isValid: true, messages: [] }
+        if (type === 'value') {
+            if (isRequired || selectedValue) {
+                field = validationRules.propagateTagValue(selectedValue)
+            }
+        } else {
+            field = validationRules.propagateTagKey(selectedValue)
+        }
+        if (!field.isValid) {
+            return (
+                <div className="p-4">
+                    {field.messages.map((error) => (
+                        <div key={error} className="flexbox p-4">
+                            <span>
+                                <ErrorCross className="icon-dim-14 scr-5 mt-3 mr-4" />
+                            </span>
+                            <span>{error}</span>
+                        </div>
+                    ))}
+                    {type === 'key' && (
+                        <div className="flexbox p-4">
+                            <span>
+                                <Info className="icon-dim-14 mt-3 mr-4" />
+                            </span>
+                            <span className="dc__italic-font-style">Key format: prefix/name or name</span>
+                        </div>
+                    )}
+                </div>
+            )
+        }
+        return null
+    }
+
+    const renderSuggestions = (): JSX.Element => {
+        if (tagOptions?.length) {
+            const filteredTags = tagOptions.filter((tag) => tag.value.indexOf(selectedValue) >= 0)
+            if (filteredTags.length) {
+                return (
+                    <div className="p-8">
+                        {tagOptions
+                            .filter((tag) => tag.value.indexOf(selectedValue) >= 0)
+                            .map((tag, index) => (
+                                <div data-key={`${tag.value}-${index}`} className="cursor" onClick={onSelectValue}>
+                                    {tag.label}
+                                </div>
+                            ))}
+                    </div>
+                )
+            }
+        }
+        return renderValidationsSuggestions()
+    }
+
+    return (
+        <PopupMenu onToggleCallback={(isOpen) => togglePopup(isOpen)} autoClose>
+            <PopupMenu.Button
+                rootClassName={`${
+                    type === 'key'
+                        ? `dc__no-right-radius`
+                        : `dc__no-border-radius dc__no-right-border dc__no-left-border`
+                } ${tagData[type === 'key' ? 'isInvalidKey' : 'isInvalidValue'] ? 'er-5 bw-1' : ''}`}
+            >
+                <input
+                    type="text"
+                    className="form__input pt-4-imp pb-4-imp dc__no-border"
+                    value={selectedValue}
+                    onChange={handleInputChange}
+                    onBlur={handleOnBlur}
+                />
+            </PopupMenu.Button>
+            <PopupMenu.Body rootClassName={`tag-${selectedTagIndex}-class`} autoWidth={true}>
+                {isPopupOpen && renderSuggestions()}
+            </PopupMenu.Body>
+        </PopupMenu>
+    )
+}

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

@@ -0,0 +1,71 @@
+export const baseSelectStyles = {
+    control: (base, state) => ({
+        ...base,
+        border: '1px solid var(--N200)',
+        boxShadow: 'none',
+        minHeight: 'auto',
+        borderRadius: 'none',
+        height: '32px',
+        fontSize: '12px',
+        borderRight: '0',
+        cursor: state.isDisabled ? 'not-allowed' : 'normal',
+    }),
+    singleValue: (base, state) => ({
+        ...base,
+        fontWeight: '500',
+    }),
+    placeholder: (base, state) => ({
+        ...base,
+        fontWeight: '500',
+    }),
+    option: (base, state) => ({
+        ...base,
+        fontWeight: '500',
+        color: 'var(--N900)',
+        fontSize: '12px',
+        padding: '5px 10px',
+    }),
+    dropdownIndicator: (styles) => ({ ...styles, padding: 0 }),
+    valueContainer: (base, state) => ({
+        ...base,
+        color: 'var(--N900)',
+        background: state.isDisabled ? 'var(--N100) !important' : 'var(--N50) !important',
+        padding: '0px 10px',
+        display: 'flex',
+        height: '30px',
+        fontSize: '12px',
+        cursor: state.isDisabled ? 'not-allowed' : 'normal',
+        pointerEvents: 'all',
+        width: '100px',
+        whiteSpace: 'nowrap',
+    }),
+    indicatorsContainer: (base, state) => ({
+        ...base,
+        background: state.isDisabled ? 'var(--N100) !important' : 'var(--N50) !important',
+    }),
+    menu: (base, state) => ({
+        ...base,
+        marginTop: '0',
+    }),
+}
+
+export const validateKubernetesKey = (key: string) => {
+    const invalidMessageList = []
+    if (!key || key.split('/')) {
+        invalidMessageList.push('Name is required')
+    } else {
+        const re = new RegExp('/', 'g')
+        const noOfSlashInKey = key.match(re).length
+        if (noOfSlashInKey > 1) {
+            invalidMessageList.push('Key: Max 1 ( / ) allowed')
+        } else {
+          let name = key
+            if (noOfSlashInKey === 1) {
+              const [prefix, name]=key.split('/')
+
+            }
+        }
+    }
+}
+
+export const validateKubernetesValue = (value: string) => {}

package/src/Common/CustomTagSelector/ValidationRules.ts

@@ -0,0 +1,55 @@
+import { PATTERNS } from '../Constants'
+
+const validateTagValue = (value: string): string[] => {
+    const errorList = []
+    if (value.length > 63) {
+        errorList.push('Can be max 63 characters')
+    }
+    let firstLastAlphanumeric = PATTERNS.START_END_ALPHANUMERIC.test(value)
+    if (!firstLastAlphanumeric) {
+        errorList.push('Must start and end with an alphanumeric character')
+    }
+    let validValue = PATTERNS.ALPHANUMERIC_WITH_SPECIAL_CHAR.test(value)
+    if (!validValue) {
+        errorList.push('Can only contain alphanumeric chars and (-), (_), (.)')
+    }
+    return errorList
+}
+export class ValidationRules {
+
+    propagateTagKey = (key: string): { isValid: boolean; messages: string[] } => {
+        const errorList = []
+        if (!key) {
+            errorList.push('Key is required')
+        } else {
+            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')
+                }
+                let 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 }
+    }
+
+    propagateTagValue = (value: string): { isValid: boolean; messages: string[] } => {
+        const errorList = []
+        if (!value) {
+            errorList.push('Value is required')
+        } else {
+            errorList.push(...validateTagValue(value))
+        }
+        return { isValid: errorList.length === 0, messages: errorList }
+    }
+}

package/src/Common/CustomTagSelector/index.ts

@@ -0,0 +1,2 @@
+export * from './TagLabelSelect'
+export * from './TagLabelValueSelector'

package/src/Common/Dialogs/ConfirmationDialog.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { VisibleModal2 } from '../Modals/VisibleModal2'
+function ConfirmationDialog({ className = '', children }) {
+    return (
+        <VisibleModal2 className="confirmation-dialog">
+            <div className={`confirmation-dialog__body ${className}`}>{children}</div>
+        </VisibleModal2>
+    )
+}
+
+function Icon({ src, className = '' }) {
+    return <img src={src} className={`confirmation-dialog__icon ${className}`} alt="" />
+}
+
+function Body({ title, subtitle = null, children = null }) {
+    return (
+        <div className="flex left column ">
+            <h3 className="confirmation-dialog__title lh-1-25 dc__break-word w-100">{title}</h3>
+            {subtitle && <div className="confirmation-dialog__subtitle">{subtitle}</div>}
+            {children}
+        </div>
+    )
+}
+
+function ButtonGroup({ children }) {
+    return <div className="flex right confirmation-dialog__button-group">{children}</div>
+}
+
+ConfirmationDialog.Icon = Icon
+ConfirmationDialog.Body = Body
+ConfirmationDialog.ButtonGroup = ButtonGroup
+export default ConfirmationDialog

package/src/Common/Dialogs/DeleteDialog.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import warn from '../../../Assets/Img/warning-medium.svg';
+import { Progressing } from '../Progressing'
+import ConfirmationDialog from './ConfirmationDialog';
+import { DeleteDialogProps } from './Types';
+
+export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.FC<any> } = function (props) {
+
+    return <ConfirmationDialog className="confirmation-dialog__body--w-400">
+        <ConfirmationDialog.Icon src={warn} />
+        <ConfirmationDialog.Body title={props.title}>
+            <div className="fs-13 cn-7 lh-1-54 w-100">
+                {props.description ? props.description : null}
+                {props.children}
+            </div>
+        </ConfirmationDialog.Body>
+        <ConfirmationDialog.ButtonGroup>
+            <div className="flex right">
+                <button type="button" className="cta cancel cta-cd-delete-modal ml-16" onClick={props.closeDelete} disabled={props.apiCallInProgress}>Cancel</button>
+                <button type="button" className="cta delete cta-cd-delete-modal ml-16" onClick={() => props.delete()} disabled={props.apiCallInProgress}>
+                    {props.apiCallInProgress ? <Progressing /> :  `${props.deletePrefix || ''}Delete${props.deletePostfix || ''}`}
+                </button>
+            </div>
+        </ConfirmationDialog.ButtonGroup>
+    </ConfirmationDialog >
+}
+
+function DeleteDialogDescription(props) {
+
+    return <>
+        {props.children}
+    </>
+}
+
+DeleteDialog.Description = DeleteDialogDescription;