@devtron-labs/devtron-fe-common-lib 0.0.53-beta-8 → 0.0.54-beta-1

package/src/Common/CustomInput/Types.ts

@@ -0,0 +1,31 @@
+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
+    inputWrapperClassName?: string
+}

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

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

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

package/src/Common/CustomTagSelector/Types.ts

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