@devtron-labs/devtron-fe-common-lib 0.0.62-beta-4 → 0.0.62-beta-6

package/src/Common/Modals/Modal.tsx

@@ -1,68 +0,0 @@
-import React, { useEffect } from 'react'
-import ReactDOM from 'react-dom'
-import { ModalType } from '../Types'
-
-export const Modal = ({
-    style = {},
-    children,
-    modal = false,
-    rootClassName = '',
-    onClick = null,
-    callbackRef = null,
-    preventWheelDisable = false,
-    noBackDrop,
-}: ModalType) => {
-    const innerRef = React.useRef(null)
-    function handleClick(e) {
-        if (typeof onClick !== 'function') return
-        if (innerRef && innerRef.current?.contains(e.target)) {
-            onClick(e, 'in')
-        } else {
-            onClick(e, 'out')
-        }
-    }
-
-    function disableWheel(e) {
-        if (!preventWheelDisable) {
-            if (innerRef?.current.contains(e.target)) {
-                if (innerRef.current.clientHeight === innerRef.current.scrollHeight) {
-                    e.preventDefault()
-                }
-            } else {
-                e.preventDefault()
-            }
-        }
-    }
-    useEffect(() => {
-        document.addEventListener('click', handleClick)
-        let modal = document.getElementById('visible-modal')
-        if (modal) modal.classList.add('show')
-        if (noBackDrop) modal.classList.add('no-back-drop')
-        if (!preventWheelDisable) document.body.addEventListener('wheel', disableWheel, { passive: false })
-        return () => {
-            if (!preventWheelDisable) document.body.removeEventListener('wheel', disableWheel)
-            document.removeEventListener('click', handleClick)
-            if (modal) modal.classList.remove('show')
-            if (noBackDrop) modal.classList.remove('no-back-drop')
-        }
-    }, [])
-    return ReactDOM.createPortal(
-        <div
-            tabIndex={0}
-            onClick={onClick}
-            data-testid="common-modal"
-            ref={(el) => {
-                if (typeof callbackRef === 'function') {
-                    callbackRef(el)
-                }
-                innerRef.current = el
-            }}
-            id="popup"
-            className={`${rootClassName} popup ${modal ? 'modal' : ''}`}
-            style={{ ...style }}
-        >
-            {children}
-        </div>,
-        document.getElementById('visible-modal'),
-    )
-}

package/src/Common/Modals/OpaqueModal.tsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom';
-import closeIcon from '../../Assets/Icon/ic-cross.svg'
-
-export interface OpaqueModalProps {
-    className?: string;
-    onHide?: any;
-    noBackground?: boolean;
-}
-
-export class OpaqueModal extends React.Component<OpaqueModalProps> {
-    modalRef = document.getElementById('full-screen-modal');
-
-    componentDidMount() {
-        if (this.props.noBackground)
-            this.modalRef.classList.add("show");
-        else this.modalRef.classList.add("show-with-bg");
-    }
-
-    componentWillUnmount() {
-        this.modalRef.classList.remove("show");
-        this.modalRef.classList.remove("show-with-bg");
-    }
-
-    render() {
-        const { className = "", onHide = null } = { ...this.props };
-
-        return ReactDOM.createPortal(
-            <div className={`full-screen-modal__body-container ${className}`}>
-                {this.props.children}
-                {typeof onHide === 'function' && <div className="close-btn icon-dim-24" onClick={e => onHide(false)} data-testid="opaque-modal-close">
-                    <img className="close-img" src={closeIcon} alt="close" />
-                </div>}
-            </div>, document.getElementById('full-screen-modal'))
-    }
-}

package/src/Common/Modals/VisibleModal.tsx

