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

package/dist/Common/AddCDButton/AddCDButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { AddCDButtonProps } from './types';
+export default function AddCDButton({ position, addCDButtons, endNode, startNode, handleAddCD, tooltipContent, }: Readonly<AddCDButtonProps>): JSX.Element;

package/dist/Common/AddCDButton/index.d.ts

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

package/dist/Common/AddCDButton/types.d.ts

@@ -0,0 +1,26 @@
+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/dist/Common/AddCDButton/utils.d.ts

@@ -0,0 +1,2 @@
+import { HandleAddCD } from './types';
+export declare const handleAddCD: ({ position, handleCDSelect, startNode, endNode, workflowId, ciPipelineId, isWebhookCD, isParallelEdge, }: HandleAddCD) => void;

package/dist/Common/Common.service.d.ts

@@ -16,5 +16,4 @@ export declare function setImageTags(request: any, pipelineId: number, artifactI
 export declare const genericCDMaterialsService: (serviceType: CDMaterialServiceEnum, cdMaterialID: number, stage: DeploymentNodeType, signal: AbortSignal, queryParams?: CDMaterialServiceQueryParams) => Promise<CDMaterialResponseType>;
 export declare function extractImage(image: string): string;
 export declare function createGitCommitUrl(url: string, revision: string): string;
-export declare function fetchChartTemplateVersions(): Promise<ResponseType>;
 export {};

package/dist/Common/Constants.d.ts

@@ -20,7 +20,6 @@ export declare const ROUTES: {
     USER_CHECK_ROLE: string;
     IMAGE_TAGGING: string;
     CD_MATERIAL_GET: string;
-    DEPLOYMENT_TEMPLATE_LIST: string;
 };
 export declare enum KEY_VALUE {
     KEY = "key",

package/dist/Common/Dialogs/Types.d.ts

@@ -10,6 +10,7 @@ export interface DeleteDialogProps {
     dataTestId?: string;
     buttonPrimaryText?: string;
     shouldStopPropagation?: boolean;
+    disabled?: boolean;
 }
 export interface ForceDeleteDialogType {
     onClickDelete: () => void;

package/dist/Common/Helper.d.ts

@@ -48,13 +48,6 @@ export declare const getUrlWithSearchParams: (url: string, params: Record<string
  * Custom exception logger function for logging errors to sentry
  */
 export declare const logExceptionToSentry: typeof Sentry.captureException;
-export declare const customStyles: {
-    control: (base: any, state: any) => any;
-    indicatorSeparator: (base: any, state: any) => any;
-    valueContainer: (base: any, state: any) => any;
-    dropdownIndicator: (base: any, state: any) => any;
-};
-export declare const getFilteredChartVersions: (charts: any, selectedChartType: any) => any;
 export declare function getUnlockedJSON(json: any, jsonPathArray: any): any;
 export declare function getLockedJSON(json: any, jsonPathArray: string[]): any;
 export {};

package/dist/Common/Types.d.ts

@@ -261,6 +261,10 @@ export interface CDMaterialServiceQueryParams {
     resource?: CDMaterialResourceQuery;
     filter?: CDMaterialFilterQuery;
 }
+export interface DownstreamNodesEnvironmentsType {
+    environmentId: number;
+    environmentName: string;
+}
 export interface CommonNodeAttr {
     connectingCiPipelineId?: number;
     parents: string | number[] | string[];
@@ -322,6 +326,9 @@ export interface CommonNodeAttr {
     };
     appReleaseTagNames?: string[];
     tagsEditable?: boolean;
+    deploymentAppCreated?: boolean;
+    isLast?: boolean;
+    downstreamEnvironments?: DownstreamNodesEnvironmentsType[];
 }
 export declare enum DeploymentAppTypes {
     HELM = "helm",
@@ -563,15 +570,6 @@ export interface CiPipeline {
     isOffendingMandatoryPlugin?: boolean;
     pipelineType?: string;
 }
-export interface DeploymentChartVersionType {
-    chartRefId: number;
-    chartVersion: string;
-    chartType: string;
-    type: number;
-}
-export interface ChartVersionAndTypeSelectorProps {
-    setSelectedChartRefId: React.Dispatch<React.SetStateAction<number>>;
-}
 export interface InformationBarProps {
     text: string;
     className?: string;
@@ -586,7 +584,7 @@ export interface CodeEditorInterface {
     onFocus?: () => void;
     children?: any;
     defaultValue?: string;
-    mode?: 'json' | 'yaml' | 'shell' | 'dockerfile' | 'plaintext';
+    mode?: 'json' | 'yaml' | 'shell' | 'dockerfile';
     tabSize?: number;
     readOnly?: boolean;
     noParsing?: boolean;
@@ -627,4 +625,44 @@ export interface CodeEditorHeaderInterface {
     className?: string;
     hideDefaultSplitHeader?: boolean;
 }
+export declare enum PipelineType {
+    CI_PIPELINE = "CI_PIPELINE",
+    CD_PIPELINE = "CD_PIPELINE",
+    WEBHOOK = "WEBHOOK",
+    LINKED_CD = "LINKED_CD"
+}
+export declare enum WorkflowNodeType {
+    GIT = "GIT",
+    CI = "CI",
+    WEBHOOK = "WEBHOOK",
+    PRE_CD = "PRECD",
+    CD = "CD",
+    POST_CD = "POSTCD"
+}
+export declare enum AddCDPositions {
+    LEFT = "left",
+    RIGHT = "right"
+}
+export interface SelectedNode {
+    nodeType: WorkflowNodeType;
+    id: string;
+}
+export declare 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;
+}
 export {};

package/dist/Common/index.d.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/index.js

@@ -48,8 +48,7 @@ var 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'
 };
 exports.KEY_VALUE = void 0;
 (function (KEY_VALUE) {
@@ -465,7 +464,33 @@ exports.FilterConditionType = void 0;
 (function (FilterConditionType) {
     FilterConditionType[FilterConditionType["PASS"] = 1] = "PASS";
     FilterConditionType[FilterConditionType["FAIL"] = 0] = "FAIL";
-})(exports.FilterConditionType || (exports.FilterConditionType = {}));
+})(exports.FilterConditionType || (exports.FilterConditionType = {}));
+exports.PipelineType = void 0;
+(function (PipelineType) {
+    PipelineType["CI_PIPELINE"] = "CI_PIPELINE";
+    PipelineType["CD_PIPELINE"] = "CD_PIPELINE";
+    PipelineType["WEBHOOK"] = "WEBHOOK";
+    PipelineType["LINKED_CD"] = "LINKED_CD";
+})(exports.PipelineType || (exports.PipelineType = {}));
+exports.WorkflowNodeType = void 0;
+(function (WorkflowNodeType) {
+    WorkflowNodeType["GIT"] = "GIT";
+    WorkflowNodeType["CI"] = "CI";
+    WorkflowNodeType["WEBHOOK"] = "WEBHOOK";
+    WorkflowNodeType["PRE_CD"] = "PRECD";
+    WorkflowNodeType["CD"] = "CD";
+    WorkflowNodeType["POST_CD"] = "POSTCD";
+})(exports.WorkflowNodeType || (exports.WorkflowNodeType = {}));
+exports.AddCDPositions = void 0;
+(function (AddCDPositions) {
+    AddCDPositions["LEFT"] = "left";
+    AddCDPositions["RIGHT"] = "right";
+})(exports.AddCDPositions || (exports.AddCDPositions = {}));
+exports.AddPipelineType = void 0;
+(function (AddPipelineType) {
+    AddPipelineType["SEQUENTIAL"] = "SEQUENTIAL";
+    AddPipelineType["PARALLEL"] = "PARALLEL";
+})(exports.AddPipelineType || (exports.AddPipelineType = {}));
 
 var responseMessages = {
     100: 'Continue',
@@ -11736,26 +11761,12 @@ var getUrlWithSearchParams = function (url, params) {
  * Custom exception logger function for logging errors to sentry
  */
 var logExceptionToSentry = captureException.bind(window);
-var customStyles = {
-    control: function (base, state) { return (__assign(__assign({}, base), { minHeight: '32px', boxShadow: 'none', border: 'none', cursor: 'pointer', background: 'transparent' })); },
-    indicatorSeparator: function (base, state) { return (__assign(__assign({}, base), { width: 0 })); },
-    valueContainer: function (base, state) { return (__assign(__assign({}, base), { padding: '0', fontSize: '13px', fontWeight: '600' })); },
-    dropdownIndicator: function (base, state) { return (__assign(__assign({}, base), { color: 'var(--N400)', padding: '0 8px', transition: 'all .2s ease', transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)' })); },
-};
-var getFilteredChartVersions = function (charts, selectedChartType) {
-    // Filter chart versions based on selected chart type
-    return charts
-        .filter(function (item) { return (item === null || item === void 0 ? void 0 : item.chartType) === selectedChartType.value; })
-        .map(function (item) { return ({
-        value: item === null || item === void 0 ? void 0 : item.chartVersion,
-        label: item === null || item === void 0 ? void 0 : item.chartVersion,
-        chartRefId: item.chartRefId,
-    }); });
-};
 function removeEmptyObjectKeysAndNullValues(obj) {
     // It recursively removes empty object keys and array values that are null
     for (var key in obj) {
         if (Array.isArray(obj[key])) {
+            if (obj[key].length === 0)
+                continue;
             obj[key] = obj[key].filter(function (item) { return item !== null; });
             // Check if the array is empty
             if (obj[key].length === 0) {
@@ -11767,7 +11778,7 @@ function removeEmptyObjectKeysAndNullValues(obj) {
                 delete obj[key];
             }
         }
-        else if (obj[key] === null || obj[key] === undefined) {
+        else if (obj[key] === undefined) {
             delete obj[key];
         }
     }
@@ -16671,7 +16682,7 @@ var DeleteDialog = function (props) {
         }
         props.closeDelete();
     };
-    return (jsxRuntime.jsxs(ConfirmationDialog, __assign({ className: "confirmation-dialog__body--w-400" }, { children: [jsxRuntime.jsx(ConfirmationDialog.Icon, { src: warn }), jsxRuntime.jsx(ConfirmationDialog.Body, __assign({ title: props.title }, { children: jsxRuntime.jsxs("div", __assign({ className: "fs-13 cn-7 lh-1-54 w-100" }, { children: [props.description ? props.description : null, props.children] })) })), jsxRuntime.jsx(ConfirmationDialog.ButtonGroup, { children: jsxRuntime.jsxs("div", __assign({ className: "flex right" }, { children: [jsxRuntime.jsx("button", __assign({ type: "button", className: "cta cancel cta-cd-delete-modal ml-16", onClick: handleModalClose, disabled: props.apiCallInProgress, "data-testid": "dialog-cancel" }, { children: "Cancel" })), jsxRuntime.jsx("button", __assign({ type: "button", className: "cta delete cta-cd-delete-modal ml-16", onClick: handleDelete, disabled: props.apiCallInProgress, "data-testid": "dialog-delete" }, { children: props.apiCallInProgress ? (jsxRuntime.jsx(Progressing, {})) : ("".concat(props.deletePrefix || '').concat(props.buttonPrimaryText ? props.buttonPrimaryText : 'Delete').concat(props.deletePostfix || '')) }))] })) })] })));
+    return (jsxRuntime.jsxs(ConfirmationDialog, __assign({ className: "confirmation-dialog__body--w-400" }, { children: [jsxRuntime.jsx(ConfirmationDialog.Icon, { src: warn }), jsxRuntime.jsx(ConfirmationDialog.Body, __assign({ title: props.title }, { children: jsxRuntime.jsxs("div", __assign({ className: "fs-13 cn-7 lh-1-54 w-100" }, { children: [props.description ? props.description : null, props.children] })) })), jsxRuntime.jsx(ConfirmationDialog.ButtonGroup, { children: jsxRuntime.jsxs("div", __assign({ className: "flex right" }, { children: [jsxRuntime.jsx("button", __assign({ type: "button", className: "cta cancel cta-cd-delete-modal ml-16", onClick: handleModalClose, disabled: props.apiCallInProgress, "data-testid": "dialog-cancel" }, { children: "Cancel" })), jsxRuntime.jsx("button", __assign({ type: "button", className: "cta delete cta-cd-delete-modal ml-16", onClick: handleDelete, disabled: props.apiCallInProgress || props.disabled, "data-testid": "dialog-delete" }, { children: props.apiCallInProgress ? (jsxRuntime.jsx(Progressing, {})) : ("".concat(props.deletePrefix || '').concat(props.buttonPrimaryText ? props.buttonPrimaryText : 'Delete').concat(props.deletePostfix || '')) }))] })) })] })));
 };
 function DeleteDialogDescription(props) {
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children });
@@ -24484,9 +24495,6 @@ function createGitCommitUrl(url, revision) {
         }
     }
     return "NA";
-}
-function fetchChartTemplateVersions() {
-    return get("".concat(ROUTES.DEPLOYMENT_TEMPLATE_LIST, "?appId=-1&envId=-1"));
 }
 
 /*
@@ -28201,51 +28209,46 @@ function DevtronProgressing(_a) {
     return (jsxRuntime.jsx("div", __assign({ className: parentClasses ? parentClasses : '' }, { children: jsxRuntime.jsx(SvgIcRotateDevtron, { className: classes ? classes : '' }) })));
 }
 
-// @TODO: Generalize this component to be used in CodeEditor as Chart selector toolbar
-// when the Code Editor is moved to the fe-common-lib
-var ChartVersionAndTypeSelector = function (_a) {
-    var setSelectedChartRefId = _a.setSelectedChartRefId;
-    var _b = __read(React.useState([]), 2), charts = _b[0], setCharts = _b[1];
-    var _c = __read(React.useState(null), 2), selectedChartType = _c[0], setSelectedChartType = _c[1];
-    var _d = __read(React.useState([]), 2), chartVersionOptions = _d[0], setChartVersionOptions = _d[1];
-    var _e = __read(React.useState([]), 2), chartTypeOptions = _e[0], setChartTypeOptions = _e[1];
-    var _f = __read(React.useState(null), 2), selectedChartVersion = _f[0], setSelectedChartVersion = _f[1];
-    React.useEffect(function () {
-        fetchChartTemplateVersions()
-            .then(function (res) {
-            var charts = (res === null || res === void 0 ? void 0 : res.result) || [];
-            setCharts(charts);
-            // Extract unique chart types from the data
-            var chartTypeOptions = __spreadArray([], __read(new Set(charts.map(function (item) { return item.chartType; }))), false).map(function (type) { return ({
-                value: type,
-                label: type,
-            }); });
-            setChartTypeOptions(chartTypeOptions);
-            var filteredVersions = getFilteredChartVersions(charts, chartTypeOptions[0]);
-            selectFirstChartVersion(filteredVersions);
-        })
-            .catch(function (err) {
-            showError(err);
-        });
-    }, []);
-    var selectFirstChartVersion = function (filteredVersions) {
-        var _a;
-        setChartVersionOptions(filteredVersions);
-        setSelectedChartVersion(filteredVersions[0]); // Select the first chart version by default
-        setSelectedChartRefId((_a = filteredVersions[0]) === null || _a === void 0 ? void 0 : _a.chartRefId);
-    };
-    // Function to update chart version options based on selected chart type
-    var handleChartTypeChange = function (selectedOption) {
-        setSelectedChartType(selectedOption);
-        var filteredVersions = getFilteredChartVersions(charts, selectedOption);
-        selectFirstChartVersion(filteredVersions);
-    };
-    // Function to handle the change of the selected chart version
-    var handleChartVersionChange = function (selectedOption) {
-        setSelectedChartVersion(selectedOption);
-        setSelectedChartRefId(selectedOption.chartRefId);
+function TooltipContent(_a) {
+    var tooltipContent = _a.tooltipContent;
+    if (tooltipContent) {
+        return (jsxRuntime.jsxs("div", __assign({ className: "dc__white-space-pre-wrap" }, { children: [jsxRuntime.jsx("p", __assign({ className: "m-0 cn-0 fs-12 fw-6 lh-18" }, { children: "Click to add" })), tooltipContent] })));
+    }
+    return jsxRuntime.jsx("div", __assign({ className: "dc__white-space-pre-wrap" }, { children: "Click to add here" }));
+}
+function AddCDButton(_a) {
+    var position = _a.position, addCDButtons = _a.addCDButtons, endNode = _a.endNode, startNode = _a.startNode, handleAddCD = _a.handleAddCD, tooltipContent = _a.tooltipContent;
+    var referenceNode = position === exports.AddCDPositions.RIGHT ? endNode : startNode;
+    var handleAddCDClick = function () {
+        handleAddCD(position);
     };
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "chart-type-options flex", "data-testid": "chart-type-options" }, { children: [jsxRuntime.jsx("span", __assign({ className: "chart-type-options-label mr-4" }, { children: "Chart Type" })), jsxRuntime.jsx(ReactSelect, { value: selectedChartType !== null && selectedChartType !== void 0 ? selectedChartType : chartTypeOptions[0], options: chartTypeOptions, onChange: handleChartTypeChange, styles: customStyles })] })), jsxRuntime.jsxs("div", __assign({ className: "chart-version-options flex", "data-testid": "chart-version-options" }, { children: [jsxRuntime.jsx("span", __assign({ className: "chart-version-options-label mr-4" }, { children: "Chart Version" })), jsxRuntime.jsx(ReactSelect, { value: selectedChartVersion !== null && selectedChartVersion !== void 0 ? selectedChartVersion : chartVersionOptions[0], options: chartVersionOptions, onChange: handleChartVersionChange, styles: customStyles })] }))] })));
+    if (addCDButtons === null || addCDButtons === void 0 ? void 0 : addCDButtons.includes(position)) {
+        return (jsxRuntime.jsx(Tippy, __assign({ placement: "top", content: jsxRuntime.jsx(TooltipContent, { tooltipContent: tooltipContent }), className: "default-tt", arrow: false }, { children: jsxRuntime.jsxs("svg", __assign({ x: referenceNode.x + (position === exports.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-".concat(position), onClick: handleAddCDClick, className: "dc__outline-none-imp" }, { children: [jsxRuntime.jsx("rect", { width: "20", height: "20", rx: "10", fill: "#664BEE", className: "add-cd-edge-btn" }), jsxRuntime.jsx("path", { d: "M6.5 10H13.5M10 6.5V13.5", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })) })));
+    }
+    return null;
+}
+
+var getPipelineType = function (_a) {
+    var isWebhookCD = _a.isWebhookCD, startNode = _a.startNode;
+    if (isWebhookCD) {
+        return exports.PipelineType.WEBHOOK;
+    }
+    if (startNode.type === exports.WorkflowNodeType.CI) {
+        return exports.PipelineType.CI_PIPELINE;
+    }
+    return exports.PipelineType.CD_PIPELINE;
+};
+var handleAddCD = function (_a) {
+    var position = _a.position, handleCDSelect = _a.handleCDSelect, startNode = _a.startNode, endNode = _a.endNode, workflowId = _a.workflowId, ciPipelineId = _a.ciPipelineId, isWebhookCD = _a.isWebhookCD, isParallelEdge = _a.isParallelEdge;
+    if (!handleCDSelect) {
+        return;
+    }
+    var pipelineType = getPipelineType({ isWebhookCD: isWebhookCD, startNode: startNode });
+    var addPipelineType = isParallelEdge && position === exports.AddCDPositions.RIGHT ? exports.AddPipelineType.PARALLEL : exports.AddPipelineType.SEQUENTIAL;
+    var endNodeId = !isParallelEdge && position === exports.AddCDPositions.RIGHT ? endNode.id : null;
+    handleCDSelect(workflowId, ciPipelineId, pipelineType, startNode.id, isWebhookCD, endNodeId, addPipelineType);
 };
 
 function CustomInput(_a) {
@@ -28304,12 +28307,12 @@ function CustomInput(_a) {
                 }, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, value: value, disabled: disabled, tabIndex: tabIndex, autoFocus: autoFocus, readOnly: readOnly, ref: ref, onKeyPress: onKeyPress, defaultValue: defaultValue, onKeyDown: onKeyDown, required: required }), getInputError(), helperText && (jsxRuntime.jsxs("div", __assign({ className: "form__text-field-info" }, { children: [jsxRuntime.jsx(SvgIcInfoFilled, { className: "form__icon form__icon--info" }), jsxRuntime.jsx("p", __assign({ className: "sentence-case" }, { children: helperText }))] })))] })));
 }
 
+exports.AddCDButton = AddCDButton;
 exports.AppStatus = AppStatus;
 exports.BreadCrumb = BreadCrumb;
 exports.BreadcrumbStore = Store;
 exports.BuildStageVariable = BuildStageVariable;
 exports.CDModalTab = CDModalTab;
-exports.ChartVersionAndTypeSelector = ChartVersionAndTypeSelector;
 exports.Checkbox = Checkbox$1;
 exports.ClearIndicator = ClearIndicator;
 exports.ClipboardButton = ClipboardButton;
@@ -28382,15 +28385,12 @@ exports.VisibleModal2 = VisibleModal2;
 exports.closeOnEscKeyPressed = closeOnEscKeyPressed;
 exports.copyToClipboard = copyToClipboard;
 exports.createGitCommitUrl = createGitCommitUrl;
-exports.customStyles = customStyles;
 exports.extractImage = extractImage;
-exports.fetchChartTemplateVersions = fetchChartTemplateVersions;
 exports.genericCDMaterialsService = genericCDMaterialsService;
 exports.get = get;
 exports.getAlphabetIcon = getAlphabetIcon;
 exports.getCookie = getCookie;
 exports.getEmptyArrayOfLength = getEmptyArrayOfLength;
-exports.getFilteredChartVersions = getFilteredChartVersions;
 exports.getInferredTypeFromValueType = getInferredTypeFromValueType;
 exports.getLockedJSON = getLockedJSON;
 exports.getLoginInfo = getLoginInfo;
@@ -28400,6 +28400,7 @@ exports.getTeamListMin = getTeamListMin;
 exports.getUnlockedJSON = getUnlockedJSON;
 exports.getUrlWithSearchParams = getUrlWithSearchParams;
 exports.getUserRole = getUserRole;
+exports.handleAddCD = handleAddCD;
 exports.handleUTCTime = handleUTCTime;
 exports.logExceptionToSentry = logExceptionToSentry;
 exports.multiSelectStyles = multiSelectStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.48-beta-3",
+    "version": "0.0.48-beta-5",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

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

@@ -461,48 +461,11 @@ export const getUrlWithSearchParams = (url: string, params: Record<string | numb
  */
 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])) {
+            if (obj[key].length === 0) continue
             obj[key] = obj[key].filter((item) => item !== null)
             // Check if the array is empty
             if (obj[key].length === 0) {
@@ -512,7 +475,7 @@ function removeEmptyObjectKeysAndNullValues(obj) {
             if (removeEmptyObjectKeysAndNullValues(obj[key])) {
                 delete obj[key]
             }
-        } else if (obj[key] === null || obj[key] === undefined) {
+        } else if (obj[key] === undefined) {
             delete obj[key]
         }
     }

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 {
@@ -623,18 +631,6 @@ export interface CiPipeline {
     isOffendingMandatoryPlugin?: boolean
     pipelineType?: string
 }
-
-export interface DeploymentChartVersionType {
-    chartRefId: number 
-    chartVersion: string
-    chartType: string
-    type: number
-}
-
-export interface ChartVersionAndTypeSelectorProps {
-    setSelectedChartRefId: React.Dispatch<React.SetStateAction<number>>
-}
-
 export interface InformationBarProps {
     text: string
     className?: string
@@ -650,7 +646,7 @@ export interface CodeEditorInterface {
     onFocus?: () => void
     children?: any
     defaultValue?: string
-    mode?: 'json' | 'yaml' | 'shell' | 'dockerfile' | 'plaintext'
+    mode?: 'json' | 'yaml' | 'shell' | 'dockerfile'
     tabSize?: number
     readOnly?: boolean
     noParsing?: boolean
@@ -692,4 +688,52 @@ export interface CodeEditorHeaderInterface {
     children?: any;
     className?: string
     hideDefaultSplitHeader?: boolean;
-}
+}
+
+export enum PipelineType {
+    CI_PIPELINE = 'CI_PIPELINE',
+    CD_PIPELINE = 'CD_PIPELINE',
+    WEBHOOK = 'WEBHOOK',
+    LINKED_CD = 'LINKED_CD',
+}
+
+export enum WorkflowNodeType {
+    GIT = 'GIT',
+    CI = 'CI',
+    WEBHOOK = 'WEBHOOK',
+    PRE_CD = 'PRECD',
+    CD = 'CD',
+    POST_CD = 'POSTCD',
+}
+
+export enum AddCDPositions {
+    LEFT = 'left',
+    RIGHT = 'right',
+}
+
+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