From c97731e4a669da2f7b84880ab6701319985156a1 Mon Sep 17 00:00:00 2001
From: js029 <75493971+js029@users.noreply.github.com>
Date: Thu, 19 Oct 2023 12:11:53 +0200
Subject: [PATCH] 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>
---
 .../__snapshots__/data_grid.test.tsx.snap     | 12 +--
 .../admin_console/data_grid/data_grid_row.tsx | 87 ++++++++++---------
 2 files changed, 54 insertions(+), 45 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/data_grid/__snapshots__/data_grid.test.tsx.snap b/webapp/channels/src/components/admin_console/data_grid/__snapshots__/data_grid.test.tsx.snap
index ee6cc8a43f..9ce41e5db3 100644
--- a/webapp/channels/src/components/admin_console/data_grid/__snapshots__/data_grid.test.tsx.snap
+++ b/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 {
diff --git a/webapp/channels/src/components/admin_console/data_grid/data_grid_row.tsx b/webapp/channels/src/components/admin_console/data_grid/data_grid_row.tsx
index 18335ef99a..eda0d99f5e 100644
--- a/webapp/channels/src/components/admin_console/data_grid/data_grid_row.tsx
+++ b/webapp/channels/src/components/admin_console/data_grid/data_grid_row.tsx
@@ -9,48 +9,57 @@ 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> {
-    renderCell(row: Row, column: Column) {
-        const style: CSSProperties = {};
-        if (column.width) {
-            style.flexGrow = column.width;
-        }
-
-        if (column.textAlign) {
-            style.textAlign = column.textAlign;
-        }
-
-        if (column.overflow) {
-            style.overflow = column.overflow;
-        }
-
-        return (
-            <div
-                key={column.field}
-                className={classNames('DataGrid_cell', column.className)}
-                style={style}
-            >
-                {row.cells[column.field]}
-            </div>
-        );
-    }
-
-    render() {
-        const cells = this.props.columns.map((col) => this.renderCell(this.props.row, col));
-        return (
-            <div
-                className='DataGrid_row'
-                onClick={this.props.row.onClick}
-            >
-                {cells}
-            </div>
-        );
-    }
+type DataGridCellProps = {
+    column: Column;
+    row: Row;
 }
 
-export default DataGridRow;
+const DataGridCell = ({row, column}: DataGridCellProps) => {
+    const style: CSSProperties = {};
+    if (column.width) {
+        style.flexGrow = column.width;
+    }
+
+    if (column.textAlign) {
+        style.textAlign = column.textAlign;
+    }
+
+    if (column.overflow) {
+        style.overflow = column.overflow;
+    }
+
+    return (
+        <div
+            key={column.field}
+            className={classNames('DataGrid_cell', column.className)}
+            style={style}
+        >
+            {row.cells[column.field]}
+        </div>
+    );
+};
+
+const DataGridRow = ({row, columns}: DataGridRowProps) => {
+    const cells = columns.map((column, index) => (
+        <DataGridCell
+            key={index}
+            row={row}
+            column={column}
+        />
+    ));
+    return (
+        <div
+            className='DataGrid_row'
+            onClick={row.onClick}
+        >
+            {cells}
+        </div>
+    );
+};
+
+export default React.memo(DataGridRow);