@devtron-labs/devtron-fe-common-lib 0.0.6-beta-10 → 0.0.6-beta-13

package/src/Common/Dialogs/DialogForm.tsx

@@ -0,0 +1,95 @@
+import React, { Component, createContext } from 'react';
+import { VisibleModal } from '../Modals/VisibleModal';
+import close from '../../../Assets/Icons/ic-close.svg';
+import { Progressing } from '../Progressing'
+//TODO: may not need context
+const DialogFormContext = createContext({ title: '', isLoading: false, close: (event) => {}, onSave: (event) => {} });
+
+export interface DialogFormProps {
+    className: string;
+    title: string;
+    isLoading: boolean;
+    closeOnESC?: boolean;
+    close: (event) => void;
+    onSave: (event) => void;
+    headerClassName?: string;
+}
+
+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,16 @@
+export interface DeleteDialogProps {
+    title: string
+    description?: string
+    closeDelete: () => void
+    delete: () => any
+    deletePrefix?: string
+    deletePostfix?: string
+    apiCallInProgress?: boolean
+}
+
+export interface ForceDeleteDialogType {
+  onClickDelete: () => void
+  closeDeleteModal: () => void
+  forceDeleteDialogTitle: string
+  forceDeleteDialogMessage: string
+}

package/src/Common/Dialogs/index.ts

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

package/src/Common/PopupMenu.tsx

@@ -0,0 +1,131 @@
+import React, { useEffect } from 'react';
+import {Modal} from './Modals/Modal';
+const PopupContext = React.createContext(null);
+
+function usePopupContext() {
+    const context = React.useContext(PopupContext);
+    if (!context) {
+        throw new Error(
+        `Select compound components cannot be rendered outside popupmenup`,
+        )
+    }
+    return context
+}
+
+function PopupMenu({ children = null, onToggleCallback = null, autoClose = false}) {
+    const [popupPosition, setPopupPosition]=React.useState(null)
+    const [opacity, setOpacity] = React.useState(0)
+    const observer = React.useRef<IntersectionObserver | null>(null);
+    const buttonRef = React.useRef(null);
+    const buttonWidth = React.useRef(null);
+
+    React.useEffect(()=>{
+        observer.current = window.IntersectionObserver ? new IntersectionObserver(intersectionCallback, options) : null
+        return ()=>{
+            if(observer && observer.current && observer.current.disconnect) observer.current.disconnect();
+        }
+    },[])
+
+    useEffect(() => {
+        if (typeof onToggleCallback === 'function') {
+            if (popupPosition) {
+                onToggleCallback(true)
+            }
+            else {
+                onToggleCallback(false)
+            }
+        }
+    }, [popupPosition])
+
+    let options = {
+        root: null,
+        rootMargin: '0px',
+        threshold: 1.0
+    }
+
+    if(!children) return children
+
+    function intersectionCallback(entries, observer) {
+        entries.forEach(entry => {
+            if (entry.isIntersecting && entry.intersectionRatio >= 1) {
+                setOpacity(1)
+            }
+            else {
+                const {boundingClientRect, rootBounds} = entry
+                const {x, y, height, width} = boundingClientRect
+                const {x: buttonX, y: buttonY, height: buttonHeight, width: buttonWidth, left: buttonLeft, right: buttonRight, top: buttonTop, bottom: buttonBottom} = buttonRef.current.getBoundingClientRect();
+                if(y + height > rootBounds.height){
+                    setPopupPosition({ left: buttonX, bottom: document.documentElement.clientHeight - buttonY})
+                    setOpacity(1)
+                }
+                if(x + width > rootBounds.width){
+                    // setPopupPosition(position => ({ right: document.documentElement.clientWidth - buttonLeft,...position, left:'unset' }))
+                    setPopupPosition(position=>({...position, right: '20px', left:'unset'}))
+                    setOpacity(1)
+                }
+            }
+        });
+    }
+
+    const handleOpen = (e)=>{
+        e.stopPropagation();
+        setOpacity(0)
+        const { bottom,height,left,right,top,width,x,y } = e.currentTarget.getBoundingClientRect()
+        setPopupPosition({left: x, top: y + height})
+    }
+
+    const handleClose = (e, inOrOut) =>{
+        if(autoClose || inOrOut === 'out'){
+            if(observer && observer.current && observer.current.disconnect) observer.current.disconnect()
+            setOpacity(0)
+            setPopupPosition(null)
+        }
+        else{
+            e.stopPropagation();
+        }
+    }
+
+
+    function callbackRef(element) {
+        if (element && observer?.current?.observe){
+            observer.current.observe(element)
+        }
+        else observer.current.disconnect();
+    }
+
+    function initialiseButtonWidth(buttonEl){
+        if(!buttonEl) return
+        buttonRef.current = buttonEl
+        const { bottom, height, left, right, top, width, x, y } = buttonEl.getBoundingClientRect()
+        buttonWidth.current=width;
+    }
+
+    return <PopupContext.Provider value={{handleOpen, popupPosition, handleClose, opacity, setPopupPosition, callbackRef, buttonRef, initialiseButtonWidth, buttonWidth}}>
+        {children}
+    </PopupContext.Provider>
+
+}
+
+function Button({ children = null, disabled = false, rootClassName = "", tabIndex = 0, onHover = false, isKebab = false  }) {
+    const { handleOpen, popupPosition, buttonRef, initialiseButtonWidth } = usePopupContext()
+    return <button ref={initialiseButtonWidth} type="button"
+        tabIndex={tabIndex}
+        disabled={disabled}
+        className={`${rootClassName} ${popupPosition ? 'focused' : ''}  ${isKebab ? 'popup-button-kebab':"popup-button" }`}
+        onMouseEnter={onHover ? (disabled ? null : handleOpen) : () => { }}
+        onClick={disabled ? null : handleOpen} >
+        {children}
+    </button>
+}
+
+function Body({children=null, rootClassName="", style={}, autoWidth=false}){
+    const {handleClose, popupPosition, opacity, callbackRef, buttonWidth} = usePopupContext()
+    return popupPosition ? <Modal callbackRef={callbackRef} onClick={handleClose} rootClassName={`${rootClassName} popup-body ${!children ? 'popup-body--empty' : ''} ${Object.keys(popupPosition).join(" ")}`}  style={{...popupPosition, ...style,...(autoWidth ? {width: buttonWidth.current} : {}), opacity:opacity}}>
+        {children}
+    </Modal> : null
+}
+
+PopupMenu.Button = Button
+PopupMenu.Body = Body
+
+export default PopupMenu

