From ec6f732b098337511edc238bf887d11cd0b55763 Mon Sep 17 00:00:00 2001
From: Muzammil Mahmood <muzz@fb.com>
Date: Fri, 20 May 2022 02:54:00 -0700
Subject: [PATCH] Prevent TypeError exception on missing column.

Summary: Fix a TypeError exception in TableHead.tsx when an ordered column is not present in the row.

Reviewed By: aigoncharov

Differential Revision: D36497494

fbshipit-source-id: 18c961468fc2bc3cca16290fd9e6c973e5e18ebf
---
 .../src/ui/components/table/ManagedTable.tsx    | 17 ++++++++++++-----
 .../src/ui/components/table/TableHead.tsx       |  4 ++++
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/desktop/flipper-ui-core/src/ui/components/table/ManagedTable.tsx b/desktop/flipper-ui-core/src/ui/components/table/ManagedTable.tsx
index 3dbf6ab77..659909740 100644
--- a/desktop/flipper-ui-core/src/ui/components/table/ManagedTable.tsx
+++ b/desktop/flipper-ui-core/src/ui/components/table/ManagedTable.tsx
@@ -202,7 +202,7 @@ export class ManagedTable extends React.Component<
       Object.keys(this.props.columns).map((key) => ({key, visible: true}));
     this.state = {
       columnOrder,
-      columnKeys: this.computeColumnKeys(columnOrder),
+      columnKeys: this.computeColumnKeys(columnOrder, this.props.columns),
       columnSizes:
         this.props.tableKey && globalTableState[this.props.tableKey]
           ? globalTableState[this.props.tableKey]
@@ -254,7 +254,10 @@ export class ManagedTable extends React.Component<
       }
       this.setState({
         columnOrder: nextProps.columnOrder,
-        columnKeys: this.computeColumnKeys(nextProps.columnOrder),
+        columnKeys: this.computeColumnKeys(
+          nextProps.columnOrder,
+          this.props.columns,
+        ),
       });
     }
 
@@ -300,8 +303,12 @@ export class ManagedTable extends React.Component<
     this.firstUpdate = false;
   }
 
-  computeColumnKeys(columnOrder: TableColumnOrder) {
-    return columnOrder.map((k) => (k.visible ? k.key : null)).filter(notNull);
+  computeColumnKeys(columnOrder: TableColumnOrder, columns: TableColumns) {
+    return columnOrder
+      .map((k) =>
+        k.visible && Object.keys(columns).includes(k.key) ? k.key : null,
+      )
+      .filter(notNull);
   }
 
   scrollToHighlightedRows = () => {
@@ -676,7 +683,7 @@ export class ManagedTable extends React.Component<
       for (let index = 0; index < columnOrder.length; index++) {
         const col = columnOrder[index];
 
-        if (!col.visible) {
+        if (!col.visible || !columns[col.key]) {
           continue;
         }
 
diff --git a/desktop/flipper-ui-core/src/ui/components/table/TableHead.tsx b/desktop/flipper-ui-core/src/ui/components/table/TableHead.tsx
index d895c919e..5ef4370d5 100644
--- a/desktop/flipper-ui-core/src/ui/components/table/TableHead.tsx
+++ b/desktop/flipper-ui-core/src/ui/components/table/TableHead.tsx
@@ -277,6 +277,10 @@ export default class TableHead extends PureComponent<{
 
       const key = column.key;
       const col = columns[key];
+      if (!col) {
+        console.warn('no column for key: ', key);
+        continue;
+      }
 
       let arrow;
       if (col.sortable === true && sortOrder && sortOrder.key === key) {