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

package/src/Common/RJSF/utils.ts

@@ -1,123 +0,0 @@
-import { TranslatableString, englishStringTranslator } from '@rjsf/utils'
-
-/**
- * Override for the TranslatableString from RJSF
- */
-export const translateString = (stringToTranslate: TranslatableString, params?: string[]): string => {
-    switch (stringToTranslate) {
-        case TranslatableString.NewStringDefault:
-            // Use an empty string for the new additionalProperties string default value
-            return ''
-        default:
-            return englishStringTranslator(stringToTranslate, params)
-    }
-}
-
-export const getCommonSelectStyle = (styleOverrides = {}) => {
-    return {
-        menuList: (base) => ({
-            ...base,
-            paddingTop: 0,
-            paddingBottom: 0,
-        }),
-        control: (base, state) => ({
-            ...base,
-            minHeight: '32px',
-            boxShadow: 'none',
-            backgroundColor: 'var(--N50)',
-            border: state.isFocused ? '1px solid var(--B500)' : '1px solid var(--N200)',
-            cursor: 'pointer',
-        }),
-        option: (base, state) => ({
-            ...base,
-            color: 'var(--N900)',
-            backgroundColor: state.isFocused ? 'var(--N100)' : 'white',
-            padding: '10px 12px',
-        }),
-        dropdownIndicator: (base, state) => ({
-            ...base,
-            color: 'var(--N400)',
-            padding: '0 8px',
-            transition: 'all .2s ease',
-            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
-        }),
-        valueContainer: (base, state) => ({
-            ...base,
-            padding: '0 8px',
-            fontWeight: '400',
-            color: state.selectProps.menuIsOpen ? 'var(--N500)' : base.color,
-        }),
-        loadingMessage: (base) => ({
-            ...base,
-            color: 'var(--N600)',
-        }),
-        noOptionsMessage: (base) => ({
-            ...base,
-            color: 'var(--N600)',
-        }),
-        multiValue: (base, state) => {
-            return {
-                ...base,
-                border: `1px solid var(--N200)`,
-                borderRadius: `4px`,
-                background: 'white',
-                height: '28px',
-                marginRight: '8px',
-                padding: '2px',
-                fontSize: '12px',
-            }
-        },
-        ...styleOverrides,
-    }
-}
-
-/**
- * Returns the redirection props for a url
- */
-export const getRedirectionProps = (
-    url: string,
-): React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    url: string
-} => {
-    try {
-        // The URL is validated when added using the form
-        const isInternalUrl = new URL(url).origin === window.location.origin
-        return {
-            href: url,
-            target: isInternalUrl ? '_self' : '_blank',
-            rel: isInternalUrl ? undefined : 'external noreferrer',
-            url,
-        }
-    } catch (err) {
-        return {
-            href: url,
-            target: '_blank',
-            url: `${url} (Invalid URL)`,
-        }
-    }
-}
-
-/**
- * Infers the type for json schema from value type
- */
-export const getInferredTypeFromValueType = (value) => {
-    const valueType = typeof value
-
-    switch (valueType) {
-        case 'boolean':
-        case 'string':
-        case 'number':
-            return valueType
-        case 'object':
-            if (Array.isArray(value)) {
-                return 'array'
-            }
-            if (value === null) {
-                return 'null'
-            }
-            return valueType
-        default:
-            // Unsupported or undefined types
-            return 'null'
-    }
-}

package/src/Common/RJSF/widgets/Checkbox.tsx

@@ -1,44 +0,0 @@
-import React, { ChangeEvent } from 'react'
-import Toggle from '../../Toggle/Toggle'
-import { WidgetProps } from '@rjsf/utils'
-
-export const Checkbox = ({
-    id,
-    onChange,
-    value,
-    required,
-    disabled,
-    readonly,
-    autofocus,
-    onBlur,
-    onFocus,
-}: WidgetProps) => {
-    const handleEvent = (e: ChangeEvent<HTMLInputElement>, type: 'blur' | 'focus') => {
-        const { id, checked } = e.target
-        if (type === 'blur') {
-            onBlur(id, checked)
-        } else if (type === 'focus') {
-            onFocus(id, checked)
-        }
-    }
-
-    const isSelected: boolean = typeof value === 'undefined' ? false : value
-
-    return (
-        <div>
-            <Toggle
-                selected={isSelected}
-                onSelect={onChange}
-                id={id}
-                name={id}
-                required={required}
-                disabled={disabled || readonly}
-                autoFocus={autofocus}
-                rootClassName="w-32 mb-0 dc__height-inherit"
-                onBlur={(e) => handleEvent(e, 'blur')}
-                onFocus={(e) => handleEvent(e, 'focus')}
-            />
-            <span className="dc__capitalize ml-8">{isSelected.toString()}</span>
-        </div>
-    )
-}

