@devtron-labs/devtron-fe-common-lib 0.0.55-beta-1 → 0.0.55-beta-2

package/src/Common/CustomTagSelector/ValidationRules.ts

@@ -0,0 +1,58 @@
+import { PATTERNS } from '../Constants'
+
+const validateTagValue = (value: string): string[] => {
+    const errorList = []
+    if (value.length > 63) {
+        errorList.push('Can be max 63 characters')
+    }
+    const firstLastAlphanumeric = PATTERNS.START_END_ALPHANUMERIC.test(value)
+    if (!firstLastAlphanumeric) {
+        errorList.push('Must start and end with an alphanumeric character')
+    }
+    const validValue = PATTERNS.ALPHANUMERIC_WITH_SPECIAL_CHAR.test(value)
+    if (!validValue) {
+        errorList.push('Can only contain alphanumeric chars and (-), (_), (.)')
+    }
+    return errorList
+}
+export class ValidationRules {
+    propagateTagKey = (key: string): { isValid: boolean; messages: string[] } => {
+        const errorList = []
+        if (!key) {
+            errorList.push('Key is required')
+        } else {
+            if(!key.startsWith("devtron.ai/")){
+                const re = new RegExp('/', 'g')
+                const noOfSlashInKey = key.match(re)?.length
+                if (noOfSlashInKey > 1) {
+                    errorList.push('Key: Max 1 ( / ) allowed')
+                } else if (noOfSlashInKey === 1) {
+                    const [prefix, name] = key.split('/')
+                    errorList.push(...validateTagValue(name).map((error) => `Name: ${error}`))
+                    if (prefix.length > 253) {
+                        errorList.push('Prefix: Can be max 253 characters')
+                    }
+                    const validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix)
+                    if (!validPrefix) {
+                        errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)')
+                    }
+                } else {
+                    errorList.push(...validateTagValue(key).map((error) => `Name: ${error}`))
+                }
+            }
+        }
+        return { isValid: errorList.length === 0, messages: errorList }
+    }
+
+    propagateTagValue = (value: string, key: string): { isValid: boolean; messages: string[] } => {
+        const errorList = []
+        if (!value) {
+            errorList.push('Value is required')
+        } else {
+            if(!key.startsWith("devtron.ai/")){
+                errorList.push(...validateTagValue(value))
+            }
+        }
+        return { isValid: errorList.length === 0, messages: errorList }
+    }
+}

package/src/Common/CustomTagSelector/index.ts

@@ -0,0 +1,6 @@
+export {default as PropagateTagInfo} from './PropagateTagInfo'
+export * from './TagDetails'
+export * from './TagLabelSelect'
+export * from './TagLabelValueSelector'
+export * from './ResizableTagTextArea'
+export * from './Types'

package/src/Common/DebouncedSearch/DebouncedSearch.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from 'react'
+import { useDebouncedEffect } from './Utils'
+import { ReactComponent as ICClear } from '../../Assets/Icon/ic-error-cross.svg'
+import { DebouncedSearchProps } from './Types'
+
+/**
+ * @param onSearch - Callback function to be called on search
+ * @param Icon - (Optional) Icon to be shown before the input
+ * @param iconClass - (Optional) Class for the icon
+ * @param children - (Optional) In case we want to add another button or any other element
+ * @param placeholder - (Optional) Placeholder for the input
+ * @param containerClass - (Optional) Class for the container
+ * @param inputClass - (Optional) Class for the input field
+ * @param debounceTimeout - (Optional) Timeout for the debounce with default value of 500ms
+ * @param clearSearch - (Optional) To clear the search text
+ * @param showClearIcon - (Optional) To show the clear icon default value is true
+ */
+export default function DebouncedSearch({
+    onSearch,
+    Icon,
+    children,
+    placeholder,
+    containerClass = '',
+    iconClass = '',
+    inputClass = '',
+    debounceTimeout = 500,
+    clearSearch,
+    showClearIcon = true,
+    autoFocus = true,
+}: DebouncedSearchProps) {
+    const [searchText, setSearchText] = useState<string>('')
+
+    useEffect(() => {
+        setSearchText('')
+    }, [clearSearch])
+
+    const handleSearchTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSearchText(e.target.value)
+    }
+
+    const handleClearSearch = () => {
+        setSearchText('')
+    }
+
+    useDebouncedEffect(() => onSearch(searchText), debounceTimeout, [searchText])
+
+    return (
+        <div className={containerClass}>
+            {Icon && <Icon className={iconClass} />}
+
+            <input
+                type="text"
+                className={inputClass}
+                placeholder={placeholder ?? 'Search'}
+                value={searchText}
+                onChange={handleSearchTextChange}
+                autoFocus={autoFocus}
+                data-testid="debounced-search"
+            />
+
+            {showClearIcon && !!searchText && (
+                <button
+                    type="button"
+                    className="dc__outline-none-imp dc__no-border p-0 bc-n50 flex"
+                    onClick={handleClearSearch}
+                    data-testid="clear-search"
+                >
+                    <ICClear className="icon-dim-20 icon-n6" />
+                </button>
+            )}
+
+            {/* In case we want to add another button or something  */}
+            {children}
+        </div>
+    )
+}

