Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into fix/tooltip-rerender

Author: Elessar1802

.github/CODEOWNERS

@@ -0,0 +1 @@
+* vivek@devtron.ai @vikramdevtron

package-lock.json

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

package.json

@@ -114,10 +114,10 @@ async function handleServerError(contentType, response) {
     throw serverError
 }
 
-async function fetchAPI(
+async function fetchAPI<K = object>(
     url: string,
     type: string,
-    data: object,
+    data: K,
     signal: AbortSignal,
     preventAutoLogout = false,
     isMultipartRequest?: boolean,
@@ -185,10 +185,10 @@ async function fetchAPI(
     )
 }
 
-function fetchInTime(
+function fetchInTime<T = object>(
     url: string,
     type: string,
-    data: object,
+    data: T,
     options?: APIOptions,
     isMultipartRequest?: boolean,
 ): Promise<ResponseType> {
@@ -227,23 +227,24 @@ function fetchInTime(
     })
 }
 
-export const post = (
+export const post = <T = any, K = object>(
     url: string,
-    data: object,
+    data: K,
     options?: APIOptions,
     isMultipartRequest?: boolean,
-): Promise<ResponseType> => fetchInTime(url, 'POST', data, options, isMultipartRequest)
+): Promise<ResponseType<T>> => fetchInTime<K>(url, 'POST', data, options, isMultipartRequest)
 
-export const put = (url: string, data: object, options?: APIOptions): Promise<ResponseType> =>
-    fetchInTime(url, 'PUT', data, options)
+export const put = <T = any, K = object>(url: string, data: K, options?: APIOptions): Promise<ResponseType<T>> =>
+    fetchInTime<K>(url, 'PUT', data, options)
 
-export const patch = (url: string, data: object, options?: APIOptions): Promise<ResponseType> =>
-    fetchInTime(url, 'PATCH', data, options)
+export const patch = <T = any, K = object>(url: string, data: K, options?: APIOptions): Promise<ResponseType<T>> =>
+    fetchInTime<K>(url, 'PATCH', data, options)
 
-export const get = (url: string, options?: APIOptions): Promise<ResponseType> => fetchInTime(url, 'GET', null, options)
+export const get = <T = any>(url: string, options?: APIOptions): Promise<ResponseType<T>> =>
+    fetchInTime(url, 'GET', null, options)
 
-export const trash = (url: string, data?: object, options?: APIOptions): Promise<ResponseType> =>
-    fetchInTime(url, 'DELETE', data, options)
+export const trash = <T = any, K = object>(url: string, data?: K, options?: APIOptions): Promise<ResponseType<T>> =>
+    fetchInTime<K>(url, 'DELETE', data, options)
 
 /**
  * Aborts the previous request before triggering next request

src/Assets/Icon/ic-arrow-right.svg

@@ -104,6 +104,7 @@ export interface VariableType {
     format: string
     description: string
     defaultValue: string
+    allowEmptyValue: boolean
     variableType: RefVariableType
     refVariableStepIndex: number
     refVariableName: string
@@ -128,7 +129,7 @@ interface ConditionDetails {
     conditionalValue: string
 }
 
-interface InlineStepDetailType {
+export interface InlineStepDetailType {
     scriptType: ScriptType
     isMountCustomScript?: boolean
     script?: string
@@ -147,6 +148,8 @@ interface InlineStepDetailType {
     inputVariables?: VariableType[]
     outputVariables?: VariableType[]
     conditionDetails: ConditionDetails[]
+    storeScriptAt?: string
+    mountCodeToContainerPath?: string
 }
 
 interface PluginRefStepDetailType {

src/Common/Api.ts

@@ -34,7 +34,7 @@ export default function ClipboardButton({
     content,
     copiedTippyText = 'Copied!',
     duration = 1000,
-    trigger = false,
+    trigger,
     setTrigger = noop,
     rootClassName = '',
     iconSize = 16,
@@ -45,6 +45,8 @@ export default function ClipboardButton({
     const handleTextCopied = () => {
         setCopied(true)
     }
+    const isTriggerUndefined = typeof trigger === 'undefined'
+
     const handleEnableTippy = () => setEnableTippy(true)
     const handleDisableTippy = () => setEnableTippy(false)
     const handleCopyContent = useCallback(
@@ -68,7 +70,7 @@ export default function ClipboardButton({
     }, [copied, duration, setTrigger])
 
     useEffect(() => {
-        if (trigger) {
+        if (!isTriggerUndefined && trigger) {
             setCopied(true)
             handleCopyContent()
         }
@@ -86,7 +88,7 @@ export default function ClipboardButton({
                 className={`dc__outline-none-imp p-0 flex dc__transparent--unstyled dc__no-border ${rootClassName}`}
                 onMouseEnter={handleEnableTippy}
                 onMouseLeave={handleDisableTippy}
-                onClick={handleCopyContent}
+                onClick={isTriggerUndefined && handleCopyContent}
             >
                 {copied ? <Check className={iconClassName} /> : <ICCopy className={iconClassName} />}
             </button>

src/Common/CIPipeline.Types.ts

@@ -15,6 +15,8 @@
  */
 
 import moment from 'moment'
+import { RuntimeParamsAPIResponseType, RuntimeParamsListItemType } from '@Shared/types'
+import { getIsManualApprovalSpecific, sanitizeUserApprovalConfig, stringComparatorBySortOrder } from '@Shared/Helpers'
 import { get, post } from './Api'
 import { ROUTES } from './Constants'
 import { getUrlWithSearchParams, sortCallback } from './Helper'
@@ -41,7 +43,6 @@ import {
     CDMaterialListModalServiceUtilProps,
 } from './Types'
 import { ApiResourceType } from '../Pages'
-import { getIsManualApprovalSpecific, sanitizeUserApprovalConfig, stringComparatorBySortOrder } from '@Shared/Helpers'
 import { API_TOKEN_PREFIX } from '@Shared/constants'
 import { DefaultUserKey } from '@Shared/types'
 
@@ -317,6 +318,11 @@ 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))
+
 const processCDMaterialsMetaInfo = (cdMaterialsResult): CDMaterialsMetaInfo => {
     if (!cdMaterialsResult) {
         return {
@@ -326,6 +332,7 @@ const processCDMaterialsMetaInfo = (cdMaterialsResult): CDMaterialsMetaInfo => {
             resourceFilters: [],
             totalCount: 0,
             requestedUserId: 0,
+            runtimeParams: [],
         }
     }
 
@@ -336,6 +343,7 @@ const processCDMaterialsMetaInfo = (cdMaterialsResult): CDMaterialsMetaInfo => {
         resourceFilters: cdMaterialsResult.resourceFilters ?? [],
         totalCount: cdMaterialsResult.totalCount ?? 0,
         requestedUserId: cdMaterialsResult.requestedUserId,
+        runtimeParams: parseRuntimeParams(cdMaterialsResult.runtimeParams),
     }
 }
 

src/Common/ClipboardButton/ClipboardButton.tsx

@@ -106,6 +106,7 @@ export const ROUTES = {
     PLUGIN_GLOBAL_LIST_DETAIL_V2: 'plugin/global/list/detail/v2',
     PLUGIN_GLOBAL_LIST_V2: 'plugin/global/list/v2',
     PLUGIN_GLOBAL_LIST_TAGS: 'plugin/global/list/tags',
+    PLUGIN_LIST_MIN: 'plugin/global/list/v2/min',
     DEPLOYMENT_CHARTS_LIST: 'deployment/template/fetch',
     USER_LIST_MIN: 'user/list/min',
     CONFIG_DATA: 'config/data',
@@ -530,6 +531,8 @@ export const DATE_TIME_FORMATS = {
     DD_MMM_YYYY: 'DD MMM YYYY',
 }
 
+export const SEMANTIC_VERSION_DOCUMENTATION_LINK = 'https://semver.org/'
+
 export const VULNERABILITIES_SORT_PRIORITY = {
     critical: 1,
     high: 2,

src/Common/Common.service.ts

@@ -17,6 +17,7 @@
 import { CustomInputProps } from './Types'
 import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled-override.svg'
 import { ReactComponent as ErrorIcon } from '../../Assets/Icon/ic-warning.svg'
+import { useEffect, useRef } from 'react'
 
 export const CustomInput = ({
     name,
@@ -39,7 +40,6 @@ export const CustomInput = ({
     handleOnBlur,
     readOnly = false,
     noTrim = false,
-    ref,
     onKeyPress,
     defaultValue,
     onKeyDown,
@@ -48,6 +48,17 @@ export const CustomInput = ({
     inputWrapClassName = '',
     inputProps = {},
 }: CustomInputProps) => {
+    const inputRef = useRef<HTMLInputElement>()
+
+    useEffect(() => {
+        setTimeout(() => {
+            // Added timeout to ensure the autofocus code is executed post the re-renders
+            if (inputRef.current && autoFocus) {
+                inputRef.current.focus()
+            }
+        }, 100)
+    }, [autoFocus])
+
     function handleError(error: any): any[] {
         if (!Array.isArray(error)) {
             return [error]
@@ -68,9 +79,9 @@ export const CustomInput = ({
     }
 
     const renderFormErrorWithIcon = (error: string) => (
-        <div className="form__error" key={error}>
-            <ErrorIcon className="form__icon form__icon--error" />
-            {error}
+        <div className="flex left mt-4 mb-4 dc__gap-4 cr-5 fs-11 lh-16 fw-4" key={error}>
+            <ErrorIcon className="icon-dim-16 p-1 form__icon--error dc__align-self-start dc__no-shrink" />
+            <span>{error}</span>
             {error && typeof additionalErrorInfo === 'function' && additionalErrorInfo()}
         </div>
     )
@@ -124,18 +135,18 @@ export const CustomInput = ({
                 tabIndex={tabIndex}
                 autoFocus={autoFocus}
                 readOnly={readOnly}
-                ref={ref}
                 onKeyPress={onKeyPress}
                 defaultValue={defaultValue}
                 onKeyDown={onKeyDown}
                 required={required}
                 // Will be passing other props like other data attributes etc from inputProps
                 {...inputProps}
+                ref={inputRef}
             />
 
             {getInputError()}
             {helperText && (
-                <div className="flex left top dc__gap-4 fs-11 lh-16 cn-7 mt-4">
+                <div className="flex left top dc__gap-4 fs-11 lh-16 cn-7 pt-4">
                     <Info className="icon-dim-16" />
                     <div>{helperText}</div>
                 </div>

src/Common/Constants.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react'
+import React, { HTMLInputTypeAttribute, InputHTMLAttributes, ReactNode } from 'react'
 
 export interface CustomInputProps {
     name: string
@@ -33,11 +33,10 @@ export interface CustomInputProps {
     autoFocus?: boolean
     rootClassName?: string
     error?: string[] | string
-    helperText?: string
+    helperText?: ReactNode
     handleOnBlur?: (e) => void
     readOnly?: boolean
     noTrim?: boolean
-    ref?: React.LegacyRef<HTMLInputElement>
     onKeyPress?: (e) => void
     defaultValue?: string | number | ReadonlyArray<string> | undefined
     onKeyDown?: (e) => void

src/Common/CustomInput/CustomInput.tsx

@@ -17,6 +17,7 @@
 import React, { useEffect } from 'react'
 import ReactDOM from 'react-dom'
 import { ModalType } from '../Types'
+import { POP_UP_MENU_MODAL_ID } from '@Shared/constants'
 
 /**
  * @deprecated Use VisibleModal instead
@@ -78,7 +79,7 @@ export const Modal = ({
                 innerRef.current = el
             }}
             id="popup"
-            className={`${rootClassName} popup ${modal ? 'modal' : ''}`}
+            className={`${rootClassName} ${POP_UP_MENU_MODAL_ID} ${modal ? 'modal' : ''}`}
             style={{ ...style }}
         >
             {children}

src/Common/CustomInput/Types.ts

@@ -16,11 +16,11 @@
 
 import React, { SyntheticEvent } from 'react'
 import ReactDOM from 'react-dom'
-import { preventBodyScroll } from '../../Shared'
+import { POP_UP_MENU_MODAL_ID, preventBodyScroll } from '../../Shared'
 import { stopPropagation } from '../Helper'
 
 export class VisibleModal extends React.Component<{
-    className: string
+    className?: string
     parentClassName?: string
     noBackground?: boolean
     close?: (e) => void
@@ -46,6 +46,7 @@ export class VisibleModal extends React.Component<{
 
     componentDidMount() {
         document.addEventListener('keydown', this.escFunction)
+        // show is also being used in modal (i.e, pop up menu for case where we have noBackground as false, so it works in syc with VisibleModal with noBackground as false)
         this.modalRef.classList.add(this.props.noBackground ? 'show' : 'show-with-bg')
         preventBodyScroll(true)
 
@@ -66,6 +67,10 @@ export class VisibleModal extends React.Component<{
     }
 
     handleBodyClick = (e: SyntheticEvent) => {
+        const isPopupMenuPresent = document.getElementById(POP_UP_MENU_MODAL_ID)
+        if (isPopupMenuPresent) {
+            return
+        }
         e.stopPropagation()
 
         this.props.close?.(e)
@@ -74,7 +79,7 @@ export class VisibleModal extends React.Component<{
     render() {
         return ReactDOM.createPortal(
             <div
-                className={`visible-modal__body ${this.props.className}`}
+                className={`visible-modal__body ${this.props.className || ''}`}
                 onClick={this.handleBodyClick}
                 data-testid="visible-modal-close"
             >

src/Common/Modals/Modal.tsx

@@ -19,7 +19,7 @@ import ReactDOM from 'react-dom'
 import { preventBodyScroll } from '../../Shared'
 import { stopPropagation } from '../Helper'
 
-export class VisibleModal2 extends React.Component<{ className: string; close?: (e) => void }> {
+export class VisibleModal2 extends React.Component<{ className?: string; close?: (e) => void }> {
     modalRef = document.getElementById('visible-modal-2')
 
     constructor(props) {
@@ -55,7 +55,7 @@ export class VisibleModal2 extends React.Component<{ className: string; close?:
     render() {
         return ReactDOM.createPortal(
             <div
-                className={`visible-modal__body ${this.props.className}`}
+                className={`visible-modal__body ${this.props.className || ''}`}
                 onClick={this.handleBodyClick}
                 data-testid="visible-modal2-close"
             >