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

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/DraggableWrapper/DraggableButton.tsx

@@ -1,14 +0,0 @@
-import React from 'react'
-import { ReactComponent as ICDrag } from '../../Assets/Icon/ic-drag.svg'
-import { DraggableButtonProps } from './types'
-
-export default function DraggableButton({ dragClassName }: DraggableButtonProps) {
-    return (
-        <button
-            type="button"
-            className={`${dragClassName} dc__outline-none-imp dc__no-border p-0 dc__transparent h-20`}
-        >
-            <ICDrag className="dc__grabbable icon-dim-20 fcn-6" />
-        </button>
-    )
-}

package/src/Common/DraggableWrapper/DraggableWrapper.tsx

@@ -1,116 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import Draggable, { ControlPosition, DraggableData } from 'react-draggable'
-import { DraggableWrapperProps, DraggablePositionVariant } from './types'
-import { useWindowSize } from '../Hooks'
-import { MAX_Z_INDEX } from '../Constants'
-
-/**
- * TODO: import it as lazy, after it is supported in common
- * 1. If using react select please use menuPlacement='auto'
- * 2. dragSelector will be used to identify the grabbable button that will grab the div to drag
- * 3. parentRef is the reference point from which we will derive the base top:0 ,left: 0 position
- */
-export default function DraggableWrapper({
-    children,
-    zIndex = MAX_Z_INDEX,
-    positionVariant,
-    dragSelector,
-    parentRef,
-    boundaryGap = 16,
-    childDivProps = {},
-}: DraggableWrapperProps) {
-    const windowSize = useWindowSize()
-    const nodeRef = useRef<HTMLDivElement>(null)
-
-    const [position, setPosition] = useState<ControlPosition>({
-        x: 0,
-        y: 0,
-    })
-
-    const getDefaultPosition = (positionVariant: DraggablePositionVariant): ControlPosition => {
-        // if this return x: 0, y: 0 then it will be top left corner of parentDiv
-        const parentRect =
-            parentRef?.current?.getBoundingClientRect() ??
-            ({
-                width: 0,
-                height: 0,
-                top: 0,
-                left: 0,
-                bottom: 0,
-            } as DOMRect)
-        const nodeRefHeight = nodeRef.current?.getBoundingClientRect().height ?? 0
-        const nodeRefWidth = nodeRef.current?.getBoundingClientRect().width ?? 0
-
-        switch (positionVariant) {
-            case DraggablePositionVariant.PARENT_BOTTOM_CENTER: {
-                // currently at parentRect.x and need to start to the center of its width and half of node should lie on left of center and other half on right
-                const x = (parentRect.width - nodeRefWidth) / 2
-                // currently at parentRect.y now parent height can be greater than windowSize.height so taking min
-                // subtracting parentRect.top since window height already contains that
-                const baseY =
-                    parentRect.height > windowSize.height ? windowSize.height - parentRect.top : parentRect.height
-                const y = baseY - nodeRefHeight - boundaryGap
-                return { x, y }
-            }
-            // Add more cases for other variants if needed
-            default: {
-                // Since need node to be in center of screen so subtracting width/2 by left of parentRect it will start the node from center but want node's midpoint at center so subtracting node's width from it.
-                const x = windowSize.width / 2 - parentRect.left - nodeRefWidth / 2
-                // subtracting top since windowSize already contains that
-                const y = windowSize.height - parentRect.top - nodeRefHeight - boundaryGap
-
-                return { x, y }
-            }
-        }
-    }
-
-    // On change of windowSize we will reset the position to default
-    useEffect(() => {
-        const defaultPosition = getDefaultPosition(positionVariant)
-        setPosition(defaultPosition)
-    }, [nodeRef, positionVariant, windowSize])
-
-    // Would be called on drag and will not update the state if the new position is out of window screen
-    function handlePositionChange(e, data: DraggableData) {
-        const offsetX = parentRef?.current?.getBoundingClientRect().left ?? 0
-        const offsetY = parentRef?.current?.getBoundingClientRect().top ?? 0
-
-        const nodeRefHeight = nodeRef.current?.getBoundingClientRect().height ?? 0
-        const nodeRefWidth = nodeRef.current?.getBoundingClientRect().width ?? 0
-
-        if (
-            offsetX + data.x + nodeRefWidth + boundaryGap > windowSize.width ||
-            offsetY + data.y + nodeRefHeight + boundaryGap > windowSize.height ||
-            offsetX + data.x < 0 ||
-            offsetY + data.y < 0
-        ) {
-            return
-        }
-
-        setPosition({
-            x: data.x,
-            y: data.y,
-        })
-    }
-
-    return (
-        <div
-            className="dc__position-fixed"
-            style={{
-                zIndex,
-            }}
-        >
-            <Draggable handle={dragSelector} nodeRef={nodeRef} position={position} onDrag={handlePositionChange}>
-                <div
-                    ref={nodeRef}
-                    {...childDivProps}
-                    style={{
-                        zIndex,
-                    }}
-                >
-                    {children}
-                </div>
-            </Draggable>
-        </div>
-    )
-}

package/src/Common/DraggableWrapper/index.ts

@@ -1,3 +0,0 @@
-export { default as DraggableWrapper } from './DraggableWrapper'
-export { default as DraggableButton } from './DraggableButton'
-export * from './types'

package/src/Common/DraggableWrapper/types.ts