package/src/Common/RJSF/widgets/Select.tsx

@@ -1,77 +0,0 @@
-import React from 'react'
-import isEqual from 'lodash/isEqual'
-import { WidgetProps } from '@rjsf/utils'
-import ReactSelect, { MenuListProps, components } from 'react-select'
-import { PLACEHOLDERS } from '../constants'
-import { getCommonSelectStyle } from '../utils'
-
-import { ReactComponent as ArrowDown } from '../../../Assets/Icon/ic-chevron-down.svg'
-
-const commonStyles = getCommonSelectStyle()
-
-const MenuList = ({ children, ...props }: MenuListProps) => (
-    <components.MenuList {...props}>{Array.isArray(children) ? children.slice(0, 20) : children}</components.MenuList>
-)
-
-const DropdownIndicator = (props) => (
-    <components.DropdownIndicator {...props}>
-        <ArrowDown className="icon-dim-20 icon-n5" data-testid="overview-project-edit-dropdown" />
-    </components.DropdownIndicator>
-)
-
-export const Select = (props: WidgetProps) => {
-    const {
-        id,
-        multiple = false,
-        options,
-        value,
-        disabled,
-        readonly,
-        autofocus = false,
-        onChange,
-        onBlur,
-        onFocus,
-        placeholder,
-    } = props
-    const { enumOptions: selectOptions = [] } = options
-    const emptyValue = multiple ? [] : ''
-
-    const handleChange = (option) => {
-        onChange(multiple ? option.map((o) => o.value) : option.value)
-    }
-
-    const getOption = (value) =>
-        multiple
-            ? selectOptions.filter((option) => value.some((val) => isEqual(val, option.value)))
-            : selectOptions.find((option) => isEqual(value, option.value))
-
-    return (
-        <ReactSelect
-            id={id}
-            name={id}
-            isMulti={multiple}
-            value={typeof value === 'undefined' ? emptyValue : getOption(value)}
-            autoFocus={autofocus}
-            onChange={handleChange}
-            options={selectOptions}
-            onBlur={() => onBlur(id, value)}
-            onFocus={() => onFocus(id, value)}
-            placeholder={placeholder || PLACEHOLDERS.SELECT}
-            isDisabled={disabled || readonly}
-            styles={{
-                ...commonStyles,
-                control: (base) => ({
-                    ...base,
-                    ...commonStyles.control,
-                    backgroundColor: 'var(--N50)',
-                }),
-            }}
-            components={{
-                IndicatorSeparator: null,
-                DropdownIndicator,
-                MenuList,
-            }}
-            menuPlacement="auto"
-        />
-    )
-}

package/src/Common/RJSF/widgets/index.ts

@@ -1,2 +0,0 @@
-export { Checkbox as CheckboxWidget } from './Checkbox'
-export { Select as SelectWidget } from './Select'

package/src/Common/RadioGroup/RadioGroup.tsx

