refactor(ui): ColumnGridTableRow render-props → compound cell slots (C3)

openmetadata-ui/src/main/resources/ui/src/pages/ColumnBulkOperations/ColumnGrid/ColumnGrid.component.tsx

@@ -418,7 +418,7 @@
           <Typography
             as="label"
             className="tw:text-sm tw:font-semibold tw:text-secondary">
             {t('label.description')}
           </Typography>
           <RichTextEditor
             initialValue={currentDescription}
@@ -442,7 +442,7 @@
             {t('label.tag-plural')}
           </Typography>
           <AsyncSelectList
             autoFocus={false}
             fetchOptions={tagClassBase.getTags}
             getPopupContainer={(triggerNode) => triggerNode.parentElement}
             initialOptions={classificationTagOptions}
@@ -556,7 +556,7 @@
 
 const ColumnGrid: React.FC<ColumnGridProps> = ({
   filters: externalFilters,
 }) => {
   const { t } = useTranslation();
   const { socket } = useWebSocketConnector();
   const [isUpdating, setIsUpdating] = useState(false);
@@ -751,7 +751,7 @@
       items: ColumnGridItem[],
       expandedRows: Set<string>,
       expandedStructRows: Set<string>
     ): ColumnGridRowData[] => {
       const rows: ColumnGridRowData[] = [];
 
       for (const item of items) {
@@ -950,7 +950,7 @@
 
       return rows;
     },
     []
   );
 
   // Define columns inline (similar to DomainListPage pattern)