package/src/Common/RadioGroup.tsx

@@ -0,0 +1,63 @@
+import React, { Component, createContext } from 'react';
+const RadioGroupContext = createContext({ name: '', value: '', disabled: false, onChange: (event) => {} });
+
+export interface RadioGroupItemProps {
+    value: string;
+}
+
+export class RadioGroupItem extends Component<RadioGroupItemProps> {
+    render() {
+        return (
+            <RadioGroupContext.Consumer>
+                {(context) => {
+                    return (
+                        <>
+                            <label className={context.disabled ? 'form__radio-item disabled' : 'form__radio-item'}>
+                                <input
+                                    type="radio"
+                                    className="form__checkbox"
+                                    name={context.name}
+                                    disabled={context.disabled}
+                                    onChange={context.onChange}
+                                    value={this.props.value}
+                                    checked={context.value === this.props.value}
+                                />
+                                <span className="form__radio-item-content">
+                                    <span className="radio__button"></span>
+                                    <span className="radio__title">{this.props.children}</span>
+                                </span>
+                            </label>
+                        </>
+                    );
+                }}
+            </RadioGroupContext.Consumer>
+        );
+    }
+}
+
+export interface RadioGroupProps {
+    value: string;
+    name: string;
+    disabled?: boolean;
+    onChange: (event) => void;
+    className?: string;
+}
+
+export class RadioGroup extends Component<RadioGroupProps> {
+    render() {
+        return (
+            <div className={`form__radio-group ${this.props.className || ''}`}>
+                <RadioGroupContext.Provider
+                    value={{
+                        name: this.props.name,
+                        value: this.props.value,
+                        disabled: this.props.disabled,
+                        onChange: this.props.onChange,
+                    }}
+                >
+                    {this.props.children}
+                </RadioGroupContext.Provider>
+            </div>
+        );
+    }
+}

package/src/Common/TippyCustomized.tsx

