@devtron-labs/devtron-fe-common-lib 0.0.55-beta-2 → 0.0.55-beta-3

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/Policy.Types.ts

@@ -1,63 +0,0 @@
-import { VariableType } from "./CIPipeline.Types"
-import { ResponseType } from "./Types"
-
-export enum ApplyPolicyToStage {
-  PRE_CI = 'PRE_CI',
-  POST_CI = 'POST_CI',
-  PRE_OR_POST_CI = 'PRE_OR_POST_CI',
-}
-
-export enum PluginRequiredStage {
-  PRE_CI = 'preBuildStage',
-  POST_CI = 'postBuildStage',
-  PRE_OR_POST_CI = 'PRE_OR_POST_CI',
-}
-
-export interface DefinitionSourceType {
-  projectName: string
-  isDueToProductionEnvironment: boolean
-  isDueToLinkedPipeline: boolean
-  policyName: string
-  appName?: string
-  clusterName?: string
-  environmentName?: string
-  branchNames?: string[]
-  ciPipelineName?: string
-}
-export interface MandatoryPluginDetailType {
-  id: number
-  icon: string
-  name: string
-  description?: string
-  requiredIn: PluginRequiredStage
-  applied?: boolean
-  inputVariables?: VariableType[]
-  outputVariables?: VariableType[]
-  definitionSources?: DefinitionSourceType[]
-}
-export interface MandatoryPluginDataType {
-  pluginData: MandatoryPluginDetailType[]
-  isValidPre: boolean
-  isValidPost: boolean
-}
-
-export enum ConsequenceAction {
-  BLOCK = 'BLOCK',
-  ALLOW_UNTIL_TIME = 'ALLOW_UNTIL_TIME',
-  ALLOW_FOREVER = 'ALLOW_FOREVER',
-}
-
-export interface ConsequenceType {
-  action: ConsequenceAction
-  metadataField: string
-}
-
-export interface BlockedStateData {
-  isOffendingMandatoryPlugin: boolean
-  isCITriggerBlocked: boolean
-  ciBlockState: ConsequenceType
-}
-
-export interface GetBlockedStateResponse extends ResponseType {
-    result?: BlockedStateData
-}

package/src/Common/PopupMenu.tsx

@@ -1,199 +0,0 @@
-import React, { useEffect } from 'react'
-import { Modal } from './Modals/Modal'
-import { PopupMenuBodyType, PopupMenuButtonType, PopupMenuType } from './Types'
-
-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,
-    autoPosition = false,
-}: PopupMenuType) {
-    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])
-
-    useEffect(() => {
-        if (buttonRef?.current && autoPosition && popupPosition) {
-            const { height, x, y } = buttonRef.current.getBoundingClientRect()
-            setPopupPosition({ left: x, top: y + height })
-        }
-    }, [buttonRef?.current?.clientHeight])
-
-    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 { height, 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,
-    dataTestId = "",
-}: PopupMenuButtonType) {
-    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}
-            data-testid={dataTestId}
-        >
-            {children}
-        </button>
-    )
-}
-
-function Body({
-    children = null,
-    rootClassName = '',
-    style = {},
-    autoWidth = false,
-    preventWheelDisable = false,
-    noBackDrop,
-}: PopupMenuBodyType) {
-    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,
-            }}
-            preventWheelDisable={preventWheelDisable}
-            noBackDrop={noBackDrop}
-        >
-            {children}
-        </Modal>
-    ) : null
-}
-
-PopupMenu.Button = Button
-PopupMenu.Body = Body
-
-export default PopupMenu

package/src/Common/Progressing.tsx

@@ -1,53 +0,0 @@
-import React from 'react'
-import { ProgressingProps } from './Types'
-
-export function Progressing({ pageLoader, size, theme, styles, fillColor }: ProgressingProps): JSX.Element {
-    const loaderSize = size ? `${size}px` : pageLoader ? '48px' : '20px'
-    return (
-        <div className={`loader ${theme || 'default'}-background`} style={styles} data-testid="progressing">
-            <div style={{ width: loaderSize, height: loaderSize }}>
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="loader__svg">
-                    <g fill="none" fillRule="evenodd" strokeLinecap="round">
-                        <animateTransform
-                            attributeName="transform"
-                            attributeType="XML"
-                            dur="0.5s"
-                            from="0 12 12"
-                            repeatCount="indefinite"
-                            to="360 12 12"
-                            type="rotate"
-                        />
-                        <path
-                            fill={fillColor || '#06C'}
-                            fillRule="nonzero"
-                            d="M12 2.5A9.5 9.5 0 1 1 2.5 12a1.5 1.5 0 0 1 3 0A6.5 6.5 0 1 0 12 5.5a1.5 1.5 0 0 1 0-3z"
-                        />
-                    </g>
-                </svg>
-            </div>
-        </div>
-    )
-}
-
-export function DetailsProgressing({
-    loadingText,
-    size = 24,
-    fullHeight = false,
-    styles,
-    fillColor,
-    children,
-}: ProgressingProps): JSX.Element {
-    return (
-        <div
-            className={`details-loader bcn-0 flex column fs-14 fw-6 ${fullHeight ? 'h-100' : 'details-loader-height'}`}
-            style={styles}
-            data-testid="details-progressing"
-        >
-            <span style={{ width: `${size}px`, height: `${size}px` }}>
-                <Progressing size={size} fillColor={fillColor} />
-            </span>
-            {loadingText && <span className="mt-10">{loadingText}</span>}
-            {children}
-        </div>
-    )
-}

package/src/Common/RJSF/Form.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import RJSF from '@rjsf/core'
-import RJSFValidator from '@rjsf/validator-ajv8'
-
-import { templates, widgets } from './config'
-import { FormProps } from './types'
-import { translateString } from './utils'
-import './rjsfForm.scss'
-
-// Need to use this way because the default import was not working as expected
-// The default import resolves to an object intead of a function
-const Form = (RJSF as any).default as typeof RJSF
-const validator = (RJSFValidator as any).default as typeof RJSFValidator
-
-export const RJSFForm = (props: FormProps) => (
-    <Form
-        noHtml5Validate
-        showErrorList={false}
-        autoComplete="off"
-        {...props}
-        validator={validator}
-        templates={{
-            ...templates,
-            ...props.templates,
-        }}
-        widgets={{ ...widgets, ...props.widgets }}
-        translateString={translateString}
-    />
-)