@devtron-labs/devtron-fe-common-lib 0.0.52-beta-2 → 0.0.52-beta-3

package/src/Common/RadioGroup/RadioGroup.tsx

@@ -1,5 +1,6 @@
 import Tippy from '@tippyjs/react'
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
+import * as React from 'react'
 import { ConditionalWrap } from '../Helper'
 import './radioGroup.scss'
 
@@ -28,30 +29,24 @@ 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)
+const RadioGroup: React.FC<RadioGroupInterface> & RadioGroupComposition = React.memo(
+    ({ name, onChange, children, className = '', initialTab, disabled = false, dataTestId }) => {
+        const [selected, select] = useState(null)
 
-    useEffect(() => {
-        if (initialTab === selected) return
-        select(initialTab)
-    }, [initialTab])
+        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>
-    )
-})
+        return (
+            <RadioContext.Provider value={{ name, selected, select, disabled, onChange }}>
+                <div className={`${className} radio-group`}>{children}</div>
+            </RadioContext.Provider>
+        )
+    },
+)
 
-function Radio({
+const Radio = ({
     value,
     children,
     className = '',
@@ -62,7 +57,7 @@ function Radio({
     isDisabled = false,
     tippyClass = '',
     dataTestId,
-}) {
+}) => {
     const { name, selected, select, disabled, onChange } = useRadioContext()
     return (
         <ConditionalWrap

package/src/Common/RadioGroup.tsx

@@ -1,33 +1,34 @@
-import React, { Component, createContext } from 'react'
+import { 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>
-                        </>
-                    )
-                }}
+                {(context) => (
+                    <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 className="radio__title">{this.props.children}</span>
+                        </span>
+                    </label>
+                )}
             </RadioGroupContext.Consumer>
         )
     }

package/src/Common/Reload.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import loadingFailure from '../Assets/Img/ic-loading-failure.png'
 import { ReloadType } from './Types'
 

package/src/Common/ResizableTextarea.tsx

@@ -1,22 +1,23 @@
-import React, { useState, useEffect, useRef } from 'react'
+import { useState, useEffect, useRef } from 'react'
+import * as React 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
-                                                                    }) => {
+    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)
 
@@ -48,7 +49,7 @@ export const ResizableTextarea: React.FC<ResizableTextareaProps> = ({
             if (maxHeight && nextHeight > maxHeight) {
                 nextHeight = maxHeight
             }
-            _textRef.current.style.height = nextHeight + 2 + 'px'
+            _textRef.current.style.height = `${nextHeight + 2}px`
         },
         500,
         [text],
@@ -70,4 +71,4 @@ export const ResizableTextarea: React.FC<ResizableTextareaProps> = ({
             {...props}
         />
     )
-}
+}

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

@@ -94,7 +94,6 @@ export interface GenericEmptyStateType {
     imageClassName?: string
     children?: ReactNode
     noImage?: boolean
-    imageStyles?: CSSProperties
     /**
      * @default 'column'
      */
@@ -230,7 +229,7 @@ export enum FilterStates {
 }
 
 export enum MaterialDataSource {
-    EXTERNAL = "ext"
+    EXTERNAL = 'ext',
 }
 
 export interface CDMaterialType {
@@ -241,7 +240,7 @@ export interface CDMaterialType {
     scanEnabled: boolean
     scanned: boolean
     vulnerabilitiesLoading: boolean
-    lastExecution: string //timestamp
+    lastExecution: string // timestamp
     vulnerabilities: VulnerabilityType[]
     vulnerable: boolean
     deployedTime: string
@@ -259,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
@@ -278,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 {
@@ -325,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
@@ -680,19 +679,19 @@ export interface CodeEditorComposition {
 }
 
 export interface CodeEditorHeaderComposition {
-    LanguageChanger?: React.FC<any>;
-    ThemeChanger?: React.FC<any>;
-    ValidationError?: React.FC<any>;
-    Clipboard?: React.FC<any>;
+    LanguageChanger?: React.FC<any>
+    ThemeChanger?: React.FC<any>
+    ValidationError?: React.FC<any>
+    Clipboard?: React.FC<any>
 }
 export interface CodeEditorHeaderInterface {
-    children?: any;
+    children?: any
     className?: string
-    hideDefaultSplitHeader?: boolean;
+    hideDefaultSplitHeader?: boolean
 }
 
 export interface DeploymentChartVersionType {
-    chartRefId: number 
+    chartRefId: number
     chartVersion: string
     chartType: string
     type: number

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'