From 3f88188a42fb9317d888ba73aaccc7a12e2c2afb Mon Sep 17 00:00:00 2001
From: Matias Chomicki <matyax@gmail.com>
Date: Mon, 26 Aug 2024 18:08:01 +0200
Subject: [PATCH] Logs panel: update internal displayed fields when the prop
 changes (#92418)

---
 .../app/plugins/panel/logs/LogsPanel.test.tsx | 27 +++++++++++++++++++
 public/app/plugins/panel/logs/LogsPanel.tsx   |  8 +++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/public/app/plugins/panel/logs/LogsPanel.test.tsx b/public/app/plugins/panel/logs/LogsPanel.test.tsx
index 7b7a034f35e..12520a140a6 100644
--- a/public/app/plugins/panel/logs/LogsPanel.test.tsx
+++ b/public/app/plugins/panel/logs/LogsPanel.test.tsx
@@ -481,6 +481,33 @@ describe('LogsPanel', () => {
       expect(screen.getByText('logline text')).toBeInTheDocument();
     });
 
+    it('updates the provided fields instead of the log line', async () => {
+      const { rerender, props } = setup({
+        data: {
+          series,
+        },
+        options: {
+          showLabels: false,
+          showTime: false,
+          wrapLogMessage: false,
+          showCommonLabels: false,
+          prettifyLogMessage: false,
+          sortOrder: LogsSortOrder.Descending,
+          dedupStrategy: LogsDedupStrategy.none,
+          enableLogDetails: true,
+          onClickHideField: undefined,
+          onClickShowField: undefined,
+        },
+      });
+
+      expect(await screen.findByRole('row')).toBeInTheDocument();
+      expect(screen.getByText('logline text')).toBeInTheDocument();
+
+      rerender(<LogsPanel {...props} options={{ ...props.options, displayedFields: ['app'] }} />);
+
+      expect(screen.getByText('app=common_app')).toBeInTheDocument();
+    });
+
     it('enables the behavior with a default implementation', async () => {
       setup({
         data: {
diff --git a/public/app/plugins/panel/logs/LogsPanel.tsx b/public/app/plugins/panel/logs/LogsPanel.tsx
index f9a78596387..b1269af69c0 100644
--- a/public/app/plugins/panel/logs/LogsPanel.tsx
+++ b/public/app/plugins/panel/logs/LogsPanel.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import * as React from 'react';
 
 import {
@@ -305,6 +305,12 @@ export const LogsPanel = ({
     [displayedFields]
   );
 
+  useEffect(() => {
+    if (options.displayedFields) {
+      setDisplayedFields(options.displayedFields);
+    }
+  }, [options.displayedFields]);
+
   if (!data || logRows.length === 0) {
     return <PanelDataErrorView fieldConfig={fieldConfig} panelId={id} data={data} needsStringField />;
   }