@@ -971,7 +971,7 @@
   );
 
   // Get column link function - defined before use
   const getColumnLink = useCallback((row: ColumnGridRowData) => {
     let occurrence: ColumnOccurrenceRef | null = null;
 
     if (row.occurrence) {
@@ -1064,7 +1064,7 @@
   );
 
   const renderDescriptionCellAdapter = useCallback(
     (entity: ColumnGridRowData) => {
       const hasEdit = entity.editedDescription !== undefined;
       const displayValue = hasEdit
         ? entity.editedDescriptionPreview ?? ''
@@ -1111,7 +1111,7 @@
         </Typography>
       );
     },
     []
   );
 
   const renderTagsCellAdapter = useCallback((entity: ColumnGridRowData) => {
@@ -1220,7 +1220,7 @@
 
   // Update render functions to use listing data state (with correct CellRenderer signature)
   const renderColumnNameCellFinal = useCallback(
     (entity: ColumnGridRowData) => {
       const columnNameButtonClass = classNames(
         'tw:flex tw:flex-1 tw:min-w-0 tw:items-center tw:justify-start tw:overflow-hidden tw:text-start',
         'tw:*:data-text:block tw:*:data-text:min-w-0 tw:*:data-text:w-full tw:*:data-text:truncate'
@@ -2140,14 +2140,24 @@
                 isRecentlyUpdated={recentlyUpdatedRowIds.has(entity.id)}
                 isSelected={columnGridListing.isSelected(entity.id)}
                 key={entity.id}
-                renderColumnNameCell={renderColumnNameCellFinal}
-                renderDescriptionCell={renderDescriptionCellAdapter}
-                renderGlossaryTermsCell={renderGlossaryTermsCellAdapter}
-                renderPathCell={renderPathCellAdapter}
-                renderTagsCell={renderTagsCellAdapter}
                 showParentChildColors={isChildRow || isParentExpanded}
-                tableColumns={tableColumns}
-              />
+                tableColumns={tableColumns}>
+                <ColumnGridTableRow.Cell columnId="columnName">
+                  {renderColumnNameCellFinal(entity)}
+                </ColumnGridTableRow.Cell>
+                <ColumnGridTableRow.Cell columnId="path">
+                  {renderPathCellAdapter(entity)}
+                </ColumnGridTableRow.Cell>
+                <ColumnGridTableRow.Cell columnId="description">
+                  {renderDescriptionCellAdapter(entity)}
+                </ColumnGridTableRow.Cell>
+                <ColumnGridTableRow.Cell columnId="tags">
+                  {renderTagsCellAdapter(entity)}
+                </ColumnGridTableRow.Cell>
+                <ColumnGridTableRow.Cell columnId="glossaryTerms">
+                  {renderGlossaryTermsCellAdapter(entity)}
+                </ColumnGridTableRow.Cell>
+              </ColumnGridTableRow>
             );
           }}
         </Table.Body>

openmetadata-ui/src/main/resources/ui/src/pages/ColumnBulkOperations/ColumnGrid/components/ColumnGridTableRow.test.tsx

@@ -63,39 +63,43 @@ const mockTableColumns = [
   { id: 'glossaryTerms' },
 ];
 
-const renderProps = {
-  renderColumnNameCell: jest.fn(() => <span>name</span>),
-  renderPathCell: jest.fn(() => <span>path</span>),
-  renderDescriptionCell: jest.fn(() => <span>desc</span>),
-  renderTagsCell: jest.fn(() => <span>tags</span>),
-  renderGlossaryTermsCell: jest.fn(() => <span>glossary</span>),
-};
+const cellSlots = [
+  <ColumnGridTableRow.Cell columnId="columnName" key="columnName">
+    <span>name</span>
+  </ColumnGridTableRow.Cell>,
+  <ColumnGridTableRow.Cell columnId="path" key="path">
+    <span>path</span>
+  </ColumnGridTableRow.Cell>,
+  <ColumnGridTableRow.Cell columnId="description" key="description">
+    <span>desc</span>
+  </ColumnGridTableRow.Cell>,
+  <ColumnGridTableRow.Cell columnId="tags" key="tags">
+    <span>tags</span>
+  </ColumnGridTableRow.Cell>,
+  <ColumnGridTableRow.Cell columnId="glossaryTerms" key="glossaryTerms">
+    <span>glossary</span>
+  </ColumnGridTableRow.Cell>,
+];
 
 describe('ColumnGridTableRow', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders the row and delegates each cell to its render adapter', () => {
+  it('places each supplied cell slot in its matching column', () => {
     render(
       <ColumnGridTableRow
         entity={mockEntity}
         isSelected={false}
-        tableColumns={mockTableColumns}
-        {...renderProps}
-      />
+        tableColumns={mockTableColumns}>
+        {cellSlots}
+      </ColumnGridTableRow>
     );
 
     expect(screen.getByTestId('column-row-test_col')).toBeInTheDocument();
     expect(screen.getByTestId('column-name-cell')).toBeInTheDocument();
     expect(screen.getByTestId('column-description-cell')).toBeInTheDocument();
-    expect(renderProps.renderColumnNameCell).toHaveBeenCalledWith(mockEntity);
-    expect(renderProps.renderDescriptionCell).toHaveBeenCalledWith(mockEntity);
-    expect(renderProps.renderTagsCell).toHaveBeenCalledWith(mockEntity);
-    expect(renderProps.renderGlossaryTermsCell).toHaveBeenCalledWith(
-      mockEntity
-    );
-    // dataType is rendered from the entity directly, not via an adapter.
+    expect(screen.getByText('name')).toBeInTheDocument();
+    expect(screen.getByText('desc')).toBeInTheDocument();
+    expect(screen.getByText('tags')).toBeInTheDocument();
+    expect(screen.getByText('glossary')).toBeInTheDocument();
+    // dataType is rendered from the entity directly, not via a cell slot.
     expect(screen.getByText('VARCHAR')).toBeInTheDocument();
   });
 
@@ -105,9 +109,11 @@ describe('ColumnGridTableRow', () => {
         isPendingRefetch
         entity={mockEntity}
         isSelected={false}
-        tableColumns={[{ id: 'columnName' }]}
-        {...renderProps}
-      />
+        tableColumns={[{ id: 'columnName' }]}>
+        <ColumnGridTableRow.Cell columnId="columnName">
+          <span>name</span>
+        </ColumnGridTableRow.Cell>
+      </ColumnGridTableRow>
     );
 
     expect(screen.getByTestId('loader')).toBeInTheDocument();
@@ -118,9 +124,9 @@ describe('ColumnGridTableRow', () => {
       <ColumnGridTableRow
         entity={mockEntity}
         isSelected={false}
-        tableColumns={mockTableColumns}
-        {...renderProps}
-      />
+        tableColumns={mockTableColumns}>
+        {cellSlots}
+      </ColumnGridTableRow>
     );
 
     expect(screen.getByTestId('column-row-test_col')).toHaveAttribute(
@@ -133,9 +139,9 @@ describe('ColumnGridTableRow', () => {
         showParentChildColors
         entity={{ ...mockEntity, parentId: 'p1' } as ColumnGridRowData}
         isSelected={false}
-        tableColumns={mockTableColumns}
-        {...renderProps}
-      />
+        tableColumns={mockTableColumns}>
+        {cellSlots}
+      </ColumnGridTableRow>
     );
 
     expect(screen.getByTestId('column-row-test_col')).toHaveAttribute(

openmetadata-ui/src/main/resources/ui/src/pages/ColumnBulkOperations/ColumnGrid/components/ColumnGridTableRow.tsx

@@ -17,6 +17,19 @@ import React, { useMemo } from 'react';
 import Loader from '../../../../components/common/Loader/Loader';
 import { ColumnGridRowData } from '../ColumnGrid.interface';
 
+export interface ColumnGridTableCellProps {
+  /** Column id this content maps to (must match a `tableColumns` id) */
+  columnId: string;
+  children: React.ReactNode;
+}
+
+/**
+ * Slot marker for `ColumnGridTableRow`. Never rendered on its own — the row
+ * reads its `columnId` + `children` to place the content in the matching
+ * `Table.Cell`.
+ */
+const ColumnGridTableCell: React.FC<ColumnGridTableCellProps> = () => null;
+
 interface ColumnGridTableRowProps {
   /** Width percent per column id for fixed column layout */
   columnWidthPercent?: Record<string, string>;
@@ -30,11 +43,8 @@ interface ColumnGridTableRowProps {
   showParentChildColors?: boolean;
   /** Column definitions for Table.Row (id only), used for core Table layout */
   tableColumns: { id: string }[];
-  renderColumnNameCell: (entity: ColumnGridRowData) => React.ReactNode;
-  renderPathCell: (entity: ColumnGridRowData) => React.ReactNode;
-  renderDescriptionCell: (entity: ColumnGridRowData) => React.ReactNode;
-  renderTagsCell: (entity: ColumnGridRowData) => React.ReactNode;
-  renderGlossaryTermsCell: (entity: ColumnGridRowData) => React.ReactNode;
+  /** `ColumnGridTableRow.Cell` slots, one per column id whose content is supplied by the parent */
+  children: React.ReactNode;
 }
 
 const CELL_ELLIPSIS_CLASS = 'tw:min-w-0 tw:w-full tw:overflow-hidden';
@@ -44,22 +54,32 @@ const BASE_CELL_PADDING_PX = 24;
 const PARENT_ROW_BG_CLASS = 'tw:bg-gray-100';
 const CHILD_ROW_BG_CLASS = 'tw:bg-gray-50';
 
-export const ColumnGridTableRow: React.FC<ColumnGridTableRowProps> = ({
+const ColumnGridTableRowBase: React.FC<ColumnGridTableRowProps> = ({
   columnWidthPercent = {},
   entity,
   isSelected,
   isPendingRefetch = false,
   isRecentlyUpdated,
   showParentChildColors = false,
   tableColumns,
-  renderColumnNameCell,
-  renderPathCell,
-  renderDescriptionCell,
-  renderTagsCell,
-  renderGlossaryTermsCell,
+  children,
 }) => {
   const isChildRow = Boolean(entity.parentId || entity.isStructChild);
 
+  const cellContentById = useMemo(() => {
+    const map: Record<string, React.ReactNode> = {};
+    React.Children.forEach(children, (child) => {
+      if (
+        React.isValidElement<ColumnGridTableCellProps>(child) &&
+        child.props.columnId
+      ) {
+        map[child.props.columnId] = child.props.children;
+      }
+    });
+
+    return map;
+  }, [children]);
+
   const { rowClassName, cellClassName, rowType } = useMemo(() => {
     const type = isChildRow ? 'child' : 'parent';
 
@@ -106,24 +126,12 @@ export const ColumnGridTableRow: React.FC<ColumnGridTableRowProps> = ({
   ]);
 
   const renderCellContent = (columnId: string) => {
-    const content = (() => {
-      switch (columnId) {
-        case 'columnName':
-          return renderColumnNameCell(entity);
-        case 'path':
-          return renderPathCell(entity);
-        case 'description':
-          return renderDescriptionCell(entity);
-        case 'dataType':
-          return entity.dataType || '-';
-        case 'tags':
-          return renderTagsCell(entity);
-        case 'glossaryTerms':
-          return renderGlossaryTermsCell(entity);
-        default:
-          return null;
-      }
-    })();
+    // dataType is static row data; every other cell's content is supplied by
+    // the parent via a ColumnGridTableRow.Cell slot.
+    const content =
+      columnId === 'dataType'
+        ? entity.dataType || '-'
+        : cellContentById[columnId] ?? null;
 
     if (content == null) {
       return null;
@@ -188,3 +196,9 @@ export const ColumnGridTableRow: React.FC<ColumnGridTableRowProps> = ({
     </Table.Row>
   );
 };
+
+export const ColumnGridTableRow =
+  ColumnGridTableRowBase as React.FC<ColumnGridTableRowProps> & {
+    Cell: typeof ColumnGridTableCell;
+  };
+ColumnGridTableRow.Cell = ColumnGridTableCell;