@@ -1,55 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-
-export class VisibleModal extends React.Component<{
-    className: string
-    parentClassName?: string
-    noBackground?: boolean
-    close?: (e) => void
-    onEscape?: (e) => void
-}> {
-    modalRef = document.getElementById('visible-modal')
-
-    constructor(props) {
-        super(props)
-        this.escFunction = this.escFunction.bind(this)
-    }
-
-    escFunction(event) {
-        if (event.keyCode === 27 || event.key === 'Escape') {
-            if (this.props.onEscape) {
-                this.props.onEscape(event)
-            } else if (this.props.close) {
-                this.props.close(event)
-            }
-        }
-    }
-
-    componentDidMount() {
-        document.addEventListener('keydown', this.escFunction)
-        this.modalRef.classList.add(this.props.noBackground ? 'show' : 'show-with-bg')
-
-        if (this.props.parentClassName) {
-            this.modalRef.classList.add(this.props.parentClassName)
-        }
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener('keydown', this.escFunction)
-        this.modalRef.classList.remove('show')
-        this.modalRef.classList.remove('show-with-bg')
-
-        if (this.props.parentClassName) {
-            this.modalRef.classList.remove(this.props.parentClassName)
-        }
-    }
-
-    render() {
-        return ReactDOM.createPortal(
-            <div className={`visible-modal__body ${this.props.className}`} onClick={this.props?.close} data-testid="visible-modal-close">
-                {this.props.children}
-            </div>,
-            document.getElementById('visible-modal'),
-        )
-    }
-}

package/src/Common/Modals/VisibleModal2.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-export class VisibleModal2 extends React.Component<{ className: string; close?: (e) => void; }> {
-
-    modalRef = document.getElementById('visible-modal-2');
-
-    constructor(props) {
-        super(props);
-        this.escFunction = this.escFunction.bind(this);
-    }
-
-    escFunction(event) {
-        if (event.keyCode === 27 && this.props.close) {
-            this.props.close(event);
-        }
-    }
-
-    componentDidMount() {
-        document.addEventListener("keydown", this.escFunction);
-        this.modalRef.classList.add("show-with-bg");
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener("keydown", this.escFunction);
-        this.modalRef.classList.remove("show-with-bg");
-    }
-
-    render() {
-        return ReactDOM.createPortal(
-            <div className={`visible-modal__body ${this.props.className}`} onClick={this.props?.close} data-testid="visible-modal2-close">
-                {this.props.children}
-            </div>, document.getElementById('visible-modal-2'))
-    }
-}

package/src/Common/MultiSelectCustomization.tsx

