@devtron-labs/devtron-fe-common-lib 0.0.6-beta-20 → 0.0.6-beta-22

package/src/Common/Checkbox.tsx

@@ -0,0 +1,49 @@
+import React, { Component } from 'react'
+
+export enum CHECKBOX_VALUE {
+    CHECKED = 'CHECKED',
+    INTERMEDIATE = 'INTERMEDIATE',
+}
+export interface CheckboxProps {
+    onChange: (event) => void
+    isChecked: boolean
+    value: 'CHECKED' | 'INTERMEDIATE'
+    disabled?: boolean
+    tabIndex?: number
+    rootClassName?: string
+    onClick?: (event) => void
+    id?: string
+}
+
+/*
+Valid States of Checkbox:
+1. disabled: true, checked: false, value: XXX
+2. disabled: true, checked: true, value: INTERMIDIATE
+3. disabled: true, checked: true, value: CHECKED
+4. disabled: true, checked: false, value: XXX
+5. disabled: false, checked: true,  value: INTERMIDIATE
+6. disabled: false, checked: true,  value: CHECKED
+*/
+export class Checkbox extends Component<CheckboxProps> {
+    render() {
+        let rootClassName = `${this.props.rootClassName ? this.props.rootClassName : ''}`
+        return (
+            <>
+                <label className={`dc__position-rel flex left cursor ${rootClassName}`} onClick={this.props?.onClick}>
+                    <input
+                        type="checkbox"
+                        className={'form__checkbox'}
+                        disabled={this.props.disabled}
+                        value={this.props.value}
+                        onChange={this.props.onChange}
+                        tabIndex={this.props.tabIndex}
+                        checked={this.props.isChecked}
+                        id={this.props.id}
+                    />
+                    <span className="form__checkbox-container"></span>
+                    <span className={`form__checkbox-label`}>{this.props.children}</span>
+                </label>
+            </>
+        )
+    }
+}

package/src/Common/Constants.ts

@@ -1,6 +1,12 @@
 export const RequestTimeout = 60000
 export const Host = process.env.REACT_APP_ORCHESTRATOR_ROOT
 
+export const DOCUMENTATION_HOME_PAGE = 'https://docs.devtron.ai'
+export const DOCUMENTATION = {
+    APP_TAGS: `${DOCUMENTATION_HOME_PAGE}/v/v0.6/usage/applications/create-application#tags`,
+    APP_OVERVIEW_TAGS: `${DOCUMENTATION_HOME_PAGE}/v/v0.6/usage/applications/overview#manage-tags`,
+}
+
 export const PATTERNS = {
   KUBERNETES_KEY_PREFIX: /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/,
   KUBERNETES_KEY_NAME: /^(([A-Za-z0-9][-A-Za-z0-9_.]*)?[A-Za-z0-9])$/,
@@ -10,4 +16,11 @@ export const PATTERNS = {
 
 export const ROUTES = {
   PROJECT_LIST_MIN: 'team/autocomplete',
-}
+}
+
+export enum KEY_VALUE {
+  KEY= 'key',
+  VALUE= 'value'
+}
+
+export const DEFAULT_TAG_DATA = { key: '', value: '', propagate: false, isInvalidKey: false, isInvalidValue: false }

package/src/Common/CustomTagSelector/PropagateTagInfo.tsx

@@ -3,12 +3,21 @@ 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() {
+export default function PropagateTagInfo({ isCreateApp }: { isCreateApp: boolean }) {
     const additionalInfo = () => {
         return (
             <div className="p-12 fs-13">
-                Use these tags to filter/identify resources via CLI or in other Kubernetes tools.
+                <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>
         )
     }
@@ -19,18 +28,18 @@ export default function PropagateTagInfo() {
             placement="top"
             Icon={InjectTag}
             heading={'Propagate tags to K8s resources'}
-            infoText={`Add a tag and click on the ⬡ icon to propagate tags as labels to Kubernetes resources.`}
+            infoText=""
             additionalContent={additionalInfo()}
             showCloseButton={true}
             trigger="click"
             interactive={true}
-            documentationLink={''}
-            documentationLinkText={'View Documentation'}
+            documentationLink={isCreateApp ? DOCUMENTATION.APP_TAGS : DOCUMENTATION.APP_OVERVIEW_TAGS}
+            documentationLinkText="View Documentation"
         >
-            <div className="flexbox">
+            <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 cursor" />
+                <Help className="icon-dim-16 mt-2 ml-4" />
             </div>
         </TippyCustomized>
     )

package/src/Common/CustomTagSelector/ResizableTagTextArea.tsx

@@ -0,0 +1,74 @@
+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,
+}: 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 = 'auto'
+        dependentRef.current.style.height = 'auto'
+        let nextHeight = refVar.current.scrollHeight
+        if (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'
+        dependentRef.current.style.height = nextHeight + 'px'
+    }
+
+    useThrottledEffect(reInitHeight, 500, [text])
+
+    const handleOnBlur = (event) => {
+        refVar.current.style.height = 'auto'
+        dependentRef.current.style.height = 'auto'
+        onBlur(event)
+    }
+
+    const handleOnFocus = (event) => {
+        reInitHeight()
+        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}
+        />
+    )
+}

