feat: DynamicDataTable - update row delete icon with Button component, RuntimePluginVariables - types update

Author: RohitRaj011

src/Shared/Components/DynamicDataTable/DynamicDataTableRow.tsx

@@ -4,19 +4,21 @@ import { followCursor } from 'tippy.js'
 
 import { ReactComponent as ICCross } from '@Icons/ic-cross.svg'
 import { Tooltip } from '@Common/Tooltip'
-
 import { ConditionalWrap } from '@Common/Helper'
 import { ResizableTagTextArea } from '@Common/CustomTagSelector'
+import { ComponentSizeType } from '@Shared/constants'
+
+import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 import { SelectTextArea } from '../SelectTextArea'
 import {
     getSelectPickerOptionByValue,
     SelectPicker,
     SelectPickerOptionType,
     SelectPickerVariantType,
 } from '../SelectPicker'
+import { FileUpload } from '../FileUpload'
 import { getActionButtonPosition, getRowGridTemplateColumn, rowTypeHasInputField } from './utils'
 import { DynamicDataTableRowType, DynamicDataTableRowProps, DynamicDataTableRowDataType } from './types'
-import { FileUpload } from '../FileUpload'
 
 const conditionalWrap =
     <K extends string, CustomStateType = Record<string, unknown>>(
@@ -214,7 +216,7 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
 
     const renderCellIcon = (row: DynamicDataTableRowType<K, CustomStateType>, key: K, isLeadingIcon?: boolean) => {
         const iconConfig = isLeadingIcon ? leadingCellIcon : trailingCellIcon
-        if (!iconConfig?.[key]) {
+        if (!iconConfig?.[key]?.(row)) {
             return null
         }
 
@@ -256,8 +258,9 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
 
         const cellNode = (
             <Tooltip
-                alwaysShowTippyOnHover={!!row.data[key].tooltipText || isDisabled}
-                content={row.data[key].tooltipText || (isDisabled ? 'Cannot edit in read-only mode' : '')}
+                alwaysShowTippyOnHover={!!row.data[key].tooltip?.content || isDisabled}
+                className={row.data[key].tooltip?.className}
+                content={row.data[key].tooltip?.content || (isDisabled ? 'Cannot edit in read-only mode' : '')}
                 followCursor="horizontal"
                 plugins={[followCursor]}
             >
@@ -308,14 +311,19 @@ export const DynamicDataTableRow = <K extends string, CustomStateType = Record<s
                             <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 || row.disableDelete ? 'dc__disabled' : 'dc__hover-n50 dc__tab-focus'}`}
-                                onClick={onDelete(row)}
-                                disabled={disableDeleteRow || row.disableDelete}
-                            >
-                                <ICCross aria-label="delete-row" className="icon-dim-16 fcn-4 dc__align-self-start" />
-                            </button>
+                            <div className="dynamic-data-table__row-delete-btn bcn-0">
+                                <Button
+                                    dataTestId="dynamic-data-table-row-delete-btn"
+                                    ariaLabel="Delete Row"
+                                    showAriaLabelInTippy={false}
+                                    icon={<ICCross />}
+                                    disabled={disableDeleteRow || row.disableDelete}
+                                    onClick={onDelete(row)}
+                                    variant={ButtonVariantType.borderLess}
+                                    style={ButtonStyleType.negativeGrey}
+                                    size={ComponentSizeType.small}
+                                />
+                            </div>
                         )}
                     </div>
                 ))}

src/Shared/Components/DynamicDataTable/styles.scss

@@ -48,6 +48,20 @@
         height: 50px;
     }
 
+    &__row-delete-btn {
+        > div {
+            height: 100%;
+            width: 100%;
+
+            > button {
+                padding: 0;
+                width: 100%;
+                height: 100%;
+                border-radius: 0;
+            }
+        }
+    }
+
     &__cell-input {
         outline: none;
         border: none !important;

src/Shared/Components/DynamicDataTable/types.ts

@@ -19,6 +19,7 @@ import { DetailedHTMLProps, ReactElement, ReactNode } from 'react'
 import { ResizableTagTextAreaProps } from '@Common/CustomTagSelector'
 import { UseStateFiltersReturnType } from '@Common/Hooks'
 
+import { TooltipProps } from '@Common/Tooltip/types'
 import { SelectPickerOptionType, SelectPickerProps } from '../SelectPicker'
 import { SelectTextAreaProps } from '../SelectTextArea'
 import { FileUploadProps } from '../FileUpload'
@@ -99,8 +100,8 @@ export type DynamicDataTableRowType<K extends string, CustomStateType = Record<s
             disabled?: boolean
             /** An optional boolean indicating if an asterisk should be shown. */
             required?: boolean
-            /** An optional tooltip text to show when hovering over cell. */
-            tooltipText?: string
+            /** An optional tooltip to show when hovering over cell. */
+            tooltip?: Partial<Pick<TooltipProps, 'content' | 'className'>>
         } & DynamicDataTableCellData
     }
     id: string | number

src/Shared/types.ts

@@ -349,6 +349,7 @@ export interface RuntimePluginVariables
     stepType: PluginType
     isRequired: boolean
     pluginIcon?: string
+    description?: string
 }
 
 export interface RuntimeParamsAPIResponseType {