@@ -1,148 +0,0 @@
-import React from 'react'
-import Select, { components } from 'react-select'
-import { ReactComponent as ClearIcon } from '../Assets/Icon/ic-appstatus-cancelled.svg'
-import { ReactComponent as Check } from '../Assets/Icon/ic-check.svg'
-import { ReactComponent as RedWarning } from '../Assets/Icon/ic-error-medium.svg'
-
-export const Option = (props) => {
-    const { selectOption, data } = props
-    return (
-        <div className="flex left pl-12" style={{ background: props.isFocused ? 'var(--N100)' : 'transparent' }}>
-            <input
-                checked={props.isSelected}
-                disabled={props.isDisabled}
-                onChange={(e) => selectOption(data)}
-                type="checkbox"
-                style={{ height: '16px', width: '16px', flex: '0 0 16px' }}
-                className="mr-8"
-            />
-            <components.Option {...props} />
-        </div>
-    )
-}
-
-export const SingleSelectOption = (props) => {
-    const { selectOption, data } = props
-    const style = { height: '16px', width: '16px', flex: '0 0 16px' }
-    const onClick = (e) => selectOption(data)
-    return (
-        <div className="flex left pl-12" style={{ background: props.isFocused ? 'var(--N100)' : 'transparent' }}>
-            {props.isSelected ? (
-                <Check onClick={onClick} className="mr-8 icon-dim-16" style={style} />
-            ) : (
-                <span onClick={onClick} className="mr-8" style={style} />
-            )}
-            <components.Option {...props} />
-        </div>
-    )
-}
-
-export const MultiValueContainer = (props) => {
-    const { children, data, innerProps, selectProps } = props
-    const { label, value } = data
-    return (
-        <components.MultiValueContainer {...{ data, innerProps, selectProps }}>
-            <div className={`flex fs-12 ml-4 cn-9`}>{label}</div>
-            {children[1]}
-        </components.MultiValueContainer>
-    )
-}
-
-export const ClearIndicator = (props) => {
-    const {
-        children = <ClearIcon className="icon-dim-24" />,
-        getStyles,
-        innerProps: { ref, ...restInnerProps },
-    } = props
-    return (
-        <div {...restInnerProps} ref={ref} style={getStyles('clearIndicator', props)}>
-            <div className="flex pointer">{children}</div>
-        </div>
-    )
-}
-
-export const MultiValueRemove = (props) => {
-    const {
-        data,
-        innerProps: { onClick, onMouseDown },
-        selectProps,
-    } = props
-    return (
-        <components.MultiValueRemove {...props}>
-            <ClearIcon
-                {...{ onClick, onMouseDown }}
-                onClick={(e) => onClick(data)}
-                style={{ height: '18px', width: '18px' }}
-            />
-        </components.MultiValueRemove>
-    )
-}
-
-export const MultiValueChipContainer = ({ validator, isAllSelected = false, ...props }) => {
-    const { children, data, innerProps, selectProps } = props
-    const { label, value } = data
-    const isValidEmail = validator ? validator(value) : true
-
-    if (isAllSelected && value !== '*') return null
-
-    return (
-        <components.MultiValueContainer {...{ data, innerProps, selectProps }}>
-            <div className="flex left fs-12 pl-4 pr-4 dc__ellipsis-right">
-                {!isValidEmail && <RedWarning className="mr-4 icon-dim-16" />}
-                <div className={`dc__ellipsis-right ${isValidEmail ? 'cn-9' : 'cr-5'}`}>{label}</div>
-            </div>
-            {children[1]}
-        </components.MultiValueContainer>
-    )
-}
-
-export const multiSelectStyles = {
-    control: (base, state) => ({
-        ...base,
-        cursor: state.isDisabled ? 'not-allowed' : 'normal',
-        border: state.isFocused ? '1px solid #06c' : '1px solid #d6dbdf',
-        boxShadow: 'none',
-    }),
-    menu: (base, state) => ({
-        ...base,
-    }),
-    option: (base, state) => {
-        return {
-            ...base,
-            backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
-            color: 'var(--N900)',
-            padding: '8px 12px',
-        }
-    },
-    container: (base, state) => ({
-        ...base,
-        cursor: state.isDisabled ? 'not-allowed' : 'pointer',
-    }),
-    valueContainer: (base, state) => ({
-        ...base,
-        color: state.selectProps.menuIsOpen ? 'var(--N500)' : base.color,
-    }),
-}
-
-export interface CustomSelect {
-    sortSelected?: boolean
-    options: any[]
-    onChange: (...args) => void
-    value?: any
-    name?: string
-    placeholder?: string
-    className?: string
-    classNamePrefix?: string
-    menuPortalTarget?: any
-    components?: object
-    styles?: object
-    isMulti?: boolean
-    isDisabled?: boolean
-    closeMenuOnSelect?: boolean
-    hideSelectedOptions?: boolean
-    formatOptionLabel?: (...args) => any
-}
-
-export const CustomSelect: React.FC<CustomSelect> = (props) => {
-    return <Select {...props} />
-}

package/src/Common/Pagination/PageSizeSelector.tsx

