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

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,36 +1,8 @@
-import React, { ReactNode, useRef } from 'react'
+import React, { useRef } from 'react'
 import Tippy from '@tippyjs/react'
-import { Placement } from 'tippy.js'
 import { ReactComponent as CloseIcon } from '../Assets/Icon/ic-cross.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'
 
 // 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
@@ -86,7 +58,7 @@ export function TippyCustomized(props: TippyCustomizedProps) {
                         <img
                             className={`icon-dim-${iconSize || 20} mr-6 ${iconClass || ''}`}
                             src={iconPath}
-                            alt={heading}
+                            alt="Heading"
                             onError={onImageLoadError}
                         />
                     ) : (

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

package/src/Common/Types.ts

@@ -1,3 +1,5 @@
+import { ReactNode, CSSProperties } from 'react'
+import { Placement } from 'tippy.js'
 export interface ResponseType {
     code: number
     status: string
@@ -29,3 +31,291 @@ export interface Teams {
     name: string
     active: boolean
 }
+
+export enum CHECKBOX_VALUE {
+    CHECKED = 'CHECKED',
+    INTERMEDIATE = 'INTERMEDIATE',
+}
+export interface CheckboxProps {
+    onChange: (event) => void
+    isChecked: boolean
+    value: 'CHECKED' | 'INTERMEDIATE'
+    disabled?: boolean
+    tabIndex?: number
+    rootClassName?: string
+    onClick?: (event) => void
+    id?: string
+    dataTestId?: string
+}
+
+export interface TippyCustomizedProps {
+    theme: TippyTheme
+    visible?: boolean
+    heading?: ReactNode | 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>
+}
+export interface GenericEmptyStateType {
+    title: ReactNode
+    image?
+    classname?: string
+    subTitle?: ReactNode
+    isButtonAvailable?: boolean
+    styles?: CSSProperties
+    heightToDeduct?: number
+    imageType?: string
+    renderButton?: () => JSX.Element
+    imageClassName?: string
+    children?: ReactNode
+    noImage?: boolean
+}
+
+export enum ImageType {
+    Large = 'large',
+    Medium = 'medium',
+}
+
+export interface InfoColourBarType {
+    message: React.ReactNode
+    classname: string
+    Icon
+    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-`).
+    renderActionButton?: () => JSX.Element
+    linkText?: React.ReactNode
+    redirectLink?: string
+    linkOnClick?: () => void
+    linkClass?: string
+    internalLink?: boolean
+    styles?: CSSProperties
+}
+
+export interface ReloadType {
+    reload?: (event?: any) => void
+    className?: string
+}
+
+export interface RadioGroupItemProps {
+    value: string
+    dataTestId?: string
+}
+
+export interface RadioGroupProps {
+    value: string
+    name: string
+    disabled?: boolean
+    onChange: (event) => void
+    className?: string
+}
+
+export interface ProgressingProps {
+    pageLoader?: boolean
+    loadingText?: string
+    size?: number
+    fullHeight?: boolean
+    theme?: 'white' | 'default'
+    styles?: React.CSSProperties
+    children?: React.ReactNode
+    fillColor?: string
+}
+
+export interface PopupMenuType {
+    children?: any
+    onToggleCallback?: (isOpen: boolean) => void
+    autoClose?: boolean
+    autoPosition?: boolean
+}
+
+export interface PopupMenuButtonType {
+    children?: ReactNode
+    disabled?: boolean
+    rootClassName?: string
+    tabIndex?: number
+    onHover?: boolean
+    isKebab?: boolean
+    dataTestId?: string
+}
+
+export interface PopupMenuBodyType {
+    children?: ReactNode
+    rootClassName?: string
+    style?: React.CSSProperties
+    autoWidth?: boolean
+    preventWheelDisable?: boolean
+    noBackDrop?: boolean
+}
+
+export interface ModalType {
+    style?: React.CSSProperties
+    children?: ReactNode
+    modal?: boolean
+    rootClassName?: string
+    onClick?: any
+    callbackRef?: (element?: any) => any
+    preventWheelDisable?: boolean
+    noBackDrop?: boolean
+}
+
+export type CDModalTabType = 'SECURITY' | 'CHANGES'
+
+export const CDModalTab = {
+    Security: <CDModalTabType>'SECURITY',
+    Changes: <CDModalTabType>'CHANGES',
+}
+
+export enum DeploymentNodeType {
+    PRECD = 'PRECD',
+    CD = 'CD',
+    POSTCD = 'POSTCD',
+    APPROVAL = 'APPROVAL'
+}
+
+export interface UserApprovalConfigType {
+    requiredCount: number
+}
+
+interface ApprovalUserDataType {
+    dataId: number
+    userActionTime: string
+    userComment: string
+    userEmail: string
+    userId: number
+    userResponse: number
+}
+
+export interface UserApprovalMetadataType {
+    approvalRequestId: number
+    approvalRuntimeState: number
+    approvedUsersData: ApprovalUserDataType[]
+    requestedUserData: ApprovalUserDataType
+}
+
+export interface CommonNodeAttr {
+    connectingCiPipelineId?: number
+    parents: string | number[] | string[]
+    x: number
+    y: number
+    title: string
+    description?: string
+    triggerType?: string
+    id: string
+    icon?: string
+    status?: string
+    isSource: boolean
+    isGitSource: boolean
+    isRoot: boolean
+    downstreams: string[]
+    type: 'CI' | 'GIT' | 'PRECD' | 'CD' | 'POSTCD' | 'WEBHOOK'
+    parentCiPipeline?: number
+    parentAppId?: number
+    url?: string
+    branch?: string
+    sourceType?: string
+    colorCode?: string
+    isExternalCI?: boolean
+    isLinkedCI?: boolean
+    environmentName?: string //used for CDs
+    environmentId?: number
+    inputMaterialList?: any[]
+    rollbackMaterialList?: any[] //used for CDs
+    linkedCount?: number //used for CI
+    deploymentStrategy?: string
+    height: number
+    width: number
+    preNode?: CommonNodeAttr //used for CDs
+    postNode?: CommonNodeAttr //used for CDs
+    stageIndex?: number //used for CDs
+    sourceNodes?: Array<CommonNodeAttr> //used for CI
+    downstreamNodes?: Array<CommonNodeAttr>
+    parentPipelineId?: string
+    parentPipelineType?: string
+    parentEnvironmentName?: string
+    isRegex?: boolean
+    regex?: string
+    primaryBranchAfterRegex?: string
+    storageConfigured?: boolean
+    deploymentAppDeleteRequest?: boolean
+    approvalUsers?: string[]
+    userApprovalConfig?: UserApprovalConfigType
+    requestedUserId?: number
+    helmPackageName?: string
+    isVirtualEnvironment?: boolean
+}
+
+
+export interface VulnerabilityType {
+    name: string;
+    severity: "CRITICAL" | "MODERATE" | "LOW";
+    package: string;
+    version: string;
+    fixedVersion: string;
+    policy: string;
+    url?: string;
+}
+
+export interface ScanVulnerabilitiesTableProps {
+    vulnerabilities: VulnerabilityType[];
+}
+
+export interface MaterialInfo {
+    revision: string
+    modifiedTime: string | Date
+    author: string
+    message: string
+    commitLink: string
+    tag: string
+    webhookData: string
+    branch: string
+    url?: string
+    type?: string
+}
+
+export interface CDMaterialType {
+    index: number
+    id: string
+    materialInfo: MaterialInfo[]
+    tab: CDModalTabType
+    scanEnabled: boolean
+    scanned: boolean
+    vulnerabilitiesLoading: boolean
+    lastExecution: string //timestamp
+    vulnerabilities: VulnerabilityType[]
+    vulnerable: boolean
+    deployedTime: string
+    deployedBy?: string
+    wfrId?: number
+    buildTime: string
+    image: string
+    isSelected: boolean
+    showSourceInfo: boolean
+    latest: boolean
+    runningOnParentCd?: boolean
+    userApprovalMetadata?: UserApprovalMetadataType
+    triggeredBy?: number
+}
+
+export interface CDMaterialResponseType {
+    approvalUsers: string[]
+    materials: any[]
+    userApprovalConfig: UserApprovalConfigType
+    requestedUserId: number
+}

package/src/Common/index.ts

@@ -4,7 +4,7 @@ export * from './Types'
 export * from './Api'
 export * from './EmptyState/EmptyState'
 export * from './ToastBody'
-export * from './Reload'
+export { default as Reload } from './Reload'
 export * from './Error'
 export * from './Helper'
 export * from './Progressing'
@@ -25,3 +25,8 @@ export { default as InfoColourBar } from './InfoColorBar/InfoColourbar'
 export * from './Common.service'
 export * from './Checkbox'
 export { default as EmptyState } from './EmptyState/EmptyState'
+export { default as GenericEmptyState } from './EmptyState/GenericEmptyState'
+export { default as Toggle } from './Toggle/Toggle'
+export { default as ScanVulnerabilitiesTable } from './Security/ScanVulnerabilitiesTable'
+export { default as StyledRadioGroup } from './RadioGroup/RadioGroup'
+export { default as DeleteComponent } from './DeleteComponentModal/DeleteComponent'

package/src/Assets/Icon/ic-close.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
-    <defs>
-        <path id="a" class="stroke-color" d="M18.295 5.705a.997.997 0 0 0-1.41 0L12 10.59 7.115 5.705a.997.997 0 1 0-1.41 1.41L10.59 12l-4.885 4.885a.997.997 0 1 0 1.41 1.41L12 13.41l4.885 4.885a.997.997 0 0 0 1.41-1.41L13.41 12l4.885-4.885a.997.997 0 0 0 0-1.41z"/>
-    </defs>
-    <g fill="none" fill-rule="evenodd">
-        <path d=""/>
-        <use fill="#999" xlink:href="#a"/>
-    </g>
-</svg>