@devtron-labs/devtron-fe-common-lib 0.0.45-beta-23 → 0.0.45-beta-25

package/package.json

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

package/src/Common/AddCDButton/AddCDButton.tsx

@@ -0,0 +1,67 @@
+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}
+                >
+                    <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/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

@@ -3,6 +3,7 @@ import moment from 'moment'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import { toast } from 'react-toastify'
+import { ReactComponent as FormError } from '../Assets/Icon/ic-warning.svg'
 import { ERROR_EMPTY_SCREEN, TOKEN_COOKIE_NAME } from './Constants'
 import { ServerErrors } from './ServerError'
 import { toastAccessDenied } from './ToastBody'
@@ -276,6 +277,64 @@ export function useForm(stateSchema, validationSchema = {}, callback) {
     return { state, disable, handleOnChange, handleOnSubmit }
 }
 
+function handleError(error: any): any[] {
+    if (!error) {
+        return []
+    }
+
+    if (!Array.isArray(error)) {
+        return [error]
+    }
+
+    return error
+}
+
+export function CustomInput({
+    name,
+    value,
+    error,
+    onChange,
+    onBlur = (e) => {},
+    onFocus = (e) => {},
+    label,
+    type = 'text',
+    disabled = false,
+    autoComplete = 'off',
+    labelClassName = '',
+    placeholder = '',
+    tabIndex = 1,
+    dataTestid = '',
+}) {
+    return (
+        <div className="flex column left top">
+            <label className={`form__label ${labelClassName}`}>{label}</label>
+            <input
+                data-testid={dataTestid}
+                type={type}
+                name={name}
+                autoComplete="off"
+                className="form__input"
+                onChange={(e) => {
+                    e.persist()
+                    onChange(e)
+                }}
+                onBlur={onBlur}
+                onFocus={onFocus}
+                placeholder={placeholder}
+                value={value}
+                disabled={disabled}
+                tabIndex={tabIndex}
+            />
+            {handleError(error).map((err) => (
+                <div className="form__error" key={err}>
+                    <FormError className="form__icon form__icon--error" />
+                    {err}
+                </div>
+            ))}
+        </div>
+    )
+}
+
 export function handleUTCTime(ts: string, isRelativeTime = false) {
     let timestamp = ''
     try {

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 {
@@ -622,4 +630,52 @@ export interface CiPipeline {
     }
     isOffendingMandatoryPlugin?: boolean
     pipelineType?: string
-}
+}
+
+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,4 +42,4 @@ export * from './Hooks'
 export { AppStatus } from './AppStatus'
 export * from './RJSF'
 export * from './DevtronProgressing'
-export * from './CustomInput'
+export * from './AddCDButton'

package/dist/Common/CustomInput/CustomInput.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { CustomInputProps } from './Types';
-export declare function CustomInput({ name, value, error, onChange, onFocus, label, type, disabled, labelClassName, placeholder, tabIndex, dataTestid, isRequiredField, autoFocus, rootClassName, autoComplete, showLink, linkText, link, helperText, handleOnBlur, readOnly, noTrim, ref, onKeyPress, defaultValue, onKeyDown }: CustomInputProps): JSX.Element;

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

@@ -1,30 +0,0 @@
-import { HTMLInputTypeAttribute, LegacyRef } from "react";
-export interface CustomInputProps {
-    name: string;
-    value: string | number;
-    onChange: (e: any) => void;
-    onFocus?: (e: any) => void;
-    autoComplete?: string;
-    label?: React.ReactNode;
-    labelClassName?: string;
-    type?: HTMLInputTypeAttribute;
-    disabled?: boolean;
-    placeholder?: string;
-    tabIndex?: number;
-    dataTestid?: string;
-    isRequiredField?: boolean;
-    autoFocus?: boolean;
-    rootClassName?: string;
-    showLink?: boolean;
-    link?: string;
-    linkText?: string;
-    error?: string[] | string;
-    helperText?: string;
-    handleOnBlur?: (e: any) => void;
-    readOnly?: boolean;
-    noTrim?: boolean;
-    ref?: LegacyRef<HTMLInputElement>;
-    onKeyPress?: (e: any) => void;
-    defaultValue?: string | number | ReadonlyArray<string> | undefined;
-    onKeyDown?: (e: any) => void;
-}

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

@@ -1,2 +0,0 @@
-export * from './CustomInput';
-export * from './Types';

package/src/Common/CustomInput/CustomInput.tsx

@@ -1,128 +0,0 @@
-import { CustomInputProps } from './Types'
-import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled.svg'
-import { ReactComponent as FormError } from '../../Assets/Icon/ic-warning.svg'
-
-export function CustomInput({
-    name,
-    value,
-    error,
-    onChange,
-    onFocus = (e) => {},
-    label = '',
-    type = 'text',
-    disabled = false,
-    labelClassName = '',
-    placeholder = '',
-    tabIndex = 1,
-    dataTestid = '',
-    isRequiredField = false,
-    autoFocus = false,
-    rootClassName = '',
-    autoComplete = 'off',
-    showLink = false,
-    linkText = '',
-    link = '',
-    helperText = '',
-    handleOnBlur,
-    readOnly = false,
-    noTrim = false,
-    ref,
-    onKeyPress,
-    defaultValue,
-    onKeyDown
-}: CustomInputProps) {
-    const renderLabelHelperText = () => {
-        return (
-            <span>
-                <a target="_blank" href={link} className="cursor fs-13 onlink ml-4">
-                    {linkText}
-                </a>
-            </span>
-        )
-    }
-
-    function handleError(error: any): any[] {
-        if (!error) {
-            return []
-        }
-
-        if (!Array.isArray(error)) {
-            return [error]
-        }
-
-        return error
-    }
-
-    const onBlur = (event) => {
-        //NOTE: This is to prevent the input from being trimmed when the user do not want to trim the input
-        if (!noTrim) {
-            event.stopPropagation()
-            event.target.value = event.target.value?.trim()
-            onChange(event)
-        }
-        if (typeof handleOnBlur === 'function') {
-            handleOnBlur(event)
-        }
-    }
-
-    const renderFormError = () => {
-        if (error?.length > 0) {
-            if (typeof error === 'object') {
-                return handleError(error).map((err: string) => (
-                    <div className="form__error" key={err}>
-                        <FormError className="form__icon form__icon--error" />
-                        {err}
-                    </div>
-                ))
-            }
-            return (
-                <div className="form__error">
-                    <FormError className="form__icon form__icon--error" />
-                    {error}
-                </div>
-            )
-        }
-    }
-
-    return (
-        <div className="flex column left top">
-            {label && (
-                <label className={`form__label ${labelClassName}`} data-testid={`label-${dataTestid}`}>
-                    <span className={`${isRequiredField ? 'dc__required-field' : ''}`}>{label}</span>
-                    {showLink && renderLabelHelperText()}
-                </label>
-            )}
-            <input
-                data-testid={dataTestid}
-                type={type}
-                name={name}
-                autoComplete={autoComplete}
-                className={`form__input ${rootClassName}`}
-                onChange={(e) => {
-                    e.persist()
-                    onChange(e)
-                }}
-                onBlur={onBlur}
-                onFocus={onFocus}
-                placeholder={placeholder}
-                value={value}
-                disabled={disabled}
-                tabIndex={tabIndex}
-                autoFocus={autoFocus}
-                readOnly={readOnly}
-                ref={ref}
-                onKeyPress={onKeyPress}
-                defaultValue={defaultValue}
-                onKeyDown={onKeyDown}
-            />
-
-            {renderFormError()}
-            {helperText && (
-                <div className="form__text-field-info">
-                    <Info className="form__icon form__icon--info" />
-                    <p className="sentence-case">{helperText}</p>
-                </div>
-            )}
-        </div>
-    )
-}

package/src/Common/CustomInput/Types.ts

@@ -1,31 +0,0 @@
-import { HTMLInputTypeAttribute, LegacyRef } from "react"
-
-export interface CustomInputProps {
-    name: string
-    value: string | number
-    onChange: (e: any) => void
-    onFocus?: (e: any) => void
-    autoComplete?: string
-    label?: React.ReactNode
-    labelClassName?: string
-    type?: HTMLInputTypeAttribute
-    disabled?: boolean
-    placeholder?: string
-    tabIndex?: number
-    dataTestid?: string
-    isRequiredField?: boolean
-    autoFocus?: boolean
-    rootClassName?: string
-    showLink?: boolean
-    link?: string
-    linkText?: string
-    error?: string[] | string
-    helperText?: string;
-    handleOnBlur?: (e) => void
-    readOnly?: boolean
-    noTrim?: boolean
-    ref?: LegacyRef<HTMLInputElement>
-    onKeyPress?: (e) => void
-    defaultValue?: string | number | ReadonlyArray<string> | undefined;
-    onKeyDown?: (e) => void
-}

package/src/Common/CustomInput/index.ts

@@ -1,2 +0,0 @@
-export * from './CustomInput'
-export * from './Types'