@devtron-labs/devtron-fe-common-lib 0.0.62 → 0.0.63-beta-2

package/src/Common/Pagination/types.ts

@@ -1,55 +0,0 @@
-export interface PageSizeOption {
-    value: number
-    selected: boolean
-}
-export interface PaginationProps {
-    /**
-     * number of items
-     */
-    size: number
-    /**
-     * pageSize
-     */
-    pageSize: number
-    offset: number
-    changePage: (pageNo: number) => void
-    changePageSize?: (pageSize: number) => void
-    /**
-     * If true will not show page size selector
-     */
-    isPageSizeFix?: boolean
-    /**
-     * If given would show these options in page size selector else [20,40,50] with 20 as selected
-     */
-    pageSizeOptions?: PageSizeOption[]
-    /**
-     * class for wrapper
-     */
-    rootClassName?: string
-}
-
-export interface Page {
-    value: number
-    selected: boolean
-    isVisible: boolean
-}
-
-export interface CreatePageArrType extends Pick<PaginationProps, 'size' | 'pageSize'> {
-    selectedPageNo: number
-}
-
-export interface PageSizeSelectorProps
-    extends Pick<PaginationProps, 'pageSizeOptions' | 'pageSize' | 'changePageSize'> {}
-
-export interface PageSizeItemsProps extends Pick<PageSizeSelectorProps, 'changePageSize'> {
-    optionValue: PageSizeOption['value']
-    options: PageSizeOption[]
-    setOptions: React.Dispatch<React.SetStateAction<PageSizeOption[]>>
-    handleCloseDropdown: () => void
-}
-
-export interface PageValueItemProps {
-    value: PageSizeOption['value']
-    isSelected: PageSizeOption['selected']
-    selectPage: (selectedPageNo: number) => void
-}

package/src/Common/Pagination/utils.tsx

@@ -1,24 +0,0 @@
-import { CreatePageArrType, Page, PageSizeOption } from './types'
-import { FALLBACK_PAGE_SIZE_OPTIONS, VISIBLE_PAGES_LIMIT } from './constants'
-
-/**
- * Returns an array of pages numbers and whether they are selected, visible or not
- */
-export const createPageArr = ({ size, pageSize, selectedPageNo }: CreatePageArrType): Page[] => {
-    const arr = []
-    const numberOfPages = Math.ceil(size / pageSize)
-    // we are showing 2 numbers before and after the selected page, so computing the lower and upper bounds
-    const lowerBound = selectedPageNo - 2 < 1 ? 1 : selectedPageNo - 2
-    const upperBound = selectedPageNo + 2 > numberOfPages ? numberOfPages : selectedPageNo + 2
-    for (let i = 1; i <= numberOfPages; i++) {
-        arr.push({
-            value: i,
-            selected: i === selectedPageNo,
-            isVisible: upperBound - VISIBLE_PAGES_LIMIT < i && i < lowerBound + VISIBLE_PAGES_LIMIT,
-        })
-    }
-    return arr
-}
-
-export const getDefaultPageValueOptions = (pageSizeOptions: PageSizeOption[]): PageSizeOption[] =>
-    pageSizeOptions?.length ? pageSizeOptions : FALLBACK_PAGE_SIZE_OPTIONS

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}
-    />
-)

package/src/Common/RJSF/common/FieldRow.tsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import { FieldRowProps } from './types'
-import { DEFAULT_FIELD_TITLE, DO_NOT_SHOW_LABEL } from '../constants'
-
-export const FieldRowWithLabel = ({
-    showLabel,
-    label,
-    required,
-    children,
-    id,
-    shouldAlignCenter = true,
-}: Omit<FieldRowProps, 'label'> & {
-    label: FieldRowProps['label'] | typeof DO_NOT_SHOW_LABEL
-}) => (
-    <div
-        className={
-            showLabel
-                ? `display-grid dc__gap-12 rjsf-form-template__field ${shouldAlignCenter ? 'flex-align-center' : ''}`
-                : ''
-        }
-    >
-        {showLabel && (
-            <label className="cn-7 fs-13 lh-32 fw-4 flexbox mb-0" htmlFor={id}>
-                {/* The check is added here intentionally for proper layout for array type field */}
-                {label !== DO_NOT_SHOW_LABEL && (
-                    <>
-                        <span className="dc__ellipsis-right">{label || DEFAULT_FIELD_TITLE}</span>
-                        {required && <span className="cr-5">&nbsp;*</span>}
-                    </>
-                )}
-            </label>
-        )}
-        {children}
-    </div>
-)

