Merge branch 'develop' into feat/replace-select-picker

Author: shivani170

.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.24-beta-5",
+    "version": "0.2.31-beta-1",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -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/Assets/Icon/ic-arrow-right.svg

@@ -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

@@ -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,13 +135,13 @@ 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()}

src/Common/Common.service.ts

@@ -37,7 +37,6 @@ export interface CustomInputProps {
     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

@@ -136,7 +136,7 @@ const SearchBar = ({
                     type="text"
                     {...inputProps}
                     defaultValue={initialSearchText}
-                    className={`search-bar__input  dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 ${
+                    className={`search-bar__input  dc__position-abs w-100 h-100 br-4 dc__no-border pt-6 pr-10 pb-6 pl-30 fs-13 lh-20 fw-4 cn-9 placeholder-cn5 dc__left-0 ${
                         showClearButton ? 'pr-30' : 'pr-10'
                     } ${noBackgroundAndBorder ? 'dc__no-background' : 'bc-n50'}`}
                     onChange={handleChange}

src/Common/CustomInput/Types.ts

@@ -28,7 +28,7 @@ const Tooltip = ({
             arrow={false}
             placement="top"
             {...rest}
-            className={`default-tt ${wordBreak ? 'dc__word-break-all' : ''} dc__mxw-200 ${rest.className}`}
+            className={`default-tt ${wordBreak ? 'dc__word-break-all' : ''} dc__mxw-200-imp ${rest.className}`}
         >
             {cloneElement(child, { ...child.props, ref: refCallback })}
         </TippyJS>