@devtron-labs/devtron-fe-common-lib 0.0.63-beta-5 → 0.0.63-beta-6

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/SearchBar/SearchBar.component.tsx

@@ -1,131 +0,0 @@
-import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent, useEffect } from 'react'
-import { ReactComponent as Search } from '../../Assets/Icon/ic-search.svg'
-import { ReactComponent as Clear } from '../../Assets/Icon/ic-error-cross.svg'
-import { SearchBarProps } from './types'
-import './searchBar.scss'
-import { debounce } from '../Helper'
-
-/**
- * Generic search input component with support for enter based and debounced search
- * Note: The component is uncontrolled
- *
- * @example Usage with default debounced search
- * ```tsx
- * <SearchBar handleSearchChange={triggerSearchApi} shouldDebounce />
- * ```
- *
- * @example Initial search text
- * ```tsx
- * <SearchBar initialSearchText="Keyword" />
- * ```
- *
- * @example Custom width
- * ```tsx
- * <SearchBar containerClassName="w-300" />
- * ```
- *
- * @example Trigger search on enter key press
- * ```tsx
- * <SearchBar handleEnter={triggerSearchApi} />
- * ```
- *
- * @example Custom timeout for debounced search
- * ```tsx
- * <SearchBar handleSearchChange={triggerSearchApi} shouldDebounce debounceTimeout={500} />
- * ```
- *
- * @example Placeholder for the search
- * ```tsx
- * <SearchBar inputProps={{ placeholder: 'Enter search text' }} />
- * ```
- */
-const SearchBar = ({
-    initialSearchText = '',
-    handleSearchChange = () => {},
-    handleEnter = () => {},
-    inputProps = {},
-    containerClassName,
-    shouldDebounce = false,
-    debounceTimeout = 300,
-}: SearchBarProps) => {
-    const [showClearButton, setShowClearButton] = useState(!!initialSearchText)
-    const inputRef = useRef<HTMLInputElement>()
-    const debouncedSearchChange = useCallback(debounce(handleSearchChange, debounceTimeout), [
-        handleSearchChange,
-        debounceTimeout,
-    ])
-
-    // assuming initialSearchText will change if we are changing history otherwise will be constant and will not change
-    // since on changing history we expect to make api call using useAsync so not applying handleEnter
-    useEffect(() => {
-        inputRef.current.value = initialSearchText
-        setShowClearButton(!!initialSearchText)
-    }, [initialSearchText])
-
-    const _applySearch = (value: string) => {
-        handleSearchChange(value)
-        handleEnter(value)
-    }
-
-    const clearSearch = () => {
-        inputRef.current.value = ''
-        _applySearch('')
-        setShowClearButton(false)
-    }
-
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-        const { value } = e.target
-        setShowClearButton(!!value)
-
-        if (shouldDebounce) {
-            debouncedSearchChange(value)
-        } else {
-            handleSearchChange(value)
-        }
-    }
-
-    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-        const { key } = e
-
-        if (key === 'Enter') {
-            e.preventDefault()
-            const inputTarget = e.target as HTMLInputElement
-            const value = inputTarget.value.trim()
-            _applySearch(value)
-        }
-    }
-
-    return (
-        <div className={containerClassName}>
-            <div className="search-bar bc-n50 focus-within-border-b5 dc__hover-border-n300 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32">
-                <Search className="search-bar__icon dc__position-abs icon-color-n6 icon-dim-16" />
-                <input
-                    placeholder="Search"
-                    data-testid="search-bar"
-                    type="text"
-                    {...inputProps}
-                    defaultValue={initialSearchText}
-                    className={`search-bar__input bc-n50 dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ${
-                        showClearButton ? 'pr-30' : 'pr-10'
-                    }`}
-                    onChange={handleChange}
-                    onKeyDown={handleKeyDown}
-                    ref={inputRef}
-                />
-                {/* TODO: Sync with product since it should have ic-enter in case of not applied */}
-                {showClearButton && (
-                    <button
-                        className="flex search-bar__clear-button dc__position-abs dc__transparent mt-0 mb-0 mr-5 ml-5"
-                        type="button"
-                        onClick={clearSearch}
-                        aria-label="Clear search"
-                    >
-                        <Clear className="icon-dim-16 icon-n4 dc__vertical-align-middle" />
-                    </button>
-                )}
-            </div>
-        </div>
-    )
-}
-
-export default SearchBar

package/src/Common/SearchBar/index.ts

