From 243c7583c95797707b3e5b51f01b1ca260744511 Mon Sep 17 00:00:00 2001
From: Galen Kistler <109082771+gtk-grafana@users.noreply.github.com>
Date: Thu, 30 Nov 2023 14:04:42 -0600
Subject: [PATCH] Logs Panel: Table UI - Logs.tsx clean up mutation in react
 lifecycle (#78925)

* remove prop mutation in componentWillUnmount
---
 public/app/features/explore/Logs/Logs.tsx | 25 +++++++++++++++--------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/public/app/features/explore/Logs/Logs.tsx b/public/app/features/explore/Logs/Logs.tsx
index c68fc97fefc..1b2a439c3af 100644
--- a/public/app/features/explore/Logs/Logs.tsx
+++ b/public/app/features/explore/Logs/Logs.tsx
@@ -174,15 +174,22 @@ class UnthemedLogs extends PureComponent<Props, State> {
     if (this.cancelFlippingTimer) {
       window.clearTimeout(this.cancelFlippingTimer);
     }
-    // Delete url state on unmount
-    if (this.props?.panelState?.logs?.columns) {
-      delete this.props.panelState.logs.columns;
-    }
-    if (this.props?.panelState?.logs?.refId) {
-      delete this.props.panelState.logs.refId;
-    }
-    if (this.props?.panelState?.logs?.labelFieldName) {
-      delete this.props.panelState.logs.labelFieldName;
+
+    // If we're unmounting logs (e.g. switching to another datasource), we need to remove the table specific panel state, otherwise it will persist in the explore url
+    if (
+      this.props?.panelState?.logs?.columns ||
+      this.props?.panelState?.logs?.refId ||
+      this.props?.panelState?.logs?.labelFieldName
+    ) {
+      dispatch(
+        changePanelState(this.props.exploreId, 'logs', {
+          ...this.props.panelState?.logs,
+          columns: undefined,
+          visualisationType: this.state.visualisationType,
+          labelFieldName: undefined,
+          refId: undefined,
+        })
+      );
     }
   }
   updatePanelState = (logsPanelState: Partial<ExploreLogsPanelState>) => {