@devtron-labs/devtron-fe-common-lib 0.0.62 → 0.0.63-beta-2

package/src/Common/Checkbox.tsx

@@ -1,36 +0,0 @@
-import React, { Component } from 'react'
-import { CheckboxProps } from './Types'
-
-/*
-Valid States of Checkbox:
-1. disabled: true, checked: false, value: XXX
-2. disabled: true, checked: true, value: INTERMIDIATE
-3. disabled: true, checked: true, value: CHECKED
-4. disabled: true, checked: false, value: XXX
-5. disabled: false, checked: true,  value: INTERMIDIATE
-6. disabled: false, checked: true,  value: CHECKED
-*/
-export class Checkbox extends Component<CheckboxProps> {
-    render() {
-        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>
-                    <span className={`form__checkbox-label`}>{this.props.children}</span>
-                </label>
-            </>
-        )
-    }
-}

package/src/Common/ClipboardButton/ClipboardButton.tsx

@@ -1,61 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react'
-import Tippy from '@tippyjs/react'
-import { copyToClipboard } from '../Helper'
-import ClipboardProps from './types'
-import { ReactComponent as ICCopy } from '../../Assets/Icon/ic-copy.svg'
-
-/**
- * @param content - Content to be copied
- * @param copiedTippyText - Text to be shown in the tippy when the content is copied
- * @param duration - Duration for which the tippy should be shown
- * @param trigger - To trigger the copy action, if set to true the content will be copied, use case being triggering the copy action from outside the component
- * @param setTrigger - Callback function to set the trigger
- */
-export default function ClipboardButton({ content, copiedTippyText, duration, trigger, setTrigger }: ClipboardProps) {
-    const [copied, setCopied] = useState<boolean>(false)
-    const [enableTippy, setEnableTippy] = useState<boolean>(false)
-
-    const handleTextCopied = () => setCopied(true)
-    const handleEnableTippy = () => setEnableTippy(true)
-    const handleDisableTippy = () => setEnableTippy(false)
-    const handleCopyContent = useCallback(() => copyToClipboard(content, handleTextCopied), [content])
-
-    useEffect(() => {
-        if (!copied) return
-
-        const timeout = setTimeout(() => {
-            setCopied(false)
-            setTrigger(false)
-        }, duration)
-
-        return () => clearTimeout(timeout)
-    }, [copied, duration, setTrigger])
-
-    useEffect(() => {
-        if (trigger) {
-            setCopied(true)
-            handleCopyContent()
-        }
-    }, [trigger, handleCopyContent])
-
-    return (
-        <div className="icon-dim-16 flex center">
-            <Tippy
-                className="default-tt"
-                content={copied ? copiedTippyText : 'Copy'}
-                placement="right"
-                visible={copied || enableTippy}
-            >
-                <button
-                    type="button"
-                    className="dc__hover-n100 dc__outline-none-imp p-0 flex bcn-0 dc__no-border"
-                    onMouseEnter={handleEnableTippy}
-                    onMouseLeave={handleDisableTippy}
-                    onClick={handleCopyContent}
-                >
-                    <ICCopy className="icon-dim-16" />
-                </button>
-            </Tippy>
-        </div>
-    )
-}

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

@@ -1,43 +0,0 @@
-import React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
-import ClipboardButton from '../ClipboardButton'
-
-jest.mock('../../helpers/Helpers', () => ({
-    copyToClipboard: jest.fn().mockImplementation((content, callback) => {
-        callback()
-    }),
-}))
-
-describe('When ClipboardButton mounts', () => {
-    beforeEach(() => {
-        jest.clearAllMocks()
-    })
-
-    it('should show the copy icon', () => {
-        render(
-            <ClipboardButton content="test" copiedTippyText="test" duration={1000} trigger={false} setTrigger={null} />,
-        )
-        expect(screen.getByRole('button')).toBeTruthy()
-    })
-
-    it('should show tippy on hover', () => {
-        render(
-            <ClipboardButton content="test" copiedTippyText="test" duration={1000} trigger={false} setTrigger={null} />,
-        )
-        fireEvent.mouseEnter(screen.getByRole('button'))
-        expect(screen.getByText('Copy')).toBeTruthy()
-    })
-
-    it('should show copiedTippyText when trigger is true', () => {
-        render(<ClipboardButton content="test" copiedTippyText="test" duration={1000} trigger setTrigger={null} />)
-        expect(screen.getByText('test')).toBeTruthy()
-    })
-
-    it('should call copyToClipboard when clicked', () => {
-        render(
-            <ClipboardButton content="test" copiedTippyText="test" duration={1000} trigger={false} setTrigger={null} />,
-        )
-        fireEvent.click(screen.getByRole('button'))
-        expect(screen.getByText('test')).toBeTruthy()
-    })
-})

package/src/Common/ClipboardButton/types.ts

