@devtron-labs/devtron-fe-common-lib 0.0.47-beta-5 → 0.0.48

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.47-beta-5",
+    "version": "0.0.48",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
@@ -50,8 +50,6 @@
         "react-router-dom": "^5.3.0"
     },
     "dependencies": {
-        "fast-json-patch": "^3.1.1",
-        "jsonpath-plus": "^7.2.0",
         "sass": "^1.56.2",
         "tslib": "^2.4.1"
     }

package/src/Common/AddCDButton/AddCDButton.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import Tippy from '@tippyjs/react'
+import { AddCDButtonProps, TooltipContentProps } from './types'
+import { AddCDPositions } from '../Types'
+
+function TooltipContent({ tooltipContent }: TooltipContentProps) {
+    if (tooltipContent) {
+        return (
+            <div className="dc__white-space-pre-wrap">
+                <p className="m-0 cn-0 fs-12 fw-6 lh-18">Click to add</p>
+
+                {tooltipContent}
+            </div>
+        )
+    }
+
+    return <div className="dc__white-space-pre-wrap">Click to add here</div>
+}
+
+export default function AddCDButton({
+    position,
+    addCDButtons,
+    endNode,
+    startNode,
+    handleAddCD,
+    tooltipContent,
+}: Readonly<AddCDButtonProps>) {
+    const referenceNode = position === AddCDPositions.RIGHT ? endNode : startNode
+    const handleAddCDClick = () => {
+        handleAddCD(position)
+    }
+
+    if (addCDButtons?.includes(position)) {
+        return (
+            <Tippy
+                placement="top"
+                content={<TooltipContent tooltipContent={tooltipContent} />}
+                className="default-tt"
+                arrow={false}
+            >
+                <svg
+                    x={referenceNode.x + (position === AddCDPositions.RIGHT ? -20 - 5 : referenceNode.width + 5)}
+                    // Here 10 is the height of the button / 2
+                    y={referenceNode.y + referenceNode.height / 2 - 10}
+                    width="20"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    data-testid={`add-cd-to-${position}`}
+                    onClick={handleAddCDClick}
+                    className="dc__outline-none-imp"
+                >
+                    <rect width="20" height="20" rx="10" fill="#664BEE" className="add-cd-edge-btn" />
+                    <path
+                        d="M6.5 10H13.5M10 6.5V13.5"
+                        stroke="white"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </svg>
+            </Tippy>
+        )
+    }
+
+    return null
+}

package/src/Common/AddCDButton/index.ts

@@ -0,0 +1,2 @@
+export { default as AddCDButton } from './AddCDButton'
+export { handleAddCD } from './utils'

package/src/Common/AddCDButton/types.ts

@@ -0,0 +1,38 @@
+import { AddCDPositions, AddPipelineType, EdgeEndNodeType, EdgeNodeType, Point } from '../Types'
+
+export interface AddCDButtonProps {
+    position: AddCDPositions
+    addCDButtons: AddCDPositions[]
+    endNode: Point & EdgeEndNodeType
+    startNode: Point & EdgeNodeType
+    handleAddCD: (position: AddCDPositions) => void
+    tooltipContent?: string
+}
+
+export interface HandleAddCD {
+    position: AddCDPositions
+    handleCDSelect: (
+        workflowId: number | string,
+        ciPipelineId: number | string,
+        parentPipelineType: string,
+        parentPipelineId: number | string,
+        isWebhookCD?: boolean,
+        childPipelineId?: number | string,
+        addType?: AddPipelineType,
+    ) => void
+    startNode: EdgeNodeType
+    endNode: EdgeEndNodeType
+    workflowId: number | string
+    ciPipelineId: number | string
+    isWebhookCD: boolean
+    isParallelEdge: boolean
+}
+
+export interface GetPipelineType {
+    isWebhookCD: boolean
+    startNode: EdgeNodeType
+}
+
+export interface TooltipContentProps {
+    tooltipContent?: string
+}

package/src/Common/AddCDButton/utils.tsx

