release-22.2: ui: revert TransactionInsightDetailsCachedState.cachedData object

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()}

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()}

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: (
       _,

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,
 );