@devtron-labs/devtron-fe-common-lib 0.0.7 → 0.0.9-beta-2

package/src/Common/PopupMenu.tsx

@@ -1,6 +1,8 @@
-import React, { useEffect } from 'react';
-import {Modal} from './Modals/Modal';
-const PopupContext = React.createContext(null);
+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)
@@ -10,7 +12,12 @@ function usePopupContext() {
     return context
 }
 
-function PopupMenu({ children = null, onToggleCallback = null, autoClose = false, autoPosition = false }) {
+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)
@@ -135,7 +142,8 @@ function Button({
     tabIndex = 0,
     onHover = false,
     isKebab = false,
-}) {
+    dataTestId = "",
+}: PopupMenuButtonType) {
     const { handleOpen, popupPosition, buttonRef, initialiseButtonWidth } = usePopupContext()
     return (
         <button
@@ -148,13 +156,21 @@ function 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 }) {
+function Body({
+    children = null,
+    rootClassName = '',
+    style = {},
+    autoWidth = false,
+    preventWheelDisable = false,
+    noBackDrop,
+}: PopupMenuBodyType) {
     const { handleClose, popupPosition, opacity, callbackRef, buttonWidth } = usePopupContext()
     return popupPosition ? (
         <Modal
@@ -170,6 +186,7 @@ function Body({ children = null, rootClassName = '', style = {}, autoWidth = fal
                 opacity: opacity,
             }}
             preventWheelDisable={preventWheelDisable}
+            noBackDrop={noBackDrop}
         >
             {children}
         </Modal>

package/src/Common/Progressing.tsx

@@ -1,19 +1,10 @@
 import React from 'react'
+import { ProgressingProps } from './Types'
 
-interface ProgressingProps {
-    pageLoader?: boolean
-    loadingText?: string
-    size?: number
-    fullHeight?: boolean
-    theme?: 'white' | 'default'
-    styles?: React.CSSProperties
-    children?: React.ReactNode
-}
-
-export function Progressing({ pageLoader, size, theme, styles }: ProgressingProps): JSX.Element {
+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}>
+        <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">
@@ -27,7 +18,7 @@ export function Progressing({ pageLoader, size, theme, styles }: ProgressingProp
                             type="rotate"
                         />
                         <path
-                            fill="#06C"
+                            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"
                         />
@@ -42,16 +33,18 @@ export function DetailsProgressing({
     loadingText,
     size = 24,
     fullHeight = false,
-    children,
     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} />
+                <Progressing size={size} fillColor={fillColor} />
             </span>
             {loadingText && <span className="mt-10">{loadingText}</span>}
             {children}

package/src/Common/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,88 @@
+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 = '', 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="bottom" 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

@@ -1,10 +1,7 @@
 import React, { Component, createContext } from 'react'
+import { RadioGroupItemProps, RadioGroupProps } from './Types'
 const RadioGroupContext = createContext({ name: '', value: '', disabled: false, onChange: (event) => {} })
 
-export interface RadioGroupItemProps {
-    value: string
-}
-
 export class RadioGroupItem extends Component<RadioGroupItemProps> {
     render() {
         return (
@@ -21,8 +18,9 @@ export class RadioGroupItem extends Component<RadioGroupItemProps> {
                                     onChange={context.onChange}
                                     value={this.props.value}
                                     checked={context.value === this.props.value}
+                                    data-testid={this.props.dataTestId}
                                 />
-                                <span className="form__radio-item-content">
+                                <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>
@@ -35,14 +33,6 @@ export class RadioGroupItem extends Component<RadioGroupItemProps> {
     }
 }
 
-export interface RadioGroupProps {
-    value: string
-    name: string
-    disabled?: boolean
-    onChange: (event) => void
-    className?: string
-}
-
 export class RadioGroup extends Component<RadioGroupProps> {
     render() {
         return (

package/src/Common/Reload.tsx

@@ -1,18 +1,23 @@
 import React from 'react'
-import loadingFailure from '../Assets/Img/ic-loading-failure.png';
+import loadingFailure from '../Assets/Img/ic-loading-failure.png'
+import { ReloadType } from './Types'
 
-export default function Reload({ reload = null, className = '' }) {
-    function refresh(e){
-        window.location.reload();
+export default function Reload({ reload, className = '' }: ReloadType) {
+    function refresh(e) {
+        window.location.reload()
     }
     return (
-        <article className={`flex ${className}`} style={{ width: '100%', height: '100%' }}>
-            <div className="flex column" style={{ width: '250px', textAlign: 'center' }}>
-                <img src={loadingFailure} style={{ width: '100%', height: 'auto', marginBottom: '12px' }} alt="load-error" />
+        <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" style={{ marginBottom: '20px' }}>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 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/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,67 @@
+.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;
+}
+
+.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/TippyCustomized.tsx

@@ -1,41 +1,16 @@
-import React, { ReactNode, useRef } from 'react'
+import React, { useRef, useState } from 'react'
 import Tippy from '@tippyjs/react'
-import { Placement } from 'tippy.js'
 import { ReactComponent as CloseIcon } from '../Assets/Icon/ic-cross.svg'
+import { ReactComponent as QuestionFilled } from '../Assets/Icon/ic-help.svg'
 import 'tippy.js/animations/shift-toward-subtle.css'
-import { TippyTheme } from './Types'
-
-interface TippyCustomizedProps {
-    theme: TippyTheme
-    visible?: boolean
-    heading?: string
-    infoTextHeading?: string
-    placement: Placement
-    className?: string
-    Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
-    iconPath?: string
-    iconClass?: string
-    iconSize?: number // E.g. 16, 20, etc.. Currently, there are around 12 sizes supported. Check `icons.css` or `base.scss` for supported sizes or add new size (class names starts with `icon-dim-`).
-    onImageLoadError?: (e) => void
-    onClose?: () => void
-    infoText?: string
-    showCloseButton?: boolean
-    arrow?: boolean
-    interactive?: boolean
-    showOnCreate?: boolean
-    trigger?: string
-    animation?: string
-    duration?: number
-    additionalContent?: ReactNode
-    documentationLink?: string
-    documentationLinkText?: string
-    children: React.ReactElement<any>
-}
+import { TippyCustomizedProps, TippyTheme } from './Types'
+import { not } from './Helper'
 
 // This component will handle some of the new tippy designs and interactions
 // So this can be updated to support further for new features or interactions
 export function TippyCustomized(props: TippyCustomizedProps) {
     const tippyRef = useRef(null)
+    const [showHeadingInfo, setShowHeadingInfo] = useState(false)
     const isWhiteTheme = props.theme === TippyTheme.white
 
     const onTippyMount = (tippyInstance) => {
@@ -52,6 +27,7 @@ export function TippyCustomized(props: TippyCustomizedProps) {
                 props.onClose()
             }
         }
+        setShowHeadingInfo(false)
     }
 
     const closeOnEsc = (e) => {
@@ -60,6 +36,10 @@ export function TippyCustomized(props: TippyCustomizedProps) {
         }
     }
 
+    const toggleHeadingInfo = (e) => {
+        setShowHeadingInfo(not)
+    }
+
     const getTippyContent = () => {
         const {
             Icon,
@@ -68,6 +48,7 @@ export function TippyCustomized(props: TippyCustomizedProps) {
             iconSize,
             onImageLoadError,
             heading,
+            headingInfo,
             infoTextHeading,
             infoText,
             showCloseButton,
@@ -86,7 +67,7 @@ export function TippyCustomized(props: TippyCustomizedProps) {
                         <img
                             className={`icon-dim-${iconSize || 20} mr-6 ${iconClass || ''}`}
                             src={iconPath}
-                            alt={heading}
+                            alt="Heading"
                             onError={onImageLoadError}
                         />
                     ) : (
@@ -97,6 +78,11 @@ export function TippyCustomized(props: TippyCustomizedProps) {
                         )
                     )}
                     {heading && <span className={`fs-14 fw-6 lh-20 ${showCloseButton ? 'mr-6' : ''}`}>{heading}</span>}
+                    {headingInfo && (
+                        <div className="icon-dim-20 cursor" onClick={toggleHeadingInfo}>
+                            <QuestionFilled className="icon-dim-20" />
+                        </div>
+                    )}
                     {showCloseButton && (
                         <div className="icon-dim-16 ml-auto">
                             <CloseIcon
@@ -106,6 +92,18 @@ export function TippyCustomized(props: TippyCustomizedProps) {
                         </div>
                     )}
                 </div>
+                {showHeadingInfo && (
+                    <div
+                        className={`flex left bcv-1 fs-13 fw-4 lh-20 pt-8 pb-8 ${
+                            isWhiteTheme ? 'pl-12 pr-12' : 'pl-20 pr-20'
+                        }`}
+                    >
+                        <div className="icon-dim-20 mr-8">
+                            <QuestionFilled className="icon-dim-20 fcv-5" />
+                        </div>
+                        <div className="dc__word-break dc__hyphens-auto">{headingInfo}</div>
+                    </div>
+                )}
                 {infoTextHeading && (
                     <div
                         className={`dc__word-break dc__hyphens-auto fs-14 fw-6 lh-20 ${

package/src/Common/Toggle/Toggle.scss

@@ -0,0 +1,70 @@
+.toggle__switch {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+
+    &.disabled{
+        cursor: not-allowed;
+        .toggle__slider{
+            cursor: not-allowed;
+        }
+    }
+}
+
+
+/* Hide default HTML checkbox */
+
+.toggle__switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+
+/* The slider */
+
+.toggle__slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: all .4s ease;
+}
+
+.toggle__slider:before {
+    position: absolute;
+    content: "";
+    height: calc( 100% - 8px);
+    width: calc( 50% - 4px);
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: all 0.4s ease;
+}
+
+input:checked+.toggle__slider {
+    background-color: var(--color);
+}
+
+input:focus+.toggle__slider {
+    box-shadow: 0 0 1px var(--color);
+}
+
+input:checked+.toggle__slider:before {
+    transform: translateX(calc( 100%));
+}
+
+
+/* Rounded sliders */
+
+.toggle__slider.round {
+    border-radius: 34px;
+}
+
+.toggle__slider.round:before {
+    border-radius: 50%;
+}

package/src/Common/Toggle/Toggle.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useEffectAfterMount } from '../Helper';
+import './Toggle.scss'
+
+const Toggle = ({selected=false, onSelect=null, color="#36b37e", rootClassName="", disabled=false, dataTestId="handle-toggle-button", ...props})=>{
+    const [active, setActive] = React.useState(selected);
+
+    useEffectAfterMount(()=>{
+        if(typeof onSelect === 'function'){
+            if(active !== selected){
+                onSelect(active)
+            }
+        }
+    },[active])
+
+    useEffectAfterMount(() => {
+        setActive(selected)
+    }, [selected])
+
+    function handleClick(e){
+        if(!disabled){
+            setActive(active=>!active)
+        }
+    }
+
+    return (
+        <label
+            {...props}
+            className={`${rootClassName} toggle__switch ${disabled ? 'disabled' : ''}`}
+            style={{ ['--color' as any]: color }}
+        >
+            <input type="checkbox" checked={!!active} onChange={handleClick} className="toggle__input" />
+            <span className="toggle__slider round" data-testid={dataTestId}></span>
+        </label>
+    )
+}
+
+export default Toggle