Merge pull request #443 from devtron-labs/feat/runtime-params

feat: Runtime Params

Author: RohitRaj011

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.2.16",
+    "version": "1.2.17",
     "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
@@ -97,11 +99,34 @@ export enum RefVariableStageType {
     POST_CI = 'POST_CI',
 }
 
+export interface FilePropertyType {
+    allowedExtensions: string[]
+    maxUploadSize: number
+}
+
+export interface ConstraintType {
+    fileProperty: FilePropertyType
+}
+
+export interface ValueConstraintType {
+    choices?: string[]
+    blockCustomValue?: boolean
+    constraint?: ConstraintType
+}
+
+export enum VariableTypeFormat {
+    STRING = 'STRING',
+    NUMBER = 'NUMBER',
+    BOOL = 'BOOL',
+    DATE = 'DATE',
+    FILE = 'FILE',
+}
+
 export interface VariableType {
     id: number
     name: string
     value: string
-    format: string
+    format: VariableTypeFormat
     description: string
     defaultValue: string
     allowEmptyValue: boolean
@@ -110,6 +135,12 @@ export interface VariableType {
     refVariableName: string
     refVariableStage?: RefVariableStageType
     variableStepIndexInPlugin?: number
+    fileMountDir: string
+    fileReferenceId?: number
+    valueConstraintId?: number
+    valueConstraint?: ValueConstraintType
+    isRuntimeArg: boolean
+    refVariableUsed: boolean
 }
 
 interface CommandArgsMap {
@@ -260,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[] }
-    pluginRefStepDetail?: { inputVariables?: ErrorObj[]; outputVariables?: ErrorObj[] }
+    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/Assets/Icon/ic-cloud-upload.svg

@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
+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, post } from './Api'
-import { GitProviderType, ROUTES } from './Constants'
-import { getUrlWithSearchParams, sortCallback } from './Helper'
+import { get, getIsRequestAborted, post } from './Api'
+import { API_STATUS_CODES, GitProviderType, ROUTES } from './Constants'
+import { getUrlWithSearchParams, showError, sortCallback } from './Helper'
 import {
     TeamList,
     ResponseType,
@@ -41,10 +42,15 @@ import {
     UserApprovalMetadataType,
     UserApprovalConfigType,
     CDMaterialListModalServiceUtilProps,
+    GlobalVariableDTO,
+    GlobalVariableOptionType,
 } from './Types'
 import { ApiResourceType } from '../Pages'
 import { API_TOKEN_PREFIX } from '@Shared/constants'
 import { DefaultUserKey } from '@Shared/types'
+import { RefVariableType } from './CIPipeline.Types'
+import { ServerErrors } from './ServerError'
+import { ToastManager, ToastVariantType } from '@Shared/Services'
 
 export const getTeamListMin = (): Promise<TeamList> => {
     // ignore active field
@@ -318,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) {
@@ -520,10 +524,59 @@ export function getWebhookEventsForEventId(eventId: string | number) {
  */
 export const getGitBranchUrl = (gitUrl: string, branchName: string): string | null => {
     if (!gitUrl) return null
-    const trimmedGitUrl = gitUrl.trim().replace(/\.git$/, '').replace(/\/$/, '') // Remove any trailing slash
+    const trimmedGitUrl = gitUrl
+        .trim()
+        .replace(/\.git$/, '')
+        .replace(/\/$/, '') // Remove any trailing slash
     if (trimmedGitUrl.includes(GitProviderType.GITLAB)) return `${trimmedGitUrl}/-/tree/${branchName}`
     else if (trimmedGitUrl.includes(GitProviderType.GITHUB)) return `${trimmedGitUrl}/tree/${branchName}`
     else if (trimmedGitUrl.includes(GitProviderType.BITBUCKET)) return `${trimmedGitUrl}/branch/${branchName}`
     else if (trimmedGitUrl.includes(GitProviderType.AZURE)) return `${trimmedGitUrl}/src/branch/${branchName}`
     return null
 }
+
+export const getGlobalVariables = async ({
+    appId,
+    isCD = false,
+    abortControllerRef,
+}: {
+    appId: number
+    isCD?: boolean
+    abortControllerRef?: MutableRefObject<AbortController>
+}): Promise<GlobalVariableOptionType[]> => {
+    try {
+        const { result } = await get<GlobalVariableDTO[]>(
+            getUrlWithSearchParams(ROUTES.PLUGIN_GLOBAL_VARIABLES, { appId }),
+            {
+                abortControllerRef,
+            },
+        )
+        const variableList = (result ?? [])
+            .filter((item) => (isCD ? item.stageType !== 'ci' : item.stageType === 'ci'))
+            .map<GlobalVariableOptionType>((variable) => {
+                const { name, ...updatedVariable } = variable
+
+                return {
+                    ...updatedVariable,
+                    label: name,
+                    value: name,
+                    description: updatedVariable.description || '',
+                    variableType: RefVariableType.GLOBAL,
+                }
+            })
+
+        return variableList
+    } catch (err) {
+        if (!getIsRequestAborted(err)) {
+            if (err instanceof ServerErrors && err.code === API_STATUS_CODES.PERMISSION_DENIED) {
+                ToastManager.showToast({
+                    variant: ToastVariantType.notAuthorized,
+                    description: 'You are not authorized to access global variables',
+                })
+            } else {
+                showError(err)
+            }
+        }
+        throw err
+    }
+}

src/Assets/Icon/ic-var-initial.svg

@@ -33,11 +33,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 = {
@@ -121,6 +123,8 @@ export const ROUTES = {
     CONFIG_DATA: 'config/data',
     K8S_RESOURCE: 'k8s/resource',
     K8S_RESOURCE_LIST: 'k8s/resource/list',
+    FILE_UPLOAD: 'file/upload',
+    PLUGIN_GLOBAL_VARIABLES: 'plugin/global/list/global-variable',
     CONFIG_COMPARE_SECRET: 'config/compare/secret',
 }
 

src/Common/CIPipeline.Types.ts

@@ -1033,3 +1033,10 @@ export const getIframeWithDefaultAttributes = (iframeString: string, defaultName
 
     return iframeString
 }
+
+export const getGoLangFormattedDateWithTimezone = (dateFormat: string) => {
+    const now = moment()
+    const formattedDate = now.format(dateFormat)
+    const timezone = now.format('Z').replace(/([+/-])(\d{2})[:.](\d{2})/, '$1$2$3')
+    return formattedDate.replace('Z', timezone)
+}

src/Common/Common.service.ts

@@ -43,17 +43,19 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
     }
 
     const closeTippy = (e) => {
-        stopPropagation(e)
-        if (tippyRef.current?.hide) {
-            tippyRef.current.hide()
-            tippyRef.current = null
+        if (!props.disableClose) {
+            stopPropagation(e)
+            if (tippyRef.current?.hide) {
+                tippyRef.current.hide()
+                tippyRef.current = null
 
-            if (props.onClose) {
-                props.onClose()
+                if (props.onClose) {
+                    props.onClose()
+                }
             }
+            setShowHeadingInfo(false)
+            document.removeEventListener('keydown', closeOnEsc)
         }
-        setShowHeadingInfo(false)
-        document.removeEventListener('keydown', closeOnEsc)
     }
 
     const toggleHeadingInfo = (e) => {

src/Common/Constants.ts

@@ -4,29 +4,35 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
 import React, { ReactNode, CSSProperties, ReactElement, MutableRefObject } from 'react'
 import { TippyProps } from '@tippyjs/react'
 import { Placement } from 'tippy.js'
 import { UserGroupDTO } from '@Pages/GlobalConfigurations'
 import { ImageComment, ReleaseTag } from './ImageTags.Types'
-import { MandatoryPluginBaseStateType, RegistryType, RuntimeParamsListItemType, Severity } from '../Shared'
+import {
+    MandatoryPluginBaseStateType,
+    RegistryType,
+    RuntimePluginVariables,
+    Severity,
+} from '../Shared'
 import {
     ACTION_STATE,
-    ConsequenceType,
     DEPLOYMENT_WINDOW_TYPE,
     DockerConfigOverrideType,
+    RefVariableType,
     SortingOrder,
     TaskErrorObj,
+    VariableTypeFormat,
 } from '.'
 
 /**
@@ -125,6 +131,7 @@ export interface TippyCustomizedProps extends Pick<TippyProps, 'appendTo'> {
     documentationLink?: string
     documentationLinkText?: string
     children: React.ReactElement<any>
+    disableClose?: boolean
 }
 
 export interface InfoIconTippyProps
@@ -697,7 +704,7 @@ export interface CDMaterialsMetaInfo {
      * This is the ID of user that has request the material
      */
     requestedUserId: number
-    runtimeParams: RuntimeParamsListItemType[]
+    runtimeParams: RuntimePluginVariables[]
 }
 
 export interface ImagePromotionMaterialInfo {
@@ -1013,3 +1020,16 @@ export interface WidgetEventDetails {
     age: string
     lastSeen: string
 }
+
+export interface GlobalVariableDTO {
+    name: string
+    format: VariableTypeFormat
+    description: string
+    stageType: 'cd' | 'post-cd' | 'ci'
+}
+
+export type GlobalVariableOptionType = Omit<GlobalVariableDTO, 'name'> & {
+    label: string
+    value: string
+    variableType: Extract<RefVariableType, RefVariableType.GLOBAL>
+}