@@ -1,78 +0,0 @@
-import { useRef, useState } from 'react'
-import { PageSizeItemsProps, PageSizeOption, PageSizeSelectorProps } from './types'
-import { useClickOutside } from '../Hooks'
-import { getDefaultPageValueOptions } from './utils'
-
-const PageSizeItems = ({
-    optionValue,
-    options,
-    setOptions,
-    handleCloseDropdown,
-    changePageSize,
-}: PageSizeItemsProps) => {
-    const handlePageSizeSelect = () => {
-        const newOptions = options.map((_option) => ({
-            value: _option.value,
-            selected: _option.value === optionValue,
-        }))
-        setOptions([...newOptions])
-        handleCloseDropdown()
-        changePageSize(optionValue)
-    }
-
-    return (
-        <div key={optionValue} className="select__item" onClick={handlePageSizeSelect}>
-            {optionValue}
-        </div>
-    )
-}
-
-const PageSizeSelector = ({ pageSizeOptions, pageSize, changePageSize }: PageSizeSelectorProps) => {
-    const defaultOptions = getDefaultPageValueOptions(pageSizeOptions).map((option) => ({
-        value: option.value,
-        selected: option.value === pageSize,
-    }))
-
-    const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false)
-    const [options, setOptions] = useState<PageSizeOption[]>(defaultOptions)
-
-    const handleCloseDropdown = () => {
-        setIsDropdownOpen(false)
-    }
-
-    const handleDropdownToggle = () => {
-        setIsDropdownOpen(!isDropdownOpen)
-    }
-
-    const dropdownRef = useRef<HTMLDivElement>(null)
-    useClickOutside(dropdownRef, handleCloseDropdown)
-
-    const selectedOption = options.find((option) => option.selected)
-    const font = isDropdownOpen ? 'fa fa-caret-up' : 'fa fa-caret-down'
-    return (
-        <div ref={dropdownRef}>
-            {isDropdownOpen && (
-                <div className="pagination__select-menu">
-                    {options.map((_option) => (
-                        <PageSizeItems
-                            optionValue={_option.value}
-                            options={options}
-                            setOptions={setOptions}
-                            handleCloseDropdown={handleCloseDropdown}
-                            changePageSize={changePageSize}
-                        />
-                    ))}
-                </div>
-            )}
-
-            <button type="button" className="select__button" onClick={handleDropdownToggle}>
-                <span>{selectedOption ? selectedOption.value : ''}</span>
-                <span className="select__icon">
-                    <i className={font} />
-                </span>
-            </button>
-        </div>
-    )
-}
-
-export default PageSizeSelector

package/src/Common/Pagination/Pagination.tsx

@@ -1,127 +0,0 @@
-import { useEffect, useState } from 'react'
-import PageSizeSelector from './PageSizeSelector'
-import { Page, PageValueItemProps, PaginationProps } from './types'
-import { createPageArr } from './utils'
-import './pagination.scss'
-
-const PageValueItem = ({ value, isSelected, selectPage }: PageValueItemProps) => {
-    const classes = isSelected ? 'page__button page__button--selected' : 'page__button'
-    const handlePageSelection = () => {
-        selectPage(value)
-    }
-
-    return (
-        <li className="page">
-            <button className={classes} onClick={handlePageSelection} type="button">
-                {value}
-            </button>
-        </li>
-    )
-}
-
-// NOTE: This component will heavily benefit from data normalization
-const Pagination = ({
-    size,
-    pageSize,
-    offset,
-    changePage,
-    changePageSize,
-    isPageSizeFix,
-    pageSizeOptions,
-    rootClassName,
-}: PaginationProps) => {
-    const [pages, setPages] = useState<Page[]>([])
-
-    useEffect(() => {
-        const _pages = createPageArr({ size, pageSize, selectedPageNo: 1 })
-        setPages(_pages)
-    }, [size, pageSize])
-
-    useEffect(() => {
-        const selectedPageNo = 1 + Math.floor(offset / pageSize)
-        const _pages = createPageArr({ size, pageSize, selectedPageNo })
-        setPages(_pages)
-    }, [offset])
-
-    const selectPage = (selectedPageNo: number): void => {
-        const _pages = createPageArr({ size, pageSize, selectedPageNo })
-        setPages(_pages)
-        changePage(selectedPageNo)
-    }
-
-    const selectPreviousPage = (): void => {
-        const currPage = pages.find((page) => page.selected)
-        const selectedPageNo = currPage.value - 1
-        selectPage(selectedPageNo)
-    }
-
-    const selectNextPage = (): void => {
-        const currPage = pages.find((page) => page.selected)
-        const selectedPageNo = currPage.value + 1
-        selectPage(selectedPageNo)
-    }
-
-    const lastPageNo = offset + pageSize < size ? offset + pageSize : size
-    const pageNoIndex = pages.findIndex((page) => page.selected)
-    const visiblePages = pages.filter((page) => page.isVisible)
-    return (
-        // TODO: Remove pagination-wrapper from dashboard
-        <div className={rootClassName || ''}>
-            <div className="page-number">
-                {offset + 1} - {lastPageNo} of {size}
-            </div>
-
-            <ul className="pagination">
-                <li className="page">
-                    <button
-                        className="page__button page__button--icon"
-                        disabled={!pageNoIndex}
-                        onClick={selectPreviousPage}
-                        type="button"
-                        aria-label="Previous page"
-                    >
-                        <span className="left-icon">
-                            <i className="fa fa-chevron-left" />
-                        </span>
-                    </button>
-                </li>
-
-                {visiblePages.map((page) => (
-                    <PageValueItem
-                        value={page.value}
-                        isSelected={page.selected}
-                        key={page.value}
-                        selectPage={selectPage}
-                    />
-                ))}
-
-                <li className="page">
-                    <button
-                        className="page__button page__button--icon"
-                        disabled={pageNoIndex === pages.length - 1}
-                        onClick={selectNextPage}
-                        type="button"
-                        aria-label="Next page"
-                    >
-                        <span className="left-icon">
-                            <i className="fa fa-chevron-right" />
-                        </span>
-                    </button>
-                </li>
-            </ul>
-
-            {!isPageSizeFix && (
-                <div className="select">
-                    <span className="select__placeholder">Rows per page</span>
-                    <PageSizeSelector
-                        pageSizeOptions={pageSizeOptions}
-                        pageSize={pageSize}
-                        changePageSize={changePageSize}
-                    />
-                </div>
-            )}
-        </div>
-    )
-}
-
-export default Pagination