package/src/Common/DebouncedSearch/Types.ts

@@ -0,0 +1,13 @@
+export interface DebouncedSearchProps {
+    onSearch: (query: string) => void
+    Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
+    placeholder?: string
+    inputClass?: string
+    containerClass?: string
+    iconClass?: string
+    children?: React.ReactNode
+    debounceTimeout?: number
+    clearSearch?: boolean
+    showClearIcon?: boolean
+    autoFocus?: boolean
+}

package/src/Common/DebouncedSearch/Utils.ts

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'react'
+
+export function useDebouncedEffect(callback, delay, deps: unknown[] = []) {
+    // function will be executed only after the specified time once the user stops firing the event.
+    const firstUpdate = useRef(true)
+    useEffect(() => {
+        if (firstUpdate.current) {
+            firstUpdate.current = false
+            return
+        }
+        const handler = setTimeout(() => {
+            callback()
+        }, delay)
+
+        return () => {
+            clearTimeout(handler)
+        }
+    }, [delay, ...deps])
+}

package/src/Common/DebouncedSearch/__tests__/DebouncedSearch.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ReactComponent as ICClear } from '../../../../assets/icons/ic-error.svg'
+import DebouncedSearch from '../DebouncedSearch'
+
+jest.mock('../../helpers/Helpers', () => ({
+    useDebouncedEffect: jest.fn().mockImplementation((fn) => fn()),
+}))
+
+describe('When DebouncedSearch mounts', () => {
+    it('should have a input field', () => {
+        render(<DebouncedSearch onSearch={jest.fn()} />)
+        expect(screen.getByRole('textbox')).toBeTruthy()
+    })
+
+    it('should have a clear icon when clearSearch is true and user has typed something', () => {
+        const { getByTestId } = render(<DebouncedSearch onSearch={jest.fn()} clearSearch debounceTimeout={0} />)
+        fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } })
+        expect(getByTestId('clear-search')).toBeTruthy()
+    })
+
+    it('should call onSearch when input value changes', () => {
+        const onSearch = jest.fn()
+        render(<DebouncedSearch onSearch={onSearch} debounceTimeout={0} />)
+        fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } })
+        expect(onSearch).toHaveBeenCalled()
+    })
+
+    it('should clear input value when clear icon is clicked', () => {
+        const { container } = render(<DebouncedSearch onSearch={jest.fn()} clearSearch debounceTimeout={0} />)
+        fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } })
+        const inputBar = container.querySelector('input')
+        expect(inputBar.value).toBe('test')
+        fireEvent.click(screen.getByRole('button'))
+        expect(inputBar.value).toBe('')
+    })
+
+    it('should have a placeholder', () => {
+        render(<DebouncedSearch onSearch={jest.fn()} placeholder="test" />)
+        expect(screen.getByPlaceholderText('test')).toBeTruthy()
+    })
+
+    it('should not show clear icon when showClearIcon is false', () => {
+        render(<DebouncedSearch onSearch={jest.fn()} showClearIcon={false} />)
+        expect(screen.queryByRole('button')).toBeNull()
+    })
+
+    it('should have a custom Icon', () => {
+        const { container } = render(<DebouncedSearch onSearch={jest.fn()} Icon={ICClear} iconClass="icon-class" />)
+        expect(container.querySelector('.icon-class')).toBeTruthy()
+    })
+
+    it('should support children', () => {
+        render(
+            <DebouncedSearch onSearch={jest.fn()}>
+                <div>test</div>
+            </DebouncedSearch>,
+        )
+        expect(screen.getByText('test')).toBeTruthy()
+    })
+})

