@devtron-labs/devtron-fe-common-lib 0.0.51 → 0.0.52-beta-1

package/src/Common/CustomInput/Types.ts

@@ -1,30 +0,0 @@
-import React, { HTMLInputTypeAttribute } from 'react'
-
-export interface CustomInputProps {
-    name: string
-    value: string | number
-    onChange: (e: any) => void
-    onFocus?: (e: any) => void
-    autoComplete?: string
-    label?: string |  React.ReactNode
-    labelClassName?: string
-    type?: HTMLInputTypeAttribute
-    disabled?: boolean
-    placeholder?: string
-    tabIndex?: number
-    dataTestid?: string
-    isRequiredField?: boolean
-    autoFocus?: boolean
-    rootClassName?: string
-    error?: string[] | string
-    helperText?: string
-    handleOnBlur?: (e) => void
-    readOnly?: boolean
-    noTrim?: boolean
-    ref?: React.LegacyRef<HTMLInputElement>
-    onKeyPress?: (e) => void
-    defaultValue?: string | number | ReadonlyArray<string> | undefined
-    onKeyDown?: (e) => void
-    required?: boolean
-    additionalErrorInfo?: React.ReactNode
-}

package/src/Common/CustomInput/index.ts

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

package/src/Common/CustomTagSelector/PropagateTagInfo.tsx

@@ -1,46 +0,0 @@
-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'
-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>
-            </div>
-        )
-    }
-    return (
-        <TippyCustomized
-            theme={TippyTheme.white}
-            className="w-300"
-            placement="top"
-            Icon={InjectTag}
-            heading={'Propagate tags to K8s resources'}
-            infoText=""
-            additionalContent={additionalInfo()}
-            showCloseButton={true}
-            trigger="click"
-            interactive={true}
-            documentationLink={isCreateApp ? DOCUMENTATION.APP_TAGS : DOCUMENTATION.APP_OVERVIEW_TAGS}
-            documentationLinkText="View Documentation"
-        >
-            <div className="flexbox cursor">
-                <InjectTag className="icon-dim-16 mt-2 mr-4" />
-                <span>Propagate tags</span>
-                <Help className="icon-dim-16 mt-2 ml-4" />
-            </div>
-        </TippyCustomized>
-    )
-}

package/src/Common/CustomTagSelector/ResizableTagTextArea.tsx

@@ -1,84 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { useThrottledEffect } from '../Helper'
-import { ResizableTagTextAreaProps } from './Types'
-
-export function ResizableTagTextArea({
-    className,
-    minHeight,
-    maxHeight,
-    value,
-    onChange,
-    onBlur,
-    onFocus,
-    placeholder,
-    tabIndex,
-    refVar,
-    dependentRef,
-    dataTestId,
-    handleKeyDown,
-}: ResizableTagTextAreaProps) {
-    const [text, setText] = useState('')
-
-    useEffect(() => {
-        setText(value)
-    }, [value])
-
-    const handleChange = (event) => {
-        setText(event.target.value)
-        onChange(event)
-    }
-
-    const reInitHeight = () => {
-        if (document.activeElement !== refVar.current) return
-        refVar.current.style.height = minHeight + 'px'
-        if (dependentRef) {
-            dependentRef.current.style.height = minHeight + 'px'
-        }
-        let nextHeight = refVar.current.scrollHeight
-        if (dependentRef && nextHeight < dependentRef.current.scrollHeight) {
-            nextHeight = dependentRef.current.scrollHeight
-        }
-        if (minHeight && nextHeight < minHeight) {
-            nextHeight = minHeight
-        }
-        if (maxHeight && nextHeight > maxHeight) {
-            nextHeight = maxHeight
-        }
-        refVar.current.style.height = nextHeight + 'px'
-        if (dependentRef) {
-            dependentRef.current.style.height = nextHeight + 'px'
-        }
-    }
-
-    useThrottledEffect(reInitHeight, 500, [text])
-
-    const handleOnBlur = (event) => {
-        refVar.current.style.height = minHeight + 'px'
-        if (dependentRef) {
-            dependentRef.current.style.height = minHeight + 'px'
-        }
-        onBlur && onBlur(event)
-    }
-
-    const handleOnFocus = (event) => {
-        reInitHeight()
-        onFocus && onFocus(event)
-    }
-
-    return (
-        <textarea
-            rows={1}
-            ref={refVar}
-            value={text}
-            placeholder={placeholder}
-            className={`${className || ''} lh-20`}
-            style={{ resize: 'none' }}
-            onChange={handleChange}
-            onBlur={handleOnBlur}
-            onFocus={handleOnFocus}
-            tabIndex={tabIndex}
-            data-testid={dataTestId}
-            onKeyDown={handleKeyDown}
-        />
-    )
-}

