@devtron-labs/devtron-fe-common-lib 0.0.7-beta-49 → 0.0.7-beta-51

package/src/Common/CIPipeline.Types.ts

@@ -0,0 +1,275 @@
+export interface MaterialType {
+    name: string
+    type: string
+    value: string
+    gitMaterialId: number
+    id: number
+    isSelected: boolean
+    gitHostId: number
+    gitProviderId: number
+    regex?: string
+    isRegex: boolean
+}
+
+export interface Githost {
+    id: number
+    name: string
+    active: boolean
+    webhookSecret: string
+    webhookUrl: string
+}
+
+export interface WebhookEvent {
+    id: number
+    gitHostId: number
+    name: string
+    isActive: boolean
+    selectors: WebhookEventSelectors[]
+}
+
+interface WebhookEventSelectors {
+    id: number
+    eventId: number
+    name: string
+    selector: string
+    toShowInCiFilter: boolean
+    fixValue: string
+    toShow: boolean
+    possibleValues: string
+    isActive: boolean
+}
+
+export interface CiPipelineSourceTypeOption {
+    label: string
+    value: string
+    isDisabled: boolean
+    isSelected: boolean
+    isWebhook: boolean
+}
+
+export enum RefVariableType {
+    GLOBAL = 'GLOBAL',
+    FROM_PREVIOUS_STEP = 'FROM_PREVIOUS_STEP',
+    NEW = 'NEW',
+}
+
+export enum PluginType {
+    INLINE = 'INLINE',
+    PLUGIN_REF = 'REF_PLUGIN',
+}
+
+export enum ScriptType {
+    SHELL = 'SHELL',
+    DOCKERFILE = 'DOCKERFILE',
+    CONTAINERIMAGE = 'CONTAINER_IMAGE',
+}
+
+export enum MountPath {
+    TRUE = 'Yes',
+    FALSE = 'No',
+}
+
+export enum ConditionType {
+    SKIP = 'SKIP',
+    TRIGGER = 'TRIGGER',
+    PASS = 'PASS',
+    FAIL = 'FAIL',
+}
+
+export enum RefVariableStageType {
+    PRE_CI = 'PRE_CI',
+    POST_CI = 'POST_CI',
+}
+
+export interface VariableType {
+    id: number
+    name: string
+    value: string
+    format: string
+    description: string
+    defaultValue: string
+    variableType: RefVariableType
+    refVariableStepIndex: number
+    refVariableName: string
+    refVariableStage?: RefVariableStageType
+    variableStepIndexInPlugin?: number
+}
+
+interface CommandArgsMap {
+    command: string
+    args: string[]
+}
+
+export interface PortMapType {
+    portOnLocal: number
+    portOnContainer: number
+}
+interface ConditionDetails {
+    id: number
+    conditionOnVariable: string
+    conditionOperator: string
+    conditionType: ConditionType
+    conditionalValue: string
+}
+
+interface InlineStepDetailType {
+    scriptType: ScriptType
+    isMountCustomScript?: boolean
+    script?: string
+    dockerFileExists?: boolean
+    mountPath?: string
+    mountCodeToContainer?: boolean
+    mountDirectoryFromHost?: boolean
+    containerImagePath?: string
+    imagePullSecret?: string
+    commandArgsMap?: CommandArgsMap[]
+    portMap?: PortMapType[]
+    mountPathMap?: {
+        filePathOnDisk: string
+        filePathOnContainer: string
+    }[]
+    inputVariables?: VariableType[]
+    outputVariables?: VariableType[]
+    conditionDetails: ConditionDetails[]
+}
+
+interface PluginRefStepDetailType {
+    id: number
+    pluginId: number
+    inputVariables?: VariableType[]
+    outputVariables?: VariableType[]
+    conditionDetails?: ConditionDetails[]
+}
+
+export interface StepType {
+    id: number
+    index: number
+    name: string
+    description: string
+    stepType: PluginType
+    outputDirectoryPath: string[]
+    inlineStepDetail?: InlineStepDetailType
+    pluginRefStepDetail?: PluginRefStepDetailType
+    triggerIfParentStageFail: boolean
+    isMandatory?: boolean
+}
+
+export interface BuildStageType {
+    id: number
+    steps: StepType[]
+}
+
+export enum CIBuildType {
+    SELF_DOCKERFILE_BUILD_TYPE = 'self-dockerfile-build',
+    MANAGED_DOCKERFILE_BUILD_TYPE = 'managed-dockerfile-build',
+    BUILDPACK_BUILD_TYPE = 'buildpack-build',
+}
+
+export interface BuildPackConfigType {
+    builderId: string
+    language: string
+    languageVersion: string
+    projectPath: string
+    builderLangEnvParam?: string
+    currentBuilderLangEnvParam?: string
+    buildPacks?: any
+    args?: Record<string, string>
+}
+
+export interface DockerBuildConfigType {
+    dockerfileContent: string
+    dockerfileRelativePath: string
+    buildContext: string
+    dockerfilePath?: string
+    dockerfileRepository?: string
+    args?: Record<string, string>
+    targetPlatform?: any
+    language?: string
+    languageFramework?: string
+}
+
+export interface CIBuildConfigType {
+    buildPackConfig: BuildPackConfigType
+    ciBuildType: CIBuildType
+    dockerBuildConfig: DockerBuildConfigType
+    gitMaterialId: number
+    buildContextGitMaterialId: number
+    id?: number
+}
+
+export interface DockerConfigOverrideType {
+    dockerRegistry: string
+    dockerRepository: string
+    ciBuildConfig: CIBuildConfigType
+}
+
+export interface FormType {
+    name: string
+    args: { key: string; value: string }[]
+    materials: MaterialType[]
+    gitHost: Githost
+    webhookEvents: WebhookEvent[]
+    ciPipelineSourceTypeOptions: CiPipelineSourceTypeOption[]
+    webhookConditionList: { selectorId: number; value: string }[]
+    triggerType: string
+    scanEnabled?: boolean
+    beforeDockerBuildScripts?: {
+        id: number
+        name: string
+        outputLocation: string
+        script: string
+        isCollapsed: boolean
+        index: number
+    }[]
+    afterDockerBuildScripts?: {
+        id: number
+        name: string
+        outputLocation: string
+        script: string
+        isCollapsed: boolean
+        index: number
+    }[]
+    ciPipelineEditable: true
+    preBuildStage?: BuildStageType
+    postBuildStage?: BuildStageType
+    isDockerConfigOverridden?: boolean
+    dockerConfigOverride?: DockerConfigOverrideType
+}
+
+export interface ErrorObj {
+    isValid: boolean
+    message: string | null
+}
+export interface TaskErrorObj {
+    isValid: boolean
+    name: ErrorObj
+    inlineStepDetail?: { inputVariables?: ErrorObj[]; outputVariables?: ErrorObj[] }
+    pluginRefStepDetail?: { inputVariables?: ErrorObj[]; outputVariables?: ErrorObj[] }
+}
+export interface FormErrorObjectType {
+    name: ErrorObj
+    materials?: MaterialType[]
+    preBuildStage?: {
+        isValid: boolean
+        steps: TaskErrorObj[]
+    }
+    buildStage?: {
+        isValid: boolean
+        name: ErrorObj
+    }
+    postBuildStage?: {
+        isValid: boolean
+        steps: TaskErrorObj[]
+    }
+}
+
+export interface PluginDetailType {
+  id: number
+  name: string
+  type: string
+  description: string
+  icon: string
+  tags: string[]
+  inputVariables?: VariableType[]
+  outputVariables?: VariableType[]
+}

