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

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

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

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

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

package/src/Common/DraggableWrapper/types.ts

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

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

package/src/Common/Drawer/Drawer.tsx

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

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

@@ -0,0 +1,81 @@
+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 = '',
+    imageStyles = {},
+}: GenericEmptyStateType): JSX.Element {
+    const isRowLayout = layout === 'row'
+
+    const getImageSize = () => {
+        switch (imageType) {
+            case ImageType.Large:
+                return { width: '250px', height: '200px' }
+            default:
+                return { width: '200px', height: '160px' }
+        }
+    }
+
+    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}
+                        style={{
+                            ...imageStyles,
+                            width: `${getImageSize().width}`,
+                            height: `${getImageSize().height}`,
+                        }}
+                        alt="empty-state"
+                    />
+                )
+            ) : (
+                <SvgImage
+                    style={{
+                        ...imageStyles,
+                        width: `${getImageSize().width}`,
+                        height: `${getImageSize().height}`,
+                    }}
+                />
+            )}
+            <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

package/src/Common/EmptyState/emptyState.scss

@@ -0,0 +1,74 @@
+.empty-state {
+    height: 100%;
+    img {
+        height: 40%;
+        max-height: 200px;
+        width: auto;
+        max-width: 250px;
+    }
+    svg {
+        height: 40%;
+        max-height: 200px;
+        width: auto;
+    }
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        color: var(--N900);
+    }
+    .subtitle {
+        font-size: 13px;
+        font-weight: 400;
+        text-align: center;
+        line-height: 1.5;
+        margin-bottom: 6px;
+
+        &--text-start {
+            text-align: start;
+        }
+    }
+    .cta {
+        height: 36px;
+    }
+    p {
+        text-align: center;
+        font-size: 13px;
+        color: var(--N700);
+    }
+    strong {
+        font-size: 16px;
+        margin-bottom: 4px;
+        color: var(--N900);
+        font-weight: normal;
+    }
+    .select-popup {
+        height: min-content;
+        max-height: 250px;
+        overflow: auto;
+        padding: 8px 0;
+    }
+    .empty-state__loader {
+        width: 34px;
+        height: 34px;
+        margin-bottom: 16px;
+    }
+    .empty-state__loading-text {
+        font-size: 12px;
+        width: 200px;
+        font-weight: normal;
+        font-stretch: normal;
+        font-style: normal;
+        line-height: 1.5;
+        letter-spacing: normal;
+        text-align: center;
+        color: var(--N900);
+    }
+    .button__icon {
+        width: 16px;
+        height: 16px;
+        margin-left: 8px;
+    }
+}

package/src/Common/Error.tsx

@@ -0,0 +1,61 @@
+import React, { Component } from 'react'
+import EmptyState from './EmptyState/EmptyState'
+import notAuthorized from '../Assets/Img/ic-not-authorized.svg'
+import ErrorScreenNotFound from './ErrorScreenNotFound'
+import { ERROR_EMPTY_SCREEN } from './Constants'
+import GenericEmptyState from './EmptyState/GenericEmptyState'
+import Reload from './Reload'
+
+export class ErrorScreenManager extends Component<{
+    code?: number
+    reload?: (...args) => any
+    subtitle?: React.ReactChild
+    subtitleClass?: string
+    reloadClass?: string
+}> {
+    getMessage() {
+        switch (this.props.code) {
+            case 400:
+                return 'Bad Request'
+            case 401:
+                return 'Unauthorized'
+            case 403:
+                return (
+                    <ErrorScreenNotAuthorized subtitle={this.props.subtitle} />
+                )
+            case 404:
+                return <ErrorScreenNotFound />
+            case 500:
+                return 'Internal Server Error'
+            case 502:
+                return 'Bad Gateway'
+            case 503:
+                return 'Service Temporarily Unavailable'
+            default:
+                return <Reload className={this.props.reloadClass} />
+        }
+    }
+    render() {
+        let msg = this.getMessage()
+        return (
+            <div>
+                <h1>{msg}</h1>
+            </div>
+        )
+    }
+}
+
+export class ErrorScreenNotAuthorized extends Component<{
+    subtitle?: React.ReactChild
+    title?: string
+}> {
+    render() {
+        return (
+            <GenericEmptyState
+                image={notAuthorized}
+                title={this.props.title ?? ERROR_EMPTY_SCREEN.NOT_AUTHORIZED}
+                subTitle={this.props.subtitle ?? ERROR_EMPTY_SCREEN.ONLY_FOR_SUPERADMIN}
+            />
+        )
+    }
+}