@devtron-labs/devtron-fe-common-lib 0.0.52-beta-5 → 0.0.53-beta-1

package/src/Common/AppStatus/constants.ts

@@ -1,53 +0,0 @@
-export const StatusConstants = {
-    NOT_DEPLOYED: {
-        noSpaceLower: 'notdeployed',
-        normalCase: 'Not deployed',
-        lowerCase: 'not-deployed',
-    },
-    APP_STATUS: {
-        noSpaceLower: 'appStatus',
-        normalText: 'App status',
-    },
-    PROJECT: {
-        pluralLower: 'projects',
-        lowerCase: 'project',
-    },
-    CLUSTER: {
-        pluralLower: 'clusters',
-        lowerCase: 'cluster',
-    },
-    NAMESPACE: {
-        pluralLower: 'namespaces',
-        lowerCase: 'namespace',
-    },
-    ENVIRONMENT: {
-        pluralLower: 'environments',
-        lowerCase: 'environment',
-    },
-    NOT_AVILABLE: {
-        normalCase: 'Not available',
-    },
-}
-
-export enum TIMELINE_STATUS {
-    DEPLOYMENT_INITIATED = 'DEPLOYMENT_INITIATED',
-    GIT_COMMIT = 'GIT_COMMIT',
-    GIT_COMMIT_FAILED = 'GIT_COMMIT_FAILED',
-    KUBECTL_APPLY = 'KUBECTL_APPLY',
-    KUBECTL_APPLY_STARTED = 'KUBECTL_APPLY_STARTED',
-    KUBECTL_APPLY_SYNCED = 'KUBECTL_APPLY_SYNCED',
-    HEALTHY = 'HEALTHY',
-    APP_HEALTH = 'APP_HEALTH',
-    DEPLOYMENT_FAILED = 'FAILED',
-    FETCH_TIMED_OUT = 'TIMED_OUT',
-    UNABLE_TO_FETCH_STATUS = 'UNABLE_TO_FETCH_STATUS',
-    DEGRADED = 'DEGRADED',
-    DEPLOYMENT_SUPERSEDED = 'DEPLOYMENT_SUPERSEDED',
-    ABORTED = 'ABORTED',
-    INPROGRESS = 'INPROGRESS',
-    HELM_PACKAGE_GENERATED = 'HELM_PACKAGE_GENERATED',
-    HELM_MANIFEST_PUSHED_TO_HELM_REPO = 'HELM_MANIFEST_PUSHED_TO_HELM_REPO',
-    HELM_MANIFEST_PUSHED_TO_HELM_REPO_FAILED = 'HELM_MANIFEST_PUSHED_TO_HELM_REPO_FAILED',
-}
-
-export const YET_TO_RUN = 'Yet to run'

package/src/Common/AppStatus/index.ts

@@ -1 +0,0 @@
-export { default as AppStatus } from './AppStatus'

package/src/Common/AppStatus/types.ts

@@ -1,12 +0,0 @@
-export interface AppStatusType {
-    appStatus: string
-    isDeploymentStatus?: boolean
-    isJobView?: boolean
-    isVirtualEnv?: boolean
-    /**
-     * Hide the status message if true and show status message in tooltip
-     *
-     * @default false
-     */
-    hideStatusMessage?: boolean
-}

package/src/Common/AppStatus/utils.ts

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

package/src/Common/BreadCrumb/BreadCrumb.tsx

@@ -1,105 +0,0 @@
-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 {
-    let sep = props?.sep || '/'
-    deps = deps || []
-    const { url, path } = useRouteMatch()
-    const params = useParams()
-    const { state, setState } = useBreadcrumbContext()
-
-    useEffect(() => {
-        if (!props || !props.alias) return
-        setState((state) => ({ ...state, alias: { ...state.alias, ...props.alias } }))
-        return () => resetCrumb(Object.keys(props.alias))
-    }, deps)
-
-    function setCrumb(props) {
-        setState((state) => ({ ...state, alias: { ...state.alias, ...props } }))
-    }
-
-    function resetCrumb(props: string[]) {
-        const tempAlias = props.reduce((agg, curr, idx) => {
-            delete agg[curr]
-            return agg
-        }, state.alias)
-        setState((state) => ({ ...state, alias: tempAlias }))
-    }
-
-    let levels: Breadcrumb[] = useMemo(() => {
-        const paths = path.split('/').filter(Boolean)
-        const urls = url.split('/').filter(Boolean)
-        return paths.map((path, idx) => {
-            const crumb: Breadcrumb = { to: urls[idx], name: path }
-            if (path.startsWith(':') && params[path.replace(':', '')]) {
-                crumb.className = 'param'
-            }
-            return crumb
-        })
-    }, [path, url])
-    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 }
-}
-
-export const BreadCrumb: React.FC<Breadcrumbs> = ({
-    breadcrumbs,
-    sep = '/',
-    className = 'dc__devtron-breadcrumb__item',
-}) => {
-    const { url } = useRouteMatch()
-    const filteredCrumbs = breadcrumbs.filter((crumb) => !!crumb.name)
-    return (
-        <React.Fragment>
-            {filteredCrumbs.map((breadcrumb, idx) => (
-                <React.Fragment key={idx}>
-                    <ConditionalWrap
-                        condition={!!breadcrumb.to}
-                        wrap={(children) => (
-                            <Link
-                                className={`${url === breadcrumb.to ? 'active' : ''} ${className} ${
-                                    breadcrumb.className || ''
-                                }`}
-                                to={breadcrumb.to}
-                            >
-                                {children}
-                            </Link>
-                        )}
-                    >
-                        {breadcrumb.name}
-                    </ConditionalWrap>
-
-                    {idx + 1 !== filteredCrumbs.length && breadcrumb.name && (
-                        <span className={`${className}__separator cn-5`}>{sep}</span>
-                    )}
-                </React.Fragment>
-            ))}
-        </React.Fragment>
-    )
-}

package/src/Common/BreadCrumb/BreadcrumbStore.tsx

@@ -1,25 +0,0 @@
-import React, { createContext, useState } from 'react'
-
-const initialState = {
-    alias: {},
-}
-
-const Store = ({ children }) => {
-    const [state, setState] = useState(initialState)
-    return <BreadcrumbContext.Provider value={{ state, setState }}>{children}</BreadcrumbContext.Provider>
-}
-
-export const BreadcrumbContext = createContext({
-    state: { alias: {} },
-    setState: null,
-})
-
-export function useBreadcrumbContext() {
-    const context = React.useContext(BreadcrumbContext)
-    if (!context) {
-        throw new Error(`breadcrumb components cannot be used outside Breadcrumb context`)
-    }
-    return context
-}
-
-export default Store

package/src/Common/BreadCrumb/Types.ts

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

@@ -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,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>
-    )
-}