package/src/Common/Constants.ts

@@ -57,4 +57,10 @@ export const TOKEN_COOKIE_NAME = 'argocd.token'
 export const TriggerTypeMap = {
     automatic: 'Auto',
     manual: 'Manual',
+}
+
+export const BuildStageVariable = {
+  PreBuild: 'preBuildStage',
+  Build: 'buildStage',
+  PostBuild: 'postBuildStage',
 }

package/src/Common/Dialogs/DeleteDialog.tsx

@@ -1,35 +1,53 @@
-import React from 'react';
-import warn from '../../Assets/Img/warning-medium.svg';
+import React from 'react'
+import warn from '../../Assets/Img/delete-medium.svg'
 import { Progressing } from '../Progressing'
-import ConfirmationDialog from './ConfirmationDialog';
-import { DeleteDialogProps } from './Types';
+import ConfirmationDialog from './ConfirmationDialog'
+import { DeleteDialogProps } from './Types'
 
 export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.FC<any> } = function (props) {
-
-    return <ConfirmationDialog className="confirmation-dialog__body--w-400">
-        <ConfirmationDialog.Icon src={warn} />
-        <ConfirmationDialog.Body title={props.title}>
-            <div className="fs-13 cn-7 lh-1-54 w-100">
-                {props.description ? props.description : null}
-                {props.children}
-            </div>
-        </ConfirmationDialog.Body>
-        <ConfirmationDialog.ButtonGroup>
-            <div className="flex right">
-                <button type="button" className="cta cancel cta-cd-delete-modal ml-16" onClick={props.closeDelete} disabled={props.apiCallInProgress} data-testid="dialog-cancel">Cancel</button>
-                <button type="button" className="cta delete cta-cd-delete-modal ml-16" onClick={() => props.delete()} disabled={props.apiCallInProgress} data-testid="dialog-delete">
-                    {props.apiCallInProgress ? <Progressing /> :  `${props.deletePrefix || ''}Delete${props.deletePostfix || ''}`}
-                </button>
-            </div>
-        </ConfirmationDialog.ButtonGroup>
-    </ConfirmationDialog >
+    return (
+        <ConfirmationDialog className="confirmation-dialog__body--w-400">
+            <ConfirmationDialog.Icon src={warn} />
+            <ConfirmationDialog.Body title={props.title}>
+                <div className="fs-13 cn-7 lh-1-54 w-100">
+                    {props.description ? props.description : null}
+                    {props.children}
+                </div>
+            </ConfirmationDialog.Body>
+            <ConfirmationDialog.ButtonGroup>
+                <div className="flex right">
+                    <button
+                        type="button"
+                        className="cta cancel cta-cd-delete-modal ml-16"
+                        onClick={props.closeDelete}
+                        disabled={props.apiCallInProgress}
+                        data-testid="dialog-cancel"
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        type="button"
+                        className="cta delete cta-cd-delete-modal ml-16"
+                        onClick={() => props.delete()}
+                        disabled={props.apiCallInProgress}
+                        data-testid="dialog-delete"
+                    >
+                        {props.apiCallInProgress ? (
+                            <Progressing />
+                        ) : (
+                            `${props.deletePrefix || ''}${
+                                props.buttonPrimaryText ? props.buttonPrimaryText : 'Delete'
+                            }${props.deletePostfix || ''}`
+                        )}
+                    </button>
+                </div>
+            </ConfirmationDialog.ButtonGroup>
+        </ConfirmationDialog>
+    )
 }
 
 function DeleteDialogDescription(props) {
-
-    return <>
-        {props.children}
-    </>
+    return <>{props.children}</>
 }
 