@@ -1,105 +0,0 @@
-import Tippy from '@tippyjs/react'
-import React, { useState, useEffect } from 'react'
-import { ConditionalWrap } from '../Helper'
-import './radioGroup.scss'
-
-const RadioContext = React.createContext(null)
-
-function useRadioContext() {
-    const context = React.useContext(RadioContext)
-    if (!context) {
-        throw new Error(`Radio compound components cannot be rendered outside the Toggle component`)
-    }
-    return context
-}
-
-interface RadioGroupInterface {
-    name: string
-    onChange: any
-    className?: string
-    initialTab: string
-    disabled: boolean
-    showTippy?: boolean
-    tippyContent?: any
-    dataTestId?: string
-}
-
-interface RadioGroupComposition {
-    Radio?: React.FC<any>
-}
-
-const RadioGroup: React.FC<RadioGroupInterface> & RadioGroupComposition = React.memo(function RadioGroup({
-    name,
-    onChange,
-    children,
-    className = '',
-    initialTab,
-    disabled = false,
-    dataTestId,
-}) {
-    const [selected, select] = useState(null)
-
-    useEffect(() => {
-        if (initialTab === selected) return
-        select(initialTab)
-    }, [initialTab])
-
-    return (
-        <RadioContext.Provider value={{ name, selected, select, disabled, onChange }}>
-            <div className={`${className} radio-group`}>{children}</div>
-        </RadioContext.Provider>
-    )
-})
-
-function Radio({
-    value,
-    children,
-    className = '',
-    showTippy = false,
-    tippyContent = '',
-    tippyPlacement = 'bottom',
-    canSelect = true,
-    isDisabled = false,
-    tippyClass = '',
-    dataTestId,
-}) {
-    const { name, selected, select, disabled, onChange } = useRadioContext()
-    return (
-        <ConditionalWrap
-            condition={showTippy}
-            wrap={(children) => (
-                <Tippy
-                    className={`default-tt w-250 ${tippyClass}`}
-                    arrow={false}
-                    placement={tippyPlacement as any}
-                    content={tippyContent}
-                >
-                    {children}
-                </Tippy>
-            )}
-        >
-            <label className={`${className} radio ${isDisabled || disabled ? 'disabled' : ''}`}>
-                <input
-                    type="checkbox"
-                    value={value}
-                    name={name}
-                    checked={value === selected}
-                    onChange={(e) => {
-                        e.persist()
-                        if (canSelect) {
-                            select(e.target.value)
-                        }
-                        onChange(e)
-                    }}
-                    disabled={isDisabled || disabled}
-                />
-                <span className="radio__item-label" data-testid={dataTestId}>
-                    {children}
-                </span>
-            </label>
-        </ConditionalWrap>
-    )
-}
-
-RadioGroup.Radio = Radio
-export default RadioGroup

package/src/Common/RadioGroup/radioGroup.scss

@@ -1,46 +0,0 @@
-.radio-group {
-    .label,
-    .radio,
-    .checkbox {
-        margin: 0;
-    }
-    height: 30px;
-    background: white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 4px;
-    border-radius: 4px;
-    .radio {
-        height: 100%;
-        width: auto;
-        color: var(--N400);
-        display: flex;
-        align-items: center;
-    }
-    .radio+.radio {
-        margin-top: 0;
-    }
-    input[type=checkbox] {
-        display: contents;
-        overflow: hidden;
-        max-width: 0px;
-        height: 0;
-        opacity: 0;
-        margin: unset;
-    }
-    input+.radio__item-label {
-        padding: 4px 6px;
-        height: 100%;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        transition: all 0.5s;
-        cursor: pointer;
-    }
-    input[type=checkbox]:checked+.radio__item-label {
-        background: #2c3354;
-        color: white;
-        border-radius: 4px;
-    }
-}

package/src/Common/RadioGroup.tsx

@@ -1,53 +0,0 @@
-import React, { Component, createContext } from 'react'
-import { RadioGroupItemProps, RadioGroupProps } from './Types'
-const RadioGroupContext = createContext({ name: '', value: '', disabled: false, onChange: (event) => {} })
-
-export class RadioGroupItem extends Component<RadioGroupItemProps> {
-    render() {
-        return (
-            <RadioGroupContext.Consumer>
-                {(context) => {
-                    return (
-                        <>
-                            <label className={(this.props.disabled || context.disabled) ? 'form__radio-item disabled' : 'form__radio-item'}>
-                                <input
-                                    type="radio"
-                                    className="form__checkbox"
-                                    name={context.name}
-                                    disabled={context.disabled || this.props.disabled}
-                                    onChange={context.onChange}
-                                    value={this.props.value}
-                                    checked={context.value === this.props.value}
-                                    data-testid={this.props.dataTestId}
-                                />
-                                <span className="form__radio-item-content" data-testid={`${this.props.dataTestId}-span`}>
-                                    <span className="radio__button"></span>
-                                    <span className="radio__title">{this.props.children}</span>
-                                </span>
-                            </label>
-                        </>
-                    )
-                }}
-            </RadioGroupContext.Consumer>
-        )
-    }
-}
-
-export class RadioGroup extends Component<RadioGroupProps> {
-    render() {
-        return (
-            <div className={`form__radio-group ${this.props.className || ''}`}>
-                <RadioGroupContext.Provider
-                    value={{
-                        name: this.props.name,
-                        value: this.props.value,
-                        disabled: this.props.disabled,
-                        onChange: this.props.onChange,
-                    }}
-                >
-                    {this.props.children}
-                </RadioGroupContext.Provider>
-            </div>
-        )
-    }
-}