@@ -0,0 +1,35 @@
+import { AddCDPositions, AddPipelineType, PipelineType, WorkflowNodeType } from '../Types'
+import { HandleAddCD, GetPipelineType } from './types'
+
+const getPipelineType = ({ isWebhookCD, startNode }: GetPipelineType) => {
+    if (isWebhookCD) {
+        return PipelineType.WEBHOOK
+    }
+
+    if (startNode.type === WorkflowNodeType.CI) {
+        return PipelineType.CI_PIPELINE
+    }
+
+    return PipelineType.CD_PIPELINE
+}
+
+export const handleAddCD = ({
+    position,
+    handleCDSelect,
+    startNode,
+    endNode,
+    workflowId,
+    ciPipelineId,
+    isWebhookCD,
+    isParallelEdge,
+}: HandleAddCD) => {
+    if (!handleCDSelect) {
+        return
+    }
+    const pipelineType = getPipelineType({ isWebhookCD, startNode })
+    const addPipelineType =
+        isParallelEdge && position === AddCDPositions.RIGHT ? AddPipelineType.PARALLEL : AddPipelineType.SEQUENTIAL
+    const endNodeId = !isParallelEdge && position === AddCDPositions.RIGHT ? endNode.id : null
+
+    handleCDSelect(workflowId, ciPipelineId, pipelineType, startNode.id, isWebhookCD, endNodeId, addPipelineType)
+}

package/src/Common/Common.service.ts

@@ -309,7 +309,3 @@ export function createGitCommitUrl(url: string, revision: string): string {
     }
     return "NA"
 }
-
-export function fetchChartTemplateVersions() {
-    return get(`${ROUTES.DEPLOYMENT_TEMPLATE_LIST}?appId=-1&envId=-1`)
-}

package/src/Common/Constants.ts