package/src/Common/RJSF/common/types.ts

@@ -1,9 +0,0 @@
-import { FieldTemplateProps } from '@rjsf/utils'
-
-export interface FieldRowProps extends Pick<FieldTemplateProps, 'children' | 'label' | 'required' | 'id'> {
-    showLabel?: boolean
-    /**
-     * @default true
-     */
-    shouldAlignCenter?: boolean
-}

package/src/Common/RJSF/config.ts

@@ -1,37 +0,0 @@
-import React from 'react'
-import { RegistryWidgetsType } from '@rjsf/utils'
-
-import {
-    AddButton,
-    ArrayFieldItemTemplate,
-    ArrayFieldTemplate,
-    BaseInputTemplate,
-    DescriptionFieldTemplate,
-    FieldTemplate,
-    FieldErrorTemplate,
-    ObjectFieldTemplate,
-    RemoveButton,
-    SubmitButton,
-    TitleFieldTemplate,
-    WrapIfAdditionalTemplate,
-} from './templates'
-import { CheckboxWidget, SelectWidget } from './widgets'
-import { FormProps } from './types'
-
-export const widgets: RegistryWidgetsType = {
-    CheckboxWidget,
-    SelectWidget,
-}
-
-export const templates: FormProps['templates'] = {
-    ArrayFieldItemTemplate,
-    ArrayFieldTemplate,
-    BaseInputTemplate,
-    ButtonTemplates: { AddButton, RemoveButton, SubmitButton },
-    DescriptionFieldTemplate,
-    FieldTemplate,
-    FieldErrorTemplate,
-    ObjectFieldTemplate,
-    TitleFieldTemplate,
-    WrapIfAdditionalTemplate,
-}

package/src/Common/RJSF/constants.ts

@@ -1,10 +0,0 @@
-export const PLACEHOLDERS = {
-    SELECT: 'Please select an option',
-    INPUT: 'Please enter an input',
-    OBJECT_KEY: 'Please enter a value for the key',
-}
-
-export const DEFAULT_FIELD_TITLE = 'Key not available'
-
-// Using symbol to ensure uniqueness across the fields
-export const DO_NOT_SHOW_LABEL = Symbol('Do not show label')

package/src/Common/RJSF/index.ts

@@ -1,3 +0,0 @@
-export { RJSFForm } from './Form'
-export * from './types'
-export { getInferredTypeFromValueType, getRedirectionProps } from './utils'

package/src/Common/RJSF/rjsfForm.scss

@@ -1,18 +0,0 @@
-.rjsf-form-template {
-    &__field {
-        grid-template-columns: 250px 1fr;
-    }
-
-    &__additional-fields {
-        grid-template-columns: 1fr 1fr minmax(20px, auto);
-    }
-
-    &__array-field-item {
-        grid-template-columns: 1fr auto;
-
-        & > :first-child {
-            // This is added as the array field itself has a margin bottom
-            margin: 0;
-        }
-    }
-}

package/src/Common/RJSF/templates/ArrayFieldItemTemplate.tsx

