From c86699896cb0172dc3c3ea3a0a3fe006e3236288 Mon Sep 17 00:00:00 2001
From: Eric Harmeling <eric.harmeling@cockroachlabs.com>
Date: Wed, 11 Jan 2023 09:15:38 -0500
Subject: [PATCH] ui: revert TransactionInsightDetailsCachedState.cachedData
 object

This commit reverts the cachedData field of
TransactionInsightDetailsCachedState from a map to an object.

Fixes #94380 in release-22.2.

Release note: None
---
 .../statementInsightDetails.tsx               |  4 +--
 .../transactionInsightDetails.tsx             |  2 +-
 .../transactionInsightDetails.reducer.ts      | 33 +++++++++++--------
 .../transactionInsightDetails.selectors.ts    |  6 ++--
 4 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/statementInsightDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/statementInsightDetails.tsx
index a38a7fa657cc..c3876a456555 100644
--- a/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/statementInsightDetails.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/statementInsightDetails.tsx
@@ -101,7 +101,7 @@ export const StatementInsightDetails: React.FC<
   const executionID = getMatchParamByName(match, idAttr);
 
   useEffect(() => {
-    if (insightEventDetails == null) {
+    if (!insightEventDetails) {
       refreshStatementInsights();
     }
   }, [insightEventDetails, refreshStatementInsights]);
@@ -124,7 +124,7 @@ export const StatementInsightDetails: React.FC<
       </h3>
       <div>
         <Loading
-          loading={insightEventDetails == null}
+          loading={!insightEventDetails}
           page={"Transaction Insight details"}
           error={insightError}
           renderError={() => InsightsError()}
diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetails.tsx
index 75bfb0d2b297..261af4e32b79 100644
--- a/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetails.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/transactionInsightDetails.tsx
@@ -161,7 +161,7 @@ export const TransactionInsightDetails: React.FC<
       </div>
       <section>
         <Loading
-          loading={insightEventDetails == null}
+          loading={!insightDetails}
           page={"Transaction Insight details"}
           error={insightError}
           renderError={() => InsightsError()}
diff --git a/pkg/ui/workspaces/cluster-ui/src/store/insightDetails/transactionInsightDetails/transactionInsightDetails.reducer.ts b/pkg/ui/workspaces/cluster-ui/src/store/insightDetails/transactionInsightDetails/transactionInsightDetails.reducer.ts
index 6d6cc411fa80..7daa181e97eb 100644
--- a/pkg/ui/workspaces/cluster-ui/src/store/insightDetails/transactionInsightDetails/transactionInsightDetails.reducer.ts
+++ b/pkg/ui/workspaces/cluster-ui/src/store/insightDetails/transactionInsightDetails/transactionInsightDetails.reducer.ts
@@ -32,11 +32,13 @@ const txnInitialState: TransactionInsightDetailsState = {
 };
 
 export type TransactionInsightDetailsCachedState = {
-  cachedData: Map<string, TransactionInsightDetailsState>;
+  cachedData: {
+    [id: string]: TransactionInsightDetailsState;
+  };
 };
 
 const initialState: TransactionInsightDetailsCachedState = {
-  cachedData: new Map(),
+  cachedData: {},
 };
 
 const transactionInsightDetailsSlice = createSlice({
@@ -47,22 +49,25 @@ const transactionInsightDetailsSlice = createSlice({
       state,
       action: PayloadAction<TransactionInsightEventDetailsResponse>,
     ) => {
-      state.cachedData.set(action.payload.executionID, {
-        data: action.payload,
-        valid: true,
-        lastError: null,
-        lastUpdated: moment.utc(),
-      });
+      if (action?.payload?.executionID) {
+        state.cachedData[action.payload.executionID] = {
+          data: action.payload,
+          valid: true,
+          lastError: null,
+          lastUpdated: moment.utc(),
+        };
+      }
     },
     failed: (state, action: PayloadAction<ErrorWithKey>) => {
-      const txnInsight =
-        state.cachedData.get(action.payload.key) ?? txnInitialState;
-      txnInsight.valid = false;
-      txnInsight.lastError = action.payload.err;
-      state.cachedData.set(action.payload.key, txnInsight);
+      state.cachedData[action.payload.key] = {
+        data: null,
+        valid: false,
+        lastError: action?.payload?.err,
+        lastUpdated: null,
+      };
     },
     invalidated: (state, action: PayloadAction<{ key: string }>) => {
-      state.cachedData.delete(action.payload.key);
+      delete state.cachedData[action.payload.key];
     },
     refresh: (
       _,
diff --git a/pkg/ui/workspaces/cluster-ui/src/store/insightDetails/transactionInsightDetails/transactionInsightDetails.selectors.ts b/pkg/ui/workspaces/cluster-ui/src/store/insightDetails/transactionInsightDetails/transactionInsightDetails.selectors.ts
index 5ab59822f202..ab5666e39fbb 100644
--- a/pkg/ui/workspaces/cluster-ui/src/store/insightDetails/transactionInsightDetails/transactionInsightDetails.selectors.ts
+++ b/pkg/ui/workspaces/cluster-ui/src/store/insightDetails/transactionInsightDetails/transactionInsightDetails.selectors.ts
@@ -16,16 +16,16 @@ const selectTransactionInsightDetailsState = createSelector(
   (state: AppState) => state.adminUI.transactionInsightDetails.cachedData,
   selectID,
   (cachedTxnInsightDetails, execId) => {
-    return cachedTxnInsightDetails.get(execId);
+    return cachedTxnInsightDetails[execId];
   },
 );
 
 export const selectTransactionInsightDetails = createSelector(
   selectTransactionInsightDetailsState,
-  state => state.data,
+  state => state?.data,
 );
 
 export const selectTransactionInsightDetailsError = createSelector(
   selectTransactionInsightDetailsState,
-  state => state.lastError,
+  state => state?.lastError,
 );