feat: add validation for reserved output directory path

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.20.6",
+        "@devtron-labs/devtron-fe-common-lib": "1.20.7",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/components/CIPipelineN/OutputDirectoryPath.tsx

@@ -14,16 +14,18 @@
  * limitations under the License.
  */
 
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { CustomInput } from '@devtron-labs/devtron-fe-common-lib'
 import { TaskFieldDescription, TaskFieldLabel } from '../ciPipeline/types'
 import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
 import { ReactComponent as Add } from '../../assets/icons/ic-add.svg'
 import TaskFieldTippyDescription from './TaskFieldTippyDescription'
 import { pipelineContext } from '../workflowEditor/workflowEditor'
+import { ValidationRules } from '@Components/ciPipeline/validationRules'
 
 const OutputDirectoryPath = () => {
-    const { selectedTaskIndex, formData, setFormData, activeStageName } = useContext(pipelineContext)
+    const { selectedTaskIndex, formData, setFormData, activeStageName, formDataErrorObj, setFormDataErrorObj } =
+        useContext(pipelineContext)
 
     const addOutputDirectoryPath = (): void => {
         const _formData = { ...formData }
@@ -33,18 +35,50 @@ const OutputDirectoryPath = () => {
         }
         _formData[activeStageName].steps[selectedTaskIndex].outputDirectoryPath.unshift('')
         setFormData(_formData)
+
+        const updatedErrorObj = { ...formDataErrorObj }
+        if (!updatedErrorObj[activeStageName].steps[selectedTaskIndex].outputDirectoryPath) {
+            updatedErrorObj[activeStageName].steps[selectedTaskIndex].outputDirectoryPath = []
+        }
+        updatedErrorObj[activeStageName].steps[selectedTaskIndex].outputDirectoryPath.unshift({
+            isValid: true,
+            message: '',
+        })
+        setFormDataErrorObj(updatedErrorObj)
     }
 
     const handleStoreArtifact = (ev, index) => {
         const _formData = { ...formData }
-        _formData[activeStageName].steps[selectedTaskIndex].outputDirectoryPath[index] = ev.target.value
+        const value = ev.target.value
+
+        const currentOutputPaths = _formData[activeStageName].steps[selectedTaskIndex].outputDirectoryPath
+        currentOutputPaths[index] = value
         setFormData(_formData)
+
+        const updatedErrorObj = { ...formDataErrorObj }
+        const outputPathErrors = updatedErrorObj[activeStageName].steps[selectedTaskIndex].outputDirectoryPath
+
+        // If already saved, create valid error array of same length
+        if (!outputPathErrors?.length && currentOutputPaths?.length) {
+            updatedErrorObj[activeStageName].steps[selectedTaskIndex].outputDirectoryPath = new Array(
+                currentOutputPaths.length,
+                { isValid: true, message: '' },
+            )
+        }
+
+        updatedErrorObj[activeStageName].steps[selectedTaskIndex].outputDirectoryPath[index] =
+            new ValidationRules().outputDirectoryPath(value)
+        setFormDataErrorObj(updatedErrorObj)
     }
 
     const deleteOutputDirectory = (index) => {
         const _formData = { ...formData }
         _formData[activeStageName].steps[selectedTaskIndex].outputDirectoryPath.splice(index, 1)
         setFormData(_formData)
+
+        const updatedErrorObj = { ...formDataErrorObj }
+        updatedErrorObj[activeStageName].steps[selectedTaskIndex].outputDirectoryPath.splice(index, 1)
+        setFormDataErrorObj(updatedErrorObj)
     }
 
     return (
@@ -72,6 +106,10 @@ const OutputDirectoryPath = () => {
                             value={elm}
                             onChange={(e) => handleStoreArtifact(e, index)}
                             name="directory-path"
+                            error={
+                                formDataErrorObj[activeStageName].steps[selectedTaskIndex].outputDirectoryPath?.[index]
+                                    ?.message
+                            }
                         />
                         <Close
                             className="icon-dim-24 pointer mt-6 ml-6"

src/components/cdPipeline/cdpipeline.util.tsx

@@ -77,6 +77,9 @@ export const validateTask = (
         taskErrorObj.name = validationRules.requiredField(taskData.name)
         taskErrorObj.isValid = taskErrorObj.name.isValid
 
+        taskErrorObj.isValid =
+            taskErrorObj.isValid && (taskErrorObj.outputDirectoryPath?.every(({ isValid }) => isValid) ?? true)
+
         if (taskData.stepType) {
             const currentStepTypeVariable =
                 taskData.stepType === PluginType.INLINE ? 'inlineStepDetail' : 'pluginRefStepDetail'
@@ -521,4 +524,4 @@ export const getIsExternalAppLinkable = (migrateToDevtronFormState: MigrateToDev
     const { deploymentAppType } = migrateToDevtronFormState
     const { validationResponse } = migrateToDevtronFormState[SELECTED_FORM_STATE_KEY[deploymentAppType]]
     return validationResponse.isLinkable
-}
+}

src/components/ciPipeline/validationRules.ts

@@ -23,6 +23,8 @@ import {
     CustomErrorMessage,
     MAX_LENGTH_30,
     REPO_NAME_VALIDATION,
+    RESERVED_DIRECTORY_PATH_MSG,
+    RESERVED_OUTPUT_DIRECTORY_PATH,
 } from '../../config/constantMessaging'
 import { validateInputOutputVariableCell } from '@Components/CIPipelineN/VariableDataTable/validations'
 import { validateConditionDataCell } from '@Components/CIPipelineN/ConditionDataTable/utils'
@@ -176,4 +178,11 @@ export class ValidationRules {
         }
         return { isValid: true, message: '' }
     }
+
+    outputDirectoryPath = (value: string): { message: string | null; isValid: boolean } => {
+        if (value.startsWith(RESERVED_OUTPUT_DIRECTORY_PATH)) {
+            return { isValid: false, message: RESERVED_DIRECTORY_PATH_MSG }
+        }
+        return { isValid: true, message: null }
+    }
 }

src/config/constantMessaging.ts

@@ -78,6 +78,7 @@ export const enum DeleteComponentsName {
 
 // DELETE COMPONENT ENDS
 
+export const RESERVED_OUTPUT_DIRECTORY_PATH = '/devtroncd'
 export const LEARN_MORE = 'Learn more'
 export const REQUIRED_FIELD_MSG = 'This is a required field'
 export const MAX_LENGTH_30 = 'Max 30 characters allowed'
@@ -94,6 +95,7 @@ export const ERROR_MESSAGE_FOR_VALIDATION =
 export const CHARACTER_ERROR_MIN = 'At least 2 characters required'
 export const CHARACTER_ERROR_MAX = 'Max 50 characters allowed'
 export const PROJECT_EXIST_MSG = 'This Project already exists.'
+export const RESERVED_DIRECTORY_PATH_MSG = `Path cannot start with '${RESERVED_OUTPUT_DIRECTORY_PATH}' as it is reserved.`
 
 export const CustomErrorMessage = {
     CUSTOM_TAG_ERROR_MSG:

yarn.lock

@@ -1722,9 +1722,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@devtron-labs/devtron-fe-common-lib@npm:1.20.6":
-  version: 1.20.6
-  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.20.6"
+"@devtron-labs/devtron-fe-common-lib@npm:1.20.7":
+  version: 1.20.7
+  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.20.7"
   dependencies:
     "@codemirror/autocomplete": "npm:6.18.6"
     "@codemirror/lang-json": "npm:6.0.1"
@@ -1774,7 +1774,7 @@ __metadata:
     react-select: 5.8.0
     rxjs: ^7.8.1
     yaml: ^2.4.1
-  checksum: 10c0/d8639234d0c89ecf69cfefa81cc089325ef518eae0ca19709b8276c3a7878f46b1f9166bdfae7da11d42f85ad14654eeb762fa9e559fb0102c5293c8c92057da
+  checksum: 10c0/64ed4382ad16cf95657724ad6ae0e568351d78f3fdff4906cc53bd3fddd19a5c3518f83d4474c7f32bff6f8c2e19b9b23fe2a5b20a8d22b598ebd989818261c8
   languageName: node
   linkType: hard
 
@@ -5721,7 +5721,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "dashboard@workspace:."
   dependencies:
-    "@devtron-labs/devtron-fe-common-lib": "npm:1.20.6"
+    "@devtron-labs/devtron-fe-common-lib": "npm:1.20.7"
     "@esbuild-plugins/node-globals-polyfill": "npm:0.2.3"
     "@playwright/test": "npm:^1.32.1"
     "@rjsf/core": "npm:^5.13.3"