package/src/Common/Reload.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import loadingFailure from '../Assets/Img/ic-loading-failure.png'
-import { ReloadType } from './Types'
-
-export default function Reload({ reload, className = '' }: ReloadType) {
-    function refresh(e) {
-        window.location.reload()
-    }
-    return (
-        <article className={`flex w-100 h-100 ${className}`}>
-            <div className="flex column w-250 dc__align-center" data-testid="reload">
-                <img src={loadingFailure} style={{ height: 'auto' }} className="w-100 mb-12" alt="load-error" />
-                <h3 className="title dc__bold">Failed to load</h3>
-                <div className="dc__empty__subtitle mb-20">
-                    We could not load this page. Please give us another try.
-                </div>
-                <button type="button" className="cta ghosted" onClick={typeof reload === 'function' ? reload : refresh}>
-                    Retry
-                </button>
-            </div>
-        </article>
-    )
-}

package/src/Common/ResizableTextarea.tsx

@@ -1,73 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react'
-import { useThrottledEffect } from './Helper'
-import { ResizableTextareaProps } from './Types'
-
-export const ResizableTextarea: React.FC<ResizableTextareaProps> = ({
-                                                                        minHeight,
-                                                                        maxHeight,
-                                                                        value,
-                                                                        onChange = null,
-                                                                        onBlur = null,
-                                                                        onFocus = null,
-                                                                        className = '',
-                                                                        placeholder = 'Enter your text here..',
-                                                                        lineHeight = 14,
-                                                                        padding = 12,
-                                                                        disabled = false,
-                                                                        dataTestId,
-                                                                        ...props
-                                                                    }) => {
-    const [text, setText] = useState('')
-    const _textRef = useRef(null)
-
-    useEffect(() => {
-        setText(value)
-    }, [value])
-
-    function handleChange(e) {
-        e.persist()
-        setText(e.target.value)
-        if (typeof onChange === 'function') onChange(e)
-    }
-
-    function handleBlur(e) {
-        if (typeof onBlur === 'function') onBlur(e)
-    }
-
-    function handleFocus(e) {
-        if (typeof onFocus === 'function') onFocus(e)
-    }
-
-    useThrottledEffect(
-        () => {
-            _textRef.current.style.height = 'auto'
-            let nextHeight = _textRef.current.scrollHeight
-            if (minHeight && nextHeight < minHeight) {
-                nextHeight = minHeight
-            }
-            if (maxHeight && nextHeight > maxHeight) {
-                nextHeight = maxHeight
-            }
-            _textRef.current.style.height = nextHeight + 2 + 'px'
-        },
-        500,
-        [text],
-    )
-
-    return (
-        <textarea
-            data-testid={dataTestId}
-            ref={(el) => (_textRef.current = el)}
-            value={text}
-            placeholder={placeholder}
-            className={`dc__resizable-textarea ${className}`}
-            onChange={handleChange}
-            onBlur={handleBlur}
-            onFocus={handleFocus}
-            style={{ lineHeight: `${lineHeight}px`, padding: `${padding}px` }}
-            spellCheck={false}
-            disabled={disabled}
-            {...props}
-        />
-    )
-}

package/src/Common/Security/ScanVulnerabilitiesTable.tsx