@@ -1,7 +0,0 @@
-export default interface ClipboardProps {
-    content: string
-    copiedTippyText: string
-    duration: number
-    trigger: boolean
-    setTrigger: React.Dispatch<React.SetStateAction<boolean>>
-}

package/src/Common/Common.service.ts

@@ -1,315 +0,0 @@
-import moment from 'moment';
-import {get, post} from './Api';
-import { ROUTES } from './Constants'
-import { sortCallback } from './Helper';
-import {
-    TeamList,
-    ResponseType,
-    DeploymentNodeType,
-    CDModalTab,
-    FilterStates,
-    CDMaterialServiceEnum,
-    CDMaterialServiceQueryParams,
-    CDMaterialResponseType,
-    CDMaterialsMetaInfo,
-    CDMaterialsApprovalInfo,
-    CDMaterialFilterQuery,
-} 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) => {
-          return sortCallback('name', a, b);
-      });
-      return {
-          code: response.code,
-          status: response.status,
-          result: list,
-      };
-  });
-};
-
-interface UserRole extends ResponseType {
-    result?: {
-        roles: string[]
-        superAdmin: boolean
-    }
-}
-
-const stageMap = {
-    PRECD: 'PRE',
-    CD: 'DEPLOY',
-    POSTCD: 'POST',
-    APPROVAL: 'APPROVAL',
-}
-
-export const SourceTypeMap = {
-    BranchFixed: 'SOURCE_TYPE_BRANCH_FIXED',
-    WEBHOOK: 'WEBHOOK',
-    BranchRegex: 'SOURCE_TYPE_BRANCH_REGEX',
-}
-
-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 )
-}
-
-const processURL = (url: string, params: object) => {
-    const validParams = Object.keys(params).filter((key) => {
-        return params[key] != null
-    })
-
-    if (!validParams.length) {
-        return url
-    }
-
-    const queryString = validParams
-        .map((key) => {
-            if (Array.isArray(params[key])) {
-                return `${key}=${params[key].join(',')}`  
-            }
-            return `${key}=${params[key]}`
-        })
-        .join('&')    
-
-    return `${url}?${queryString}`
-}
-
-const cdMaterialListModal = (artifacts: any[], offset: number, artifactId?: number, artifactStatus?: string) => {
-    if (!artifacts || !artifacts.length) return []
-
-    const markFirstSelected = offset === 0
-    const startIndex = offset
-    let isImageMarked = false
-
-    const materials = artifacts.map((material, index) => {
-        let artifactStatusValue = ''
-        const filterState = material.filterState ?? FilterStates.ALLOWED
-
-        if (artifactId && artifactStatus && material.id === artifactId) {
-            artifactStatusValue = artifactStatus
-        }
-
-        const selectImage =
-            !isImageMarked && markFirstSelected && filterState === FilterStates.ALLOWED ? !material.vulnerable : false
-        if (selectImage) {
-            isImageMarked = true
-        }
-
-        return {
-            index: startIndex + index,
-            id: material.id,
-            deployedTime: material.deployed_time
-                ? moment(material.deployed_time).format('ddd, DD MMM YYYY, hh:mm A')
-                : 'Not Deployed',
-            deployedBy: material.deployedBy,
-            wfrId: material.wfrId,
-            tab: CDModalTab.Changes,
-            image: extractImage(material.image),
-            showChanges: false,
-            vulnerabilities: [],
-            buildTime: material.build_time || '',
-            isSelected: selectImage,
-            showSourceInfo: false,
-            deployed: material.deployed || false,
-            latest: material.latest || false,
-            vulnerabilitiesLoading: true,
-            scanned: material.scanned,
-            scanEnabled: material.scanEnabled,
-            vulnerable: material.vulnerable,
-            runningOnParentCd: material.runningOnParentCd,
-            artifactStatus: artifactStatusValue,
-            userApprovalMetadata: material.userApprovalMetadata,
-            triggeredBy: material.triggeredBy,
-            isVirtualEnvironment: material.isVirtualEnvironment,
-            imageComment: material.imageComment,
-            imageReleaseTags: material.imageReleaseTags,
-            // 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) => {
-                      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 ?? '',
-            appliedFilters: material.appliedFilters ?? [],
-            appliedFiltersState: material.appliedFiltersState ?? FilterStates.ALLOWED,
-            createdTime: material.createdTime ?? '',
-            dataSource: material.data_source ?? '',
-            registryType: material.registryType ?? '',
-            imagePath: material.image ?? '',
-            registryName: material.registryName ?? '',
-        }
-    })
-    return materials
-}
-
-const processCDMaterialsApprovalInfo = (enableApproval: boolean, cdMaterialsResult): CDMaterialsApprovalInfo => {
-    if (!enableApproval) {
-        return {
-            approvalUsers: [],
-            userApprovalConfig: null,
-            requestedUserId: 0,
-        }
-    }
-
-    return {
-        approvalUsers: cdMaterialsResult.approvalUsers,
-        userApprovalConfig: cdMaterialsResult.userApprovalConfig,
-        requestedUserId: cdMaterialsResult.requestedUserId,
-    }
-}
-
-const processCDMaterialsMetaInfo = (cdMaterialsResult): CDMaterialsMetaInfo => {
-    if (!cdMaterialsResult) {
-        return {
-            tagsEditable: false,
-            appReleaseTagNames: [],
-            hideImageTaggingHardDelete: false,
-            resourceFilters: [],
-            totalCount: 0,
-            canApproverDeploy: cdMaterialsResult.canApproverDeploy ?? false,
-        }
-    }
-
-    return {
-        appReleaseTagNames: cdMaterialsResult.appReleaseTagNames,
-        tagsEditable: cdMaterialsResult.tagsEditable,
-        hideImageTaggingHardDelete: cdMaterialsResult.hideImageTaggingHardDelete,
-        resourceFilters: cdMaterialsResult.resourceFilters ?? [],
-        totalCount: cdMaterialsResult.totalCount ?? 0,
-        canApproverDeploy: cdMaterialsResult.canApproverDeploy ?? false,
-    }
-}
-
-const processCDMaterialServiceResponse = (
-    cdMaterialsResult,
-    stage: DeploymentNodeType,
-    offset: number,
-    filter: CDMaterialFilterQuery,
-): CDMaterialResponseType => {
-    if (!cdMaterialsResult) {
-        return {
-            materials: [],
-            ...processCDMaterialsMetaInfo(cdMaterialsResult),
-            ...processCDMaterialsApprovalInfo(false, cdMaterialsResult),
-        }
-    }
-
-    const materials = cdMaterialListModal(
-        cdMaterialsResult.ci_artifacts,
-        offset ?? 0,
-        cdMaterialsResult.latest_wf_artifact_id,
-        cdMaterialsResult.latest_wf_artifact_status,
-    )
-    const approvalInfo = processCDMaterialsApprovalInfo(
-        stage === DeploymentNodeType.CD || stage === DeploymentNodeType.APPROVAL,
-        cdMaterialsResult,
-    )
-    const metaInfo = processCDMaterialsMetaInfo(cdMaterialsResult)
-
-    // TODO: On update of service would remove from here
-    const filteredMaterials =
-        filter && filter === CDMaterialFilterQuery.RESOURCE
-            ? materials.filter((material) => {
-                  return material.filterState === FilterStates.ALLOWED
-              })
-            : materials
-
-    return {
-        materials: filteredMaterials,
-        ...approvalInfo,
-        ...metaInfo,
-    }
-}
-
-const getSanitizedQueryParams = (queryParams: CDMaterialServiceQueryParams): CDMaterialServiceQueryParams => {
-    const { filter, ...rest } = queryParams
-    return rest
-}
-
-export const genericCDMaterialsService = (
-    serviceType: CDMaterialServiceEnum,
-    cdMaterialID: number,
-    stage: DeploymentNodeType,
-    signal: AbortSignal,
-    queryParams: CDMaterialServiceQueryParams = {},
-): Promise<CDMaterialResponseType> => {
-    // TODO: On update of service would remove from here
-    const manipulatedParams = getSanitizedQueryParams(queryParams)
-    
-    let URL
-    switch (serviceType) {
-        case CDMaterialServiceEnum.ROLLBACK:
-            URL = processURL(`${ROUTES.CD_MATERIAL_GET}/${cdMaterialID}/material/rollback`, manipulatedParams)
-            break
-
-        // Meant for handling getCDMaterialList
-        default:
-            URL = processURL(`${ROUTES.CD_MATERIAL_GET}/${cdMaterialID}/material`, { ...manipulatedParams, stage: stageMap[stage] })
-            break
-    }
-
-    return get(URL, { signal }).then((response) => {
-        return processCDMaterialServiceResponse(response.result, stage, queryParams.offset, queryParams.filter)
-    })
-}
-
-export function extractImage(image: string): string {
-    return image ? image.split(':').pop() : ''
-}
-
-export function createGitCommitUrl(url: string, revision: string): string {
-    if (!url || !revision) {
-        return "NA"
-    }
-    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
-        }
-        if (urlpart.length == 1) {
-            return urlpart[0].split(".git")[0] + "/commit/" + revision
-        }
-    }
-    if (url.indexOf("bitbucket") > 0) {
-        let urlpart = url.split("@")
-        if (urlpart.length > 1) {
-            return "https://" + urlpart[1].split(".git")[0] + "/commits/" + revision
-        }
-        if (urlpart.length == 1) {
-            return urlpart[0].split(".git")[0] + "/commits/" + revision
-        }
-    }
-    return "NA"
-}
-
-export function fetchChartTemplateVersions() {
-    return get(`${ROUTES.DEPLOYMENT_TEMPLATE_LIST}?appId=-1&envId=-1`)
-}