refactor: Multiple improvements and review fixes

Author: RohitRaj011

src/Common/CustomTagSelector/ResizableTagTextArea.tsx

@@ -24,54 +24,68 @@ export const ResizableTagTextArea = ({
     value,
     minHeight,
     maxHeight,
-    dataTestId,
     onBlur,
     onFocus,
     refVar,
     dependentRef,
+    dependentRefs,
     className = '',
     disableOnBlurResizeToMinHeight,
-    ...resProps
+    id,
+    ...restProps
 }: ResizableTagTextAreaProps) => {
-    const updateRefHeight = (height: number) => {
-        const refElement = refVar?.current
+    const updateDependentRefsHeight = (height: number) => {
+        const refElement = dependentRef?.current
         if (refElement) {
             refElement.style.height = `${height}px`
         }
+
+        Object.values(dependentRefs || {}).forEach((ref) => {
+            const dependentRefElement = ref?.current
+            if (dependentRefElement) {
+                dependentRefElement.style.height = `${height}px`
+            }
+        })
     }
 
-    const updateDependentRefsHeight = (height: number) => {
-        if (dependentRef) {
-            Object.values(Array.isArray(dependentRef) ? dependentRef : [dependentRef]).forEach((ref) => {
-                const refElement = ref.current
-                if (refElement) {
-                    refElement.style.height = `${height}px`
-                }
-            })
+    const updateRefsHeight = (height: number) => {
+        const refElement = refVar?.current
+        if (refElement) {
+            refElement.style.height = `${height}px`
         }
+        updateDependentRefsHeight(height)
     }
 
     const reInitHeight = () => {
-        updateRefHeight(minHeight || 0)
-        updateDependentRefsHeight(minHeight || 0)
+        updateRefsHeight(minHeight || 0)
 
         let nextHeight = refVar?.current?.scrollHeight || 0
+
         if (dependentRef) {
-            Object.values(Array.isArray(dependentRef) ? dependentRef : [dependentRef]).forEach((ref) => {
+            const refElement = dependentRef.current
+            if (refElement && refElement.scrollHeight > nextHeight) {
+                nextHeight = refElement.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
         }
-        updateRefHeight(nextHeight)
-        updateDependentRefsHeight(nextHeight)
+
+        updateRefsHeight(nextHeight)
     }
 
     useEffect(() => {
@@ -82,8 +96,7 @@ export const ResizableTagTextArea = ({
 
     const handleOnBlur = (event) => {
         if (!disableOnBlurResizeToMinHeight) {
-            updateRefHeight(minHeight)
-            updateDependentRefsHeight(minHeight)
+            updateRefsHeight(minHeight)
         }
         onBlur?.(event)
     }
@@ -95,15 +108,16 @@ export const ResizableTagTextArea = ({
 
     return (
         <textarea
-            {...resProps}
+            {...restProps}
+            id={id}
+            data-testid={id}
             rows={1}
             ref={refVar}
             value={value}
             className={`${className || ''} lh-20`}
             style={{ resize: 'none' }}
             onBlur={handleOnBlur}
             onFocus={handleOnFocus}
-            data-testid={dataTestId}
         />
     )
 }

src/Common/CustomTagSelector/TagLabelValueSelector.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/Types.ts

@@ -80,9 +80,7 @@ export interface ResizableTagTextAreaProps
     maxHeight?: number
     value: string
     refVar?: MutableRefObject<HTMLTextAreaElement>
-    dependentRef?:
-        | MutableRefObject<HTMLTextAreaElement>
-        | Record<string | number, MutableRefObject<HTMLTextAreaElement>>
-    dataTestId?: string
+    dependentRef?: MutableRefObject<HTMLTextAreaElement>
+    dependentRefs?: Record<string | number, MutableRefObject<HTMLTextAreaElement>>
     disableOnBlurResizeToMinHeight?: boolean
 }

src/Shared/Components/DynamicDataTable/DynamicDataTableHeader.tsx

@@ -34,6 +34,8 @@ export const DynamicDataTableHeader = <K extends string>({
     const isActionButtonAtTheStart =
         getActionButtonPosition({ headers, actionButtonConfig }) === 0 && actionButtonConfig.position !== 'end'
 
+    const handleSorting = (key: K) => () => sortingConfig?.handleSorting(key)
+
     // RENDERERS
     const renderHeaderCell = ({ key, label, isSortable }: DynamicDataTableHeaderType<K>) => (
         <div
@@ -44,7 +46,7 @@ export const DynamicDataTableHeader = <K extends string>({
                 <button
                     type="button"
                     className="cn-7 fs-12 lh-20-imp fw-6 flexbox dc__align-items-center dc__gap-2 dc__transparent"
-                    onClick={sortingConfig?.handleSorting}
+                    onClick={handleSorting(key)}
                 >
                     {label}
                     <ICArrowDown
@@ -78,7 +80,7 @@ export const DynamicDataTableHeader = <K extends string>({
     return (
         <div className={`bcn-2 p-1 ${hasRows ? 'dc__top-radius-4' : 'br-4'}`}>
             <div
-                className="dynamic-data-table two-columns w-100 bcn-1 br-4"
+                className="dynamic-data-table header-column w-100 bcn-1 br-4"
                 style={{ gridTemplateColumns: headerGridTemplateColumn }}
             >
                 <div className="dynamic-data-table__row">

src/Shared/Components/DynamicDataTable/DynamicDataTableRow.tsx

@@ -2,8 +2,7 @@ import { createElement, createRef, Fragment, ReactElement, RefObject, useEffect,
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { followCursor } from 'tippy.js'
 
-import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
-import { DEFAULT_SECRET_PLACEHOLDER } from '@Shared/constants'
+import { ReactComponent as ICCross } from '@Icons/ic-cross.svg'
 import { Tooltip } from '@Common/Tooltip'
 
 import { ConditionalWrap } from '@Common/Helper'
@@ -32,7 +31,6 @@ const conditionalWrap =
 export const DynamicDataTableRow = <K extends string>({
     rows = [],
     headers,
-    maskValue,
     readOnly,
     isAdditionNotAllowed,
     isDeletionNotAllowed,
@@ -122,6 +120,7 @@ export const DynamicDataTableRow = <K extends string>({
                         <SelectPicker<string, false>
                             {...row.data[key].props}
                             inputId={`data-table-${row.id}-${key}-cell`}
+                            classNamePrefix="dynamic-data-table__cell__select-picker"
                             variant={SelectPickerVariantType.BORDER_LESS}
                             value={getSelectPickerOptionByValue(row.data[key].props?.options, row.data[key].value)}
                             onChange={onChange(row, key)}
@@ -140,7 +139,10 @@ export const DynamicDataTableRow = <K extends string>({
                             inputId={`data-table-${row.id}-${key}-cell`}
                             disabled={readOnly || row.data[key].disabled}
                             refVar={cellRef?.current?.[row.id]?.[key]}
-                            dependentRef={cellRef?.current?.[row.id]}
+                            dependentRefs={cellRef?.current?.[row.id]}
+                            selectPickerProps={{
+                                classNamePrefix: 'dynamic-data-table__cell__select-picker',
+                            }}
                             textAreaProps={{
                                 ...row.data[key].props?.textAreaProps,
                                 className: 'dynamic-data-table__cell-input placeholder-cn5 py-8 pr-8 cn-9 fs-13 lh-20',
@@ -172,14 +174,15 @@ export const DynamicDataTableRow = <K extends string>({
                 return (
                     <ResizableTagTextArea
                         {...row.data[key].props}
+                        id={`data-table-${row.id}-${key}-cell`}
                         className={`dynamic-data-table__cell-input placeholder-cn5 p-8 cn-9 fs-13 lh-20 dc__align-self-start dc__no-border-radius ${readOnly || row.data[key].disabled ? 'cursor-not-allowed' : ''}`}
                         minHeight={20}
                         maxHeight={160}
                         value={row.data[key].value}
                         onChange={onChange(row, key)}
                         disabled={readOnly || row.data[key].disabled}
                         refVar={cellRef?.current?.[row.id]?.[key]}
-                        dependentRef={cellRef?.current?.[row.id]}
+                        dependentRefs={cellRef?.current?.[row.id]}
                         disableOnBlurResizeToMinHeight
                     />
                 )
@@ -206,7 +209,7 @@ export const DynamicDataTableRow = <K extends string>({
 
     const renderErrorMessage = (errorMessage: string) => (
         <div key={errorMessage} className="flexbox align-items-center dc__gap-4">
-            <ICClose className="icon-dim-16 fcr-5 dc__align-self-start dc__no-shrink" />
+            <ICCross className="icon-dim-16 fcr-5 dc__align-self-start dc__no-shrink" />
             <p className="fs-12 lh-16 cn-7 m-0">{errorMessage}</p>
         </div>
     )
@@ -236,17 +239,11 @@ export const DynamicDataTableRow = <K extends string>({
                 <div
                     className={`dynamic-data-table__cell bcn-0 flexbox dc__align-items-center dc__gap-4 dc__position-rel ${readOnly || row.data[key].disabled ? 'cursor-not-allowed no-hover' : ''} ${showError && !validationSchema(row.data[key].value, key, row).isValid ? 'dynamic-data-table__cell--error no-hover' : ''} ${!rowTypeHasInputField(row.data[key].type) ? 'no-hover no-focus' : ''}`}
                 >
-                    {maskValue?.[key] && row.data[key].value ? (
-                        <div className="py-8 px-12 h-36 flex">{DEFAULT_SECRET_PLACEHOLDER}</div>
-                    ) : (
-                        <>
-                            {renderCellIcon(row, key, true)}
-                            {renderCellContent(row, key)}
-                            {renderAsterisk(row, key)}
-                            {renderCellIcon(row, key)}
-                            {renderErrorMessages(row, key)}
-                        </>
-                    )}
+                    {renderCellIcon(row, key, true)}
+                    {renderCellContent(row, key)}
+                    {renderAsterisk(row, key)}
+                    {renderCellIcon(row, key)}
+                    {renderErrorMessages(row, key)}
                 </div>
             </Tooltip>
         )
@@ -274,35 +271,30 @@ export const DynamicDataTableRow = <K extends string>({
 
     return hasRows ? (
         <div className="bcn-2 px-1 pb-1 dc__bottom-radius-4">
-            {!!rows.length && (
-                <div
-                    className={`dynamic-data-table w-100 bcn-1 dc__bottom-radius-4 ${!readOnly ? 'three-columns' : 'two-columns'}`}
-                    style={{
-                        gridTemplateColumns: rowGridTemplateColumn,
-                    }}
-                >
-                    {rows.map((row) => (
-                        <div key={row.id} className="dynamic-data-table__row">
-                            {headers.map(({ key }, index) => (
-                                <Fragment key={key}>{renderCell(row, key, index)}</Fragment>
-                            ))}
-                            {!isDeletionNotAllowed && !readOnly && (
-                                <button
-                                    type="button"
-                                    className={`dynamic-data-table__row-delete-btn dc__unset-button-styles dc__align-self-stretch dc__no-shrink flex py-10 px-8 bcn-0 dc__hover-n50 dc__tab-focus ${disableDeleteRow ? 'dc__disabled' : ''}`}
-                                    onClick={onDelete(row)}
-                                    disabled={disableDeleteRow}
-                                >
-                                    <ICClose
-                                        aria-label="delete-row"
-                                        className="icon-dim-16 fcn-4 dc__align-self-start"
-                                    />
-                                </button>
-                            )}
-                        </div>
-                    ))}
-                </div>
-            )}
+            <div
+                className={`dynamic-data-table w-100 bcn-1 dc__bottom-radius-4 ${!readOnly ? 'row-column' : 'header-column'}`}
+                style={{
+                    gridTemplateColumns: rowGridTemplateColumn,
+                }}
+            >
+                {rows.map((row) => (
+                    <div key={row.id} className="dynamic-data-table__row">
+                        {headers.map(({ key }, index) => (
+                            <Fragment key={key}>{renderCell(row, key, index)}</Fragment>
+                        ))}
+                        {!isDeletionNotAllowed && !readOnly && (
+                            <button
+                                type="button"
+                                className={`dynamic-data-table__row-delete-btn dc__unset-button-styles dc__align-self-stretch dc__no-shrink flex py-10 px-8 bcn-0 ${disableDeleteRow ? 'dc__disabled' : 'dc__hover-n50 dc__tab-focus'}`}
+                                onClick={onDelete(row)}
+                                disabled={disableDeleteRow}
+                            >
+                                <ICCross aria-label="delete-row" className="icon-dim-16 fcn-4 dc__align-self-start" />
+                            </button>
+                        )}
+                    </div>
+                ))}
+            </div>
         </div>
     ) : null
 }

src/Shared/Components/DynamicDataTable/constants.ts

@@ -0,0 +1,2 @@
+export const ACTION_BUTTON_DEFAULT_WIDTH = '33px'
+export const DELETE_BUTTON_WIDTH = '33px'

src/Shared/Components/DynamicDataTable/styles.scss

@@ -18,14 +18,14 @@
     display: grid;
     gap: 1px;
 
-    &.two-columns {
-        .dynamic-data-table__row:last-of-type {
-            .dynamic-data-table__cell:first-child,
-            .dynamic-data-table__cell-input:first-child {
-                border-bottom-left-radius: 4px !important;
-            }
+    &__row:last-of-type {
+        .dynamic-data-table__cell:first-child,
+        .dynamic-data-table__cell-input:first-child {
+            border-bottom-left-radius: 4px !important;
         }
+    }
 
+    &.header-column {
         .dynamic-data-table__row:last-of-type {
             .dynamic-data-table__cell:last-child,
             .dynamic-data-table__cell-input:last-child {
@@ -34,14 +34,7 @@
         }
     }
 
-    &.three-columns {
-        .dynamic-data-table__row:last-of-type {
-            .dynamic-data-table__cell:first-child,
-            .dynamic-data-table__cell-input:first-child {
-                border-bottom-left-radius: 4px !important;
-            }
-        }
-
+    &.row-column {
         .dynamic-data-table__row:last-of-type {
             .dynamic-data-table__cell:last-child,
             .dynamic-data-table__row-delete-btn {
@@ -70,8 +63,11 @@
     }
 
     &__cell {
-        .select-picker-borderless-control {
-            padding: 8px;
+        min-width: 0;
+
+        &__select-picker__control {
+            gap: 6px !important;
+            padding: 8px !important;
         }
 
         &:not(:has(.select-picker-borderless-control)) .dynamic-data-table__select-text-area {