@devtron-labs/devtron-fe-common-lib 0.0.60-beta-1 → 0.0.60-beta-2

package/src/Common/BreadCrumb/Types.ts

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

package/src/Common/CIPipeline.Types.ts

@@ -0,0 +1,277 @@
+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

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,43 @@
+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

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