package/src/Common/CustomTagSelector/TagDetails.tsx

@@ -1,11 +1,17 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import { ReactComponent as DeleteCross } from '../../Assets/Icon/ic-close.svg'
 import { ReactComponent as InjectTag } from '../../Assets/Icon/inject-tag.svg'
 import { TagDetailType } from '../Types'
 import { TagLabelValueSelector } from './TagLabelValueSelector'
+import { KEY_VALUE } from '../Constants'
+import { stopPropagation } from '../Helper'
 
-export default function TagDetails({ index, tagData, setTagData, removeTag }: TagDetailType) {
-    const deleteTag = (): void => {
+export default function TagDetails({ index, tagData, setTagData, removeTag, tabIndex = 1 }: TagDetailType) {
+    const keyRef = useRef(null)
+    const valueRef = useRef(null)
+
+    const deleteTag = (e): void => {
+        stopPropagation(e)
         removeTag(index)
     }
     const propagateTagToResource = (): void => {
@@ -16,7 +22,7 @@ export default function TagDetails({ index, tagData, setTagData, removeTag }: Ta
     return (
         <div className="flexbox mb-8">
             <div
-                className={`dc__border pl-4 pr-4 br-4 mr-8 pointer ${tagData.propagate ? 'bcn-7' : ''}`}
+                className={`dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ${tagData.propagate ? 'bcn-7' : ''}`}
                 onClick={propagateTagToResource}
             >
                 <InjectTag className={`icon-dim-20 mt-4 ${tagData.propagate ? 'scn-0' : ''}`} />
@@ -25,17 +31,23 @@ export default function TagDetails({ index, tagData, setTagData, removeTag }: Ta
                 selectedTagIndex={index}
                 tagData={tagData}
                 setTagData={setTagData}
-                type="key"
+                tagInputType={KEY_VALUE.KEY}
                 placeholder="Enter key"
+                tabIndex={tabIndex - 1}
+                refVar={keyRef}
+                dependentRef={valueRef}
             />
             <TagLabelValueSelector
                 selectedTagIndex={index}
                 tagData={tagData}
                 setTagData={setTagData}
-                type="value"
+                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" onClick={deleteTag}>
+            <div className="dc__border pl-4 pr-4 dc__right-radius-4 pointer flex top" onClick={deleteTag}>
                 <DeleteCross className="icon-dim-20 mt-4" />
             </div>
         </div>

package/src/Common/CustomTagSelector/TagLabelSelect.tsx

@@ -3,8 +3,9 @@ import PropagateTagInfo from './PropagateTagInfo'
 import { ReactComponent as Add } from '../../Assets/Icon/ic-add.svg'
 import TagDetails from './TagDetails'
 import { TagLabelSelectType } from '../Types'
+import { DEFAULT_TAG_DATA } from '../Constants'
 
-export const TagLabelSelect = ({ labelTags, setLabelTags }: TagLabelSelectType) => {
+export const TagLabelSelect = ({ isCreateApp, labelTags, setLabelTags, tabIndex = 0 }: TagLabelSelectType) => {
     const setTagData = (index, tagValue): void => {
         const _tags = [...labelTags]
         _tags[index] = tagValue
@@ -13,7 +14,7 @@ export const TagLabelSelect = ({ labelTags, setLabelTags }: TagLabelSelectType)
 
     const addNewTag = (): void => {
         const _tags = [...labelTags]
-        _tags.splice(0, 0, { key: '', value: '', propagate: false, isInvalidKey: false, isInvalidValue: false })
+        _tags.splice(0, 0, DEFAULT_TAG_DATA)
         setLabelTags(_tags)
     }
 
@@ -27,7 +28,7 @@ export const TagLabelSelect = ({ labelTags, setLabelTags }: TagLabelSelectType)
         <div>
             <div className="flexbox dc__content-space mb-8">
                 <span>Tags</span>
-                <PropagateTagInfo />
+                <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}>
@@ -41,6 +42,7 @@ export const TagLabelSelect = ({ labelTags, setLabelTags }: TagLabelSelectType)
                             tagData={tagData}
                             setTagData={setTagData}
                             removeTag={removeTag}
+                            tabIndex={tabIndex + (index + 2)}
                         />
                     ))}
                 </div>

package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -2,8 +2,11 @@ import React, { useState, useEffect } from 'react'
 import { TagLabelValueSelectorType } from '../Types'
 import PopupMenu from '../PopupMenu'
 import { ValidationRules } from './ValidationRules'
-import { ReactComponent as ErrorCross } from '../../Assets/Icon/ic-close.svg'
+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'
 
 export const TagLabelValueSelector = ({
     selectedTagIndex,
@@ -11,27 +14,35 @@ export const TagLabelValueSelector = ({
     setTagData,
     tagOptions,
     isRequired,
-    type,
+    tagInputType,
     placeholder,
+    tabIndex = null,
+    refVar,
+    dependentRef,
 }: TagLabelValueSelectorType) => {
     const [selectedValue, setSelectedValue] = useState<string>('')
-    const [isPopupOpen, togglePopup] = useState<boolean>(false)
-
+    const [activeElement, setActiveElement] = useState<string>('')
     const validationRules = new ValidationRules()
 
     useEffect(() => {
-        setSelectedValue(tagData?.[type] || '')
-    }, [selectedTagIndex, tagData, type])
+        setSelectedValue(tagData?.[tagInputType] || '')
+    }, [selectedTagIndex, tagData, tagInputType])
 
+    const handleOnFocus = (e) => {
+        setTimeout(() => {
+            setActiveElement(`tag-${tagInputType}-${selectedTagIndex}`)
+        }, 300)
+    }
     const handleOnBlur = (e) => {
+        setActiveElement('')
         if (
             !e.relatedTarget ||
             !e.relatedTarget.classList.value ||
             !e.relatedTarget.classList.value.includes(`tag-${selectedTagIndex}-class`)
         ) {
             const _tagData = { ...tagData }
-            _tagData[type] = selectedValue
-            if (type === 'key') {
+            _tagData[tagInputType] = selectedValue
+            if (tagInputType === KEY_VALUE.KEY) {
                 _tagData.isInvalidKey = selectedValue
                     ? !validationRules.propagateTagKey(selectedValue).isValid
                     : _tagData.value !== ''
@@ -51,15 +62,16 @@ export const TagLabelValueSelector = ({
     }
 
     const onSelectValue = (e): void => {
+        stopPropagation(e)
         const _tagData = { ...tagData }
-        _tagData[type] = e.currentTarget.dataset.key
+        _tagData[tagInputType] = e.currentTarget.dataset.key
         setTagData(selectedTagIndex, _tagData)
     }
 
     const renderValidationsSuggestions = (): JSX.Element => {
         let field = { isValid: true, messages: [] }
-        if (type === 'key') {
-            if (selectedValue || tagData.value || tagData.description) {
+        if (tagInputType === KEY_VALUE.KEY) {
+            if (selectedValue || tagData.value) {
                 field = validationRules.propagateTagKey(selectedValue)
             }
         } else if (isRequired || selectedValue) {
@@ -67,19 +79,19 @@ export const TagLabelValueSelector = ({
         }
         if (!field.isValid) {
             return (
-                <div className="p-4">
+                <div className="p-4" onClick={stopPropagation}>
                     {field.messages.map((error) => (
-                        <div key={error} className="flexbox p-4">
+                        <div key={error} className="flexbox pr-4 pl-4">
                             <span>
-                                <ErrorCross className="icon-dim-16 fcr-5 mt-3 mr-4" />
+                                <ErrorCross className="icon-dim-14 scr-5 mt-3 mr-4" />
                             </span>
                             <span>{error}</span>
                         </div>
                     ))}
-                    {type === 'key' && (
-                        <div className="flexbox p-4">
+                    {tagInputType === KEY_VALUE.KEY && (
+                        <div className="flexbox pr-4 pl-4">
                             <span>
-                                <Info className="icon-dim-16 mt-3 mr-4" />
+                                <Info className="icon-dim-14 mt-3 mr-4" />
                             </span>
                             <span className="dc__italic-font-style">Key format: prefix/name or name</span>
                         </div>
@@ -111,25 +123,32 @@ export const TagLabelValueSelector = ({
     }
 
     return (
-        <PopupMenu onToggleCallback={(isOpen) => togglePopup(isOpen)} autoClose>
-            <PopupMenu.Button
-                rootClassName={`h-32 ${
-                    type === 'key'
-                        ? `dc__no-right-radius`
-                        : `dc__no-border-radius dc__no-right-border dc__no-left-border`
-                } ${tagData[type === 'key' ? 'isInvalidKey' : 'isInvalidValue'] ? 'er-5 bw-1' : ''}`}
-            >
-                <input
-                    type="text"
-                    className="form__input pt-4-imp pb-4-imp dc__no-border"
+        <PopupMenu autoClose autoPosition>
+            <PopupMenu.Button rootClassName="dc__bg-n50 flex top dc__no-border">
+                <ResizableTagTextArea
+                    minHeight={30}
+                    maxHeight={80}
+                    className={`form__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}
                 />
             </PopupMenu.Button>
-            <PopupMenu.Body rootClassName={`tag-${selectedTagIndex}-class`} autoWidth={true}>
-                {isPopupOpen && renderSuggestions()}
+            <PopupMenu.Body rootClassName={`tag-${selectedTagIndex}-class`} autoWidth={true} preventWheelDisable={true}>
+                {activeElement === `tag-${tagInputType}-${selectedTagIndex}` && renderSuggestions()}
             </PopupMenu.Body>
         </PopupMenu>
     )

package/src/Common/Error.tsx

@@ -3,7 +3,13 @@ import EmptyState from './EmptyState/EmptyState'
 import notAuthorized from '../Assets/Img/ic-not-authorized.svg'
 import Reload from './Reload'
 
-export class ErrorScreenManager extends Component<{ code?: number; reload?: (...args) => any; subtitle?: string ;reloadClass?: string}> {
+export class ErrorScreenManager extends Component<{
+    code?: number
+    reload?: (...args) => any
+    subtitle?: React.ReactChild
+    subtitleClass?: string
+    reloadClass?: string
+}> {
     getMessage() {
         switch (this.props.code) {
             case 400:
@@ -11,7 +17,9 @@ export class ErrorScreenManager extends Component<{ code?: number; reload?: (...
             case 401:
                 return 'Unauthorized'
             case 403:
-                return <ErrorScreenNotAuthorized subtitle={this.props.subtitle} />
+                return (
+                    <ErrorScreenNotAuthorized subtitle={this.props.subtitle} subtitleClass={this.props.subtitleClass} />
+                )
             case 404:
                 return 'Not Found'
             case 500:
@@ -34,7 +42,7 @@ export class ErrorScreenManager extends Component<{ code?: number; reload?: (...
     }
 }
 
-export class ErrorScreenNotAuthorized extends Component<{ subtitle: string }> {
+export class ErrorScreenNotAuthorized extends Component<{ subtitle: React.ReactChild; subtitleClass?: string }> {
     render() {
         return (
             <EmptyState>
@@ -44,7 +52,7 @@ export class ErrorScreenNotAuthorized extends Component<{ subtitle: string }> {
                 <EmptyState.Title>
                     <h3 className="title">Not authorized</h3>
                 </EmptyState.Title>
-                <EmptyState.Subtitle>
+                <EmptyState.Subtitle className={this.props.subtitleClass}>
                     {this.props.subtitle
                         ? this.props.subtitle
                         : "Looks like you don't have access to information on this page. Please contact your manager to request access."}

package/src/Common/Helper.tsx

@@ -2,6 +2,7 @@ import { ServerErrors } from './ServerError'
 import { toast } from 'react-toastify'
 import * as Sentry from '@sentry/browser'
 import { toastAccessDenied } from './ToastBody'
+import { useEffect, useRef } from 'react'
 
 export function showError(serverError, showToastOnUnknownError = true, hideAccessError = false) {
     if (serverError instanceof ServerErrors && Array.isArray(serverError.errors)) {
@@ -52,3 +53,25 @@ export function sortCallback(key: string, a: any, b: any, isCaseSensitive?: bool
     }
     return 0
 }
+
+export const stopPropagation = (event): void => {
+    event.stopPropagation()
+}
+
+export function useThrottledEffect(callback, delay, deps = []) {
+    //function will be executed only once in a given time interval.
+    const lastRan = useRef(Date.now())
+
+    useEffect(() => {
+        const handler = setTimeout(function () {
+            if (Date.now() - lastRan.current >= delay) {
+                callback()
+                lastRan.current = Date.now()
+            }
+        }, delay - (Date.now() - lastRan.current))
+
+        return () => {
+            clearTimeout(handler)
+        }
+    }, [delay, ...deps])
+}

package/src/Common/Modals/Modal.tsx

@@ -1,53 +1,62 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from 'react'
 import ReactDOM from 'react-dom'
-export const Modal = ({ style = {}, children, modal = false, rootClassName = "", onClick = null, callbackRef = null }) => {
+export const Modal = ({
+    style = {},
+    children,
+    modal = false,
+    rootClassName = '',
+    onClick = null,
+    callbackRef = null,
+    preventWheelDisable = false,
+}) => {
     const innerRef = React.useRef(null)
     function handleClick(e) {
         if (typeof onClick !== 'function') return
-        if (innerRef && innerRef.current.contains(e.target)) {
+        if (innerRef && innerRef.current?.contains(e.target)) {
             onClick(e, 'in')
-        }
-        else {
+        } else {
             onClick(e, 'out')
         }
     }
 
     function disableWheel(e) {
-        if (innerRef && innerRef.current.contains(e.target)) {
-            if (innerRef.current.clientHeight === innerRef.current.scrollHeight) {
-                e.preventDefault();
+        if (!preventWheelDisable) {
+            if (innerRef?.current.contains(e.target)) {
+                if (innerRef.current.clientHeight === innerRef.current.scrollHeight) {
+                    e.preventDefault()
+                }
+            } else {
+                e.preventDefault()
             }
         }
-        else {
-            e.preventDefault();
-        }
     }
     useEffect(() => {
         document.addEventListener('click', handleClick)
-        let modal = document.getElementById("visible-modal");
-        if (modal) modal.classList.add("show")
-        document.body.addEventListener('wheel', disableWheel, { passive: false })
+        let modal = document.getElementById('visible-modal')
+        if (modal) modal.classList.add('show')
+        if (!preventWheelDisable) document.body.addEventListener('wheel', disableWheel, { passive: false })
         return () => {
-            document.body.removeEventListener('wheel', disableWheel)
+            if (!preventWheelDisable) document.body.removeEventListener('wheel', disableWheel)
             document.removeEventListener('click', handleClick)
-            if (modal) modal.classList.remove("show")
-
+            if (modal) modal.classList.remove('show')
         }
-    }, []
-    )
+    }, [])
     return ReactDOM.createPortal(
-        <div tabIndex={0} onClick={onClick}
-            ref={
-                el => {
-                    if (typeof callbackRef === 'function') {
-                        callbackRef(el);
-                    }
-                    innerRef.current = el;
+        <div
+            tabIndex={0}
+            onClick={onClick}
+            ref={(el) => {
+                if (typeof callbackRef === 'function') {
+                    callbackRef(el)
                 }
-            }
+                innerRef.current = el
+            }}
             id="popup"
             className={`${rootClassName} popup ${modal ? 'modal' : ''}`}
-            style={{ ...style }}>
+            style={{ ...style }}
+        >
             {children}
-        </div>, document.getElementById('visible-modal'));
-}
+        </div>,
+        document.getElementById('visible-modal'),
+    )
+}