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

package/src/Common/Security/ScanVulnerabilitiesTable.tsx

@@ -1,36 +1,39 @@
+import React from 'react'
 import { ScanVulnerabilitiesTableProps, VulnerabilityType } from '../Types'
 import './scanVulnerabilities.css'
 
 export default function ScanVulnerabilitiesTable({ vulnerabilities }: ScanVulnerabilitiesTableProps) {
-    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.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) => {
+        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')
+                }}
             >
-                {vulnerability.policy?.toLowerCase()}
-            </td>
-        </tr>
-    )
+                <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">
@@ -43,7 +46,9 @@ 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) => renderRow(vulnerability))}
+                {vulnerabilities.map((vulnerability) => {
+                    return renderRow(vulnerability)
+                })}
             </tbody>
         </table>
     )

package/src/Common/ServerError.ts

@@ -1,10 +1,7 @@
 export class ServerError {
     code: number
-
     internalMessage: string | null
-
     userMessage: string | null
-
     moreInfo?: string | null
 
     constructor(error) {
@@ -17,13 +14,12 @@ export class ServerError {
 
 export class ServerErrors extends Error {
     code: number
-
     errors: ServerError[]
 
     constructor(obj: { code: number; errors: ServerError[] }) {
         super()
         this.code = obj.code
-        const message = obj.errors.reduce((str: string, err: ServerError) => {
+        let 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 { useRef, useState } from 'react'
+import React, { 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 const TippyCustomized = (props: TippyCustomizedProps) => {
+export function TippyCustomized(props: TippyCustomizedProps) {
     const tippyRef = useRef(null)
     const [showHeadingInfo, setShowHeadingInfo] = useState(false)
     const isWhiteTheme = props.theme === TippyTheme.white
@@ -60,46 +60,43 @@ export const 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}
+                        />
+                    ) : (
+                        Icon && (
+                            <div className={`icon-dim-${iconSize || 20} mr-6`}>
+                                <Icon className={`icon-dim-${iconSize || 20} ${iconClass || ''}`} />
                             </div>
-                        )}
-                    </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 { Component } from 'react'
+import React from 'react'
 import { toast } from 'react-toastify'
 import { TOAST_ACCESS_DENIED } from './Constants'
 
-export class ToastBody extends Component<{
+export class ToastBody extends React.Component<{
     title: string
     subtitle?: string
 }> {
@@ -16,7 +16,7 @@ export class ToastBody extends Component<{
     }
 }
 
-export class ToastBody3 extends Component<{
+export class ToastBody3 extends React.Component<{
     text: string
     onClick: (...args) => void
     buttonText: string
@@ -33,7 +33,7 @@ export class ToastBody3 extends Component<{
     }
 }
 
-export class ToastBodyWithButton extends Component<{
+export class ToastBodyWithButton extends React.Component<{
     title: string
     subtitle?: string
     onClick: (...args) => void
@@ -52,10 +52,11 @@ export class ToastBodyWithButton extends Component<{
     }
 }
 
-export const toastAccessDenied = (title?: string, subtitle?: string) =>
-    toast.info(
+export const toastAccessDenied = (title?: string, subtitle?: string) => {
+    return 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 { useState } from 'react'
+import React 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] = useState(selected)
+    const [active, setActive] = React.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"

package/.eslintignore

@@ -1,75 +0,0 @@
-.eslintrc.js
-
-# Files with ESLint errors/warnings
-src/Common/AddCDButton/AddCDButton.tsx
-src/Common/AddCDButton/utils.tsx
-src/Common/Api.ts
-src/Common/AppStatus/AppStatus.tsx
-src/Common/AppStatus/index.ts
-src/Common/AppStatus/utils.ts
-src/Common/BreadCrumb/BreadCrumb.tsx
-src/Common/BreadCrumb/BreadcrumbStore.tsx
-src/Common/CIPipeline.Types.ts
-src/Common/Checkbox.tsx
-src/Common/ClipboardButton/ClipboardButton.tsx
-src/Common/ClipboardButton/__tests__/ClipboardButton.test.tsx
-src/Common/Common.service.ts
-src/Common/CustomInput/CustomInput.tsx
-src/Common/CustomTagSelector/PropagateTagInfo.tsx
-src/Common/CustomTagSelector/ResizableTagTextArea.tsx
-src/Common/CustomTagSelector/TagDetails.tsx
-src/Common/CustomTagSelector/TagLabelSelect.tsx
-src/Common/CustomTagSelector/TagLabelValueSelector.tsx
-src/Common/CustomTagSelector/TagSelector.utils.ts
-src/Common/CustomTagSelector/ValidationRules.ts
-src/Common/DebouncedSearch/DebouncedSearch.tsx
-src/Common/DebouncedSearch/Utils.ts
-src/Common/DebouncedSearch/__tests__/DebouncedSearch.test.tsx
-src/Common/DeleteComponentModal/DeleteComponent.tsx
-src/Common/DevtronProgressing/DevtronProgressing.tsx
-src/Common/Dialogs/DeleteDialog.tsx
-src/Common/Dialogs/DialogForm.tsx
-src/Common/Dialogs/ForceDeleteDialog.tsx
-src/Common/Drawer/Drawer.tsx
-src/Common/EmptyState/EmptyState.tsx
-src/Common/Error.tsx
-src/Common/ErrorScreenNotFound.tsx
-src/Common/Grid/Grid.tsx
-src/Common/Helper.tsx
-src/Common/Hooks/UseClickOutside/UseClickOutside.tsx
-src/Common/Hooks/UseSuperAdmin/UseSuperAdmin.tsx
-src/Common/ImageTags.tsx
-src/Common/Modals/Modal.tsx
-src/Common/Modals/OpaqueModal.tsx
-src/Common/Modals/VisibleModal.tsx
-src/Common/Modals/VisibleModal2.tsx
-src/Common/MultiSelectCustomization.tsx
-src/Common/PopupMenu.tsx
-src/Common/Progressing.tsx
-src/Common/RJSF/Form.tsx
-src/Common/RJSF/common/FieldRow.tsx
-src/Common/RJSF/templates/ArrayFieldItemTemplate.tsx
-src/Common/RJSF/templates/ArrayFieldTemplate.tsx
-src/Common/RJSF/templates/BaseInput.tsx
-src/Common/RJSF/templates/ButtonTemplates/AddButton.tsx
-src/Common/RJSF/templates/ButtonTemplates/RemoveButton.tsx
-src/Common/RJSF/templates/ButtonTemplates/SubmitButton.tsx
-src/Common/RJSF/templates/Description.tsx
-src/Common/RJSF/templates/Field.tsx
-src/Common/RJSF/templates/FieldErrorTemplate.tsx
-src/Common/RJSF/templates/ObjectFieldTemplate.tsx
-src/Common/RJSF/templates/TitleField.tsx
-src/Common/RJSF/templates/WrapIfAdditionalTemplate.tsx
-src/Common/RJSF/utils.ts
-src/Common/RJSF/widgets/Checkbox.tsx
-src/Common/RJSF/widgets/Select.tsx
-src/Common/RadioGroup.tsx
-src/Common/RadioGroup/RadioGroup.tsx
-src/Common/Reload.tsx
-src/Common/ResizableTextarea.tsx
-src/Common/Security/ScanVulnerabilitiesTable.tsx
-src/Common/ServerError.ts
-src/Common/TippyCustomized.tsx
-src/Common/ToastBody.tsx
-src/Common/Toggle/Toggle.tsx
-src/Common/Types.ts

package/.github/pull_request_template.md

@@ -1,25 +0,0 @@
-# Description
-
-Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
-
-## Type of change
-
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
-- [ ] This change requires a documentation update
-
-## How Has This Been Tested?
-
-Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
-
-- [ ] Test A
-- [ ] Test B
-
-## Checklist
-
-- [ ] The title of the PR states what changed and the related issues number (used for the release note).
-- [ ] Does this PR require documentation updates?
-- [ ] I've updated documentation as required by this PR.
-- [ ] I have performed a self-review of my own code
-- [ ] I have commented my code, particularly in hard-to-understand areas

package/.github/workflows/ci.yml

@@ -1,31 +0,0 @@
-name: Common Lib CI
-
-on:
-  pull_request:
-    types:
-      - opened
-      - synchronize
-      - edited
-      - reopened
-
-jobs:
-  ci:
-    runs-on: ubuntu-latest
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
-
-    - name: Use Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version-file: '.nvmrc'
-        cache: 'npm'
-
-    - name: Install dependencies
-      run: npm ci
-
-    - name: Check linting issues
-      run: npm run lint
-
-    - name: Build Lib
-      run: npm run build-lib

package/.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npm run lint-staged

package/.lintstagedrc

@@ -1,5 +0,0 @@
-{
-    "*.{js,jsx,ts,tsx}": [
-        "npx eslint --max-warnings 0"
-    ]
-}

package/.nvmrc

@@ -1 +0,0 @@
-v16