@devtron-labs/devtron-fe-common-lib 0.0.45-beta-17 → 0.0.45-beta-18

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, }: 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,22 @@
+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;
+}
+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;
+}

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/Types.d.ts

@@ -323,6 +323,7 @@ export interface CommonNodeAttr {
     appReleaseTagNames?: string[];
     tagsEditable?: boolean;
     deploymentAppCreated?: boolean;
+    isLast?: boolean;
 }
 export declare enum DeploymentAppTypes {
     HELM = "helm",
@@ -590,4 +591,18 @@ 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,3 +42,4 @@ export * from './Hooks';
 export { AppStatus } from './AppStatus';
 export * from './RJSF';
 export * from './DevtronProgressing';
+export * from './AddCDButton';

package/dist/index.js

@@ -26665,6 +26665,42 @@ function DevtronProgressing(_a) {
     return (jsxRuntime.jsx("div", __assign({ className: parentClasses ? parentClasses : '' }, { children: jsxRuntime.jsx(SvgIcRotateDevtron, { className: classes ? classes : '' }) })));
 }
 
+function AddCDButton(_a) {
+    var position = _a.position, addCDButtons = _a.addCDButtons, endNode = _a.endNode, startNode = _a.startNode, handleAddCD = _a.handleAddCD;
+    var referenceNode = position === exports.AddCDPositions.RIGHT ? endNode : startNode;
+    var handleAddCDClick = function () {
+        handleAddCD(position);
+    };
+    if (addCDButtons === null || addCDButtons === void 0 ? void 0 : addCDButtons.includes(position)) {
+        return (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 }, { 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);
+};
+
+exports.AddCDButton = AddCDButton;
 exports.AppStatus = AppStatus;
 exports.BreadCrumb = BreadCrumb;
 exports.BreadcrumbStore = Store;
@@ -26755,6 +26791,7 @@ exports.getRedirectionProps = getRedirectionProps;
 exports.getTeamListMin = getTeamListMin;
 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.45-beta-17",
+    "version": "0.0.45-beta-18",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Common/AddCDButton/AddCDButton.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { AddCDButtonProps } from './types'
+import { AddCDPositions } from '../Types'
+
+export default function AddCDButton({
+    position,
+    addCDButtons,
+    endNode,
+    startNode,
+    handleAddCD,
+}: Readonly<AddCDButtonProps>) {
+    const referenceNode = position === AddCDPositions.RIGHT ? endNode : startNode
+    const handleAddCDClick = () => {
+        handleAddCD(position)
+    }
+
+    if (addCDButtons?.includes(position)) {
+        return (
+            <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}
+            >
+                <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>
+        )
+    }
+
+    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,33 @@
+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
+}
+
+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
+}

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/Types.ts

@@ -355,6 +355,7 @@ export interface CommonNodeAttr {
     appReleaseTagNames?: string[]
     tagsEditable?: boolean
     deploymentAppCreated?: boolean
+    isLast?: boolean
 }
 
 export enum DeploymentAppTypes {
@@ -655,3 +656,20 @@ 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,3 +42,4 @@ export * from './Hooks'
 export { AppStatus } from './AppStatus'
 export * from './RJSF'
 export * from './DevtronProgressing'
+export * from './AddCDButton'