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

package/src/Common/Modals/Modal.tsx

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

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

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

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

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

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

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

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

@@ -0,0 +1,3 @@
+/* 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

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