@devtron-labs/devtron-fe-common-lib 0.0.60-beta-1 → 0.0.60-beta-3

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;
+    }
+}

package/src/Common/Pagination/types.ts

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

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

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

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

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

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

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

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

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

package/src/Common/RJSF/rjsfForm.scss

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