package/src/Common/CustomTagSelector/TagDetails.tsx

@@ -1,76 +0,0 @@
-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'
-import { KEY_VALUE } from '../Constants'
-import { stopPropagation } from '../Helper'
-import { TagDetailType } from './Types'
-import { ValidationRules } from './ValidationRules'
-
-export const TagDetails = ({
-    index,
-    tagData,
-    setTagData,
-    removeTag,
-    tabIndex = 1,
-    suggestedTagsOptions,
-}: TagDetailType) => {
-    const keyRef = useRef(null)
-    const valueRef = useRef(null)
-    const validationRules = new ValidationRules()
-
-    const deleteTag = (e): void => {
-        stopPropagation(e)
-        removeTag(index)
-    }
-    const propagateTagToResource = (): void => {
-        const _tagData = { ...tagData }
-        _tagData.propagate = !_tagData.propagate
-        if (_tagData.propagate) {
-            _tagData.isInvalidKey = _tagData.isInvalidKey || !_tagData.key
-            _tagData.isInvalidValue = _tagData.isInvalidValue || !_tagData.value
-        } else {
-            _tagData.isInvalidKey =
-                _tagData.key || _tagData.value ? !validationRules.propagateTagKey(_tagData.key).isValid : false
-            _tagData.isInvalidValue = _tagData.value
-                ? !validationRules.propagateTagValue(_tagData.value, _tagData.key).isValid
-                : false
-        }
-        setTagData(index, _tagData)
-    }
-    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' : ''}`}
-                onClick={propagateTagToResource}
-                data-testid={`propagate-tag-${index}`}
-            >
-                <InjectTag className={`icon-dim-20 mt-4 ${tagData.propagate ? 'scn-0' : ''}`} />
-            </div>
-            <TagLabelValueSelector
-                selectedTagIndex={index}
-                tagData={tagData}
-                setTagData={setTagData}
-                tagInputType={KEY_VALUE.KEY}
-                placeholder="Enter key"
-                tabIndex={tabIndex - 1}
-                refVar={keyRef}
-                dependentRef={valueRef}
-                tagOptions={suggestedTagsOptions}
-            />
-            <TagLabelValueSelector
-                selectedTagIndex={index}
-                tagData={tagData}
-                setTagData={setTagData}
-                tagInputType={KEY_VALUE.VALUE}
-                placeholder="Enter value"
-                tabIndex={tabIndex}
-                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}`}>
-                <DeleteCross className="icon-dim-20 mt-4" />
-            </div>
-        </div>
-    )
-}

package/src/Common/CustomTagSelector/TagLabelSelect.tsx

@@ -1,61 +0,0 @@
-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) => {
-    const setTagData = (index, tagValue): void => {
-        const _tags = [...labelTags]
-        const _tagValue = tagValue
-        if(_tagValue.key.startsWith("devtron.ai/")){
-            _tagValue.propagate = false
-        }
-        _tags[index] = _tagValue
-        setLabelTags(_tags)
-    }
-
-    const addNewTag = (): void => {
-        const _tags = [...labelTags]
-        _tags.splice(0, 0, DEFAULT_TAG_DATA)
-        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 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">
-                    <Add className="icon-dim-20 fcb-5" /> Add tag
-                </div>
-                <div className="mb-8" data-testid="tag-rows-container">
-                    {labelTags?.map((tagData, index) => (
-                        <TagDetails
-                            key={`tag-${index}`}
-                            index={index}
-                            tagData={tagData}
-                            setTagData={setTagData}
-                            removeTag={removeTag}
-                            tabIndex={tabIndex + (index + 2)}
-                        />
-                    ))}
-                </div>
-            </div>
-        </div>
-    )
-}

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   
-}