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

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,53 @@
+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

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

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

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

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

package/src/Common/SearchBar/searchBar.scss

@@ -0,0 +1,31 @@
+.search-bar {
+
+    &:focus,
+    &:focus-within {
+        outline: none;
+        border: solid 1px var(--B500);
+    }
+
+    &__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

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

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

@@ -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,31 @@
+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

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

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

package/src/Common/SortableTableHeaderCell/types.ts

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