package/src/Common/DeleteComponentModal/DeleteComponent.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react'
+import { useHistory } from 'react-router-dom'
+import { toast } from 'react-toastify'
+import info from '../../Assets/Icon/ic-info-filled.svg'
+import { ConfirmationDialog, DeleteDialog } from '../Dialogs'
+import { ServerErrors } from '../ServerError'
+import { DeleteComponentProps } from './types'
+
+
+function DeleteComponent({
+    setDeleting,
+    toggleConfirmation,
+    deleteComponent,
+    title,
+    component,
+    payload,
+    confirmationDialogDescription = '',
+    redirectTo = false,
+    url = '',
+    reload,
+    configuration = '',
+    closeCustomComponent,
+}: DeleteComponentProps) {
+    const [showCannotDeleteDialogModal, setCannotDeleteDialogModal] = useState(false)
+    const { push } = useHistory()
+
+    async function handleDelete() {
+        setDeleting(true)
+        try {
+            await deleteComponent(payload)
+            toast.success('Successfully deleted')
+            toggleConfirmation(false)
+            if (redirectTo) {
+                push(url)
+            } else {
+                reload()
+            }
+            if (typeof closeCustomComponent === 'function') {
+                closeCustomComponent()
+            }
+        } catch (serverError) {
+            if (serverError instanceof ServerErrors && serverError.code === 500) {
+                setCannotDeleteDialogModal(true)
+            }
+        } finally {
+            setDeleting(false)
+        }
+    }
+
+    const handleConfirmation = () => {
+        setCannotDeleteDialogModal(false)
+        toggleConfirmation(false)
+        if (typeof closeCustomComponent === 'function') {
+            closeCustomComponent()
+        }
+    }
+
+    const renderCannotDeleteDialogModal = () => {
+        return (
+            <ConfirmationDialog className="confirmation-dialog__body--w-360">
+                <ConfirmationDialog.Icon src={info} />
+                <ConfirmationDialog.Body title={`Cannot delete ${component} '${title}'`} />
+                <p className="fs-13 cn-7 ">{confirmationDialogDescription}</p>
+                <ConfirmationDialog.ButtonGroup>
+                    <button type="button" className="cta" onClick={handleConfirmation}>
+                        Okay
+                    </button>
+                </ConfirmationDialog.ButtonGroup>
+            </ConfirmationDialog>
+        )
+    }
+
+    const renderDeleteDialog = () => {
+        return (
+            <DeleteDialog
+                title={`Delete ${component} '${title}'`}
+                delete={handleDelete}
+                closeDelete={() => toggleConfirmation(false)}
+                dataTestId="delete-dialog"
+            >
+                <DeleteDialog.Description>
+                    <p>Are you sure you want to delete this {configuration ? configuration : component}? </p>
+                </DeleteDialog.Description>
+            </DeleteDialog>
+        )
+    }
+    return (
+        <div>
+            {!showCannotDeleteDialogModal && renderDeleteDialog()}
+            {showCannotDeleteDialogModal && renderCannotDeleteDialogModal()}
+        </div>
+    )
+}
+
+export default DeleteComponent

package/src/Common/DeleteComponentModal/types.ts

@@ -0,0 +1,15 @@
+export interface DeleteComponentProps {
+    setDeleting: (boolean) => void
+    toggleConfirmation: any
+    deleteComponent: (any) => Promise<any>
+    title: string
+    component: string
+    payload: any
+    confirmationDialogDescription?: string
+    redirectTo?: boolean
+    url?: string
+    reload?: () => void
+    configuration?: string
+    dataTestid?: string
+    closeCustomComponent?: () => void
+}

package/src/Common/DevtronProgressing/DevtronProgressing.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { ReactComponent as ICRotateDevtron } from '../../Assets/Icon/ic-rotate-devtron.svg'
+import { DevtronProgressingProps } from './types'
+
+export function DevtronProgressing({ classes, parentClasses }: DevtronProgressingProps): JSX.Element {
+    return (
+        <div className={parentClasses ? parentClasses : ''}>
+            <ICRotateDevtron className={classes ? classes : ''} />
+        </div>
+    )
+}

package/src/Common/DevtronProgressing/index.ts

@@ -0,0 +1 @@
+export * from './DevtronProgressing'

package/src/Common/DevtronProgressing/types.ts

@@ -0,0 +1,4 @@
+export interface DevtronProgressingProps {
+    classes?: string
+    parentClasses?: string
+}

