@devtron-labs/devtron-fe-common-lib 0.0.63-beta-2 → 0.0.63-beta-5

package/src/Common/CustomInput/CustomInput.tsx

@@ -0,0 +1,135 @@
+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 fs-13 lh-20 fw-4 ${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

@@ -0,0 +1,32 @@
+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

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

package/src/Common/CustomTagSelector/PropagateTagInfo.tsx

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,84 @@
+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

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,198 @@
+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>
+    )
+}