@devtron-labs/devtron-fe-common-lib 0.0.62-beta-5 → 0.0.62-beta-7

package/src/Common/CIPipeline.Types.ts

@@ -1,277 +0,0 @@
-export interface MaterialType {
-    name: string
-    type: string
-    value: string
-    gitMaterialId: number
-    id: number
-    isSelected: boolean
-    gitHostId: number
-    gitProviderId: number
-    regex?: string
-    isRegex: boolean
-}
-
-export interface Githost {
-    id: number
-    name: string
-    active: boolean
-    webhookSecret: string
-    webhookUrl: string
-}
-
-export interface WebhookEvent {
-    id: number
-    gitHostId: number
-    name: string
-    isActive: boolean
-    selectors: WebhookEventSelectors[]
-}
-
-interface WebhookEventSelectors {
-    id: number
-    eventId: number
-    name: string
-    selector: string
-    toShowInCiFilter: boolean
-    fixValue: string
-    toShow: boolean
-    possibleValues: string
-    isActive: boolean
-}
-
-export interface CiPipelineSourceTypeOption {
-    label: string
-    value: string
-    isDisabled: boolean
-    isSelected: boolean
-    isWebhook: boolean
-}
-
-export enum RefVariableType {
-    GLOBAL = 'GLOBAL',
-    FROM_PREVIOUS_STEP = 'FROM_PREVIOUS_STEP',
-    NEW = 'NEW',
-}
-
-export enum PluginType {
-    INLINE = 'INLINE',
-    PLUGIN_REF = 'REF_PLUGIN',
-}
-
-export enum ScriptType {
-    SHELL = 'SHELL',
-    DOCKERFILE = 'DOCKERFILE',
-    CONTAINERIMAGE = 'CONTAINER_IMAGE',
-}
-
-export enum MountPath {
-    TRUE = 'Yes',
-    FALSE = 'No',
-}
-
-export enum ConditionType {
-    SKIP = 'SKIP',
-    TRIGGER = 'TRIGGER',
-    PASS = 'PASS',
-    FAIL = 'FAIL',
-}
-
-export enum RefVariableStageType {
-    PRE_CI = 'PRE_CI',
-    POST_CI = 'POST_CI',
-}
-
-export interface VariableType {
-    id: number
-    name: string
-    value: string
-    format: string
-    description: string
-    defaultValue: string
-    variableType: RefVariableType
-    refVariableStepIndex: number
-    refVariableName: string
-    refVariableStage?: RefVariableStageType
-    variableStepIndexInPlugin?: number
-}
-
-interface CommandArgsMap {
-    command: string
-    args: string[]
-}
-
-export interface PortMapType {
-    portOnLocal: number
-    portOnContainer: number
-}
-interface ConditionDetails {
-    id: number
-    conditionOnVariable: string
-    conditionOperator: string
-    conditionType: ConditionType
-    conditionalValue: string
-}
-
-interface InlineStepDetailType {
-    scriptType: ScriptType
-    isMountCustomScript?: boolean
-    script?: string
-    dockerFileExists?: boolean
-    mountPath?: string
-    mountCodeToContainer?: boolean
-    mountDirectoryFromHost?: boolean
-    containerImagePath?: string
-    imagePullSecret?: string
-    commandArgsMap?: CommandArgsMap[]
-    portMap?: PortMapType[]
-    mountPathMap?: {
-        filePathOnDisk: string
-        filePathOnContainer: string
-    }[]
-    inputVariables?: VariableType[]
-    outputVariables?: VariableType[]
-    conditionDetails: ConditionDetails[]
-}
-
-interface PluginRefStepDetailType {
-    id: number
-    pluginId: number
-    inputVariables?: VariableType[]
-    outputVariables?: VariableType[]
-    conditionDetails?: ConditionDetails[]
-}
-
-export interface StepType {
-    id: number
-    index: number
-    name: string
-    description: string
-    stepType: PluginType
-    outputDirectoryPath: string[]
-    inlineStepDetail?: InlineStepDetailType
-    pluginRefStepDetail?: PluginRefStepDetailType
-    triggerIfParentStageFail: boolean
-    isMandatory?: boolean
-}
-
-export interface BuildStageType {
-    id: number
-    steps: StepType[]
-}
-
-export enum CIBuildType {
-    SELF_DOCKERFILE_BUILD_TYPE = 'self-dockerfile-build',
-    MANAGED_DOCKERFILE_BUILD_TYPE = 'managed-dockerfile-build',
-    BUILDPACK_BUILD_TYPE = 'buildpack-build',
-}
-
-export interface BuildPackConfigType {
-    builderId: string
-    language: string
-    languageVersion: string
-    projectPath: string
-    builderLangEnvParam?: string
-    currentBuilderLangEnvParam?: string
-    buildPacks?: any
-    args?: Record<string, string>
-}
-
-export interface DockerBuildConfigType {
-    dockerfileContent: string
-    dockerfileRelativePath: string
-    buildContext: string
-    dockerfilePath?: string
-    dockerfileRepository?: string
-    args?: Record<string, string>
-    targetPlatform?: any
-    language?: string
-    languageFramework?: string
-}
-
-export interface CIBuildConfigType {
-    buildPackConfig: BuildPackConfigType
-    ciBuildType: CIBuildType
-    dockerBuildConfig: DockerBuildConfigType
-    gitMaterialId: number
-    buildContextGitMaterialId: number
-    id?: number
-    useRootBuildContext: boolean
-}
-
-export interface DockerConfigOverrideType {
-    dockerRegistry: string
-    dockerRepository: string
-    ciBuildConfig: CIBuildConfigType
-}
-
-export interface FormType {
-    name: string
-    args: { key: string; value: string }[]
-    materials: MaterialType[]
-    gitHost: Githost
-    webhookEvents: WebhookEvent[]
-    ciPipelineSourceTypeOptions: CiPipelineSourceTypeOption[]
-    webhookConditionList: { selectorId: number; value: string }[]
-    triggerType: string
-    scanEnabled?: boolean
-    beforeDockerBuildScripts?: {
-        id: number
-        name: string
-        outputLocation: string
-        script: string
-        isCollapsed: boolean
-        index: number
-    }[]
-    afterDockerBuildScripts?: {
-        id: number
-        name: string
-        outputLocation: string
-        script: string
-        isCollapsed: boolean
-        index: number
-    }[]
-    ciPipelineEditable: true
-    preBuildStage?: BuildStageType
-    postBuildStage?: BuildStageType
-    isDockerConfigOverridden?: boolean
-    dockerConfigOverride?: DockerConfigOverrideType
-    isOffendingMandatoryPlugin?: boolean
-}
-
-export interface ErrorObj {
-    isValid: boolean
-    message: string | null
-}
-export interface TaskErrorObj {
-    isValid: boolean
-    name: ErrorObj
-    inlineStepDetail?: { inputVariables?: ErrorObj[]; outputVariables?: ErrorObj[] }
-    pluginRefStepDetail?: { inputVariables?: ErrorObj[]; outputVariables?: ErrorObj[] }
-}
-export interface FormErrorObjectType {
-    name: ErrorObj
-    materials?: MaterialType[]
-    preBuildStage?: {
-        isValid: boolean
-        steps: TaskErrorObj[]
-    }
-    buildStage?: {
-        isValid: boolean
-        name: ErrorObj
-    }
-    postBuildStage?: {
-        isValid: boolean
-        steps: TaskErrorObj[]
-    }
-}
-
-export interface PluginDetailType {
-    id: number
-    name: string
-    type: string
-    description: string
-    icon: string
-    tags: string[]
-    inputVariables?: VariableType[]
-    outputVariables?: VariableType[]
-}