@@ -0,0 +1,173 @@
+import React, { ReactNode, useEffect, useRef } from 'react'
+import Tippy from '@tippyjs/react'
+import { Placement } from 'tippy.js'
+import { ReactComponent as CloseIcon } from '../Assets/Icon/ic-close.svg'
+import 'tippy.js/animations/shift-toward-subtle.css'
+
+export enum TippyTheme {
+    black = 'black',
+    white = 'white',
+}
+
+interface TippyCustomizedProps {
+    theme: TippyTheme
+    visible?: boolean
+    heading?: string
+    infoTextHeading?: string
+    placement: Placement
+    className?: string
+    Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
+    iconPath?: string
+    iconClass?: string
+    iconSize?: number // E.g. 16, 20, etc.. Currently, there are around 12 sizes supported. Check `icons.css` or `base.scss` for supported sizes or add new size (class names starts with `icon-dim-`).
+    onImageLoadError?: (e) => void
+    onClose?: () => void
+    infoText?: string
+    showCloseButton?: boolean
+    arrow?: boolean
+    interactive?: boolean
+    showOnCreate?: boolean
+    trigger?: string
+    animation?: string
+    duration?: number
+    additionalContent?: ReactNode
+    documentationLink?: string
+    documentationLinkText?: string
+    children: React.ReactElement<any>
+}
+
+// This component will handle some of the new tippy designs and interactions
+// So this can be updated to support further for new features or interactions
+export default function TippyCustomized(props: TippyCustomizedProps) {
+    const tippyRef = useRef(null)
+    const isWhiteTheme = props.theme === TippyTheme.white
+
+    const onTippyMount = (tippyInstance) => {
+        tippyRef.current = tippyInstance
+        document.addEventListener('keydown', closeOnEsc)
+    }
+
+    const closeTippy = () => {
+        if (tippyRef.current?.hide) {
+            tippyRef.current.hide()
+            tippyRef.current = null
+
+            if (props.onClose) {
+                props.onClose()
+            }
+        }
+    }
+
+    const closeOnEsc = (e) => {
+        if (e.keyCode === 27) {
+            closeTippy()
+        }
+    }
+
+    const getTippyContent = () => {
+        const {
+            Icon,
+            iconPath,
+            iconClass,
+            iconSize,
+            onImageLoadError,
+            heading,
+            infoTextHeading,
+            infoText,
+            showCloseButton,
+            additionalContent,
+            documentationLink,
+            documentationLinkText,
+        } = props
+        return (
+            <>
+                <div
+                    className={`dc__word-break dc__hyphens-auto flex left ${
+                        isWhiteTheme ? 'p-12 dc__border-bottom-n1 cn-9' : 'pt-20 pb-12 pr-20 pl-20 cn-0'
+                    }`}
+                >
+                    {iconPath ? (
+                        <img
+                            className={`icon-dim-${iconSize || 20} mr-6 ${iconClass || ''}`}
+                            src={iconPath}
+                            alt={heading}
+                            onError={onImageLoadError}
+                        />
+                    ) : (
+                        Icon && (
+                            <div className={`icon-dim-${iconSize || 20} mr-6`}>
+                                <Icon className={`icon-dim-${iconSize || 20} ${iconClass || ''}`} />
+                            </div>
+                        )
+                    )}
+                    {heading && <span className={`fs-14 fw-6 lh-20 ${showCloseButton ? 'mr-6' : ''}`}>{heading}</span>}
+                    {showCloseButton && (
+                        <div className="icon-dim-16 ml-auto">
+                            <CloseIcon
+                                className={`icon-dim-16 cursor ${isWhiteTheme ? 'fcn-9' : 'fcn-0'}`}
+                                onClick={closeTippy}
+                            />
+                        </div>
+                    )}
+                </div>
+                {infoTextHeading && (
+                    <div
+                        className={`dc__word-break dc__hyphens-auto fs-14 fw-6 lh-20 ${
+                            isWhiteTheme ? 'pl-12 pr-12' : 'pl-20 pr-20'
+                        }`}
+                    >
+                        {infoTextHeading}
+                    </div>
+                )}
+                {infoText && (
+                    <div
+                        className={`dc__word-break dc__hyphens-auto fs-13 fw-4 lh-20 ${
+                            isWhiteTheme
+                                ? 'p-12'
+                                : `pl-20 pr-20 pt-4 ${additionalContent && documentationLink ? 'pb-12' : 'pb-20'}`
+                        }`}
+                    >
+                        {infoText}
+                    </div>
+                )}
+                {additionalContent}
+                {documentationLink && (
+                    <div className="pl-12 pb-12">
+                        <a
+                            href={documentationLink}
+                            target="_blank"
+                            rel="noreferrer noopener"
+                            className="cb-5"
+                            onClick={closeTippy}
+                        >
+                            {documentationLinkText || 'Learn more'}
+                        </a>
+                    </div>
+                )}
+            </>
+        )
+    }
+
+    const { className, placement, arrow, interactive, showOnCreate, trigger, animation, duration, children } = props
+
+    return (
+        <Tippy
+            className={`${
+                isWhiteTheme ? 'tippy-white-container default-white' : 'tippy-black-container default-black'
+            } no-content-padding tippy-shadow ${className}`}
+            arrow={arrow || false}
+            interactive={interactive || false}
+            placement={placement || 'top'}
+            content={getTippyContent()}
+            trigger={trigger || 'mouseenter'}
+            onMount={onTippyMount}
+            onClickOutside={closeTippy}
+            showOnCreate={showOnCreate || false}
+            animation={animation || 'fade'}
+            duration={duration || 300}
+            visible={props.visible}
+        >
+            {children}
+        </Tippy>
+    )
+}

package/src/Common/Types.ts

@@ -10,3 +10,17 @@ export interface APIOptions {
     signal?: AbortSignal
     preventAutoLogout?: boolean
 }
+
+export interface TagType {
+  key:string
+  value?: string
+  description?: string
+  propagate: boolean
+  isInvalidKey?: boolean
+  isInvalidValue?: boolean
+}
+
+export interface OptionType {
+    label: string;
+    value: string;
+}

package/src/Common/index.ts

@@ -14,4 +14,8 @@ export * from './Modals/OpaqueModal'
 export * from './Modals/VisibleModal'
 export * from './Modals/VisibleModal2'
 export { BreadCrumb, useBreadcrumb } from './BreadCrumb/BreadCrumb'
-export { default as BreadcrumbStore } from './BreadCrumb/BreadcrumbStore'
+export { default as BreadcrumbStore } from './BreadCrumb/BreadcrumbStore'
+export * from './RadioGroup'
+export * from './PopupMenu'
+export * from './TippyCustomized'
+export * from './CustomTagSelector'

package/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "downlevelIteration": true,
     "lib": [
       "dom",