@devtron-labs/devtron-fe-common-lib 0.0.51 → 0.0.52-beta-1

package/src/Common/CustomTagSelector/ValidationRules.ts

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

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

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

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

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

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

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

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

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

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

package/src/Common/DevtronProgressing/types.ts

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

package/src/Common/Dialogs/ConfirmationDialog.tsx

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

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

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

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

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

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

package/src/Common/Drawer/Drawer.scss

@@ -1,40 +0,0 @@
-.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;
-    }
-}