@devtron-labs/devtron-fe-common-lib 0.0.50-beta-1 → 0.0.50-beta-2

package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -1,198 +0,0 @@
-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'
-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 = ({
-    selectedTagIndex,
-    tagData,
-    setTagData,
-    tagOptions,
-    isRequired,
-    tagInputType,
-    placeholder,
-    tabIndex = null,
-    refVar,
-    dependentRef,
-    noBackDrop,
-}: TagLabelValueSelectorType) => {
-    const [selectedValue, setSelectedValue] = useState<string>('')
-    const [activeElement, setActiveElement] = useState<string>('')
-    const validationRules = new ValidationRules()
-
-    useEffect(() => {
-        setSelectedValue(tagData?.[tagInputType] || '')
-    }, [selectedTagIndex, tagData, tagInputType])
-
-    const handleOnFocus = (e) => {
-        setTimeout(() => {
-            setActiveElement(`tag-${tagInputType}-${selectedTagIndex}`)
-        }, 300)
-    }
-    const handleOnBlur = (e) => {
-        if (
-            !e.relatedTarget ||
-            !e.relatedTarget.classList.value ||
-            !e.relatedTarget.classList.value.includes(`tag-${selectedTagIndex}-class`)
-        ) {
-            setActiveElement('')
-            const _tagData = { ...tagData }
-            _tagData[tagInputType] = selectedValue
-            if (tagInputType === KEY_VALUE.KEY) {
-                _tagData.isInvalidKey =
-                    selectedValue || _tagData.propagate
-                        ? !validationRules.propagateTagKey(selectedValue).isValid
-                        : _tagData.value !== ''
-            } else if (selectedValue || isRequired || _tagData.propagate) {
-                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue, _tagData.key).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 => {
-        stopPropagation(e)
-        const _tagData = { ...tagData }
-        _tagData[tagInputType] = e.currentTarget.dataset.key
-        _tagData.propagate = e.currentTarget.dataset.propagate === 'true'
-        setTagData(selectedTagIndex, _tagData)
-        setActiveElement('')
-    }
-
-    const renderValidationsSuggestions = (): JSX.Element => {
-        let field = { isValid: true, messages: [] }
-        if (tagInputType === KEY_VALUE.KEY) {
-            if (selectedValue || tagData.value) {
-                field = validationRules.propagateTagKey(selectedValue)
-            }
-        } else if (isRequired || selectedValue || tagData.propagate) {
-            field = validationRules.propagateTagValue(selectedValue, tagData.key)
-        }
-        if (!field.isValid) {
-            return (
-                <div className="p-4" onClick={stopPropagation} data-testid="tag-label-cross-stop-propagation">
-                    {field.messages.map((error) => (
-                        <div key={error} className="flexbox pr-4 pl-4">
-                            <span>
-                                <ErrorCross className="icon-dim-14 scr-5 mt-3 mr-4" />
-                            </span>
-                            <span>{error}</span>
-                        </div>
-                    ))}
-                    {tagInputType === KEY_VALUE.KEY && (
-                        <div className="flexbox pr-4 pl-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 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 => {
-        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) {
-            const filteredTags = tagOptions.filter((tag) => tag.label.indexOf(selectedValue) >= 0)
-            if (filteredTags.length) {
-                return (
-                    <div>
-                        {filteredTags.map((tag, index) =>
-                            tag.description ? optionWithTippy(tag, index) : option(tag, index),
-                        )}
-                    </div>
-                )
-            }
-        }
-        return renderValidationsSuggestions()
-    }
-
-    const popupMenuBody = activeElement === `tag-${tagInputType}-${selectedTagIndex}` ? renderSuggestions() : null
-    return (
-        <PopupMenu autoClose autoPosition>
-            <PopupMenu.Button rootClassName="dc__bg-n50 flex top dc__no-border-imp">
-                <ResizableTagTextArea
-                    minHeight={30}
-                    maxHeight={80}
-                    className={`form__input tag-input pt-4-imp pb-4-imp fs-13 ${
-                        tagInputType === KEY_VALUE.KEY
-                            ? `dc__no-right-radius`
-                            : `dc__no-border-radius dc__no-right-border dc__no-left-border`
-                    } ${
-                        tagData[tagInputType === KEY_VALUE.KEY ? 'isInvalidKey' : 'isInvalidValue']
-                            ? 'form__input--error'
-                            : ''
-                    }`}
-                    value={selectedValue}
-                    onChange={handleInputChange}
-                    onBlur={handleOnBlur}
-                    onFocus={handleOnFocus}
-                    placeholder={placeholder}
-                    tabIndex={tabIndex}
-                    refVar={refVar}
-                    dependentRef={dependentRef}
-                    dataTestId={`tag-${tagInputType === KEY_VALUE.KEY ? 'key' : 'value'}-${selectedTagIndex}`}
-                />
-            </PopupMenu.Button>
-            {popupMenuBody && (
-                <PopupMenu.Body
-                    rootClassName={`mxh-210 dc__overflow-auto tag-${selectedTagIndex}-class`}
-                    autoWidth={true}
-                    preventWheelDisable={true}
-                    noBackDrop={noBackDrop}
-                >
-                    {popupMenuBody}
-                </PopupMenu.Body>
-            )}
-        </PopupMenu>
-    )
-}

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

@@ -1,71 +0,0 @@
-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/Types.ts

@@ -1,72 +0,0 @@
-import { KEY_VALUE } from '../Constants'
-import { OptionType } from '../Types'
-
-export interface SuggestedTagOptionType extends OptionType {
-    description: string
-    propagate: boolean
-}
-export interface TagType {
-    id?: number
-    key: string
-    value?: string
-    description?: string
-    propagate: boolean
-    mandatoryProjectIdsCsv?: string
-    isInvalidKey?: boolean
-    isInvalidValue?: boolean
-    isSuggested?: boolean
-    isPropagateDisabled?: boolean
-}
-
-export interface TagErrorType {
-    isValid: boolean
-    messages: string[]
-}
-export interface TagLabelSelectType {
-    isCreateApp?: boolean
-    labelTags: TagType[]
-    setLabelTags: (tagList: TagType[]) => void
-    tabIndex?: number
-    selectedProjectId?: number
-    suggestedTagsOptions?: SuggestedTagOptionType[]
-    reloadProjectTags?: boolean
-}
-
-export interface TagDetailType {
-    index: number
-    tagData: TagType
-    setTagData: (index: number, tagData: TagType) => void
-    removeTag?: (index: number) => void
-    tabIndex?: number
-    suggestedTagsOptions?: SuggestedTagOptionType[]
-}
-
-export interface TagLabelValueSelectorType {
-    selectedTagIndex: number
-    tagData: TagType
-    setTagData: (index: number, tagData: TagType) => void
-    tagOptions?: SuggestedTagOptionType[]
-    isRequired?: boolean
-    tagInputType?: KEY_VALUE
-    placeholder?: string
-    tabIndex?: number
-    refVar?: React.MutableRefObject<HTMLTextAreaElement>
-    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
-    noBackDrop?: boolean
-}
-
-export interface ResizableTagTextAreaProps {
-    className?: string
-    minHeight?: number
-    maxHeight?: number
-    value?: string
-    onChange?: (e) => void
-    onBlur?: (e) => void
-    onFocus?: (e) => void
-    placeholder?: string
-    tabIndex?: number
-    refVar?: React.MutableRefObject<HTMLTextAreaElement>
-    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
-    dataTestId?: string
-    handleKeyDown?: any   
-}

package/src/Common/CustomTagSelector/ValidationRules.ts

@@ -1,58 +0,0 @@
-import { PATTERNS } from '../Constants'
-
-const validateTagValue = (value: string): string[] => {
-    const errorList = []
-    if (value.length > 63) {
-        errorList.push('Can be max 63 characters')
-    }
-    const firstLastAlphanumeric = PATTERNS.START_END_ALPHANUMERIC.test(value)
-    if (!firstLastAlphanumeric) {
-        errorList.push('Must start and end with an alphanumeric character')
-    }
-    const 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 {
-            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 }
-    }
-
-    propagateTagValue = (value: string, key: string): { isValid: boolean; messages: string[] } => {
-        const errorList = []
-        if (!value) {
-            errorList.push('Value is required')
-        } 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 +0,0 @@
-export {default as PropagateTagInfo} from './PropagateTagInfo'
-export * from './TagDetails'
-export * from './TagLabelSelect'
-export * from './TagLabelValueSelector'
-export * from './ResizableTagTextArea'
-export * from './Types'

package/src/Common/DebouncedSearch/DebouncedSearch.tsx

@@ -1,76 +0,0 @@
-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'
-
-/**
- * @param onSearch - Callback function to be called on search
- * @param Icon - (Optional) Icon to be shown before the input
- * @param iconClass - (Optional) Class for the icon
- * @param children - (Optional) In case we want to add another button or any other element
- * @param placeholder - (Optional) Placeholder for the input
- * @param containerClass - (Optional) Class for the container
- * @param inputClass - (Optional) Class for the input field
- * @param debounceTimeout - (Optional) Timeout for the debounce with default value of 500ms
- * @param clearSearch - (Optional) To clear the search text
- * @param showClearIcon - (Optional) To show the clear icon default value is true
- */
-export default function DebouncedSearch({
-    onSearch,
-    Icon,
-    children,
-    placeholder,
-    containerClass = '',
-    iconClass = '',
-    inputClass = '',
-    debounceTimeout = 500,
-    clearSearch,
-    showClearIcon = true,
-    autoFocus = true,
-}: DebouncedSearchProps) {
-    const [searchText, setSearchText] = useState<string>('')
-
-    useEffect(() => {
-        setSearchText('')
-    }, [clearSearch])
-
-    const handleSearchTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setSearchText(e.target.value)
-    }
-
-    const handleClearSearch = () => {
-        setSearchText('')
-    }
-
-    useDebouncedEffect(() => onSearch(searchText), debounceTimeout, [searchText])
-
-    return (
-        <div className={containerClass}>
-            {Icon && <Icon className={iconClass} />}
-
-            <input
-                type="text"
-                className={inputClass}
-                placeholder={placeholder ?? 'Search'}
-                value={searchText}
-                onChange={handleSearchTextChange}
-                autoFocus={autoFocus}
-                data-testid="debounced-search"
-            />
-
-            {showClearIcon && !!searchText && (
-                <button
-                    type="button"
-                    className="dc__outline-none-imp dc__no-border p-0 bc-n50 flex"
-                    onClick={handleClearSearch}
-                    data-testid="clear-search"
-                >
-                    <ICClear className="icon-dim-20 icon-n6" />
-                </button>
-            )}
-
-            {/* In case we want to add another button or something  */}
-            {children}
-        </div>
-    )
-}

package/src/Common/DebouncedSearch/Types.ts

@@ -1,13 +0,0 @@
-export interface DebouncedSearchProps {
-    onSearch: (query: string) => void
-    Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
-    placeholder?: string
-    inputClass?: string
-    containerClass?: string
-    iconClass?: string
-    children?: React.ReactNode
-    debounceTimeout?: number
-    clearSearch?: boolean
-    showClearIcon?: boolean
-    autoFocus?: boolean
-}

package/src/Common/DebouncedSearch/Utils.ts

@@ -1,19 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-export function useDebouncedEffect(callback, delay, deps: unknown[] = []) {
-    // function will be executed only after the specified time once the user stops firing the event.
-    const firstUpdate = useRef(true)
-    useEffect(() => {
-        if (firstUpdate.current) {
-            firstUpdate.current = false
-            return
-        }
-        const handler = setTimeout(() => {
-            callback()
-        }, delay)
-
-        return () => {
-            clearTimeout(handler)
-        }
-    }, [delay, ...deps])
-}

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

@@ -1,61 +0,0 @@
-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'
-
-jest.mock('../../helpers/Helpers', () => ({
-    useDebouncedEffect: jest.fn().mockImplementation((fn) => fn()),
-}))
-
-describe('When DebouncedSearch mounts', () => {
-    it('should have a input field', () => {
-        render(<DebouncedSearch onSearch={jest.fn()} />)
-        expect(screen.getByRole('textbox')).toBeTruthy()
-    })
-
-    it('should have a clear icon when clearSearch is true and user has typed something', () => {
-        const { getByTestId } = render(<DebouncedSearch onSearch={jest.fn()} clearSearch debounceTimeout={0} />)
-        fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } })
-        expect(getByTestId('clear-search')).toBeTruthy()
-    })
-
-    it('should call onSearch when input value changes', () => {
-        const onSearch = jest.fn()
-        render(<DebouncedSearch onSearch={onSearch} debounceTimeout={0} />)
-        fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } })
-        expect(onSearch).toHaveBeenCalled()
-    })
-
-    it('should clear input value when clear icon is clicked', () => {
-        const { container } = render(<DebouncedSearch onSearch={jest.fn()} clearSearch debounceTimeout={0} />)
-        fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } })
-        const inputBar = container.querySelector('input')
-        expect(inputBar.value).toBe('test')
-        fireEvent.click(screen.getByRole('button'))
-        expect(inputBar.value).toBe('')
-    })
-
-    it('should have a placeholder', () => {
-        render(<DebouncedSearch onSearch={jest.fn()} placeholder="test" />)
-        expect(screen.getByPlaceholderText('test')).toBeTruthy()
-    })
-
-    it('should not show clear icon when showClearIcon is false', () => {
-        render(<DebouncedSearch onSearch={jest.fn()} showClearIcon={false} />)
-        expect(screen.queryByRole('button')).toBeNull()
-    })
-
-    it('should have a custom Icon', () => {
-        const { container } = render(<DebouncedSearch onSearch={jest.fn()} Icon={ICClear} iconClass="icon-class" />)
-        expect(container.querySelector('.icon-class')).toBeTruthy()
-    })
-
-    it('should support children', () => {
-        render(
-            <DebouncedSearch onSearch={jest.fn()}>
-                <div>test</div>
-            </DebouncedSearch>,
-        )
-        expect(screen.getByText('test')).toBeTruthy()
-    })
-})

