@devtron-labs/devtron-fe-common-lib 0.0.48-beta-9 → 0.0.48-beta-11

package/src/Common/Security/ScanVulnerabilitiesTable.tsx

@@ -1,39 +1,36 @@
-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()}`}
+    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.policy?.toLowerCase()}
-                </td>
-            </tr>
-        )
-    }
+                    {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">
@@ -46,9 +43,7 @@ export default function ScanVulnerabilitiesTable({ vulnerabilities }: ScanVulner
                     <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)
-                })}
+                {vulnerabilities.map((vulnerability) => renderRow(vulnerability))}
             </tbody>
         </table>
     )

package/src/Common/ServerError.ts

@@ -1,7 +1,10 @@
 export class ServerError {
     code: number
+
     internalMessage: string | null
+
     userMessage: string | null
+
     moreInfo?: string | null
 
     constructor(error) {
@@ -14,12 +17,13 @@ export class ServerError {
 
 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) => {
+        const message = obj.errors.reduce((str: string, err: ServerError) => {
             str += `${err.internalMessage || err.userMessage}`
             return str
         }, '')

package/src/Common/TippyCustomized.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import Tippy from '@tippyjs/react'
 import { ReactComponent as CloseIcon } from '../Assets/Icon/ic-cross.svg'
 import { ReactComponent as QuestionFilled } from '../Assets/Icon/ic-help.svg'
@@ -9,7 +9,7 @@ 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) {
+export const TippyCustomized = (props: TippyCustomizedProps) => {
     const tippyRef = useRef(null)
     const [showHeadingInfo, setShowHeadingInfo] = useState(false)
     const isWhiteTheme = props.theme === TippyTheme.white
@@ -60,43 +60,46 @@ export function TippyCustomized(props: TippyCustomizedProps) {
         } = props
         return (
             <>
-                {!hideHeading && 
-                <div
-                    className={`dc__word-break dc__hyphens-auto flex left ${
-                        isWhiteTheme 
-                            ? `p-12 cn-9 ${props.noHeadingBorder ? '' : 'dc__border-bottom-n1'}`
-                            : 'pt-20 pb-12 pr-20 pl-20 cn-0 top'
-                    }`}
-                >
-                    {iconPath ? (
-                        <img
-                            className={`icon-dim-${iconSize || 20} mr-6 ${iconClass || ''}`}
-                            src={iconPath}
-                            alt="Heading"
-                            onError={onImageLoadError}
-                        />
-                    ) : (
-                        Icon && (
-                            <div className={`icon-dim-${iconSize || 20} mr-6`}>
-                                <Icon className={`icon-dim-${iconSize || 20} ${iconClass || ''}`} />
-                            </div>
-                        )
-                    )}
-                    {heading && <span className={`fs-14 fw-6 lh-20 ${showCloseButton ? 'mr-6' : ''}`}>{heading}</span>}
-                    {headingInfo && (
-                        <div className="icon-dim-20 cursor" onClick={toggleHeadingInfo}>
-                            <Question className="icon-dim-20" />
-                        </div>
-                    )}
-                    {showCloseButton && (
-                        <div className="icon-dim-16 ml-auto">
-                            <CloseIcon
-                                className={`icon-dim-16 cursor ${isWhiteTheme ? 'fcn-9' : 'fcn-0'}`}
-                                onClick={closeTippy}
+                {!hideHeading && (
+                    <div
+                        className={`dc__word-break dc__hyphens-auto flex left ${
+                            isWhiteTheme
+                                ? `p-12 cn-9 ${props.noHeadingBorder ? '' : 'dc__border-bottom-n1'}`
+                                : 'pt-20 pb-12 pr-20 pl-20 cn-0 top'
+                        }`}
+                    >
+                        {iconPath ? (
+                            <img
+                                className={`icon-dim-${iconSize || 20} mr-6 ${iconClass || ''}`}
+                                src={iconPath}
+                                alt="Heading"
+                                onError={onImageLoadError}
                             />
-                        </div>
-                    )}
-                </div>}
+                        ) : (
+                            Icon && (
+                                <div className={`icon-dim-${iconSize || 20} mr-6`}>
+                                    <Icon className={`icon-dim-${iconSize || 20} ${iconClass || ''}`} />
+                                </div>
+                            )
+                        )}
+                        {heading && (
+                            <span className={`fs-14 fw-6 lh-20 ${showCloseButton ? 'mr-6' : ''}`}>{heading}</span>
+                        )}
+                        {headingInfo && (
+                            <div className="icon-dim-20 cursor" onClick={toggleHeadingInfo}>
+                                <Question className="icon-dim-20" />
+                            </div>
+                        )}
+                        {showCloseButton && (
+                            <div className="icon-dim-16 ml-auto">
+                                <CloseIcon
+                                    className={`icon-dim-16 cursor ${isWhiteTheme ? 'fcn-9' : 'fcn-0'}`}
+                                    onClick={closeTippy}
+                                />
+                            </div>
+                        )}
+                    </div>
+                )}
                 {showHeadingInfo && (
                     <div
                         className={`flex left top bcv-1 fs-13 fw-4 lh-20 pt-8 pb-8 ${

package/src/Common/ToastBody.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import { Component } from 'react'
 import { toast } from 'react-toastify'
 import { TOAST_ACCESS_DENIED } from './Constants'
 
-export class ToastBody extends React.Component<{
+export class ToastBody extends Component<{
     title: string
     subtitle?: string
 }> {
@@ -16,7 +16,7 @@ export class ToastBody extends React.Component<{
     }
 }
 
-export class ToastBody3 extends React.Component<{
+export class ToastBody3 extends Component<{
     text: string
     onClick: (...args) => void
     buttonText: string
@@ -33,7 +33,7 @@ export class ToastBody3 extends React.Component<{
     }
 }
 
-export class ToastBodyWithButton extends React.Component<{
+export class ToastBodyWithButton extends Component<{
     title: string
     subtitle?: string
     onClick: (...args) => void
@@ -52,11 +52,10 @@ export class ToastBodyWithButton extends React.Component<{
     }
 }
 
-export const toastAccessDenied = (title?: string, subtitle?: string) => {
-    return toast.info(
+export const toastAccessDenied = (title?: string, subtitle?: string) =>
+    toast.info(
         <ToastBody title={title || TOAST_ACCESS_DENIED.TITLE} subtitle={subtitle || TOAST_ACCESS_DENIED.SUBTITLE} />,
         {
             className: 'devtron-toast unauthorized',
         },
     )
-}

package/src/Common/Toggle/Toggle.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { useState } from 'react'
 import { useEffectAfterMount } from '../Helper'
 import './Toggle.scss'
 
@@ -10,10 +10,10 @@ const Toggle = ({
     disabled = false,
     dataTestId = 'handle-toggle-button',
     Icon = null,
-    iconClass= '',
+    iconClass = '',
     ...props
 }) => {
-    const [active, setActive] = React.useState(selected)
+    const [active, setActive] = useState(selected)
 
     useEffectAfterMount(() => {
         if (typeof onSelect === 'function') {

package/src/Common/Types.ts

@@ -229,7 +229,7 @@ export enum FilterStates {
 }
 
 export enum MaterialDataSource {
-    EXTERNAL = "ext"
+    EXTERNAL = 'ext',
 }
 
 export interface CDMaterialType {
@@ -240,7 +240,7 @@ export interface CDMaterialType {
     scanEnabled: boolean
     scanned: boolean
     vulnerabilitiesLoading: boolean
-    lastExecution: string //timestamp
+    lastExecution: string // timestamp
     vulnerabilities: VulnerabilityType[]
     vulnerable: boolean
     deployedTime: string
@@ -258,7 +258,7 @@ export interface CDMaterialType {
     imageReleaseTags?: ReleaseTag[]
     artifactStatus?: string
     filterState: FilterStates
-    registryType?: string;
+    registryType?: string
     imagePath?: string
     registryName?: string
     // Not even coming from API but required in CDMaterials for Security which makes its own api call but stores data in CDMaterials
@@ -277,12 +277,12 @@ export enum CDMaterialServiceEnum {
 }
 
 export enum CDMaterialResourceQuery {
-    PENDING_APPROVAL = 'PENDING_APPROVAL'
+    PENDING_APPROVAL = 'PENDING_APPROVAL',
 }
 
 export enum CDMaterialFilterQuery {
     RESOURCE = 'ELIGIBLE_RESOURCES',
-    ALL = 'ALL_RESOURCES'
+    ALL = 'ALL_RESOURCES',
 }
 
 export interface CDMaterialServiceQueryParams {
@@ -324,18 +324,18 @@ export interface CommonNodeAttr {
     isLinkedCI?: boolean
     isLinkedCD?: boolean
     isJobCI?: boolean // used for Job type CI in Devtron Apps
-    environmentName?: string //used for CDs
+    environmentName?: string // used for CDs
     environmentId?: number
     inputMaterialList?: any[]
-    rollbackMaterialList?: any[] //used for CDs
-    linkedCount?: number //used for CI
+    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
+    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

package/src/custom.d.ts

@@ -1,13 +1,13 @@
 declare module '*.svg' {
-  import * as React from 'react';
+    import * as React from 'react'
 
-  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+    export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
 
-  const src: string;
-  export default src;
+    const src: string
+    export default src
 }
 
 declare module '*.png' {
-  const src: string;
-  export default src;
-}
+    const src: string
+    export default src
+}

package/src/index.ts

@@ -1 +1 @@
-export * from "./Common"
+export * from './Common'