package/src/Common/Dialogs/ConfirmationDialog.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { VisibleModal2 } from '../Modals/VisibleModal2'
+import { ConfirmationDialogBodyType, ConfirmationDialogButtonGroupType, ConfirmationDialogIconType, ConfirmationDialogType } from './Types'
+
+function ConfirmationDialog({ className = '', children }: ConfirmationDialogType) {
+    return (
+        <VisibleModal2 className="confirmation-dialog">
+            <div className={`confirmation-dialog__body ${className}`}>{children}</div>
+        </VisibleModal2>
+    )
+}
+
+function Icon({ src, className = '' }: ConfirmationDialogIconType) {
+    return <img src={src} className={`confirmation-dialog__icon ${className}`} alt="" />
+}
+
+function Body({ title, subtitle = null, children = null }: ConfirmationDialogBodyType) {
+    return (
+        <div className="flex left column ">
+            <h3 className="confirmation-dialog__title lh-1-5 dc__break-word w-100">{title}</h3>
+            {subtitle && <div className="confirmation-dialog__subtitle">{subtitle}</div>}
+            {children}
+        </div>
+    )
+}
+
+function ButtonGroup({ children }: ConfirmationDialogButtonGroupType) {
+    return <div className="flex right confirmation-dialog__button-group">{children}</div>
+}
+
+ConfirmationDialog.Icon = Icon
+ConfirmationDialog.Body = Body
+ConfirmationDialog.ButtonGroup = ButtonGroup
+export default ConfirmationDialog

package/src/Common/Dialogs/DeleteDialog.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import warn from '../../Assets/Img/delete-medium.svg'
+import { Progressing } from '../Progressing'
+import ConfirmationDialog from './ConfirmationDialog'
+import { DeleteDialogProps } from './Types'
+
+export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.FC<any> } = function (props) {
+    const handleDelete = (e: React.MouseEvent) => {
+        if (props.shouldStopPropagation) {
+            e.stopPropagation()
+        }
+
+        props.delete()
+    }
+
+    const handleModalClose = (e: React.MouseEvent) => {
+        if (props.shouldStopPropagation) {
+            e.stopPropagation()
+        }
+
+        props.closeDelete()
+    }
+
+    return (
+        <ConfirmationDialog className="confirmation-dialog__body--w-400">
+            <ConfirmationDialog.Icon src={warn} />
+            <ConfirmationDialog.Body title={props.title}>
+                <div className="fs-13 cn-7 lh-1-54 w-100">
+                    {props.description ? props.description : null}
+                    {props.children}
+                </div>
+            </ConfirmationDialog.Body>
+            <ConfirmationDialog.ButtonGroup>
+                <div className="flex right">
+                    <button
+                        type="button"
+                        className="cta cancel cta-cd-delete-modal ml-16"
+                        onClick={handleModalClose}
+                        disabled={props.apiCallInProgress}
+                        data-testid="dialog-cancel"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        type="button"
+                        className="cta delete cta-cd-delete-modal ml-16"
+                        onClick={handleDelete}
+                        disabled={props.apiCallInProgress || props.disabled}
+                        data-testid="dialog-delete"
+                    >
+                        {props.apiCallInProgress ? (
+                            <Progressing />
+                        ) : (
+                            `${props.deletePrefix || ''}${
+                                props.buttonPrimaryText ? props.buttonPrimaryText : 'Delete'
+                            }${props.deletePostfix || ''}`
+                        )}
+                    </button>
+                </div>
+            </ConfirmationDialog.ButtonGroup>
+        </ConfirmationDialog>
+    )
+}
+
+function DeleteDialogDescription(props) {
+    return <>{props.children}</>
+}
+
+DeleteDialog.Description = DeleteDialogDescription

package/src/Common/Dialogs/DialogForm.tsx

