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

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

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

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

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

@@ -0,0 +1,29 @@
+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}
+    />
+)