Merge pull request #452 from devtron-labs/feat/runtime-params-global-variables

Feat: runtime params global variables, code refactor

Author: RohitRaj011

package-lock.json

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

package.json

@@ -292,8 +292,8 @@ export interface ErrorObj {
 export interface TaskErrorObj {
     isValid: boolean
     name: ErrorObj
-    inlineStepDetail?: { inputVariables?: ErrorObj[]; outputVariables?: ErrorObj[] }
-    pluginRefStepDetail?: { inputVariables?: ErrorObj[]; outputVariables?: ErrorObj[] }
+    inlineStepDetail?: { inputVariables?: ErrorObj[]; outputVariables?: ErrorObj[]; isValid?: boolean }
+    pluginRefStepDetail?: { inputVariables?: ErrorObj[]; outputVariables?: ErrorObj[]; isValid?: boolean }
 }
 export interface FormErrorObjectType {
     name: ErrorObj

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

@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
+import { MutableRefObject } from 'react'
 import moment from 'moment'
 import { RuntimeParamsAPIResponseType, RuntimeParamsListItemType } 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
@@ -530,3 +536,49 @@ export const getGitBranchUrl = (gitUrl: string, branchName: string): string | nu
     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/Common/CIPipeline.Types.ts

@@ -117,6 +117,7 @@ export const ROUTES = {
     CONFIG_DATA: 'config/data',
     K8S_RESOURCE_LIST: 'k8s/resource/list',
     FILE_UPLOAD: 'file/upload',
+    PLUGIN_GLOBAL_VARIABLES: 'plugin/global/list/global-variable',
 }
 
 export enum KEY_VALUE {

src/Common/Common.service.ts

@@ -1031,3 +1031,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/Constants.ts

@@ -34,7 +34,6 @@ const PopupMenu = ({
     autoClose = false,
     autoPosition = false,
     shouldPreventDefault = false,
-    disableClose,
 }: PopupMenuType) => {
     const [popupPosition, setPopupPosition] = React.useState(null)
     const [opacity, setOpacity] = React.useState(0)
@@ -115,7 +114,7 @@ const PopupMenu = ({
     }
 
     const handleClose = (e, inOrOut) => {
-        if (!disableClose && (autoClose || inOrOut === 'out')) {
+        if (autoClose || inOrOut === 'out') {
             if (observer && observer.current && observer.current.disconnect) observer.current.disconnect()
             setOpacity(0)
             setPopupPosition(null)

src/Common/Helper.tsx

@@ -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/PopupMenu.tsx

@@ -19,14 +19,20 @@ import { TippyProps } from '@tippyjs/react'
 import { Placement } from 'tippy.js'
 import { UserGroupDTO } from '@Pages/GlobalConfigurations'
 import { ImageComment, ReleaseTag } from './ImageTags.Types'
-import { MandatoryPluginBaseStateType, RegistryType, RuntimePluginVariables, 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
@@ -288,7 +295,6 @@ export interface PopupMenuType {
     autoClose?: boolean
     autoPosition?: boolean
     shouldPreventDefault?: boolean
-    disableClose?: boolean
 }
 
 export interface PopupMenuButtonType {
@@ -1014,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>
+}