Merge pull request #460 from devtron-labs/fix/runtime-params

fix: runtime params - UAT and QA Fixes

Author: RohitRaj011

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.2.9",
+    "version": "1.2.9-beta-1",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { DynamicDataTableCellValidationState } from '@Shared/Components'
+
 export interface MaterialType {
     name: string
     type: string
@@ -289,11 +291,30 @@ export interface ErrorObj {
     isValid: boolean
     message: string | null
 }
+
+export enum InputOutputVariablesHeaderKeys {
+    VARIABLE = 'variable',
+    FORMAT = 'format',
+    VALUE = 'val',
+}
+
+export type InputOutputVariablesErrorObj = Record<InputOutputVariablesHeaderKeys, DynamicDataTableCellValidationState>
+
 export interface TaskErrorObj {
     isValid: boolean
     name: ErrorObj
-    inlineStepDetail?: { inputVariables?: ErrorObj[]; outputVariables?: ErrorObj[]; isValid?: boolean }
-    pluginRefStepDetail?: { inputVariables?: ErrorObj[]; outputVariables?: ErrorObj[]; isValid?: boolean }
+    inlineStepDetail?: {
+        inputVariables?: Record<number, InputOutputVariablesErrorObj>
+        outputVariables?: Record<number, InputOutputVariablesErrorObj>
+        isInputVariablesValid?: boolean
+        isOutputVariablesValid?: boolean
+    }
+    pluginRefStepDetail?: {
+        inputVariables?: Record<number, InputOutputVariablesErrorObj>
+        outputVariables?: Record<number, InputOutputVariablesErrorObj>
+        isInputVariablesValid?: boolean
+        isOutputVariablesValid?: boolean
+    }
 }
 export interface FormErrorObjectType {
     name: ErrorObj

src/Common/CIPipeline.Types.ts

@@ -16,7 +16,7 @@
 
 import { MutableRefObject } from 'react'
 import moment from 'moment'
-import { RuntimeParamsAPIResponseType, RuntimeParamsListItemType } from '@Shared/types'
+import { RuntimeParamsAPIResponseType, RuntimePluginVariables } from '@Shared/types'
 import { getIsManualApprovalSpecific, sanitizeUserApprovalConfig, stringComparatorBySortOrder } from '@Shared/Helpers'
 import { get, getIsRequestAborted, post } from './Api'
 import { API_STATUS_CODES, GitProviderType, ROUTES } from './Constants'
@@ -324,10 +324,8 @@ const processCDMaterialsApprovalInfo = (enableApproval: boolean, cdMaterialsResu
     }
 }
 
-export const parseRuntimeParams = (response: RuntimeParamsAPIResponseType): RuntimeParamsListItemType[] =>
-    Object.entries(response?.envVariables || {})
-        .map(([key, value], index) => ({ key, value, id: index }))
-        .sort((a, b) => stringComparatorBySortOrder(a.key, b.key))
+export const parseRuntimeParams = (response: RuntimeParamsAPIResponseType): RuntimePluginVariables[] =>
+    (response?.runtimePluginVariables ?? []).map((variable) => ({ ...variable, defaultValue: variable.value }))
 
 const processCDMaterialsMetaInfo = (cdMaterialsResult): CDMaterialsMetaInfo => {
     if (!cdMaterialsResult) {
@@ -349,7 +347,7 @@ const processCDMaterialsMetaInfo = (cdMaterialsResult): CDMaterialsMetaInfo => {
         resourceFilters: cdMaterialsResult.resourceFilters ?? [],
         totalCount: cdMaterialsResult.totalCount ?? 0,
         requestedUserId: cdMaterialsResult.requestedUserId,
-        runtimeParams: cdMaterialsResult.runtimeParams.runtimePluginVariables ?? [],
+        runtimeParams: parseRuntimeParams(cdMaterialsResult.runtimeParams),
     }
 }
 

src/Common/Common.service.ts

@@ -32,11 +32,13 @@ export const DOCUMENTATION = {
 }
 
 export const PATTERNS = {
+    NATURAL_NUMBERS: /^\d*\.?\d*$/,
     KUBERNETES_KEY_PREFIX: /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/,
     KUBERNETES_KEY_NAME: /^(([A-Za-z0-9][-A-Za-z0-9_.]*)?[A-Za-z0-9])$/,
     START_END_ALPHANUMERIC: /^([Az09].*[A-Za-z0-9])$|[A-Za-z0-9]$/,
     ALPHANUMERIC_WITH_SPECIAL_CHAR: /^[A-Za-z0-9._-]+$/, // allow alphanumeric,(.) ,(-),(_)
     ESCAPED_CHARACTERS: /[.*+?^${}()|[\]\\]/g,
+    NUMBERS_WITH_SCOPE_VARIABLES: /^(\d+(\.\d+)?|@{{[a-zA-Z0-9-]+}})$/,
 }
 
 export const URLS = {

src/Common/Constants.ts

@@ -0,0 +1,27 @@
+import Tippy from '@tippyjs/react'
+
+import { ReactComponent as ICInfoOutline } from '@Icons/ic-info-outline.svg'
+import { VariableType } from '@Common/CIPipeline.Types'
+
+export const FileConfigTippy = ({ fileMountDir }: Pick<VariableType, 'fileMountDir'>) => (
+    <Tippy
+        trigger="click"
+        arrow={false}
+        className="default-tt w-200"
+        content={
+            <div className="fs-12 lh-18 flexbox-col dc__gap-2 mw-none">
+                <p className="m-0 fw-6 cn-0">File mount path</p>
+                <p className="m-0 cn-50 flexbox-col flex-nowrap dc__word-break">
+                    {fileMountDir}
+                    <br />
+                    <br />
+                    Ensure the uploaded file name is unique to avoid conflicts or overrides.
+                </p>
+            </div>
+        }
+    >
+        <div className="cursor flex dc__no-shrink">
+            <ICInfoOutline className="icon-dim-18" />
+        </div>
+    </Tippy>
+)

src/Pages/Applications/DevtronApps/Details/CIPipeline/components/FileConfigTippy.tsx

@@ -1 +1,2 @@
 export * from './SystemVariableIcon'
+export * from './FileConfigTippy'

src/Pages/Applications/DevtronApps/Details/CIPipeline/components/index.ts

@@ -1,9 +1,8 @@
-import { MutableRefObject } from 'react'
-
 import { ROUTES } from '@Common/Constants'
 import { getIsRequestAborted, post } from '@Common/Api'
 import { getUrlWithSearchParams, showError } from '@Common/Helper'
-import { UploadFileDTO } from '@Shared/types'
+import { UploadFileDTO, UploadFileProps } from '@Shared/types'
+import { APIOptions } from '@Common/Types'
 
 export const uploadCIPipelineFile = async ({
     file,
@@ -14,14 +13,11 @@ export const uploadCIPipelineFile = async ({
     maxUploadSize,
     abortControllerRef,
 }: {
-    file: File[]
     appId: number
     ciPipelineId: number
     envId?: number
-    allowedExtensions?: string[]
-    maxUploadSize?: number
-    abortControllerRef?: MutableRefObject<AbortController>
-}): Promise<UploadFileDTO> => {
+} & UploadFileProps &
+    Pick<APIOptions, 'abortControllerRef'>): Promise<UploadFileDTO> => {
     const formData = new FormData()
     formData.append('file', file[0])
 

src/Pages/Applications/DevtronApps/Details/CIPipeline/services.ts

@@ -151,7 +151,7 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
                             }}
                             textAreaProps={{
                                 ...row.data[key].props?.textAreaProps,
-                                className: 'dynamic-data-table__cell-input placeholder-cn5 py-8 pr-8 cn-9 fs-13 lh-20',
+                                className: 'dynamic-data-table__cell-input placeholder-cn5 py-8 pr-32 cn-9 fs-13 lh-20',
                                 disableOnBlurResizeToMinHeight: true,
                                 minHeight: 20,
                                 maxHeight: 160,
@@ -178,7 +178,7 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
                 )
             case DynamicDataTableRowDataType.FILE_UPLOAD:
                 return (
-                    <div className={`w-100 h-100 flex top left px-8 ${row.data[key].value ? 'py-3' : 'py-8'}`}>
+                    <div className={`mw-none w-100 h-100 flex top left px-8 ${row.data[key].value ? 'py-3' : 'py-8'}`}>
                         <FileUpload
                             {...row.data[key].props}
                             fileName={row.data[key].value}

src/Shared/Components/DynamicDataTable/DynamicDataTableRow.tsx

@@ -207,6 +207,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     onCreateOption,
     closeMenuOnSelect = false,
     shouldShowNoOptionsMessage = true,
+    formatCreateLabel,
     ...props
 }: SelectPickerProps<OptionValue, IsMulti>) => {
     const { inputId, required, isDisabled, controlShouldRenderValue = true, value, options, getOptionValue } = props
@@ -393,6 +394,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                             onInputChange={onInputChange}
                             icon={icon}
                             showSelectedOptionIcon={shouldShowSelectedOptionIcon}
+                            formatCreateLabel={formatCreateLabel}
                         />
                     </div>
                 </ConditionalWrap>