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

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

@@ -0,0 +1,44 @@
+import { ChangeEvent } from 'react'
+import { WidgetProps } from '@rjsf/utils'
+import Toggle from '../../Toggle/Toggle'
+
+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

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

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

package/src/Common/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,100 @@
+import Tippy from '@tippyjs/react'
+import { useState, useEffect } from 'react'
+import * as React 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(
+    ({ 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>
+        )
+    },
+)
+
+const 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

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

@@ -0,0 +1,54 @@
+import { 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) => (
+                    <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 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

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

@@ -0,0 +1,74 @@
+import { useState, useEffect, useRef } from 'react'
+import * as React 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

@@ -0,0 +1,50 @@
+import { ScanVulnerabilitiesTableProps, VulnerabilityType } from '../Types'
+import './scanVulnerabilities.css'
+
+export default function ScanVulnerabilitiesTable({ vulnerabilities }: ScanVulnerabilitiesTableProps) {
+    const renderRow = (vulnerability: VulnerabilityType) => (
+        <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) => renderRow(vulnerability))}
+            </tbody>
+        </table>
+    )
+}

package/src/Common/Security/scanVulnerabilities.css

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

package/src/Common/ServerError.ts

@@ -0,0 +1,35 @@
+export class ServerError {
+    code: number
+
+    internalMessage: string | null
+
+    userMessage: string | null
+
+    moreInfo?: string | null
+
+    constructor(error) {
+        this.code = error.code || 0
+        this.userMessage = error.userMessage || ''
+        this.internalMessage = error.internalMessage || ''
+        this.moreInfo = error.moreInfo || ''
+    }
+}
+
+export class ServerErrors extends Error {
+    code: number
+
+    errors: ServerError[]
+
+    constructor(obj: { code: number; errors: ServerError[] }) {
+        super()
+        this.code = obj.code
+        const message = obj.errors.reduce((str: string, err: ServerError) => {
+            str += `${err.internalMessage || err.userMessage}`
+            return str
+        }, '')
+        this.name = `[${obj.code.toString()}]`
+        this.message = message
+        this.errors = obj.errors.map((err) => new ServerError(err))
+        Object.setPrototypeOf(this, ServerErrors.prototype)
+    }
+}