[v10.1.x] Logs: Fix ui getting stuck when removing fields (#72603)

Logs: Fix ui getting stuck when removing fields (#72597)

* Logs: Fix ui getting stuck when removing fields

* Update public/app/features/logs/components/LogDetailsRow.tsx

* Update

* Fix tests

(cherry picked from commit 117e334719)

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

public/app/features/logs/components/LogDetailsRow.test.tsx

@@ -2,6 +2,7 @@ import { screen, render, fireEvent } from '@testing-library/react';
 import React, { ComponentProps } from 'react';
 
 import { LogRowModel } from '@grafana/data';
+import config from 'app/core/config';
 
 import { LogDetailsRow } from './LogDetailsRow';
 
@@ -64,11 +65,22 @@ describe('LogDetailsRow', () => {
       setup();
       expect(screen.getAllByRole('button', { name: 'Filter out value' })).toHaveLength(1);
     });
-    it('should render remove filter button', async () => {
+    it('should render filter buttons when toggleLabelsInLogsUI false', async () => {
+      setup({
+        isFilterLabelActive: jest.fn().mockResolvedValue(true),
+      });
+      expect(screen.getByRole('button', { name: 'Filter for value' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Filter out value' })).toBeInTheDocument();
+    });
+
+    it('should render remove filter button when toggleLabelsInLogsUI true', async () => {
+      const defaultValue = config.featureToggles.toggleLabelsInLogsUI;
+      config.featureToggles.toggleLabelsInLogsUI = true;
       setup({
         isFilterLabelActive: jest.fn().mockResolvedValue(true),
       });
       expect(await screen.findByRole('button', { name: 'Remove filter' })).toBeInTheDocument();
+      config.featureToggles.toggleLabelsInLogsUI = defaultValue;
     });
   });
 

public/app/features/logs/components/LogDetailsRow.tsx

@@ -4,7 +4,7 @@ import memoizeOne from 'memoize-one';
 import React, { PureComponent, useState } from 'react';
 
 import { CoreApp, Field, GrafanaTheme2, IconName, LinkModel, LogLabelStatsModel, LogRowModel } from '@grafana/data';
-import { reportInteraction } from '@grafana/runtime';
+import { config, reportInteraction } from '@grafana/runtime';
 import { ClipboardButton, DataLinkButton, IconButton, Themeable2, withTheme2 } from '@grafana/ui';
 
 import { LogLabelStats } from './LogLabelStats';
@@ -274,10 +274,20 @@ class UnThemedLogDetailsRow extends PureComponent<Props, State> {
           <td className={style.logsDetailsIcon}>
             <div className={styles.buttonRow}>
               {hasFilteringFunctionality && (
-                <AsyncIconButton name="search-plus" onClick={this.filterLabel} isActive={this.isFilterLabelActive} />
-              )}
-              {hasFilteringFunctionality && (
-                <IconButton name="search-minus" tooltip="Filter out value" onClick={this.filterOutLabel} />
+                <>
+                  {config.featureToggles.toggleLabelsInLogsUI && (
+                    // If we are using the new label toggling, we want to use the async icon button
+                    <AsyncIconButton
+                      name="search-plus"
+                      onClick={this.filterLabel}
+                      isActive={this.isFilterLabelActive}
+                    />
+                  )}
+                  {!config.featureToggles.toggleLabelsInLogsUI && (
+                    <IconButton name="search-plus" onClick={this.filterLabel} tooltip="Filter for value" />
+                  )}
+                  <IconButton name="search-minus" tooltip="Filter out value" onClick={this.filterOutLabel} />
+                </>
               )}
               {!disableActions && displayedFields && toggleFieldButton}
               {!disableActions && (