package/src/Common/ChartVersionAndTypeSelector.tsx

@@ -1,78 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { fetchChartTemplateVersions } from './Common.service'
-import { ChartVersionAndTypeSelectorProps, DeploymentChartVersionType } from './Types'
-import ReactSelect from 'react-select'
-import { customStyles, getFilteredChartVersions, showError } from './Helper'
-
-// @TODO: Generalize this component to be used in CodeEditor as Chart selector toolbar
-// when the Code Editor is moved to the fe-common-lib
-const ChartVersionAndTypeSelector = ({ setSelectedChartRefId }: ChartVersionAndTypeSelectorProps) => {
-    const [charts, setCharts] = useState<DeploymentChartVersionType[]>([])
-    const [selectedChartType, setSelectedChartType] = useState(null)
-    const [chartVersionOptions, setChartVersionOptions] = useState([])
-    const [chartTypeOptions, setChartTypeOptions] = useState([])
-    const [selectedChartVersion, setSelectedChartVersion] = useState(null)
-
-    useEffect(() => {
-        fetchChartTemplateVersions()
-            .then((res) => {
-                const charts = res?.result || []
-                setCharts(charts)
-                // Extract unique chart types from the data
-                const chartTypeOptions = [...new Set(charts.map((item) => item.chartType))].map((type) => ({
-                    value: type,
-                    label: type,
-                }))
-                setChartTypeOptions(chartTypeOptions)
-                const filteredVersions = getFilteredChartVersions(charts, chartTypeOptions[0])
-                selectFirstChartVersion(filteredVersions)
-            })
-            .catch((err) => {
-                showError(err)
-            })
-    }, [])
-
-    const selectFirstChartVersion = (filteredVersions) => {
-        setChartVersionOptions(filteredVersions)
-        setSelectedChartVersion(filteredVersions[0]) // Select the first chart version by default
-        setSelectedChartRefId(filteredVersions[0]?.chartRefId)
-    }
-
-    // Function to update chart version options based on selected chart type
-    const handleChartTypeChange = (selectedOption) => {
-        setSelectedChartType(selectedOption)
-        const filteredVersions = getFilteredChartVersions(charts, selectedOption)
-        selectFirstChartVersion(filteredVersions)
-    }
-
-    // Function to handle the change of the selected chart version
-    const handleChartVersionChange = (selectedOption) => {
-        setSelectedChartVersion(selectedOption)
-        setSelectedChartRefId(selectedOption.chartRefId)
-    }
-
-    return (
-        <div className="flex">
-            <div className="chart-type-options flex" data-testid="chart-type-options">
-                <span className="chart-type-options-label mr-4">Chart Type</span>
-                <ReactSelect
-                    value={selectedChartType ?? chartTypeOptions[0]}
-                    options={chartTypeOptions}
-                    onChange={handleChartTypeChange}
-                    styles={customStyles}
-                />
-            </div>
-            <div className="chart-version-options flex" data-testid="chart-version-options">
-                <span className="chart-version-options-label mr-4">Chart Version</span>
-                <ReactSelect
-                    value={selectedChartVersion ?? chartVersionOptions[0]}
-                    options={chartVersionOptions}
-                    onChange={handleChartVersionChange}
-                    styles={customStyles}
-                />
-            </div>
-        </div>
-    )
-}
-
-export default ChartVersionAndTypeSelector

package/src/Common/Checkbox.tsx

@@ -1,37 +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
-*/
-// TODO: Associate label with input element
-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>>
-}