@@ -0,0 +1,86 @@
+import React, { Component, createContext } from 'react';
+import { VisibleModal } from '../Modals/VisibleModal';
+import close from '../../Assets/Icon/ic-cross.svg';
+import { Progressing } from '../Progressing'
+import { DialogFormProps } from './Types';
+//TODO: may not need context
+const DialogFormContext = createContext({ title: '', isLoading: false, close: (event) => {}, onSave: (event) => {} });
+
+export class DialogForm extends Component<DialogFormProps> {
+    constructor(props) {
+        super(props);
+        this.escFunction = this.escFunction.bind(this);
+    }
+
+    componentDidMount() {
+        document.addEventListener('keydown', this.escFunction);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.escFunction);
+    }
+
+    escFunction(event) {
+        if (event.keyCode === 27 && this.props.closeOnESC) {
+            this.props.close(event);
+        }
+    }
+
+    render() {
+        return (
+            <DialogFormContext.Provider
+                value={{
+                    title: this.props.title,
+                    isLoading: this.props.isLoading,
+                    close: this.props.close,
+                    onSave: this.props.onSave,
+                }}
+            >
+                <VisibleModal className="">
+                    <div className={`modal__body ${this.props.className || ''}`}>
+                        <div className={`modal__header ${this.props.headerClassName || ''}`}>
+                            <h1 className="modal__title">{this.props.title}</h1>
+                            <button type="button" className="dc__transparent" onClick={this.props.close}>
+                                {' '}
+                                <img src={close} alt="close" />
+                            </button>
+                        </div>
+                        <DialogFormContext.Consumer>
+                            {(context) => {
+                                return (
+                                    <form
+                                        noValidate
+                                        onSubmit={(e) => {
+                                            e.preventDefault();
+                                            if (!context.isLoading) {
+                                                context.onSave(e);
+                                            }
+                                        }}
+                                    >
+                                        {this.props.children}
+                                    </form>
+                                );
+                            }}
+                        </DialogFormContext.Consumer>
+                    </div>
+                </VisibleModal>
+            </DialogFormContext.Provider>
+        );
+    }
+}
+
+export class DialogFormSubmit extends Component<{ tabIndex: number }> {
+    render() {
+        return (
+            <DialogFormContext.Consumer>
+                {(context) => {
+                    return (
+                        <button type="submit" className="cta dc__align-right" tabIndex={this.props.tabIndex}>
+                            {context.isLoading ? <Progressing /> : this.props.children}
+                        </button>
+                    );
+                }}
+            </DialogFormContext.Consumer>
+        );
+    }
+}

package/src/Common/Dialogs/ForceDeleteDialog.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ForceDeleteDialogType } from './Types';
+import { DeleteDialog } from './DeleteDialog';
+
+export default function ForceDeleteDialog({ onClickDelete, closeDeleteModal, forceDeleteDialogTitle, forceDeleteDialogMessage }: ForceDeleteDialogType) {
+    return (
+        <div>
+            <DeleteDialog title={forceDeleteDialogTitle}
+                delete={onClickDelete}
+                closeDelete={closeDeleteModal}
+                deletePrefix="Force ">
+                <DeleteDialog.Description >
+                    <p className="mt-12 mb-12 p-8 dc__break-word dc__window-bg">Error: {forceDeleteDialogMessage}</p>
+                    <p>Do you want to force delete?</p>
+                </DeleteDialog.Description>
+            </DeleteDialog>
+        </div>
+    )
+}

package/src/Common/Dialogs/Types.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from "react"
+
+export interface DeleteDialogProps {
+    title: string
+    description?: string
+    closeDelete: () => void
+    delete: () => any
+    deletePrefix?: string
+    deletePostfix?: string
+    apiCallInProgress?: boolean
+    dataTestId?: string
+    buttonPrimaryText?: string
+    shouldStopPropagation?: boolean
+    disabled?: boolean
+}
+
+export interface ForceDeleteDialogType {
+  onClickDelete: () => void
+  closeDeleteModal: () => void
+  forceDeleteDialogTitle: string
+  forceDeleteDialogMessage: string
+}
+export interface ConfirmationDialogType {
+    className?: string
+    children: any
+}
+export interface ConfirmationDialogIconType {
+    src: string
+    className?: string
+}
+export interface ConfirmationDialogBodyType {
+    title: string
+    subtitle?: ReactNode
+    children?: any
+}
+export interface ConfirmationDialogButtonGroupType {
+    children: any
+}
+export interface DialogFormProps {
+    className: string;
+    title: string;
+    isLoading: boolean;
+    closeOnESC?: boolean;
+    close: (event) => void;
+    onSave: (event) => void;
+    headerClassName?: string;
+}

package/src/Common/Dialogs/index.ts

@@ -0,0 +1,4 @@
+export { default as ConfirmationDialog } from './ConfirmationDialog'
+export * from './DeleteDialog'
+export * from './DialogForm'
+export { default as ForceDeleteDialog } from './ForceDeleteDialog'

package/src/Common/Drawer/Drawer.scss

@@ -0,0 +1,40 @@
+.drawer {
+    position: absolute;
+    overflow: hidden;
+    &.left,
+    &.right {
+        top: 0;
+        bottom: 0;
+        width: 0;
+        transition: width 200ms;
+        &.show {
+            min-width: var(--minWidth);
+            width: var(--width);
+            max-width: var(--maxWidth);
+        }
+    }
+
+    &.top,
+    &.bottom {
+        left: 0;
+        right: 0;
+        height: 0;
+        transition: height 200ms;
+        &.show {
+            height: var(--height);
+        }
+    }
+    &.right {
+        right: 0;
+    }
+    &.left {
+        left: 0;
+    }
+    &.top {
+        top: 0;
+    }
+
+    &.bottom {
+        bottom: 0;
+    }
+}