Merge branch 'feat/approval-policy' of github.com:devtron-labs/devtron-fe-common-lib into fix/approval-policy

Author: eshankvaish

.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

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/CustomTagSelector/ResizableTagTextArea.tsx

@@ -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/TagLabelValueSelector.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/Types.ts

@@ -4,15 +4,15 @@
  * 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'