-DeleteDialog.Description = DeleteDialogDescription;
+DeleteDialog.Description = DeleteDialogDescription

package/src/Common/Dialogs/Types.ts

@@ -9,6 +9,7 @@ export interface DeleteDialogProps {
     deletePostfix?: string
     apiCallInProgress?: boolean
     dataTestId?: string
+    buttonPrimaryText?: string
 }
 
 export interface ForceDeleteDialogType {

package/src/Common/Helper.tsx

@@ -1,49 +1,48 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { ServerErrors } from './ServerError'
 import { toast } from 'react-toastify'
 import * as Sentry from '@sentry/browser'
 import { toastAccessDenied } from './ToastBody'
 import { ERROR_EMPTY_SCREEN, TOKEN_COOKIE_NAME } from './Constants'
-import { ReactComponent as FormError } from '../Assets/Icon/ic-warning.svg'
 
 toast.configure({
-    autoClose: 3000,
-    hideProgressBar: true,
-    pauseOnHover: true,
-    pauseOnFocusLoss: true,
-    closeOnClick: false,
-    newestOnTop: true,
-    toastClassName: 'devtron-toast',
-    bodyClassName: 'devtron-toast__body',
+  autoClose: 3000,
+  hideProgressBar: true,
+  pauseOnHover: true,
+  pauseOnFocusLoss: true,
+  closeOnClick: false,
+  newestOnTop: true,
+  toastClassName: 'devtron-toast',
+  bodyClassName: 'devtron-toast__body',
 })
 
 export function showError(serverError, showToastOnUnknownError = true, hideAccessError = false) {
-    if (serverError instanceof ServerErrors && Array.isArray(serverError.errors)) {
-        serverError.errors.map(({ userMessage, internalMessage }) => {
-            if (
-                serverError.code === 403 &&
-                (userMessage === ERROR_EMPTY_SCREEN.UNAUTHORIZED || userMessage === ERROR_EMPTY_SCREEN.FORBIDDEN)
-            ) {
-                if (!hideAccessError) {
-                    toastAccessDenied()
-                }
-            } else {
-                toast.error(userMessage || internalMessage)
-            }
-        })
-    } else {
-        if (serverError.code !== 403 && serverError.code !== 408) {
-            Sentry.captureException(serverError)
-        }
-
-        if (showToastOnUnknownError) {
-            if (serverError.message) {
-                toast.error(serverError.message)
-            } else {
-                toast.error('Some Error Occurred')
-            }
-        }
-    }
+  if (serverError instanceof ServerErrors && Array.isArray(serverError.errors)) {
+      serverError.errors.map(({ userMessage, internalMessage }) => {
+          if (
+              serverError.code === 403 &&
+              (userMessage === ERROR_EMPTY_SCREEN.UNAUTHORIZED || userMessage === ERROR_EMPTY_SCREEN.FORBIDDEN)
+          ) {
+              if (!hideAccessError) {
+                  toastAccessDenied()
+              }
+          } else {
+              toast.error(userMessage || internalMessage)
+          }
+      })
+  } else {
+      if (serverError.code !== 403 && serverError.code !== 408) {
+          Sentry.captureException(serverError)
+      }
+
+      if (showToastOnUnknownError) {
+          if (serverError.message) {
+              toast.error(serverError.message)
+          } else {
+              toast.error('Some Error Occurred')
+          }
+      }
+  }
 }
 
 interface ConditionalWrapper<T> {
@@ -168,166 +167,4 @@ export function getLoginInfo() {
             return null
         }
     }
-}
-
-export function useForm(stateSchema, validationSchema = {}, callback) {
-    const [state, setState] = useState(stateSchema)
-    const [disable, setDisable] = useState(true)
-    const [isDirty, setIsDirty] = useState(false)
-
-    // Disable button in initial render.
-    useEffect(() => {
-        setDisable(true)
-    }, [])
-
-    // For every changed in our state this will be fired
-    // To be able to disable the button
-    useEffect(() => {
-        if (isDirty) {
-            setDisable(validateState(state))
-        }
-    }, [state, isDirty])
-
-    // Used to disable submit button if there's an error in state
-    // or the required field in state has no value.
-    // Wrapped in useCallback to cached the function to avoid intensive memory leaked
-    // in every re-render in component
-    const validateState = useCallback(
-        (state) => {
-            //check errors in all fields
-            const hasErrorInState = Object.keys(validationSchema).some((key) => {
-                const isInputFieldRequired = validationSchema[key].required
-                const stateValue = state[key].value // state value
-                const stateError = state[key].error // state error
-                return (isInputFieldRequired && !stateValue) || stateError
-            })
-            return hasErrorInState
-        },
-        [state, validationSchema],
-    )
-
-    function validateField(name, value): string | string[] {
-        if (validationSchema[name].required) {
-            if (!value) {
-                return 'This is a required field.'
-            }
-        }
-
-        function _validateSingleValidator(validator, value) {
-            if (value && !validator.regex.test(value)) {
-                return false
-            }
-            return true
-        }
-
-        // single validator
-        let _validator = validationSchema[name].validator
-        if (_validator && typeof _validator === 'object') {
-            if (!_validateSingleValidator(_validator, value)) {
-                return _validator.error
-            }
-        }
-
-        // multiple validators
-        let _validators = validationSchema[name].validators
-        if (_validators && typeof _validators === 'object' && Array.isArray(_validators)) {
-            let errors = []
-            _validators.forEach((_validator) => {
-                if (!_validateSingleValidator(_validator, value)) {
-                    errors.push(_validator.error)
-                }
-            })
-            if (errors.length > 0) {
-                return errors
-            }
-        }
-
-        return ''
-    }
-
-    const handleOnChange = useCallback(
-        (event) => {
-            setIsDirty(true)
-
-            const { name, value } = event.target
-            let error = validateField(name, value)
-            setState((prevState) => ({
-                ...prevState,
-                [name]: { value, error },
-            }))
-        },
-        [validationSchema],
-    )
-
-    const handleOnSubmit = (event) => {
-        event.preventDefault()
-        const newState = Object.keys(validationSchema).reduce((agg, curr) => {
-            agg[curr] = { ...state[curr], error: validateField(curr, state[curr].value) }
-            return agg
-        }, state)
-        if (!validateState(newState)) {
-            callback(state)
-        } else {
-            setState({ ...newState })
-        }
-    }
-    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">
-                    <FormError className="form__icon form__icon--error" />
-                    {err}
-                </div>
-            ))}
-        </div>
-    )
-}
+}