@devtron-labs/devtron-fe-common-lib 0.0.62-beta-4 → 0.0.62-beta-6

package/src/Common/CustomInput/CustomInput.tsx

@@ -1,135 +0,0 @@
-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'
-
-// TODO: label association with input
-export function CustomInput({
-    name,
-    value,
-    error,
-    onChange,
-    onFocus = (e) => {},
-    label,
-    type = 'text',
-    disabled = false,
-    labelClassName = '',
-    placeholder = '',
-    tabIndex = 0,
-    dataTestid = '',
-    isRequiredField = false,
-    autoFocus = false,
-    rootClassName = '',
-    autoComplete = 'off',
-    helperText = '',
-    handleOnBlur,
-    readOnly = false,
-    noTrim = false,
-    ref,
-    onKeyPress,
-    defaultValue,
-    onKeyDown,
-    required,
-    additionalErrorInfo,
-    inputWrapClassName = '',
-    inputProps = {},
-}: CustomInputProps) {
-    function handleError(error: any): any[] {
-        if (!Array.isArray(error)) {
-            return [error]
-        }
-        return error
-    }
-
-    const onBlur = (event) => {
-        //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()
-            onChange(event)
-        }
-        if (typeof handleOnBlur === 'function') {
-            handleOnBlur(event)
-        }
-    }
-
-    const renderFormErrorWithIcon = (error: string) => {
-        return (
-            <div className="form__error" key={error}>
-                <ErrorIcon className="form__icon form__icon--error" />
-                {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)
-        }
-    }
-
-    const renderInputLabelConditionally = () => {
-        if (typeof label === 'string') {
-            return <span className={`${isRequiredField ? 'dc__required-field' : ''}`}>{label}</span>
-        } else {
-            return label
-        }
-    }
-
-    const renderInputLabel = () => {
-        if (!label) {
-            return null
-        } else {
-            return (
-                <label className={`form__label ${labelClassName}`} data-testid={`label-${dataTestid}`}>
-                    {renderInputLabelConditionally()}
-                </label>
-            )
-        }
-    }
-
-    return (
-        <div className={`flex column left top ${inputWrapClassName}`}>
-            {renderInputLabel()}
-            <input
-                data-testid={dataTestid}
-                type={type}
-                name={name}
-                autoComplete={autoComplete}
-                className={`form__input ${rootClassName}`}
-                onChange={(e) => {
-                    e.persist()
-                    onChange(e)
-                }}
-                onBlur={onBlur}
-                onFocus={onFocus}
-                placeholder={placeholder}
-                value={value}
-                disabled={disabled}
-                tabIndex={tabIndex}
-                autoFocus={autoFocus}
-                readOnly={readOnly}
-                ref={ref}
-                onKeyPress={onKeyPress}
-                defaultValue={defaultValue}
-                onKeyDown={onKeyDown}
-                required={required}
-                // Will be passing other props like other data attributes etc from inputProps
-                {...inputProps}
-            />
-
-            {getInputError()}
-            {helperText && (
-                <div className="form__text-field-info">
-                    <Info className="form__icon form__icon--info" />
-                    <p className="sentence-case">{helperText}</p>
-                </div>
-            )}
-        </div>
-    )
-}

package/src/Common/CustomInput/Types.ts

@@ -1,32 +0,0 @@
-import React, { HTMLInputTypeAttribute, InputHTMLAttributes } 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
-    inputWrapClassName?: string
-    inputProps?: InputHTMLAttributes<HTMLInputElement>
-}

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