feat: Runtime Params

package.json

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

src/components/ApplicationGroup/AppGroup.types.ts

@@ -26,9 +26,9 @@ import {
     WorkflowType,
     AppInfoListType,
     GVKType,
-    RuntimeParamsListItemType,
     UseUrlFiltersReturnType,
     CommonNodeAttr,
+    RuntimePluginVariables,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { CDMaterialProps } from '../app/details/triggerView/types'
 import { EditDescRequest, NodeType, Nodes, OptionType } from '../app/types'
@@ -103,8 +103,8 @@ export interface ResponseRowType {
 }
 
 interface BulkRuntimeParamsType {
-    runtimeParams: Record<string, RuntimeParamsListItemType[]>
-    setRuntimeParams: React.Dispatch<React.SetStateAction<Record<string, RuntimeParamsListItemType[]>>>
+    runtimeParams: Record<string, RuntimePluginVariables[]>
+    setRuntimeParams: React.Dispatch<React.SetStateAction<Record<string, RuntimePluginVariables[]>>>
     runtimeParamsErrorState: Record<string, boolean>
     setRuntimeParamsErrorState: React.Dispatch<React.SetStateAction<Record<string, boolean>>>
 }

src/components/ApplicationGroup/Details/TriggerView/BulkCDTrigger.tsx

@@ -38,10 +38,12 @@ import {
     SelectPicker,
     CDMaterialSidebarType,
     CD_MATERIAL_SIDEBAR_TABS,
-    RuntimeParamsListItemType,
     ToastManager,
     ToastVariantType,
     CommonNodeAttr,
+    RuntimePluginVariables,
+    uploadCDPipelineFile,
+    UploadFileProps,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useHistory, useLocation } from 'react-router-dom'
 import { ReactComponent as Close } from '../../../../assets/icons/ic-cross.svg'
@@ -166,12 +168,21 @@ export default function BulkCDTrigger({
         }))
     }
 
