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

package/package.json

@@ -1,16 +1,12 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.48-beta-8",
+    "version": "0.0.48-beta-9",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
-        "prepare": "husky install",
-        "lint": "tsc --noEmit && eslint 'src/**/*.{js,jsx,ts,tsx}' --max-warnings 0",
-        "lint-fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
         "test": "exit 0",
         "build-lib": "rollup -c --bundleConfigAsCjs",
-        "build-watch": "rollup -c --bundleConfigAsCjs -w",
-        "lint-staged": "lint-staged"
+        "build-watch": "rollup -c --bundleConfigAsCjs -w"
     },
     "repository": {
         "type": "git",
@@ -34,20 +30,7 @@
         "@types/react": "17.0.39",
         "@types/react-dom": "17.0.13",
         "@types/react-router-dom": "^5.3.3",
-        "@typescript-eslint/eslint-plugin": "^6.17.0",
-        "@typescript-eslint/parser": "^6.17.0",
-        "eslint": "^8.56.0",
-        "eslint-config-airbnb": "^19.0.4",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-jsx-a11y": "^6.8.0",
-        "eslint-plugin-prettier": "^5.1.2",
-        "eslint-plugin-react": "^7.33.2",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "husky": "^7.0.4",
-        "lint-staged": "^12.5.0",
         "moment": "^2.29.4",
-        "prettier": "^3.1.1",
         "react-select": "5.2.2",
         "react-toastify": "^8.2.0",
         "rollup": "^3.10.0",

package/src/Common/AddCDButton/AddCDButton.tsx

@@ -1,8 +1,9 @@
+import React from 'react'
 import Tippy from '@tippyjs/react'
 import { AddCDButtonProps, TooltipContentProps } from './types'
 import { AddCDPositions } from '../Types'
 
-const TooltipContent = ({ tooltipContent }: TooltipContentProps) => {
+function TooltipContent({ tooltipContent }: TooltipContentProps) {
     if (tooltipContent) {
         return (
             <div className="dc__white-space-pre-wrap">

package/src/Common/Api.ts

@@ -79,12 +79,12 @@ function handleLogout() {
 }
 
 async function handleServerError(contentType, response) {
-    // Test for HTTP Status Code
-    const code: number = response.status
+    //Test for HTTP Status Code
+    let code: number = response.status
     let status: string = response.statusText || responseMessages[code]
-    const serverError = new ServerErrors({ code, errors: [] })
+    let serverError = new ServerErrors({ code, errors: [] })
     if (contentType !== 'application/json') {
-        // used for better debugging,
+        //used for better debugging,
         status = `${responseMessages[code]}. Please try again.`
     } else {
         const responseBody = await response.json()
@@ -105,12 +105,12 @@ async function fetchAPI(
     preventAutoLogout = false,
     isMultipartRequest?: boolean,
 ): Promise<ResponseType> {
-    const options = {
+    let options = {
         method: type,
         signal,
         body: data ? JSON.stringify(data) : undefined,
-        credentials: 'include' as RequestCredentials,
     }
+    options['credentials'] = 'include' as RequestCredentials
     return fetch(
         `${Host}/${url}`,
         !isMultipartRequest
@@ -121,7 +121,7 @@ async function fetchAPI(
               } as RequestInit),
     ).then(
         async (response) => {
-            const contentType = response.headers.get('Content-Type')
+            let contentType = response.headers.get('Content-Type')
             if (response.status === 401) {
                 if (preventAutoLogout) {
                     throw new ServerErrors({
@@ -140,23 +140,22 @@ async function fetchAPI(
                 if (contentType === 'application/json') {
                     return response.json().then((responseBody) => {
                         if (responseBody.code >= 300 && responseBody.code <= 599) {
-                            // Test Code in Response Body, despite successful HTTP Response Code
+                            //Test Code in Response Body, despite successful HTTP Response Code
                             throw new ServerErrors({ code: responseBody.code, errors: responseBody.errors })
                         } else {
-                            // Successfull Response. Expected Response Type {code, result, status}
+                            //Successfull Response. Expected Response Type {code, result, status}
                             return responseBody
                         }
                     })
-                }
-                if (contentType === 'octet-stream' || contentType === 'application/octet-stream') {
-                    // used in getArtifact() API only
+                } else if (contentType === 'octet-stream' || contentType === 'application/octet-stream') {
+                    //used in getArtifact() API only
                     return response
                 }
             }
         },
         (error) => {
-            // Network call fails. Handle Failed to Fetch
-            const err = {
+            //Network call fails. Handle Failed to Fetch
+            let err = {
                 code: 0,
                 userMessage: error.message,
                 internalMessage: error.message,
@@ -177,7 +176,7 @@ function fetchInTime(
     const controller = new AbortController()
     const { signal } = controller
     const timeoutPromise: Promise<ResponseType> = new Promise((resolve, reject) => {
-        const timeout = options?.timeout ? options.timeout : RequestTimeout
+        let timeout = options?.timeout ? options.timeout : RequestTimeout
         setTimeout(() => {
             controller.abort()
             reject({
@@ -212,12 +211,18 @@ export const post = (
     data: object,
     options?: APIOptions,
     isMultipartRequest?: boolean,
-): Promise<ResponseType> => fetchInTime(url, 'POST', data, options, isMultipartRequest)
+): Promise<ResponseType> => {
+    return fetchInTime(url, 'POST', data, options, isMultipartRequest)
+}
 
-export const put = (url: string, data: object, options?: APIOptions): Promise<ResponseType> =>
-    fetchInTime(url, 'PUT', data, options)
+export const put = (url: string, data: object, options?: APIOptions): Promise<ResponseType> => {
+    return fetchInTime(url, 'PUT', data, options)
+}
 
-export const get = (url: string, options?: APIOptions): Promise<ResponseType> => fetchInTime(url, 'GET', null, options)
+export const get = (url: string, options?: APIOptions): Promise<ResponseType> => {
+    return fetchInTime(url, 'GET', null, options)
+}
 
-export const trash = (url: string, data?: object, options?: APIOptions): Promise<ResponseType> =>
-    fetchInTime(url, 'DELETE', data, options)
+export const trash = (url: string, data?: object, options?: APIOptions): Promise<ResponseType> => {
+    return fetchInTime(url, 'DELETE', data, options)
+}

package/src/Common/AppStatus/AppStatus.tsx

@@ -25,24 +25,24 @@ export default function AppStatus({
     const renderIcon = () => {
         if (iconClass) {
             return <span className={`dc__app-summary__icon icon-dim-16 ${iconClass} ${iconClass}--node`} />
-        }
-        if (isVirtualEnv) {
+        } else if (isVirtualEnv) {
             return (
                 <span
                     className={`dc__app-summary__icon icon-dim-16 ${StatusConstants.NOT_DEPLOYED.lowerCase} ${StatusConstants.NOT_DEPLOYED.lowerCase}--node`}
                 />
             )
+        } else {
+            return (
+                <Tippy
+                    className="default-tt w-200"
+                    arrow={false}
+                    placement="top"
+                    content="To fetch app status for GitOps based deployments open the app detail page"
+                >
+                    <InfoIcon className="icon-dim-16 fcn-6" />
+                </Tippy>
+            )
         }
-        return (
-            <Tippy
-                className="default-tt w-200"
-                arrow={false}
-                placement="top"
-                content="To fetch app status for GitOps based deployments open the app detail page"
-            >
-                <InfoIcon className="icon-dim-16 fcn-6" />
-            </Tippy>
-        )
     }
 
     return hideStatusMessage ? (

package/src/Common/AppStatus/utils.ts

@@ -1,15 +1,14 @@
 import { TIMELINE_STATUS } from './constants'
 
 export const triggerStatus = (triggerDetailStatus: string): string => {
-    const triggerStatus = triggerDetailStatus?.toUpperCase()
+    let triggerStatus = triggerDetailStatus?.toUpperCase()
     if (triggerStatus === TIMELINE_STATUS.ABORTED || triggerStatus === TIMELINE_STATUS.DEGRADED) {
         return 'Failed'
-    }
-    if (triggerStatus === TIMELINE_STATUS.HEALTHY) {
+    } else if (triggerStatus === TIMELINE_STATUS.HEALTHY) {
         return 'Succeeded'
-    }
-    if (triggerStatus === TIMELINE_STATUS.INPROGRESS) {
+    } else if (triggerStatus === TIMELINE_STATUS.INPROGRESS) {
         return 'Inprogress'
+    } else {
+        return triggerDetailStatus
     }
-    return triggerDetailStatus
 }

package/src/Common/BreadCrumb/BreadCrumb.tsx

@@ -1,14 +1,12 @@
-import { useMemo, useEffect } from 'react'
-import * as React from 'react'
+import React, { useMemo, useEffect } from 'react'
 import { Link, useRouteMatch, useParams } from 'react-router-dom'
 import { useBreadcrumbContext } from './BreadcrumbStore'
 import { ConditionalWrap } from '../Helper'
 import { Breadcrumb, Breadcrumbs, UseBreadcrumbOptionalProps, UseBreadcrumbState } from './Types'
-
 export const BreadcrumbContext = React.createContext(null)
 
 export function useBreadcrumb(props?: UseBreadcrumbOptionalProps, deps?: any[]): UseBreadcrumbState {
-    const sep = props?.sep || '/'
+    let sep = props?.sep || '/'
     deps = deps || []
     const { url, path } = useRouteMatch()
     const params = useParams()
@@ -32,7 +30,7 @@ export function useBreadcrumb(props?: UseBreadcrumbOptionalProps, deps?: any[]):
         setState((state) => ({ ...state, alias: tempAlias }))
     }
 
-    const levels: Breadcrumb[] = useMemo(() => {
+    let levels: Breadcrumb[] = useMemo(() => {
         const paths = path.split('/').filter(Boolean)
         const urls = url.split('/').filter(Boolean)
         return paths.map((path, idx) => {
@@ -43,31 +41,29 @@ export function useBreadcrumb(props?: UseBreadcrumbOptionalProps, deps?: any[]):
             return crumb
         })
     }, [path, url])
-    const { res: breadcrumbs } = useMemo(
-        () =>
-            levels.reduce(
-                (agg, curr, idx) => {
-                    const { res, prefix } = agg
-                    const { to, name } = curr
-                    res.push({
-                        to:
-                            !state.alias[name]?.component || (state.alias[name]?.component && state.alias[name]?.linked)
-                                ? `${prefix}${to}`
-                                : null,
-                        name:
-                            typeof state.alias[name] === 'object'
-                                ? state.alias[name]?.component
-                                    ? state.alias[name].component
-                                    : null
-                                : state.alias[name] || name,
-                        className: curr.className || '',
-                    })
-                    return { res, prefix: `${prefix}${curr.to}${sep}` }
-                },
-                { res: [], prefix: '/' },
-            ),
-        [levels, state],
-    )
+    const { res: breadcrumbs } = useMemo(() => {
+        return levels.reduce(
+            (agg, curr, idx) => {
+                const { res, prefix } = agg
+                const { to, name } = curr
+                res.push({
+                    to:
+                        !state.alias[name]?.component || (state.alias[name]?.component && state.alias[name]?.linked)
+                            ? `${prefix}${to}`
+                            : null,
+                    name:
+                        typeof state.alias[name] === 'object'
+                            ? !!state.alias[name]?.component
+                                ? state.alias[name].component
+                                : null
+                            : state.alias[name] || name,
+                    className: curr.className || '',
+                })
+                return { res, prefix: `${prefix}${curr.to}${sep}` }
+            },
+            { res: [], prefix: '/' },
+        )
+    }, [levels, state])
 
     return { breadcrumbs, setCrumb, resetCrumb }
 }
@@ -80,7 +76,7 @@ export const BreadCrumb: React.FC<Breadcrumbs> = ({
     const { url } = useRouteMatch()
     const filteredCrumbs = breadcrumbs.filter((crumb) => !!crumb.name)
     return (
-        <>
+        <React.Fragment>
             {filteredCrumbs.map((breadcrumb, idx) => (
                 <React.Fragment key={idx}>
                     <ConditionalWrap
@@ -104,6 +100,6 @@ export const BreadCrumb: React.FC<Breadcrumbs> = ({
                     )}
                 </React.Fragment>
             ))}
-        </>
+        </React.Fragment>
     )
 }

package/src/Common/BreadCrumb/BreadcrumbStore.tsx

@@ -1,4 +1,4 @@
-import { useContext, createContext, useState } from 'react'
+import React, { createContext, useState } from 'react'
 
 const initialState = {
     alias: {},
@@ -15,7 +15,7 @@ export const BreadcrumbContext = createContext({
 })
 
 export function useBreadcrumbContext() {
-    const context = useContext(BreadcrumbContext)
+    const context = React.useContext(BreadcrumbContext)
     if (!context) {
         throw new Error(`breadcrumb components cannot be used outside Breadcrumb context`)
     }

package/src/Common/BreadCrumb/Types.ts

@@ -1,23 +1,24 @@
+
 export interface Breadcrumb {
-    to: string
-    name: string
-    className?: string
+  to: string
+  name: string
+  className?: string
 }
 
 export interface UseBreadcrumbState {
-    breadcrumbs: Breadcrumb[]
-    setCrumb: (props: { [key: string]: any }) => void
-    resetCrumb: (props: string[]) => void
+  breadcrumbs: Breadcrumb[]
+  setCrumb: (props: { [key: string]: any }) => void
+  resetCrumb: (props: string[]) => void
 }
 
 export interface AdvancedAlias {
-    component: any
-    linked: boolean
+  component: any
+  linked: boolean
 }
 
 export interface UseBreadcrumbProps {
-    sep?: string
-    alias?: { [key: string]: AdvancedAlias | any }
+  sep?: string
+  alias?: { [key: string]: AdvancedAlias | any }
 }
 
 export interface Breadcrumbs {
@@ -26,4 +27,4 @@ export interface Breadcrumbs {
     className?: string
 }
 
-export type UseBreadcrumbOptionalProps = UseBreadcrumbProps | null
+export type UseBreadcrumbOptionalProps = UseBreadcrumbProps | null

package/src/Common/Checkbox.tsx

@@ -1,4 +1,4 @@
-import { Component } from 'react'
+import React, { Component } from 'react'
 import { CheckboxProps } from './Types'
 
 /*
@@ -12,23 +12,25 @@ Valid States of Checkbox:
 */
 export class Checkbox extends Component<CheckboxProps> {
     render() {
-        const rootClassName = `${this.props.rootClassName ? this.props.rootClassName : ''}`
+        let rootClassName = `${this.props.rootClassName ? this.props.rootClassName : ''}`
         return (
-            <label className={`dc__position-rel flex left cursor ${rootClassName}`} onClick={this.props?.onClick}>
-                <input
-                    type="checkbox"
-                    className="form__checkbox"
-                    disabled={this.props.disabled}
-                    value={this.props.value}
-                    onChange={this.props.onChange}
-                    tabIndex={this.props.tabIndex}
-                    checked={this.props.isChecked}
-                    id={this.props.id}
-                    data-testid={this.props.dataTestId}
-                />
-                <span className="form__checkbox-container" data-testid={`${this.props.dataTestId}-chk-span`} />
-                <span className="form__checkbox-label">{this.props.children}</span>
-            </label>
+            <>
+                <label className={`dc__position-rel flex left cursor ${rootClassName}`} onClick={this.props?.onClick}>
+                    <input
+                        type="checkbox"
+                        className={'form__checkbox'}
+                        disabled={this.props.disabled}
+                        value={this.props.value}
+                        onChange={this.props.onChange}
+                        tabIndex={this.props.tabIndex}
+                        checked={this.props.isChecked}
+                        id={this.props.id}
+                        data-testid={this.props.dataTestId}
+                    />
+                    <span className="form__checkbox-container" data-testid={`${this.props.dataTestId}-chk-span`}></span>
+                    <span className={`form__checkbox-label`}>{this.props.children}</span>
+                </label>
+            </>
         )
     }
 }

package/src/Common/ClipboardButton/ClipboardButton.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import Tippy from '@tippyjs/react'
 import { copyToClipboard } from '../Helper'
 import ClipboardProps from './types'

package/src/Common/ClipboardButton/__tests__/ClipboardButton.test.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
 import ClipboardButton from '../ClipboardButton'
 

package/src/Common/Common.service.ts

@@ -1,7 +1,7 @@
-import moment from 'moment'
-import { get, post } from './Api'
+import moment from 'moment';
+import {get, post} from './Api';
 import { ROUTES } from './Constants'
-import { sortCallback } from './Helper'
+import { sortCallback } from './Helper';
 import {
     TeamList,
     ResponseType,
@@ -17,21 +17,23 @@ import {
 } from './Types'
 
 export const getTeamListMin = (): Promise<TeamList> => {
-    // ignore active field
-    const URL = `${ROUTES.PROJECT_LIST_MIN}`
-    return get(URL).then((response) => {
-        let list = []
-        if (response && response.result && Array.isArray(response.result)) {
-            list = response.result
-        }
-        list = list.sort((a, b) => sortCallback('name', a, b))
-        return {
-            code: response.code,
-            status: response.status,
-            result: list,
-        }
-    })
-}
+  // ignore active field
+  const URL = `${ROUTES.PROJECT_LIST_MIN}`;
+  return get(URL).then(response => {
+      let list = [];
+      if (response && response.result && Array.isArray(response.result)) {
+          list = response.result;
+      }
+      list = list.sort((a, b) => {
+          return sortCallback('name', a, b);
+      });
+      return {
+          code: response.code,
+          status: response.status,
+          result: list,
+      };
+  });
+};
 
 interface UserRole extends ResponseType {
     result?: {
@@ -57,12 +59,14 @@ export function getUserRole(appName?: string): Promise<UserRole> {
     return get(`${ROUTES.USER_CHECK_ROLE}${appName ? `?appName=${appName}` : ''}`)
 }
 
-export function setImageTags(request, pipelineId: number, artifactId: number) {
-    return post(`${ROUTES.IMAGE_TAGGING}/${pipelineId}/${artifactId}`, request)
+export function setImageTags(request, pipelineId: number, artifactId: number){
+    return post(`${ROUTES.IMAGE_TAGGING}/${pipelineId}/${artifactId}`,request )
 }
 
 const processURL = (url: string, params: object) => {
-    const validParams = Object.keys(params).filter((key) => params[key] != null)
+    const validParams = Object.keys(params).filter((key) => {
+        return params[key] != null
+    })
 
     if (!validParams.length) {
         return url
@@ -71,11 +75,11 @@ const processURL = (url: string, params: object) => {
     const queryString = validParams
         .map((key) => {
             if (Array.isArray(params[key])) {
-                return `${key}=${params[key].join(',')}`
+                return `${key}=${params[key].join(',')}`  
             }
             return `${key}=${params[key]}`
         })
-        .join('&')
+        .join('&')    
 
     return `${url}?${queryString}`
 }
@@ -132,23 +136,25 @@ const cdMaterialListModal = (artifacts: any[], offset: number, artifactId?: numb
             // It is going to be null but required in type so can't remove
             lastExecution: material.lastExecution,
             materialInfo: material.material_info
-                ? material.material_info.map((mat) => ({
-                      modifiedTime: mat.modifiedTime
-                          ? moment(mat.modifiedTime).format('ddd, DD MMM YYYY, hh:mm A')
-                          : '',
-                      commitLink: createGitCommitUrl(mat.url, mat.revision),
-                      author: mat.author || '',
-                      message: mat.message || '',
-                      revision: mat.revision || '',
-                      tag: mat.tag || '',
-                      webhookData: mat.webhookData || '',
-                      url: mat.url || '',
-                      branch:
-                          (material.ciConfigureSourceType === SourceTypeMap.WEBHOOK
-                              ? material.ciConfigureSourceValue
-                              : mat.branch) || '',
-                      type: material.ciConfigureSourceType || '',
-                  }))
+                ? material.material_info.map((mat) => {
+                      return {
+                          modifiedTime: mat.modifiedTime
+                              ? moment(mat.modifiedTime).format('ddd, DD MMM YYYY, hh:mm A')
+                              : '',
+                          commitLink: createGitCommitUrl(mat.url, mat.revision),
+                          author: mat.author || '',
+                          message: mat.message || '',
+                          revision: mat.revision || '',
+                          tag: mat.tag || '',
+                          webhookData: mat.webhookData || '',
+                          url: mat.url || '',
+                          branch:
+                              (material.ciConfigureSourceType === SourceTypeMap.WEBHOOK
+                                  ? material.ciConfigureSourceValue
+                                  : mat.branch) || '',
+                          type: material.ciConfigureSourceType || '',
+                      }
+                  })
                 : [],
             filterState,
             appliedFiltersTimestamp: material.appliedFiltersTimestamp ?? '',
@@ -231,7 +237,9 @@ const processCDMaterialServiceResponse = (
     // TODO: On update of service would remove from here
     const filteredMaterials =
         filter && filter === CDMaterialFilterQuery.RESOURCE
-            ? materials.filter((material) => material.filterState === FilterStates.ALLOWED)
+            ? materials.filter((material) => {
+                  return material.filterState === FilterStates.ALLOWED
+              })
             : materials
 
     return {
@@ -255,7 +263,7 @@ export const genericCDMaterialsService = (
 ): Promise<CDMaterialResponseType> => {
     // TODO: On update of service would remove from here
     const manipulatedParams = getSanitizedQueryParams(queryParams)
-
+    
     let URL
     switch (serviceType) {
         case CDMaterialServiceEnum.ROLLBACK:
@@ -264,16 +272,13 @@ export const genericCDMaterialsService = (
 
         // Meant for handling getCDMaterialList
         default:
-            URL = processURL(`${ROUTES.CD_MATERIAL_GET}/${cdMaterialID}/material`, {
-                ...manipulatedParams,
-                stage: stageMap[stage],
-            })
+            URL = processURL(`${ROUTES.CD_MATERIAL_GET}/${cdMaterialID}/material`, { ...manipulatedParams, stage: stageMap[stage] })
             break
     }
 
-    return get(URL, { signal }).then((response) =>
-        processCDMaterialServiceResponse(response.result, stage, queryParams.offset, queryParams.filter),
-    )
+    return get(URL, { signal }).then((response) => {
+        return processCDMaterialServiceResponse(response.result, stage, queryParams.offset, queryParams.filter)
+    })
 }
 
 export function extractImage(image: string): string {
@@ -282,25 +287,25 @@ export function extractImage(image: string): string {
 
 export function createGitCommitUrl(url: string, revision: string): string {
     if (!url || !revision) {
-        return 'NA'
+        return "NA"
     }
-    if (url.indexOf('gitlab') > 0 || url.indexOf('github') > 0 || url.indexOf('azure') > 0) {
-        const urlpart = url.split('@')
+    if (url.indexOf("gitlab") > 0 || url.indexOf("github") > 0 || url.indexOf("azure") > 0) {
+        let urlpart = url.split("@")
         if (urlpart.length > 1) {
-            return `https://${urlpart[1].split('.git')[0]}/commit/${revision}`
+            return "https://" + urlpart[1].split(".git")[0] + "/commit/" + revision
         }
         if (urlpart.length == 1) {
-            return `${urlpart[0].split('.git')[0]}/commit/${revision}`
+            return urlpart[0].split(".git")[0] + "/commit/" + revision
         }
     }
-    if (url.indexOf('bitbucket') > 0) {
-        const urlpart = url.split('@')
+    if (url.indexOf("bitbucket") > 0) {
+        let urlpart = url.split("@")
         if (urlpart.length > 1) {
-            return `https://${urlpart[1].split('.git')[0]}/commits/${revision}`
+            return "https://" + urlpart[1].split(".git")[0] + "/commits/" + revision
         }
         if (urlpart.length == 1) {
-            return `${urlpart[0].split('.git')[0]}/commits/${revision}`
+            return urlpart[0].split(".git")[0] + "/commits/" + revision
         }
     }
-    return 'NA'
+    return "NA"
 }