package/src/Common/Pagination/constants.ts

@@ -1,6 +0,0 @@
-export const VISIBLE_PAGES_LIMIT = 5
-export const FALLBACK_PAGE_SIZE_OPTIONS = [
-    { value: 20, selected: true },
-    { value: 40, selected: false },
-    { value: 50, selected: false },
-]

package/src/Common/Pagination/index.tsx

@@ -1,3 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-// Disabling since might need to export types as well
-export { default as Pagination } from './Pagination'

package/src/Common/Pagination/pagination.scss

@@ -1,123 +0,0 @@
-.pagination-wrapper {
-    display: flex;
-    align-items: center;
-    padding: 0px 24px;
-    justify-content: space-between;
-    margin: 0px;
-    background-color: var(--white);
-}
-
-.pagination {
-    margin-top: 16px;
-    margin-bottom: 16px;
-    padding: 0px;
-}
-
-.select {
-    display: flex;
-    align-items: center;
-    position: relative;
-}
-
-.select__placeholder {
-    font-size: 12px;
-    font-weight: normal;
-    font-style: normal;
-    font-stretch: normal;
-    line-height: 1.5;
-    letter-spacing: normal;
-    color: var(--N700);
-    margin-right: 8px;
-}
-
-.pagination__select-menu {
-    padding: 0px;
-    list-style: none;
-    overflow: hidden;
-    border: solid 1px var(--N200);
-    border-radius: 4px;
-    width: 64px;
-    position: absolute;
-    bottom: 31px;
-    background-color: var(--white);;
-}
-
-.select__button {
-    width: 64px;
-    background-color: transparent;
-    border-radius: 4px;
-    border: solid 1px var(--N200);
-    padding: 5px 10px;
-    text-align: left;
-}
-
-.select__item {
-    padding: 5px 10px;
-    cursor: pointer;
-}
-
-.select__icon {
-    margin-left: 18px;
-}
-
-.page {
-    margin: 0px 8px;
-    display: inline-block;
-}
-
-.page-number {
-    font-size: 12px;
-    font-weight: normal;
-    font-style: normal;
-    font-stretch: normal;
-    line-height: 1.5;
-    letter-spacing: normal;
-    color: var(--N700);
-}
-
-.page__button {
-    width: 24px;
-    height: 24px;
-    border-radius: 8px;
-    color: var(--B500);
-    background-color: var(--white);
-    padding: 0px;
-    user-select: none;
-}
-
-.page__button--icon {
-    background-color: var(--white);
-    color: var(--B500);
-}
-
-/* MODIFIERS */
-
-.page__button--selected {
-    color: var(--white);
-    background-color: var(--B500);
-}
-
-/* States and Selectorys */
-
-.page__button:disabled {
-    opacity: 0.5;
-}
-
-.select__item:hover {
-    background-color: var(--N50);
-}
-
-.page__button:hover ~ :disabled {
-    background-color: var(--B100);
-}
-
-.page__button--selected:hover {
-    color: var(--white);
-    background-color: var(--B500);
-}
-
-@media (min-width: 1024px) {
-    .pagination {
-        margin: 16px auto;
-    }
-}