@@ -24,8 +24,7 @@ export const ROUTES = {
     PROJECT_LIST_MIN: 'team/autocomplete',
     USER_CHECK_ROLE: 'user/check/roles',
     IMAGE_TAGGING:'app/image-tagging',
-    CD_MATERIAL_GET: 'app/cd-pipeline',
-    DEPLOYMENT_TEMPLATE_LIST: 'app/template/list'
+    CD_MATERIAL_GET: 'app/cd-pipeline'
 }
 
 export enum KEY_VALUE {

package/src/Common/Dialogs/DeleteDialog.tsx

@@ -45,7 +45,7 @@ export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.F
                         type="button"
                         className="cta delete cta-cd-delete-modal ml-16"
                         onClick={handleDelete}
-                        disabled={props.apiCallInProgress}
+                        disabled={props.apiCallInProgress || props.disabled}
                         data-testid="dialog-delete"
                     >
                         {props.apiCallInProgress ? (

package/src/Common/Dialogs/Types.ts

@@ -11,6 +11,7 @@ export interface DeleteDialogProps {
     dataTestId?: string
     buttonPrimaryText?: string
     shouldStopPropagation?: boolean
+    disabled?: boolean
 }
 
 export interface ForceDeleteDialogType {

package/src/Common/Helper.tsx

@@ -7,8 +7,6 @@ import { ERROR_EMPTY_SCREEN, TOKEN_COOKIE_NAME } from './Constants'
 import { ServerErrors } from './ServerError'
 import { toastAccessDenied } from './ToastBody'
 import { AsyncOptions, AsyncState, UseSearchString } from './Types'
-import { JSONPath } from 'jsonpath-plus'
-import * as jsonpatch from 'fast-json-patch'
 
 toast.configure({
     autoClose: 3000,
@@ -460,99 +458,3 @@ export const getUrlWithSearchParams = (url: string, params: Record<string | numb
  * Custom exception logger function for logging errors to sentry
  */
 export const logExceptionToSentry = Sentry.captureException.bind(window)
-
-export const customStyles = {
-    control: (base, state) => ({
-        ...base,
-        minHeight: '32px',
-        boxShadow: 'none',
-        border: 'none',
-        cursor: 'pointer',
-        background: 'transparent',
-    }),
-    indicatorSeparator: (base, state) => ({
-        ...base,
-        width: 0,
-    }),
-    valueContainer: (base, state) => ({
-        ...base,
-        padding: '0',
-        fontSize: '13px',
-        fontWeight: '600',
-    }),
-    dropdownIndicator: (base, state) => ({
-        ...base,
-        color: 'var(--N400)',
-        padding: '0 8px',
-        transition: 'all .2s ease',
-        transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
-    }),
-}
-
-export const getFilteredChartVersions = (charts, selectedChartType) => {
-    // Filter chart versions based on selected chart type
-    return charts
-        .filter((item) => item?.chartType === selectedChartType.value)
-        .map((item) => ({
-            value: item?.chartVersion,
-            label: item?.chartVersion,
-            chartRefId: item.chartRefId,
-        }))
-}
-function removeEmptyObjectKeysAndNullValues(obj) {
-    //it recursively removes empty object keys and array values that are null
-    for (let key in obj) {
-        if (Array.isArray(obj[key])) obj[key] = obj[key].filter((item) => item !== null)
-        if (obj[key].length === 0) {
-            // Check if the array is empty
-            delete obj[key] // Delete the key if the array is empty
-        } else if (obj[key] && typeof obj[key] === 'object') {
-            if (removeEmptyObjectKeysAndNullValues(obj[key])) {
-                delete obj[key]
-            }
-        } else if (obj[key] === null || obj[key] === undefined) {
-            delete obj[key]
-        }
-    }
-    return Object.keys(obj).length === 0
-}
-
-export function getUnlockedJSON(json, jsonPathArray) {
-    const jsonCopy = JSON.parse(JSON.stringify(json))
-    let patches = jsonPathArray.flatMap((jsonPath) => {
-        const pathsToRemove = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' })
-        return pathsToRemove.map((result) =>
-            Array.isArray(result.parent)
-                ? { op: 'replace', path: result.pointer, value: null }
-                : { op: 'remove', path: result.pointer },
-        )
-    })
-    let newDocument = jsonpatch.applyPatch(jsonCopy, patches).newDocument
-
-    removeEmptyObjectKeysAndNullValues(newDocument)
-    return newDocument
-}
-
-export function getLockedJSON(json, jsonPathArray: string[]) {
-    const jsonCopy = JSON.parse(JSON.stringify(json))
-    let resultJson = {}
-    jsonPathArray.forEach((jsonPath) => {
-        const elements = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' })
-        elements.forEach((element) => {
-            const pathArray: string[] = JSONPath.toPathArray(element.path)
-            const lastPath = pathArray.pop()
-            let current = resultJson
-            for (let i = 0; i < pathArray.length; i++) {
-                let key = isNaN(Number(pathArray[i])) ? pathArray[i] : parseInt(pathArray[i])
-                if (!current[key]) {
-                    current[key] = isNaN(Number(pathArray[i + 1])) ? {} : []
-                }
-                current = current[key]
-            }
-            let key = isNaN(Number(lastPath)) ? lastPath : parseInt(lastPath)
-            current[key] = element.value
-        })
-    })
-    return resultJson['$']
-}
-

package/src/Common/Types.ts

@@ -293,6 +293,11 @@ export interface CDMaterialServiceQueryParams {
     filter?: CDMaterialFilterQuery
 }
 
+export interface DownstreamNodesEnvironmentsType {
+    environmentId: number
+    environmentName: string
+}
+
 export interface CommonNodeAttr {
     connectingCiPipelineId?: number
     parents: string | number[] | string[]
@@ -354,6 +359,9 @@ export interface CommonNodeAttr {
     }
     appReleaseTagNames?: string[]
     tagsEditable?: boolean
+    deploymentAppCreated?: boolean
+    isLast?: boolean
+    downstreamEnvironments?: DownstreamNodesEnvironmentsType[]
 }
 
 export enum DeploymentAppTypes {
@@ -624,72 +632,50 @@ export interface CiPipeline {
     pipelineType?: string
 }
 
-export interface DeploymentChartVersionType {
-    chartRefId: number 
-    chartVersion: string
-    chartType: string
-    type: number
+export enum PipelineType {
+    CI_PIPELINE = 'CI_PIPELINE',
+    CD_PIPELINE = 'CD_PIPELINE',
+    WEBHOOK = 'WEBHOOK',
+    LINKED_CD = 'LINKED_CD',
 }
 
-export interface ChartVersionAndTypeSelectorProps {
-    setSelectedChartRefId: React.Dispatch<React.SetStateAction<number>>
+export enum WorkflowNodeType {
+    GIT = 'GIT',
+    CI = 'CI',
+    WEBHOOK = 'WEBHOOK',
+    PRE_CD = 'PRECD',
+    CD = 'CD',
+    POST_CD = 'POSTCD',
 }
 
-export interface InformationBarProps {
-    text: string
-    className?: string
-    children?: React.ReactNode
+export enum AddCDPositions {
+    LEFT = 'left',
+    RIGHT = 'right',
 }
 
-export interface CodeEditorInterface {
-    value?: string
-    lineDecorationsWidth?: number
-    responseType?: string
-    onChange?: (string) => void
-    onBlur?: () => void
-    onFocus?: () => void
-    children?: any
-    defaultValue?: string
-    mode?: 'json' | 'yaml' | 'shell' | 'dockerfile' | 'plaintext'
-    tabSize?: number
-    readOnly?: boolean
-    noParsing?: boolean
-    minHeight?: number
-    maxHeight?: number
-    inline?: boolean
-    height?: number | string
-    shebang?: string | JSX.Element
-    diffView?: boolean
-    loading?: boolean
-    customLoader?: JSX.Element
-    theme?: string
-    original?: string
-    focus?: boolean
-    validatorSchema?: any
-    isKubernetes?: boolean
-    cleanData?: boolean
-    chartVersion?: any
-}
-
-export interface CodeEditorComposition {
-    Header?: React.FC<any>
-    LanguageChanger?: React.FC<any>
-    ThemeChanger?: React.FC<any>
-    ValidationError?: React.FC<any>
-    Clipboard?: React.FC<any>
-    Warning?: React.FC<InformationBarProps>
-    ErrorBar?: React.FC<InformationBarProps>
-    Information?: React.FC<InformationBarProps>
-}
-
-export interface CodeEditorHeaderComposition {
-    LanguageChanger?: React.FC<any>;
-    ThemeChanger?: React.FC<any>;
-    ValidationError?: React.FC<any>;
-    Clipboard?: React.FC<any>;
-}
-export interface CodeEditorHeaderInterface {
-    children?: any;
-    className?: string
-    hideDefaultSplitHeader?: boolean;
-}
+export interface SelectedNode {
+    nodeType: WorkflowNodeType
+    id: string
+}
+
+export enum AddPipelineType {
+    SEQUENTIAL = 'SEQUENTIAL',
+    PARALLEL = 'PARALLEL',
+}
+
+export interface Point {
+    x: number
+    y: number
+}
+
+export interface EdgeNodeType {
+    height: number
+    width: number
+    userApprovalConfig?: UserApprovalConfigType
+    type?: any
+    id?: number | string
+}
+
+export interface EdgeEndNodeType extends EdgeNodeType {
+    userApprovalConfig?: UserApprovalConfigType
+}

package/src/Common/index.ts

@@ -42,5 +42,5 @@ export * from './Hooks'
 export { AppStatus } from './AppStatus'
 export * from './RJSF'
 export * from './DevtronProgressing'
-export { default as ChartVersionAndTypeSelector } from './ChartVersionAndTypeSelector'
+export * from './AddCDButton'
 export * from './CustomInput'

package/dist/Common/ChartVersionAndTypeSelector.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { ChartVersionAndTypeSelectorProps } from './Types';
-declare const ChartVersionAndTypeSelector: ({ setSelectedChartRefId }: ChartVersionAndTypeSelectorProps) => JSX.Element;
-export default ChartVersionAndTypeSelector;

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