Merge branch 'develop' into feat/misc-cluster-map

Author: shivani170

.eslintignore

@@ -15,7 +15,6 @@ src/Common/CodeEditor/CodeEditor.tsx
 src/Common/Common.service.ts
 src/Common/CustomInput/CustomInput.tsx
 src/Common/CustomTagSelector/PropagateTagInfo.tsx
-src/Common/CustomTagSelector/ResizableTagTextArea.tsx
 src/Common/CustomTagSelector/TagDetails.tsx
 src/Common/CustomTagSelector/TagLabelSelect.tsx
 src/Common/CustomTagSelector/TagLabelValueSelector.tsx

.gitignore

@@ -105,3 +105,4 @@ typings/
 
 .DS_Store
 .npmrc
+.build-cache

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.2.5-beta-12",
+    "version": "1.2.7",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -48,7 +48,7 @@
         "@typescript-eslint/eslint-plugin": "8.3.0",
         "@typescript-eslint/parser": "8.3.0",
         "@vitejs/plugin-react": "4.3.1",
-        "eslint": "^8.56.0",
+        "eslint": "^8.57.1",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-prettier": "^9.1.0",
         "eslint-import-resolver-typescript": "^3.6.1",
@@ -107,6 +107,7 @@
         "tslib": "2.7.0"
     },
     "overrides": {
+        "cross-spawn": "^7.0.5",
         "react-dates": {
             "react": "^17.0.2",
             "react-dom": "^17.0.2"

package.json

@@ -150,7 +150,14 @@ async function fetchAPI<K = object>(
                     })
                 } else {
                     handleLogout()
-                    return { code: 401, status: 'Unauthorized', result: [] }
+                    // Using this way to ensure that the user is redirected to the login page
+                    // and the component has enough time to get unmounted otherwise the component re-renders
+                    // and try to access some property of a variable and log exception to sentry
+                    return await new Promise((resolve) => {
+                        setTimeout(() => {
+                            resolve({ code: 401, status: 'Unauthorized', result: [] })
+                        }, 1000)
+                    })
                 }
             } else if (response.status >= 300 && response.status <= 599) {
                 return await handleServerError(contentType, response)

src/Assets/Icon/ic-clear-square.svg

@@ -14,95 +14,110 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useState } from 'react'
-import { useThrottledEffect } from '../Helper'
+import { useEffect } from 'react'
+
+import { useThrottledEffect } from '@Common/Helper'
+
 import { ResizableTagTextAreaProps } from './Types'
 
 export const ResizableTagTextArea = ({
-    className,
+    value,
     minHeight,
     maxHeight,
-    value,
-    onChange,
     onBlur,
     onFocus,
-    placeholder,
-    tabIndex,
     refVar,
     dependentRef,
-    dataTestId,
-    handleKeyDown,
-    disabled,
+    dependentRefs,
+    className = '',
     disableOnBlurResizeToMinHeight,
+    id,
+    ...restProps
 }: ResizableTagTextAreaProps) => {
-    const [text, setText] = useState(value ?? '')
+    const updateDependentRefsHeight = (height: number) => {
+        const refElement = dependentRef?.current
+        if (refElement) {
+            refElement.style.height = `${height}px`
+        }
 
-    useEffect(() => {
-        setText(value)
-    }, [value])
+        Object.values(dependentRefs || {}).forEach((ref) => {
+            const dependentRefElement = ref?.current
+            if (dependentRefElement) {
+                dependentRefElement.style.height = `${height}px`
+            }
+        })
+    }
 
-    const handleChange = (event) => {
-        setText(event.target.value)
-        onChange?.(event)
+    const updateRefsHeight = (height: number) => {
+        const refElement = refVar?.current
+        if (refElement) {
+            refElement.style.height = `${height}px`
+        }
+        updateDependentRefsHeight(height)
     }
 
     const reInitHeight = () => {
-        refVar.current.style.height = `${minHeight}px`
+        updateRefsHeight(minHeight || 0)
+
+        let nextHeight = refVar?.current?.scrollHeight || 0
+
         if (dependentRef) {
-            dependentRef.current.style.height = `${minHeight}px`
+            const refElement = dependentRef.current
+            if (refElement && refElement.scrollHeight > nextHeight) {
+                nextHeight = refElement.scrollHeight
+            }
         }
-        let nextHeight = refVar.current.scrollHeight
-        if (dependentRef && nextHeight < dependentRef.current.scrollHeight) {
-            nextHeight = dependentRef.current.scrollHeight
+
+        if (dependentRefs) {
+            Object.values(dependentRefs).forEach((ref) => {
+                const refElement = ref.current
+                if (refElement && refElement.scrollHeight > nextHeight) {
+                    nextHeight = refElement.scrollHeight
+                }
+            })
         }
+
         if (minHeight && nextHeight < minHeight) {
             nextHeight = minHeight
         }
+
         if (maxHeight && nextHeight > maxHeight) {
             nextHeight = maxHeight
         }
-        refVar.current.style.height = `${nextHeight}px`
-        if (dependentRef) {
-            dependentRef.current.style.height = `${nextHeight}px`
-        }
+
+        updateRefsHeight(nextHeight)
     }
 
     useEffect(() => {
         reInitHeight()
     }, [])
 
-    useThrottledEffect(reInitHeight, 500, [text])
+    useThrottledEffect(reInitHeight, 500, [value])
 
     const handleOnBlur = (event) => {
         if (!disableOnBlurResizeToMinHeight) {
-            refVar.current.style.height = `${minHeight}px`
-            if (dependentRef) {
-                dependentRef.current.style.height = `${minHeight}px`
-            }
+            updateRefsHeight(minHeight)
         }
-        onBlur && onBlur(event)
+        onBlur?.(event)
     }
 
     const handleOnFocus = (event) => {
         reInitHeight()
-        onFocus && onFocus(event)
+        onFocus?.(event)
     }
 
     return (
         <textarea
+            {...restProps}
+            id={id}
+            data-testid={id}
             rows={1}
             ref={refVar}
-            value={text}
-            placeholder={placeholder}
+            value={value}
             className={`${className || ''} lh-20`}
             style={{ resize: 'none' }}
-            onChange={handleChange}
             onBlur={handleOnBlur}
             onFocus={handleOnFocus}
-            tabIndex={tabIndex}
-            data-testid={dataTestId}
-            onKeyDown={handleKeyDown}
-            disabled={disabled}
         />
     )
 }

src/Common/Api.ts

@@ -192,7 +192,7 @@ export const TagLabelValueSelector = ({
                     tabIndex={tabIndex}
                     refVar={refVar}
                     dependentRef={dependentRef}
-                    dataTestId={`tag-${tagInputType === KEY_VALUE.KEY ? 'key' : 'value'}-${selectedTagIndex}`}
+                    id={`tag-${tagInputType === KEY_VALUE.KEY ? 'key' : 'value'}-${selectedTagIndex}`}
                 />
             </PopupMenu.Button>
             {popupMenuBody && (

src/Common/CustomTagSelector/ResizableTagTextArea.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { DetailedHTMLProps, MutableRefObject, TextareaHTMLAttributes } from 'react'
 import { KEY_VALUE } from '../Constants'
 import { OptionType } from '../Types'
 
@@ -68,25 +69,18 @@ export interface TagLabelValueSelectorType {
     tagInputType?: KEY_VALUE
     placeholder?: string
     tabIndex?: number
-    refVar?: React.MutableRefObject<HTMLTextAreaElement>
-    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
+    refVar?: MutableRefObject<HTMLTextAreaElement>
+    dependentRef?: MutableRefObject<HTMLTextAreaElement>
     noBackDrop?: boolean
 }
 
-export interface ResizableTagTextAreaProps {
-    className?: string
+export interface ResizableTagTextAreaProps
+    extends Omit<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'value'> {
     minHeight?: number
     maxHeight?: number
-    value?: string
-    onChange?: (e) => void
-    onBlur?: (e) => void
-    onFocus?: (e) => void
-    placeholder?: string
-    tabIndex?: number
-    refVar?: React.MutableRefObject<HTMLTextAreaElement>
-    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
-    dataTestId?: string
-    handleKeyDown?: any
-    disabled?: boolean
+    value: string
+    refVar?: MutableRefObject<HTMLTextAreaElement>
+    dependentRef?: MutableRefObject<HTMLTextAreaElement>
+    dependentRefs?: Record<string | number, MutableRefObject<HTMLTextAreaElement>>
     disableOnBlurResizeToMinHeight?: boolean
 }

src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -511,7 +511,7 @@ export const getUrlWithSearchParams = <T extends string | number = string | numb
 /**
  * Custom exception logger function for logging errors to sentry
  */
-export const logExceptionToSentry = Sentry.captureException.bind(window)
+export const logExceptionToSentry: typeof Sentry.captureException  = Sentry.captureException.bind(window)
 
 export const customStyles = {
     control: (base, state) => ({