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

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/CustomTagSelector/TagDetails.tsx

@@ -33,7 +33,7 @@ export const TagDetails = ({
             _tagData.isInvalidKey =
                 _tagData.key || _tagData.value ? !validationRules.propagateTagKey(_tagData.key).isValid : false
             _tagData.isInvalidValue = _tagData.value
-                ? !validationRules.propagateTagValue(_tagData.value, _tagData.key).isValid
+                ? !validationRules.propagateTagValue(_tagData.value).isValid
                 : false
         }
         setTagData(index, _tagData)
@@ -41,7 +41,7 @@ export const TagDetails = ({
     return (
         <div className="flexbox mb-8">
             <div
-                className={`dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ${tagData.propagate ? 'bcn-7' : ''} ${tagData.key.startsWith("devtron.ai/") ? 'cursor-not-allowed bcn-1' : ''}`}
+                className={`dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ${tagData.propagate ? 'bcn-7' : ''}`}
                 onClick={propagateTagToResource}
                 data-testid={`propagate-tag-${index}`}
             >

package/src/Common/CustomTagSelector/TagLabelSelect.tsx

@@ -13,11 +13,7 @@ export const TagLabelSelect = ({
 }: TagLabelSelectType) => {
     const setTagData = (index, tagValue): void => {
         const _tags = [...labelTags]
-        const _tagValue = tagValue
-        if(_tagValue.key.startsWith("devtron.ai/")){
-            _tagValue.propagate = false
-        }
-        _tags[index] = _tagValue
+        _tags[index] = tagValue
         setLabelTags(_tags)
     }
 

package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -50,7 +50,7 @@ export const TagLabelValueSelector = ({
                         ? !validationRules.propagateTagKey(selectedValue).isValid
                         : _tagData.value !== ''
             } else if (selectedValue || isRequired || _tagData.propagate) {
-                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue, _tagData.key).isValid
+                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid
                 _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey
             } else {
                 _tagData.isInvalidValue = false
@@ -80,7 +80,7 @@ export const TagLabelValueSelector = ({
                 field = validationRules.propagateTagKey(selectedValue)
             }
         } else if (isRequired || selectedValue || tagData.propagate) {
-            field = validationRules.propagateTagValue(selectedValue, tagData.key)
+            field = validationRules.propagateTagValue(selectedValue)
         }
         if (!field.isValid) {
             return (

package/src/Common/CustomTagSelector/ValidationRules.ts

@@ -21,37 +21,33 @@ export class ValidationRules {
         if (!key) {
             errorList.push('Key is required')
         } else {
-            if(!key.startsWith("devtron.ai/")){
-                const re = new RegExp('/', 'g')
-                const noOfSlashInKey = key.match(re)?.length
-                if (noOfSlashInKey > 1) {
-                    errorList.push('Key: Max 1 ( / ) allowed')
-                } else if (noOfSlashInKey === 1) {
-                    const [prefix, name] = key.split('/')
-                    errorList.push(...validateTagValue(name).map((error) => `Name: ${error}`))
-                    if (prefix.length > 253) {
-                        errorList.push('Prefix: Can be max 253 characters')
-                    }
-                    const validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix)
-                    if (!validPrefix) {
-                        errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)')
-                    }
-                } else {
-                    errorList.push(...validateTagValue(key).map((error) => `Name: ${error}`))
+            const re = new RegExp('/', 'g')
+            const noOfSlashInKey = key.match(re)?.length
+            if (noOfSlashInKey > 1) {
+                errorList.push('Key: Max 1 ( / ) allowed')
+            } else if (noOfSlashInKey === 1) {
+                const [prefix, name] = key.split('/')
+                errorList.push(...validateTagValue(name).map((error) => `Name: ${error}`))
+                if (prefix.length > 253) {
+                    errorList.push('Prefix: Can be max 253 characters')
                 }
+                const validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix)
+                if (!validPrefix) {
+                    errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)')
+                }
+            } else {
+                errorList.push(...validateTagValue(key).map((error) => `Name: ${error}`))
             }
         }
         return { isValid: errorList.length === 0, messages: errorList }
     }
 
-    propagateTagValue = (value: string, key: string): { isValid: boolean; messages: string[] } => {
+    propagateTagValue = (value: string): { isValid: boolean; messages: string[] } => {
         const errorList = []
         if (!value) {
             errorList.push('Value is required')
         } else {
-            if(!key.startsWith("devtron.ai/")){
-                errorList.push(...validateTagValue(value))
-            }
+            errorList.push(...validateTagValue(value))
         }
         return { isValid: errorList.length === 0, messages: errorList }
     }

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