-    const handleRuntimeParamChange = (currentAppRuntimeParams: RuntimeParamsListItemType[]) => {
+    const handleRuntimeParamChange = (currentAppRuntimeParams: RuntimePluginVariables[]) => {
         const clonedRuntimeParams = structuredClone(runtimeParams)
         clonedRuntimeParams[selectedApp.appId] = currentAppRuntimeParams
         setRuntimeParams(clonedRuntimeParams)
     }
 
+    const bulkUploadFile = ({ file, allowedExtensions, maxUploadSize }: UploadFileProps) =>
+        uploadCDPipelineFile({
+            file,
+            allowedExtensions,
+            maxUploadSize,
+            appId: selectedApp.appId,
+            envId: selectedApp.envId,
+        })
+
     const getDeploymentWindowData = async (_cdMaterialResponse) => {
         const currentEnv = appList[0].envId
         const appEnvMap = []
@@ -429,13 +440,9 @@ export default function BulkCDTrigger({
         if (tagNotFoundWarningsMap.has(app.appId)) {
             return (
                 <div className="flex left top dc__gap-4">
-                    <Error
-                        className="icon-dim-12 dc__no-shrink mt-5 alert-icon-r5-imp"
-                    />
+                    <Error className="icon-dim-12 dc__no-shrink mt-5 alert-icon-r5-imp" />
 
-                    <span className="fw-4 fs-12 cr-5 dc__truncate">
-                        {tagNotFoundWarningsMap.get(app.appId)}
-                    </span>
+                    <span className="fw-4 fs-12 cr-5 dc__truncate">{tagNotFoundWarningsMap.get(app.appId)}</span>
                 </div>
             )
         }
@@ -454,13 +461,9 @@ export default function BulkCDTrigger({
         if (!!warningMessage && !app.showPluginWarning) {
             return (
                 <div className="flex left top dc__gap-4">
-                    <Error
-                        className="icon-dim-12 dc__no-shrink mt-5 warning-icon-y7"
-                    />
+                    <Error className="icon-dim-12 dc__no-shrink mt-5 warning-icon-y7" />
 
-                    <span className="fw-4 fs-12 cy-7 dc__truncate">
-                        {warningMessage}
-                    </span>
+                    <span className="fw-4 fs-12 cy-7 dc__truncate">{warningMessage}</span>
                 </div>
             )
         }
@@ -473,7 +476,7 @@ export default function BulkCDTrigger({
                     nodeType={commonNodeAttrType}
                     shouldRenderAdditionalInfo={isAppSelected}
                 />
-            )   
+            )
         }
 
         return null
@@ -795,6 +798,7 @@ export default function BulkCDTrigger({
                                 bulkRuntimeParams={runtimeParams[selectedApp.appId] || []}
                                 handleBulkRuntimeParamChange={handleRuntimeParamChange}
                                 handleBulkRuntimeParamError={handleRuntimeParamError}
+                                bulkUploadFile={bulkUploadFile}
                                 bulkSidebarTab={currentSidebarTab}
                                 selectedAppName={selectedApp.name}
                             />

src/components/ApplicationGroup/Details/TriggerView/BulkCITrigger.tsx

@@ -27,7 +27,6 @@ import {
     GenericEmptyState,
     CIMaterialSidebarType,
     ApiQueuingWithBatch,
-    RuntimeParamsListItemType,
     ModuleNameMap,
     SourceTypeMap,
     ToastManager,
@@ -40,6 +39,10 @@ import {
     ButtonVariantType,
     ComponentSizeType,
     ButtonStyleType,
+    noop,
+    RuntimePluginVariables,
+    uploadCIPipelineFile,
+    UploadFileProps,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import { getCIPipelineURL, getParsedBranchValuesForPlugin, importComponentFromFELibrary } from '../../../common'
@@ -168,14 +171,14 @@ const BulkCITrigger = ({
                     [appDetails.ciPipelineId]: [],
                 })
             }
-            return () => getRuntimeParams(appDetails.ciPipelineId)
+            return () => getRuntimeParams(appDetails.ciPipelineId, true)
         })
 
         if (runtimeParamsServiceList.length) {
             try {
                 // Appending any for legacy code, since we did not had generics in APIQueuingWithBatch
                 const responses: any[] = await ApiQueuingWithBatch(runtimeParamsServiceList, true)
-                const _runtimeParams: Record<string, RuntimeParamsListItemType[]> = {}
+                const _runtimeParams: Record<string, RuntimePluginVariables[]> = {}
                 responses.forEach((res, index) => {
                     _runtimeParams[appList[index]?.ciPipelineId] = res.value || []
                 })
@@ -248,6 +251,15 @@ const BulkCITrigger = ({
         setRuntimeParams(updatedRuntimeParams)
     }
 
+    const uploadFile = ({ file, allowedExtensions, maxUploadSize }: UploadFileProps) =>
+        uploadCIPipelineFile({
+            file,
+            allowedExtensions,
+            maxUploadSize,
+            appId: selectedApp.appId,
+            ciPipelineId: +selectedApp.ciPipelineId,
+        })
+
     const handleSidebarTabChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         if (runtimeParamsErrorState[selectedApp.ciPipelineId]) {
             ToastManager.showToast({
@@ -519,6 +531,7 @@ const BulkCITrigger = ({
                 runtimeParams={runtimeParams[selectedApp.ciPipelineId] || []}
                 handleRuntimeParamChange={handleRuntimeParamChange}
                 handleRuntimeParamError={handleRuntimeParamError}
+                uploadFile={uploadFile}
                 appName={selectedApp?.name}
                 isBulkCIWebhook={isWebhookBulkCI}
                 setIsWebhookBulkCI={setIsWebhookBulkCI}

src/components/ApplicationGroup/Details/TriggerView/EnvTriggerView.tsx

@@ -42,11 +42,12 @@ import {
     ApiQueuingWithBatch,
     usePrompt,
     SourceTypeMap,
-    RuntimeParamsListItemType,
     preventBodyScroll,
     ToastManager,
     ToastVariantType,
     BlockedStateData,
+    RuntimePluginVariables,
+    uploadCIPipelineFile,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import {
@@ -185,7 +186,7 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
     const [isConfigPresent, setConfigPresent] = useState<boolean>(false)
     const [isDefaultConfigPresent, setDefaultConfig] = useState<boolean>(false)
     // Mapping pipelineId (in case of CI) and appId (in case of CD) to runtime params
-    const [runtimeParams, setRuntimeParams] = useState<Record<string, RuntimeParamsListItemType[]>>({})
+    const [runtimeParams, setRuntimeParams] = useState<Record<string, RuntimePluginVariables[]>>({})
     const [runtimeParamsErrorState, setRuntimeParamsErrorState] = useState<Record<string, boolean>>({})
     const [isBulkTriggerLoading, setIsBulkTriggerLoading] = useState<boolean>(false)
 
@@ -872,7 +873,7 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
                       _appName,
                   )
                 : null,
-            getRuntimeParams ? getRuntimeParams(ciNodeId) : null,
+            getRuntimeParams ? getRuntimeParams(ciNodeId, true) : null,
         ])
             .then((resp) => {
                 // need to set result for getCIBlockState call only as for updateCIMaterialList
@@ -1982,9 +1983,7 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
         if (selectedCINode?.id) {
             return (
                 <Switch>
-                     <Route
-                        path={`${url}${URLS.BUILD}/:ciNodeId/${URLS.WEBHOOK_MODAL}`}
-                    >
+                    <Route path={`${url}${URLS.BUILD}/:ciNodeId/${URLS.WEBHOOK_MODAL}`}>
                         <WebhookReceivedPayloadModal
                             workflowId={workflowID}
                             webhookPayloads={webhookPayloads}

src/components/CIPipelineN/CIPipeline.tsx

@@ -46,6 +46,7 @@ import {
     ToastManager,
     ProcessPluginDataParamsType,
     ResourceKindType,
+    uploadCIPipelineFile,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import {
@@ -783,6 +784,16 @@ export default function CIPipeline({
         }
     }
 
+    const uploadFile: PipelineContext['uploadFile'] = ({ allowedExtensions, file, maxUploadSize }) =>
+        uploadCIPipelineFile({
+            appId: +appId,
+            envId: isJobView ? selectedEnv?.id : null,
+            ciPipelineId: +ciPipelineId,
+            file,
+            allowedExtensions,
+            maxUploadSize,
+        })
+
     const contextValue = useMemo(
         () => ({
             formData,
@@ -810,6 +821,7 @@ export default function CIPipeline({
             handleDisableParentModalCloseUpdate,
             handleValidateMandatoryPlugins,
             mandatoryPluginData,
+            uploadFile,
         }),
         [
             formData,
@@ -977,7 +989,7 @@ export default function CIPipeline({
         <>
             {renderFloatingVariablesWidget()}
 
-            <Drawer position="right" width="75%" minWidth="1024px" maxWidth="1200px">
+            <Drawer position="right" width="75%" minWidth="1024px" maxWidth="1200px" onEscape={handleClose}>
                 {renderCIPipelineModal()}
             </Drawer>
         </>

src/components/CIPipelineN/CreatePluginModal/utils.tsx

@@ -156,6 +156,8 @@ const parseInputVariablesIntoCreatePluginPayload = (
         valueType: variable.variableType,
         referenceVariableName: variable.refVariableName,
         isExposed: true,
+        fileMountDir: variable.fileMountDir,
+        fileReferenceId: variable.fileReferenceId,
     })) || []
 
 export const getCreatePluginPayload = ({

src/components/CIPipelineN/InputPluginSelect.tsx

@@ -236,7 +236,7 @@ export const InputPluginSelection = ({
                     placeholder={placeholder}
                     refVar={refVar}
                     tabIndex={selectedVariableIndex}
-                    handleKeyDown={handleOnKeyDown}
+                    onKeyDown={handleOnKeyDown}
                 />
                 {(variableData.refVariableStage ||
                     (variableData?.variableType && variableData.variableType !== 'NEW')) && (

src/components/CIPipelineN/TaskDetailComponent.tsx

@@ -31,13 +31,13 @@ import {
     PluginDataStoreType,
     getUpdatedPluginStore,
 } from '@devtron-labs/devtron-fe-common-lib'
-import CustomInputOutputVariables from './CustomInputOutputVariables'
 import { PluginDetailHeader } from './PluginDetailHeader'
 import { TaskTypeDetailComponent } from './TaskTypeDetailComponent'
 import { ValidationRules } from '../ciPipeline/validationRules'
 import { pipelineContext } from '../workflowEditor/workflowEditor'
 import { PluginDetailHeaderProps, TaskDetailComponentParamsType } from './types'
 import { filterInvalidConditionDetails } from '@Components/cdPipeline/cdpipeline.util'
+import { VariableDataTable } from './VariableDataTable'
 
 export const TaskDetailComponent = () => {
     const {
@@ -273,10 +273,10 @@ export const TaskDetailComponent = () => {
                 </div>
                 <hr />
                 {selectedStep.stepType === PluginType.INLINE ? (
-                    <CustomInputOutputVariables type={PluginVariableType.INPUT} />
+                    <VariableDataTable key={selectedTaskIndex} type={PluginVariableType.INPUT} isCustomTask />
                 ) : (
                     <VariableContainer type={PluginVariableType.INPUT} />
-                )}{' '}
+                )}
                 <hr />
                 {selectedStep[currentStepTypeVariable]?.inputVariables?.length > 0 && (
                     <>
@@ -289,7 +289,7 @@ export const TaskDetailComponent = () => {
                         <TaskTypeDetailComponent />
                         {formData[activeStageName].steps[selectedTaskIndex][currentStepTypeVariable].scriptType !==
                             ScriptType.CONTAINERIMAGE && (
-                            <CustomInputOutputVariables type={PluginVariableType.OUTPUT} />
+                            <VariableDataTable key={selectedTaskIndex} type={PluginVariableType.OUTPUT} isCustomTask />
                         )}
                     </>
                 ) : (