Merge pull request #488 from devtron-labs/refactor/dynamic-data-table

refactor: dynamic data table

Author: RohitRaj011

package-lock.json

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

package.json

@@ -35,7 +35,8 @@ export const DOCUMENTATION = {
 export const PATTERNS = {
     STRING: /^[a-zA-Z0-9_]+$/,
     DECIMAL_NUMBERS: /^-?\d*\.?\d*$/,
-    NATURAL_NUMBERS: /^\d*\.?\d*$/,
+    POSITIVE_DECIMAL_NUMBERS: /^\d*\.?\d*$/,
+    NATURAL_NUMBERS: /^[1-9]\d*$/,
     KUBERNETES_KEY_PREFIX: /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/,
     KUBERNETES_KEY_NAME: /^(([A-Za-z0-9][-A-Za-z0-9_.]*)?[A-Za-z0-9])$/,
     START_END_ALPHANUMERIC: /^(([A-Za-z0-9].*[A-Za-z0-9])|[A-Za-z0-9])$/,

src/Common/Constants.ts

@@ -176,8 +176,10 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
                             isClearable
                             {...props}
                             variant={SelectPickerVariantType.BORDER_LESS}
-                            classNamePrefix="dynamic-data-table__cell__select-picker"
+                            classNamePrefix="dynamic-data-table__cell__select-picker-text-area"
                             inputId={`data-table-${row.id}-${key}-cell`}
+                            minHeight={20}
+                            maxHeight={160}
                             value={getSelectPickerOptionByValue(
                                 props?.options,
                                 value,
@@ -186,6 +188,8 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
                             onChange={onChange(row, key)}
                             isDisabled={isDisabled}
                             formatCreateLabel={(input) => `Use ${input}`}
+                            refVar={cellRef?.current?.[row.id]?.[key]}
+                            dependentRefs={cellRef?.current?.[row.id]}
                             fullWidth
                         />
                     </div>
@@ -299,7 +303,7 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
                 plugins={[followCursor]}
             >
                 <div
-                    className={`dynamic-data-table__cell bcn-0 flexbox dc__align-items-center dc__gap-4 dc__position-rel ${isDisabled ? 'dc__disabled no-hover' : ''} ${!isDisabled && hasError ? 'dynamic-data-table__cell--error no-hover' : ''} ${!rowTypeHasInputField(row.data[key].type) ? 'no-hover no-focus' : ''}`}
+                    className={`dynamic-data-table__cell bcn-0 flexbox dc__align-items-center dc__gap-4 dc__position-rel ${isDisabled ? 'cursor-not-allowed no-hover' : ''} ${!isDisabled && hasError ? 'dynamic-data-table__cell--error no-hover' : ''} ${!rowTypeHasInputField(row.data[key].type) ? 'no-hover no-focus' : ''}`}
                 >
                     {renderCellIcon(row, key, true)}
                     {renderCellContent(row, key)}

src/Shared/Components/DynamicDataTable/DynamicDataTableRow.tsx

@@ -86,6 +86,38 @@
             max-height: 160px !important;
         }
 
+        &__select-picker-text-area {
+            &__control {
+                padding: 0 !important;
+                max-height: 160px !important;
+            }
+
+            &__placeholder {
+                align-self: start;
+                padding: 8px 50px 8px 8px;
+            }
+
+            &__indicators {
+                position: absolute;
+                top: 10px;
+                right: 8px;
+            }
+
+            &__input-container {
+                display: flex !important;
+                width: 100%;
+
+                &::after {
+                    content: none !important;
+                }
+            }
+
+            &__input {
+                flex-grow: 1;
+                padding: 8px 50px 8px 8px !important;
+            }
+        }
+
         &:hover:not(:focus-within):not(.no-hover) {
             outline: 1px solid var(--N200);
         }

src/Shared/Components/DynamicDataTable/styles.scss

@@ -63,14 +63,25 @@ export type DynamicDataTableCellPropsMap = {
         | 'disableOnBlurResizeToMinHeight'
         | 'refVar'
         | 'dependentRef'
+        | 'dependentRefs'
     >
     [DynamicDataTableRowDataType.DROPDOWN]: Omit<
         SelectPickerProps<string, false>,
         'inputId' | 'value' | 'onChange' | 'fullWidth' | 'isDisabled'
     >
     [DynamicDataTableRowDataType.SELECT_TEXT]: Omit<
         SelectPickerTextAreaProps,
-        'inputId' | 'value' | 'onChange' | 'fullWidth' | 'isDisabled' | 'variant' | 'formatCreateLabel'
+        | 'inputId'
+        | 'value'
+        | 'onChange'
+        | 'fullWidth'
+        | 'isDisabled'
+        | 'variant'
+        | 'formatCreateLabel'
+        | 'minHeight'
+        | 'maxHeight'
+        | 'refVar'
+        | 'dependentRefs'
     >
     [DynamicDataTableRowDataType.BUTTON]: Pick<
         DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,

src/Shared/Components/DynamicDataTable/types.ts

@@ -44,7 +44,6 @@ import {
     SelectPickerOption,
     SelectPickerValueContainer,
     SelectPickerInput,
-    SelectPickerIndicatorsContainer,
 } from './common'
 import { SelectPickerOptionType, SelectPickerProps, SelectPickerVariantType } from './type'
 import { GenericSectionErrorState } from '../GenericSectionErrorState'
@@ -441,7 +440,6 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                                 Control: SelectPickerControl,
                                 Option: renderOption,
                                 MenuList: SelectPickerMenuList,
-                                IndicatorsContainer: SelectPickerIndicatorsContainer,
                                 ClearIndicator: SelectPickerClearIndicator,
                                 ValueContainer: renderValueContainer,
                                 MultiValueLabel: renderMultiValueLabel,
@@ -467,7 +465,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                             onKeyDown={handleKeyDown}
                             shouldRenderTextArea={shouldRenderTextArea}
                             customDisplayText={customDisplayText}
-                            onFocus={handleFocus}
+                            {...(!shouldRenderTextArea ? { onFocus: handleFocus } : {})}
                             onBlur={handleBlur}
                             onChange={handleChange}
                             controlShouldRenderValue={controlShouldRenderValue}

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 import { InputActionMeta, SelectInstance, SingleValue } from 'react-select'
 
 import { ReactSelectInputAction } from '@Common/Constants'
+import { useThrottledEffect } from '@Common/Helper'
 
 import SelectPicker from './SelectPicker.component'
 import { SelectPickerOptionType, SelectPickerTextAreaProps } from './type'
@@ -11,6 +12,10 @@ export const SelectPickerTextArea = ({
     options,
     isCreatable,
     onChange,
+    minHeight,
+    maxHeight,
+    refVar,
+    dependentRefs,
     ...props
 }: SelectPickerTextAreaProps) => {
     // STATES
@@ -19,12 +24,63 @@ export const SelectPickerTextArea = ({
     // REFS
     const selectRef = useRef<SelectInstance<SelectPickerOptionType<string>>>(null)
 
+    useEffect(() => {
+        const inputRef = refVar
+        if (inputRef) {
+            inputRef.current = selectRef.current.inputRef as unknown as HTMLTextAreaElement
+        }
+    }, [refVar])
+
     useEffect(() => {
         const selectValue = value as SingleValue<SelectPickerOptionType<string>>
         setInputValue(selectValue?.value || '')
     }, [value])
 
     // METHODS
+    const updateDependentRefsHeight = (height: number) => {
+        Object.values(dependentRefs || {}).forEach((ref) => {
+            const dependentRefElement = ref?.current
+            if (dependentRefElement) {
+                dependentRefElement.style.height = `${height}px`
+            }
+        })
+    }
+
+    const updateRefsHeight = (height: number) => {
+        const refElement = refVar?.current
+        if (refElement) {
+            refElement.style.height = `${height}px`
+        }
+        updateDependentRefsHeight(height)
+    }
+
+    const reInitHeight = () => {
+        updateRefsHeight(minHeight || 0)
+
+        let nextHeight = refVar?.current?.scrollHeight || 0
+
+        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
+        }
+
+        updateRefsHeight(nextHeight)
+    }
+
+    useThrottledEffect(reInitHeight, 500, [inputValue])
+
     const onInputChange = (newValue: string, { action }: InputActionMeta) => {
         if (action === ReactSelectInputAction.inputChange) {
             setInputValue(newValue)
@@ -62,24 +118,27 @@ export const SelectPickerTextArea = ({
             setInputValue(updatedText)
 
             const textarea = selectRef.current.inputRef
-            const wrapper = selectRef.current.controlRef
 
-            // Get the caret position relative to the scrollable area
-            const lineHeight = parseInt(getComputedStyle(textarea).lineHeight, 10)
+            // Get the caret position
             const caretPosition = textarea.selectionStart
-            const linesAboveCaret = textarea.value.substring(0, caretPosition).split('\n').length
 
-            // Estimate caret position by line height
-            const caretY = linesAboveCaret * lineHeight
-            const scrollOffset = caretY - wrapper.scrollTop
+            // Split the text up to the caret position into lines
+            const textBeforeCaret = textarea.value.substring(0, caretPosition)
+            const lines = textBeforeCaret.split('\n')
+
+            // Calculate the caret position in pixels
+            const lineHeight = parseInt(getComputedStyle(textarea).lineHeight, 10)
+            const caretY = lines.length * lineHeight
+
+            // Check if caret is outside of the visible area
+            const scrollOffset = caretY - textarea.scrollTop
 
-            // Adjust scroll to ensure caret is visible
             if (scrollOffset < 0) {
-                // Scroll up
-                wrapper.scrollTop += scrollOffset
-            } else if (scrollOffset > wrapper.offsetHeight - lineHeight) {
-                // Scroll down
-                wrapper.scrollTop += scrollOffset - wrapper.offsetHeight + lineHeight
+                // Scroll up if the caret is above the visible area
+                textarea.scrollTop += scrollOffset
+            } else if (scrollOffset > textarea.offsetHeight - lineHeight) {
+                // Scroll down if the caret is below the visible area
+                textarea.scrollTop += scrollOffset - textarea.offsetHeight + lineHeight
             }
 
             // Move the cursor to the next line

src/Shared/Components/SelectPicker/SelectPickerTextArea.component.tsx

@@ -26,7 +26,6 @@ import {
     MultiValueProps,
     MultiValue,
     InputProps,
-    IndicatorsContainerProps,
 } from 'react-select'
 import { Progressing } from '@Common/Progressing'
 import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
@@ -62,30 +61,22 @@ const getTooltipProps = (tooltipProps: SelectPickerOptionType['tooltipProps'] =
     }
 }
 
-export const SelectPickerIndicatorsContainer = <OptionValue,>({
-    className = '',
-    ...props
-}: IndicatorsContainerProps<SelectPickerOptionType<OptionValue>>) => (
-    <components.IndicatorsContainer {...props} className={`${className} dc__position-sticky dc__top-0 pt-2`} />
-)
-
 export const SelectPickerDropdownIndicator = <OptionValue,>(
     props: DropdownIndicatorProps<SelectPickerOptionType<OptionValue>>,
 ) => {
-    const { isDisabled, className = '' } = props
+    const { isDisabled } = props
 
     return (
-        <components.DropdownIndicator {...props} className={`${className} dc__align-self-start`}>
+        <components.DropdownIndicator {...props}>
             <ICCaretDown className={isDisabled ? 'scn-3' : 'scn-6'} />
         </components.DropdownIndicator>
     )
 }
 
-export const SelectPickerClearIndicator = <OptionValue,>({
-    className = '',
-    ...props
-}: ClearIndicatorProps<SelectPickerOptionType<OptionValue>>) => (
-    <components.ClearIndicator {...props} className={`${className} dc__align-self-start`}>
+export const SelectPickerClearIndicator = <OptionValue,>(
+    props: ClearIndicatorProps<SelectPickerOptionType<OptionValue>>,
+) => (
+    <components.ClearIndicator {...props}>
         <ICClose className="icon-use-fill-n6" />
     </components.ClearIndicator>
 )
@@ -136,9 +127,14 @@ export const SelectPickerValueContainer = <OptionValue, IsMulti extends boolean>
     }) => {
     const {
         getValue,
-        selectProps: { customDisplayText },
+        selectProps: { customDisplayText, shouldRenderTextArea },
         children,
     } = props
+
+    if (shouldRenderTextArea) {
+        return <components.ValueContainer {...props} />
+    }
+
     const selectedOptionsLength = isNullOrUndefined(customSelectedOptionsCount)
         ? (getValue() ?? []).length
         : customSelectedOptionsCount

src/Shared/Components/SelectPicker/common.tsx

@@ -23,6 +23,7 @@ import { CreatableProps } from 'react-select/creatable'
 // This import allows to extend the base interface in react-select module via module augmentation
 import type {} from 'react-select/base'
 import { TooltipProps } from '@Common/Tooltip/types'
+import { ResizableTagTextAreaProps } from '@Common/CustomTagSelector'
 
 export interface SelectPickerOptionType<OptionValue = string | number> extends OptionType<OptionValue, ReactNode> {
     /**
@@ -307,14 +308,14 @@ export interface FilterSelectPickerProps
     handleApplyFilter: (filtersToApply: SelectPickerOptionType<number | string>[]) => void
 }
 
-export interface SelectPickerTextAreaProps
-    extends Omit<
-        SelectPickerProps<string, false>,
-        | 'selectRef'
-        | 'inputValue'
-        | 'onInputChange'
-        | 'controlShouldRenderValue'
-        | 'onKeyDown'
-        | 'onCreateOption'
-        | 'shouldRenderTextArea'
-    > {}
+export type SelectPickerTextAreaProps = Omit<
+    SelectPickerProps<string, false>,
+    | 'selectRef'
+    | 'inputValue'
+    | 'onInputChange'
+    | 'controlShouldRenderValue'
+    | 'onKeyDown'
+    | 'onCreateOption'
+    | 'shouldRenderTextArea'
+> &
+    Pick<ResizableTagTextAreaProps, 'maxHeight' | 'minHeight' | 'refVar' | 'dependentRefs'>