@@ -1,31 +0,0 @@
-import React, { CSSProperties } from 'react'
-import { ArrayFieldTemplateItemType } from '@rjsf/utils'
-
-export const ArrayFieldItemTemplate = ({
-    children,
-    className,
-    disabled,
-    hasToolbar,
-    hasRemove,
-    index,
-    onDropIndexClick,
-    readonly,
-    registry,
-    uiSchema,
-}: ArrayFieldTemplateItemType) => {
-    const { RemoveButton } = registry.templates.ButtonTemplates
-
-    return (
-        <div className="display-grid rjsf-form-template__array-field-item flex-align-center dc__gap-8 mb-12">
-            {children}
-            {hasToolbar && hasRemove && (
-                <RemoveButton
-                    disabled={disabled || readonly}
-                    onClick={onDropIndexClick(index)}
-                    uiSchema={uiSchema}
-                    registry={registry}
-                />
-            )}
-        </div>
-    )
-}

package/src/Common/RJSF/templates/ArrayFieldTemplate.tsx

@@ -1,78 +0,0 @@
-import React from 'react'
-import { getTemplate, getUiOptions, ArrayFieldTemplateProps, ArrayFieldTemplateItemType } from '@rjsf/utils'
-import { FieldRowWithLabel } from '../common/FieldRow'
-import { DO_NOT_SHOW_LABEL } from '../constants'
-
-const ActionButton = ({ canAdd, onAddClick, disabled, readonly, uiSchema, registry }) => {
-    const {
-        ButtonTemplates: { AddButton },
-    } = registry.templates
-
-    return (
-        canAdd && (
-            <AddButton onClick={onAddClick} disabled={disabled || readonly} uiSchema={uiSchema} registry={registry} />
-        )
-    )
-}
-
-export const ArrayFieldTemplate = ({
-    canAdd,
-    className,
-    disabled,
-    idSchema,
-    uiSchema,
-    items,
-    onAddClick,
-    readonly,
-    registry,
-    required,
-    title,
-}: ArrayFieldTemplateProps) => {
-    const uiOptions = getUiOptions(uiSchema)
-    const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate'>('ArrayFieldItemTemplate', registry, uiOptions)
-    const label = uiOptions.title || title
-
-    return (
-        <fieldset className={className} id={idSchema.$id}>
-            {/* Show the label here in case there are no items, otherwise handled by Field Template */}
-            {items.length ? (
-                <>
-                    {items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType, index) => {
-                        // Show the title as the label for the first field
-                        const children = {
-                            ...itemProps.children,
-                            props: {
-                                ...itemProps.children.props,
-                                name: index === 0 ? label : DO_NOT_SHOW_LABEL,
-                            },
-                        }
-                        return (
-                            <ArrayFieldItemTemplate key={key} {...itemProps}>
-                                {children}
-                            </ArrayFieldItemTemplate>
-                        )
-                    })}
-                    <ActionButton
-                        canAdd={canAdd}
-                        onAddClick={onAddClick}
-                        disabled={disabled}
-                        readonly={readonly}
-                        uiSchema={uiSchema}
-                        registry={registry}
-                    />
-                </>
-            ) : (
-                <FieldRowWithLabel label={label} required={required} showLabel id={idSchema.$id}>
-                    <ActionButton
-                        canAdd={canAdd}
-                        onAddClick={onAddClick}
-                        disabled={disabled}
-                        readonly={readonly}
-                        uiSchema={uiSchema}
-                        registry={registry}
-                    />
-                </FieldRowWithLabel>
-            )}
-        </fieldset>
-    )
-}

package/src/Common/RJSF/templates/BaseInput.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import { getDefaultRegistry } from '@rjsf/core'
-import { BaseInputTemplateProps } from '@rjsf/utils'
-import { PLACEHOLDERS } from '../constants'
-
-const {
-    templates: { BaseInputTemplate },
-} = getDefaultRegistry()
-
-export const BaseInput = ({ placeholder, ...props }: BaseInputTemplateProps) => (
-    <BaseInputTemplate
-        placeholder={placeholder || PLACEHOLDERS.INPUT}
-        {...props}
-        className="form__input cn-9 fs-13 lh-20 fw-4"
-    />
-)