MM-24743 Migrate DataRowGrid to functional component (#24795)

* Migrate DataRowGrid to functional component

* Change renderCell to a functional component dataGridCell and memoize DataGridRow

* Adjust test snapshot to include memoised DataGridRow

* use component notation when using DataGridCell

---------

Co-authored-by: js029 <js029@gmail.com>
Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/admin_console/data_grid/__snapshots__/data_grid.test.tsx.snap

@@ -61,7 +61,7 @@ exports[`components/admin_console/data_grid/DataGrid should match snapshot with
     className="DataGrid_rows"
     style={Object {}}
   >
-    <DataGridRow
+    <Memo(DataGridRow)
       columns={
         Array [
           Object {
@@ -87,7 +87,7 @@ exports[`components/admin_console/data_grid/DataGrid should match snapshot with
         }
       }
     />
-    <DataGridRow
+    <Memo(DataGridRow)
       columns={
         Array [
           Object {
@@ -113,7 +113,7 @@ exports[`components/admin_console/data_grid/DataGrid should match snapshot with
         }
       }
     />
-    <DataGridRow
+    <Memo(DataGridRow)
       columns={
         Array [
           Object {
@@ -170,7 +170,7 @@ exports[`components/admin_console/data_grid/DataGrid should match snapshot with
     className="DataGrid_rows"
     style={Object {}}
   >
-    <DataGridRow
+    <Memo(DataGridRow)
       columns={
         Array [
           Object {
@@ -193,7 +193,7 @@ exports[`components/admin_console/data_grid/DataGrid should match snapshot with
         }
       }
     />
-    <DataGridRow
+    <Memo(DataGridRow)
       columns={
         Array [
           Object {
@@ -216,7 +216,7 @@ exports[`components/admin_console/data_grid/DataGrid should match snapshot with
         }
       }
     />
-    <DataGridRow
+    <Memo(DataGridRow)
       columns={
         Array [
           Object {

webapp/channels/src/components/admin_console/data_grid/data_grid_row.tsx

@@ -9,13 +9,17 @@ import type {Row, Column} from './data_grid';
 
 import './data_grid.scss';
 
-type Props = {
+type DataGridRowProps = {
     columns: Column[];
     row: Row;
 }
 
-class DataGridRow extends React.Component<Props> {
+type DataGridCellProps = {
-    renderCell(row: Row, column: Column) {
+    column: Column;
+    row: Row;
+}
+
+const DataGridCell = ({row, column}: DataGridCellProps) => {
     const style: CSSProperties = {};
     if (column.width) {
         style.flexGrow = column.width;
@@ -38,19 +42,24 @@ class DataGridRow extends React.Component<Props> {
             {row.cells[column.field]}
         </div>
     );
-    }
+};
 
-    render() {
+const DataGridRow = ({row, columns}: DataGridRowProps) => {
-        const cells = this.props.columns.map((col) => this.renderCell(this.props.row, col));
+    const cells = columns.map((column, index) => (
+        <DataGridCell
+            key={index}
+            row={row}
+            column={column}
+        />
+    ));
     return (
         <div
             className='DataGrid_row'
-                onClick={this.props.row.onClick}
+            onClick={row.onClick}
         >
             {cells}
         </div>
     );
-    }
+};
-}
 
-export default DataGridRow;
+export default React.memo(DataGridRow);