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

package/package.json

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

package/src/Common/CustomInput/CustomInput.tsx

@@ -0,0 +1,124 @@
+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
+}: 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}
+            />
+
+            {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

@@ -0,0 +1,29 @@
+import { 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?: 'text' | 'number'
+    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
+}

package/src/Common/CustomInput/index.ts

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

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 || props.disabled}
+                        disabled={props.apiCallInProgress}
                         data-testid="dialog-delete"
                     >
                         {props.apiCallInProgress ? (

package/src/Common/Dialogs/Types.ts

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

package/src/Common/Helper.tsx

@@ -3,7 +3,6 @@ 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'
@@ -277,64 +276,6 @@ 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

@@ -354,8 +354,6 @@ export interface CommonNodeAttr {
     }
     appReleaseTagNames?: string[]
     tagsEditable?: boolean
-    deploymentAppCreated?: boolean
-    isLast?: boolean
 }
 
 export enum DeploymentAppTypes {
@@ -624,52 +622,4 @@ 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 './AddCDButton'
+export * from './CustomInput'

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

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

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

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

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

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

package/src/Common/AddCDButton/AddCDButton.tsx

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

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

package/src/Common/AddCDButton/types.ts

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

@@ -1,35 +0,0 @@
-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)
-}