package/src/Common/DeleteComponentModal/DeleteComponent.tsx

@@ -1,95 +0,0 @@
-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'
-import { ConfirmationDialog, DeleteDialog } from '../Dialogs'
-import { ServerErrors } from '../ServerError'
-import { DeleteComponentProps } from './types'
-
-
-function DeleteComponent({
-    setDeleting,
-    toggleConfirmation,
-    deleteComponent,
-    title,
-    component,
-    payload,
-    confirmationDialogDescription = '',
-    redirectTo = false,
-    url = '',
-    reload,
-    configuration = '',
-    closeCustomComponent,
-}: DeleteComponentProps) {
-    const [showCannotDeleteDialogModal, setCannotDeleteDialogModal] = useState(false)
-    const { push } = useHistory()
-
-    async function handleDelete() {
-        setDeleting(true)
-        try {
-            await deleteComponent(payload)
-            toast.success('Successfully deleted')
-            toggleConfirmation(false)
-            if (redirectTo) {
-                push(url)
-            } else {
-                reload()
-            }
-            if (typeof closeCustomComponent === 'function') {
-                closeCustomComponent()
-            }
-        } catch (serverError) {
-            if (serverError instanceof ServerErrors && serverError.code === 500) {
-                setCannotDeleteDialogModal(true)
-            }
-        } finally {
-            setDeleting(false)
-        }
-    }
-
-    const handleConfirmation = () => {
-        setCannotDeleteDialogModal(false)
-        toggleConfirmation(false)
-        if (typeof closeCustomComponent === 'function') {
-            closeCustomComponent()
-        }
-    }
-
-    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 = () => {
-        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()}
-            {showCannotDeleteDialogModal && renderCannotDeleteDialogModal()}
-        </div>
-    )
-}
-
-export default DeleteComponent