@@ -1,2 +0,0 @@
-export { default as SearchBar } from './SearchBar.component'
-export type { SearchBarProps } from './types'

package/src/Common/SearchBar/searchBar.scss

@@ -1,31 +0,0 @@
-.search-bar {
-
-    &:focus,
-    &:focus-within {
-        outline: none;
-        border: solid 1px var(--B500) !important;
-    }
-
-    &__input {
-
-        &:focus,
-        &:focus-visible {
-            border: none;
-            outline: none;
-        }
-    }
-
-    &__icon {
-        z-index: 1;
-        top: 50%;
-        left: 8px;
-        transform: translateY(-50%);
-    }
-
-    &__clear-button {
-        right: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        z-index: 1;
-    }
-}

package/src/Common/SearchBar/types.ts

@@ -1,34 +0,0 @@
-export interface SearchBarProps {
-    /**
-     * Initial search text
-     *
-     * @default ''
-     */
-    initialSearchText?: string
-    /**
-     * Search handler for the search input
-     */
-    handleSearchChange?: (searchText: string) => void
-    /**
-     * Enter event handler for the search input
-     */
-    handleEnter?: (searchText: string) => void
-    /**
-     * Input props for the search input
-     */
-    inputProps?: React.InputHTMLAttributes<HTMLInputElement>
-    /**
-     * Class name for the container; can be used for handling width
-     */
-    containerClassName?: string
-    /**
-     * If true, the change handler would be triggered with debounce
-     *
-     * @default false
-     */
-    shouldDebounce?: boolean
-    /**
-     * Timeout for the debounce handler to be triggered
-     */
-    debounceTimeout?: number
-}

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

package/src/Common/ServerError.ts

@@ -1,31 +0,0 @@
-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
-        let 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)
-    }
-}

package/src/Common/SortableTableHeaderCell/SortableTableHeaderCell.tsx

@@ -1,44 +0,0 @@
-import { ReactComponent as SortIcon } from '../../Assets/Icon/ic-arrow-up-down.svg'
-import { ReactComponent as SortArrowDown } from '../../Assets/Icon/ic-sort-arrow-down.svg'
-import { SortingOrder } from '../Constants'
-import { SortableTableHeaderCellProps } from './types'
-
-/**
- * Reusable component for the table header cell with support for sorting icons
- *
- * @example Usage
- * ```tsx
- * <SortableTableHeaderCell
- *   isSorted={currentSortedCell === 'cell'}
- *   triggerSorting={() => {}}
- *   sortOrder={SortingOrder.ASC}
- *   title="Header Cell"
- *   disabled={isDisabled}
- * />
- * ```
- */
-const SortableTableHeaderCell = ({
-    isSorted,
-    triggerSorting,
-    sortOrder,
-    title,
-    disabled,
-}: SortableTableHeaderCellProps) => (
-    <button
-        type="button"
-        className="dc__transparent p-0 bcn-0 cn-7 flex dc__content-start dc__gap-4 cursor"
-        onClick={triggerSorting}
-        disabled={disabled}
-    >
-        <span className="dc__uppercase dc__ellipsis-right">{title}</span>
-        {isSorted ? (
-            <SortArrowDown
-                className={`icon-dim-12 mw-12 scn-7 ${sortOrder === SortingOrder.DESC ? 'dc__flip-180' : ''}`}
-            />
-        ) : (
-            <SortIcon className="icon-dim-12 mw-12 scn-7" />
-        )}
-    </button>
-)
-
-export default SortableTableHeaderCell

package/src/Common/SortableTableHeaderCell/index.ts

@@ -1,2 +0,0 @@
-export { default as SortableTableHeaderCell } from './SortableTableHeaderCell'
-export type { SortableTableHeaderCellProps } from './types'

package/src/Common/SortableTableHeaderCell/types.ts

@@ -1,26 +0,0 @@
-import { SortingOrder } from '../Constants'
-
-export interface SortableTableHeaderCellProps {
-    /**
-     * If true, the cell is sorted
-     */
-    isSorted: boolean
-    /**
-     * Callback for handling the sorting of the cell
-     */
-    triggerSorting: () => void
-    /**
-     * Current sort order
-     *
-     * Note: On click, the sort order should be updated as required
-     */
-    sortOrder: SortingOrder
-    /**
-     * Label for the cell
-     */
-    title: string
-    /**
-     * If true, the cell is disabled
-     */
-    disabled: boolean
-}