@@ -1,27 +0,0 @@
-import { HTMLAttributes, ReactNode, RefObject } from 'react'
-
-export enum DraggablePositionVariant {
-    PARENT_BOTTOM_CENTER = 'PARENT_BOTTOM_CENTER',
-    SCREEN_BOTTOM_CENTER = 'SCREEN_BOTTOM_CENTER',
-    // Can add more based on requirement
-}
-
-export interface DraggableWrapperProps {
-    children: ReactNode
-    zIndex?: number
-    positionVariant?: DraggablePositionVariant
-    /**
-     * dragSelector (class - (append with .), id, etc) will be used to identify the grabbable button that will grab the div to drag
-     */
-    dragSelector: string
-    parentRef?: RefObject<HTMLDivElement>
-    boundaryGap?: number
-    childDivProps?: HTMLAttributes<HTMLDivElement>
-}
-
-/**
- * dragClassName is the class that we feed to Draggable to identify dragging buttons
- */
-export interface DraggableButtonProps {
-    dragClassName: string
-}

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;
-    }
-}

package/src/Common/Drawer/Drawer.tsx

@@ -1,49 +0,0 @@
-import React, { useRef, useEffect } from 'react'
-import { VisibleModal } from '../Modals/VisibleModal'
-import './Drawer.scss'
-
-interface drawerInterface {
-    position: 'left' | 'right' | 'bottom' | 'top'
-    children?: any
-    backdrop?: boolean
-    onClose?: (e: any) => void
-    width?: string
-    minWidth?: string
-    maxWidth?: string
-    height?: string
-    parentClassName?: string
-    onEscape?: (e?: any) => void
-}
-
-export const Drawer = ({
-    children,
-    position,
-    height,
-    width,
-    minWidth,
-    maxWidth,
-    parentClassName,
-    onEscape,
-}: drawerInterface) => {
-    const drawerRef = useRef(null)
-    useEffect(() => {
-        setTimeout(() => drawerRef.current?.classList?.add('show'), 1)
-        return () => drawerRef.current?.classList?.remove('show')
-    }, [])
-    const style = {}
-    if (position === 'left' || position === 'right') {
-        style['--width'] = width
-        style['--minWidth'] = minWidth
-        style['--maxWidth'] = maxWidth
-    }
-    if (position === 'top' || position === 'bottom') {
-        style['--height'] = height
-    }
-    return (
-        <VisibleModal className="drawer--container" parentClassName={parentClassName || ''} onEscape={onEscape}>
-            <aside style={style} ref={drawerRef} className={`drawer ${position}`}>
-                {children}
-            </aside>
-        </VisibleModal>
-    )
-}

package/src/Common/EmptyState/EmptyState.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import './emptyState.scss';
-import { ReactComponent as Progressing } from '../../Assets/Icon/ic-progressing.svg';
-
-function EmptyState({ children, className = '' }) {
-    return (
-        <div className={`flex column empty-state w-100 h-100 ${className}`}>
-            {children}
-        </div>
-    )
-}
-
-function Image({ children }) {
-    return children
-}
-
-function Title({ children }) {
-    return children
-}
-
-function Subtitle({ children, className }: { children: any; className?: string }) {
-    return <p className={`subtitle ${className || ''}`}>{children}</p>
-}
-
-function Button({ children }) {
-    return children
-}
-
-const Loading: React.FC<{ text: string }> = function (props) {
-    return <>
-        <Progressing className="dc__block empty-state__loader" />
-        <p className="empty-state__loading-text">{props.text}</p>
-    </>
-}
-
-EmptyState.Image = Image
-EmptyState.Title = Title
-EmptyState.Subtitle = Subtitle
-EmptyState.Button = Button
-EmptyState.Loading = Loading
-
-export default EmptyState

package/src/Common/EmptyState/GenericEmptyState.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import AppNotDeployed from '../../Assets/Img/app-not-deployed.png'
-import { GenericEmptyStateType, ImageType } from '../Types'
-
-import './emptyState.scss'
-
-function GenericEmptyState({
-    title,
-    image,
-    subTitle,
-    isButtonAvailable,
-    classname,
-    styles,
-    heightToDeduct,
-    imageType,
-    renderButton,
-    imageClassName,
-    children,
-    SvgImage,
-    noImage,
-    layout = 'column',
-    contentClassName = ''
-}: GenericEmptyStateType): JSX.Element {
-    const isRowLayout = layout === 'row';
-    
-    return (
-        <div
-            className={`flex ${isRowLayout ? 'dc__gap-32' : 'column dc__gap-20'} empty-state ${classname ? classname : ''}`}
-            style={styles}
-            data-testid="generic-empty-state"
-            {...(heightToDeduct >= 0 && { style: { ...styles, height: `calc(100vh - ${heightToDeduct}px)` } })}
-        >   
-            {!SvgImage ? !noImage && <img className={imageClassName ? imageClassName : ''}
-                src={image || AppNotDeployed}
-                width={imageType === ImageType.Medium ? '200' : '250'}
-                height={imageType === ImageType.Medium ? '160' : '200'}
-                alt="empty-state"
-            /> : <SvgImage />}
-            <div className={`flex column dc__gap-10 dc__mxw-300 ${isRowLayout ? 'dc__align-start' : ''} ${contentClassName}`}>
-                <h4 className="title fw-6 cn-9 mt-0 mb-0">{title}</h4>
-                {subTitle && <p className={`subtitle ${isRowLayout ? 'subtitle--text-start' : ''}`}>{subTitle}</p>}
-                {isButtonAvailable && renderButton()}
-                {children}
-            </div>
-        </div>
-    )
-}
-
-export default GenericEmptyState