@@ -1,55 +0,0 @@
-import React from 'react'
-import { ScanVulnerabilitiesTableProps, VulnerabilityType } from '../Types'
-import './scanVulnerabilities.css'
-
-export default function ScanVulnerabilitiesTable({ vulnerabilities }: ScanVulnerabilitiesTableProps) {
-    const renderRow = (vulnerability: VulnerabilityType) => {
-        return (
-            <tr
-                className="dc__security-tab__table-row cursor"
-                onClick={(e) => {
-                    window.open(`https://cve.mitre.org/cgi-bin/cvename.cgi?name=${vulnerability.name}`, '_blank')
-                }}
-            >
-                <td className="security-tab__cell-cve dc__cve-cell">
-                    <a
-                        href={`https://cve.mitre.org/cgi-bin/cvename.cgi?name=${vulnerability.name}`}
-                        rel="noopener noreferrer"
-                        target="_blank"
-                    >
-                        {vulnerability.name}
-                    </a>
-                </td>
-                <td className="security-tab__cell-severity">
-                    <span className={`fill-${vulnerability.severity?.toLowerCase()}`}>{vulnerability.severity}</span>
-                </td>
-                <td className="security-tab__cell-package">{vulnerability.package}</td>
-                <td className="security-tab__cell-current-ver">{vulnerability.version}</td>
-                <td className="security-tab__cell-fixed-ver">{vulnerability.fixedVersion}</td>
-                <td
-                    className={`security-tab__cell-policy security-tab__cell-policy--${vulnerability.policy?.toLowerCase()}`}
-                >
-                    {vulnerability.policy?.toLowerCase()}
-                </td>
-            </tr>
-        )
-    }
-
-    return (
-        <table className="security-tab__table">
-            <tbody>
-                <tr className="security-tab__table-header">
-                    <th className="security-cell-header security-tab__cell-cve">CVE</th>
-                    <th className="security-cell-header security-tab__cell-severity">Severity</th>
-                    <th className="security-cell-header security-tab__cell-package">Package</th>
-                    <th className="security-cell-header security-tab__cell-current-ver">Current Version</th>
-                    <th className="security-cell-header security-tab__cell-fixed-ver">Fixed In Version</th>
-                    <th className="security-cell-header security-tab__cell-policy">Policy</th>
-                </tr>
-                {vulnerabilities.map((vulnerability) => {
-                    return renderRow(vulnerability)
-                })}
-            </tbody>
-        </table>
-    )
-}

package/src/Common/Security/scanVulnerabilities.css

@@ -1,69 +0,0 @@
-.modal-body--scan-details {
-    position: fixed;
-    top: 0;
-    right: 0;
-    background: var(--N000);
-    width: 800px;
-}
-
-.security-tab__table {
-    width: 100%;
-}
-
-.security-tab__table-header {
-    border-bottom: solid 1px var(--N200);
-}
-
-.security-cell-header {
-    font-size: 12px;
-    font-weight: 600;
-    line-height: 1.5;
-    letter-spacing: normal;
-    text-transform: uppercase;
-    color: var(--N500);
-}
-
-.dc__security-tab__table-row {
-    font-size: 13px;
-    font-weight: normal;
-    line-height: 1.54;
-    letter-spacing: normal;
-    color: var(--N900);
-    box-shadow: inset 0 -1px 0 0 #f5f5f5;
-}
-
-.security-tab__cell-cve,
-.security-tab__cell-severity,
-.security-tab__cell-package,
-.security-tab__cell-current-ver,
-.security-tab__cell-fixed-ver,
-.security-tab__cell-policy {
-    padding: 10px;
-    max-width: 120px;
-    word-wrap: break-word;
-}
-
-.security-tab__cell-cve {
-    padding-left: 0px;
-    text-align: left;
-    width: 20%;
-}
-
-.security-tab__cell-policy {
-    padding-right: 0px;
-}
-
-.security-tab__cell-policy--whitelist,
-.security-tab__cell-policy--whitelisted {
-    color: var(--G500);
-    text-transform: capitalize;
-}
-
-.security-tab__cell-policy--block {
-    color: var(--R500);
-    text-transform: capitalize;
-}
-
-.scanned-object__results {
-    margin: 0 20px;
-}