@devtron-labs/devtron-fe-common-lib 0.0.45-beta-27 → 0.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.45-beta-27",
+    "version": "0.0.46",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
@@ -20,25 +20,25 @@
     "homepage": "https://github.com/devtron-labs/devtron-fe-common-lib#readme",
     "devDependencies": {
         "@rollup/plugin-babel": "^6.0.3",
-        "@rollup/plugin-node-resolve": "^15.0.1",
+        "@rollup/plugin-commonjs": "24.0.1",
         "@rollup/plugin-image": "3.0.1",
-        "rollup-plugin-peer-deps-external": "^2.2.4",
-        "rollup-plugin-postcss": "^4.0.2",
-        "rollup-plugin-typescript2": "^0.34.1",
+        "@rollup/plugin-node-resolve": "^15.0.1",
+        "@rollup/plugin-url": "8.0.1",
+        "@sentry/browser": "^7.31.1",
+        "@svgr/rollup": "6.5.1",
+        "@tippyjs/react": "^4.2.0",
         "@types/react": "17.0.39",
         "@types/react-dom": "17.0.13",
         "@types/react-router-dom": "^5.3.3",
-        "rollup": "^3.10.0",
-        "rollup-plugin-delete": "^2.0.0",
-        "@svgr/rollup": "6.5.1",
-        "@rollup/plugin-url": "8.0.1",
-        "@rollup/plugin-commonjs": "24.0.1",
         "moment": "^2.29.4",
-        "typescript": "^4.9.4",
-        "react-toastify": "^8.2.0",
-        "@tippyjs/react": "^4.2.0",
         "react-select": "5.2.2",
-        "@sentry/browser": "^7.31.1"
+        "react-toastify": "^8.2.0",
+        "rollup": "^3.10.0",
+        "rollup-plugin-delete": "^2.0.0",
+        "rollup-plugin-peer-deps-external": "^2.2.4",
+        "rollup-plugin-postcss": "^4.0.2",
+        "rollup-plugin-typescript2": "^0.34.1",
+        "typescript": "^4.9.4"
     },
     "peerDependencies": {
         "@rjsf/core": "^5.13.3",

package/src/Common/CustomInput/CustomInput.tsx

@@ -0,0 +1,131 @@
+import { CustomInputProps } from './Types'
+import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled.svg'
+import { ReactComponent as ErrorIcon } 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',
+    helperText = '',
+    handleOnBlur,
+    readOnly = false,
+    noTrim = false,
+    ref,
+    onKeyPress,
+    defaultValue,
+    onKeyDown,
+    required,
+    additionalErrorInfo
+}: CustomInputProps) {
+
+    function handleError(error: any): any[] {
+        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 renderFormErrorWithIcon = (error: string) => {
+        return (
+            <div className="form__error" key={error}>
+                <ErrorIcon className="form__icon form__icon--error" />
+                {error}
+                {typeof additionalErrorInfo === 'function' && additionalErrorInfo()}
+            </div>
+        )
+    }
+
+    const getInputError = () => {
+        if (!error?.length) {
+            return null
+        } else {
+            if (typeof error === 'object') {
+                return handleError(error).map((err: string) => renderFormErrorWithIcon(err))
+            }
+            return renderFormErrorWithIcon(error)
+        }
+    }
+
+    const renderInputLabelConditionally = () => {
+        if (typeof label === 'string') {
+            return <span className={`${isRequiredField ? 'dc__required-field' : ''}`}>{label}</span>
+        } else {
+            return label()
+        }
+    }
+
+    const renderInputLabel = () => {
+        if (!label) {
+            return null
+        } else {
+            return (
+                <label className={`form__label ${labelClassName}`} data-testid={`label-${dataTestid}`}>
+                    {renderInputLabelConditionally()}
+                </label>
+            )
+        }
+    }
+
+    return (
+        <div className="flex column left top">
+           {renderInputLabel()}
+            <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}
+                required={required}
+            />
+
+            {getInputError()}
+            {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,30 @@
+import React, { HTMLInputTypeAttribute } from 'react'
+
+export interface CustomInputProps {
+    name: string
+    value: string | number
+    onChange: (e: any) => void
+    onFocus?: (e: any) => void
+    autoComplete?: string
+    label?: string | (() => React.ReactNode)
+    labelClassName?: string
+    type?: HTMLInputTypeAttribute
+    disabled?: boolean
+    placeholder?: string
+    tabIndex?: number
+    dataTestid?: string
+    isRequiredField?: boolean
+    autoFocus?: boolean
+    rootClassName?: string
+    error?: string[] | string
+    helperText?: string
+    handleOnBlur?: (e) => void
+    readOnly?: boolean
+    noTrim?: boolean
+    ref?: React.LegacyRef<HTMLInputElement>
+    onKeyPress?: (e) => void
+    defaultValue?: string | number | ReadonlyArray<string> | undefined
+    onKeyDown?: (e) => void
+    required?: boolean
+    additionalErrorInfo?: React.ReactNode
+}

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

@@ -293,11 +293,6 @@ export interface CDMaterialServiceQueryParams {
     filter?: CDMaterialFilterQuery
 }
 
-export interface DownstreamNodesEnvironmentsType {
-    environmentId: number
-    environmentName: string
-}
-
 export interface CommonNodeAttr {
     connectingCiPipelineId?: number
     parents: string | number[] | string[]
@@ -359,9 +354,6 @@ export interface CommonNodeAttr {
     }
     appReleaseTagNames?: string[]
     tagsEditable?: boolean
-    deploymentAppCreated?: boolean
-    isLast?: boolean
-    downstreamEnvironments?: DownstreamNodesEnvironmentsType[]
 }
 
 export enum DeploymentAppTypes {
@@ -630,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, tooltipContent, }: 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,26 +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;
-    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

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

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

package/src/Common/AddCDButton/types.ts

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

@@ -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)
-}