[8.x] feat: [Dashboards] Hide clear control button in floating action…

…s when no filters are selected (#200177) (#201927) # Backport This will backport the following commits from `main` to `8.x`: - [feat: [Dashboards] Hide clear control button in floating actions when no filters are selected (#200177)](#200177)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
elastic · Nov 27, 2024 · 242981d · 242981d
1 parent f7a222f
commit 242981d
Show file tree

Hide file tree

Showing 11 changed files with 217 additions and 37 deletions.
diff --git a/src/plugins/controls/public/actions/clear_control_action.test.tsx b/src/plugins/controls/public/actions/clear_control_action.test.tsx
@@ -0,0 +1,71 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { BehaviorSubject } from 'rxjs';
+import { getMockedControlGroupApi } from '../controls/mocks/control_mocks';
+import { ClearControlAction } from './clear_control_action';
+
+import type { ViewMode } from '@kbn/presentation-publishing';
+
+const dashboardApi = {
+  viewMode: new BehaviorSubject<ViewMode>('view'),
+};
+const controlGroupApi = getMockedControlGroupApi(dashboardApi, {
+  removePanel: jest.fn(),
+  replacePanel: jest.fn(),
+  addNewPanel: jest.fn(),
+  children$: new BehaviorSubject({}),
+});
+
+const clearControlAction = new ClearControlAction();
+const hasSelections$ = new BehaviorSubject<boolean | undefined>(undefined);
+
+const controlApi = {
+  type: 'test',
+  uuid: '1',
+  parentApi: controlGroupApi,
+  hasSelections$,
+  clearSelections: jest.fn(),
+};
+beforeEach(() => {
+  hasSelections$.next(false);
+});
+
+describe('ClearControlAction', () => {
+  test('should throw an error when called with an embeddable not in a parent', async () => {
+    const noParentApi = { ...controlApi, parentApi: undefined };
+
+    await expect(async () => {
+      await clearControlAction.execute({ embeddable: noParentApi });
+    }).rejects.toThrow(Error);
+  });
+
+  test('should call onChange when isCompatible changes', () => {
+    const onChange = jest.fn();
+
+    hasSelections$.next(true);
+    clearControlAction.subscribeToCompatibilityChanges({ embeddable: controlApi }, onChange);
+
+    expect(onChange).toHaveBeenCalledWith(true, clearControlAction);
+  });
+
+  describe('Clear control button compatibility', () => {
+    test('should be incompatible if there is no selection', async () => {
+      const nothingIsSelected = { ...controlApi, hasSelections$: false };
+
+      expect(await clearControlAction.isCompatible({ embeddable: nothingIsSelected })).toBe(false);
+    });
+
+    test('should be compatible if there is a selection', async () => {
+      const hasSelections = { ...controlApi, hasSelections$: true };
+
+      expect(await clearControlAction.isCompatible({ embeddable: hasSelections })).toBe(true);
+    });
+  });
+});
diff --git a/src/plugins/controls/public/actions/clear_control_action.tsx b/src/plugins/controls/public/actions/clear_control_action.tsx
@@ -12,11 +12,18 @@ import React, { SyntheticEvent } from 'react';
 import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { EmbeddableApiContext, HasUniqueId } from '@kbn/presentation-publishing';
-import { IncompatibleActionError, type Action } from '@kbn/ui-actions-plugin/public';
+import {
+  IncompatibleActionError,
+  FrequentCompatibilityChangeAction,
+  type Action,
+} from '@kbn/ui-actions-plugin/public';
+import { isClearableControl } from '../types';
 
 import { ACTION_CLEAR_CONTROL } from '.';
 
-export class ClearControlAction implements Action<EmbeddableApiContext> {
+export class ClearControlAction
+  implements Action<EmbeddableApiContext>, FrequentCompatibilityChangeAction<EmbeddableApiContext>
+{
   public readonly type = ACTION_CLEAR_CONTROL;
   public readonly id = ACTION_CLEAR_CONTROL;
   public order = 1;
@@ -50,6 +57,21 @@ export class ClearControlAction implements Action<EmbeddableApiContext> {
     return 'eraser';
   }
 
+  public couldBecomeCompatible({ embeddable }: EmbeddableApiContext) {
+    return isClearableControl(embeddable);
+  }
+
+  public subscribeToCompatibilityChanges(
+    { embeddable }: EmbeddableApiContext,
+    onChange: (isCompatible: boolean, action: ClearControlAction) => void
+  ) {
+    if (!isClearableControl(embeddable)) return;
+
+    return embeddable.hasSelections$.subscribe((selection) => {
+      onChange(Boolean(selection), this);
+    });
+  }
+
   public async isCompatible({ embeddable }: EmbeddableApiContext) {
     const { isCompatible } = await import('./clear_control_action_compatibility_check');
     return isCompatible(embeddable);

diff --git a/...s/public/controls/data_controls/options_list_control/get_options_list_control_factory.tsx b/...s/public/controls/data_controls/options_list_control/get_options_list_control_factory.tsx
@@ -9,10 +9,18 @@
 
 import fastIsEqual from 'fast-deep-equal';
 import React, { useEffect } from 'react';
-import { BehaviorSubject, combineLatest, debounceTime, filter, map, skip } from 'rxjs';
+import {
+  BehaviorSubject,
+  combineLatest,
+  debounceTime,
+  distinctUntilChanged,
+  filter,
+  map,
+  skip,
+} from 'rxjs';
 
 import { buildExistsFilter, buildPhraseFilter, buildPhrasesFilter, Filter } from '@kbn/es-query';
-import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
+import { PublishingSubject, useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
 
 import { OPTIONS_LIST_CONTROL } from '../../../../common';
 import type {
@@ -205,6 +213,22 @@ export const getOptionsListControlFactory = (): DataControlFactory<
           if (currentSelections.length > 1) selections.setSelectedOptions([currentSelections[0]]);
         });
 
+      const hasSelections$ = new BehaviorSubject<boolean>(
+        Boolean(initialState.selectedOptions?.length || initialState.existsSelected)
+      );
+      const hasSelectionsSubscription = combineLatest([
+        selections.selectedOptions$,
+        selections.existsSelected$,
+      ])
+        .pipe(
+          map(([selectedOptions, existsSelected]) => {
+            return Boolean(selectedOptions?.length || existsSelected);
+          }),
+          distinctUntilChanged()
+        )
+        .subscribe((hasSelections) => {
+          hasSelections$.next(hasSelections);
+        });
       /** Output filters when selections change */
       const outputFilterSubscription = combineLatest([
         dataControl.api.dataViews,
@@ -269,6 +293,7 @@ export const getOptionsListControlFactory = (): DataControlFactory<
             if (selections.existsSelected$.getValue()) selections.setExistsSelected(false);
             if (invalidSelections$.getValue().size) invalidSelections$.next(new Set([]));
           },
+          hasSelections$: hasSelections$ as PublishingSubject<boolean | undefined>,
         },
         {
           ...dataControl.comparators,
@@ -382,6 +407,7 @@ export const getOptionsListControlFactory = (): DataControlFactory<
               outputFilterSubscription.unsubscribe();
               singleSelectSubscription.unsubscribe();
               validSearchStringSubscription.unsubscribe();
+              hasSelectionsSubscription.unsubscribe();
             };
           }, []);
 

diff --git a/.../controls/public/controls/data_controls/range_slider/get_range_slider_control_factory.tsx b/.../controls/public/controls/data_controls/range_slider/get_range_slider_control_factory.tsx
@@ -101,6 +101,7 @@ export const getRangesliderControlFactory = (): DataControlFactory<
           clearSelections: () => {
             selections.setValue(undefined);
           },
+          hasSelections$: selections.hasRangeSelection$,
         },
         {
           ...dataControl.comparators,

diff --git a/src/plugins/controls/public/controls/data_controls/range_slider/range_control_selections.ts b/src/plugins/controls/public/controls/data_controls/range_slider/range_control_selections.ts
@@ -16,9 +16,12 @@ export function initializeRangeControlSelections(
   onSelectionChange: () => void
 ) {
   const value$ = new BehaviorSubject<RangeValue | undefined>(initialState.value);
+  const hasRangeSelection$ = new BehaviorSubject<boolean>(Boolean(value$.getValue()));
+
   function setValue(next: RangeValue | undefined) {
     if (value$.value !== next) {
       value$.next(next);
+      hasRangeSelection$.next(Boolean(next));
       onSelectionChange();
     }
   }
@@ -29,6 +32,7 @@ export function initializeRangeControlSelections(
     } as StateComparators<Pick<RangesliderControlState, 'value'>>,
     hasInitialSelections: initialState.value !== undefined,
     value$: value$ as PublishingSubject<RangeValue | undefined>,
+    hasRangeSelection$: hasRangeSelection$ as PublishingSubject<boolean | undefined>,
     setValue,
   };
 }
diff --git a/src/plugins/controls/public/controls/timeslider_control/get_timeslider_control_factory.tsx b/src/plugins/controls/public/controls/timeslider_control/get_timeslider_control_factory.tsx
@@ -13,6 +13,7 @@ import { BehaviorSubject, debounceTime, first, map } from 'rxjs';
 import { EuiInputPopover } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import {
+  PublishingSubject,
   ViewMode,
   apiHasParentApi,
   apiPublishesDataLoading,
@@ -57,6 +58,7 @@ export const getTimesliderControlFactory = (): ControlFactory<
       const timeslice$ = new BehaviorSubject<[number, number] | undefined>(undefined);
       const isAnchored$ = new BehaviorSubject<boolean | undefined>(initialState.isAnchored);
       const isPopoverOpen$ = new BehaviorSubject(false);
+      const hasTimeSliceSelection$ = new BehaviorSubject<boolean>(Boolean(timeslice$));
 
       const timeRangePercentage = initTimeRangePercentage(
         initialState,
@@ -102,6 +104,7 @@ export const getTimesliderControlFactory = (): ControlFactory<
       }
 
       function onChange(timeslice?: Timeslice) {
+        hasTimeSliceSelection$.next(Boolean(timeslice));
         setTimeslice(timeslice);
         const nextSelectedRange = timeslice
           ? timeslice[TO_INDEX] - timeslice[FROM_INDEX]
@@ -224,7 +227,9 @@ export const getTimesliderControlFactory = (): ControlFactory<
           },
           clearSelections: () => {
             setTimeslice(undefined);
+            hasTimeSliceSelection$.next(false);
           },
+          hasSelections$: hasTimeSliceSelection$ as PublishingSubject<boolean | undefined>,
           CustomPrependComponent: () => {
             const [autoApplySelections, viewMode] = useBatchedPublishingSubjects(
               controlGroupApi.autoApplySelections$,

diff --git a/src/plugins/controls/public/controls/types.ts b/src/plugins/controls/public/controls/types.ts
@@ -59,7 +59,7 @@ export type ControlApiRegistration<ControlApi extends DefaultControlApi = Defaul
 export type ControlApiInitialization<ControlApi extends DefaultControlApi = DefaultControlApi> =
   Omit<
     ControlApiRegistration<ControlApi>,
-    'serializeState' | 'getTypeDisplayName' | 'clearSelections'
+    'serializeState' | 'getTypeDisplayName' | keyof CanClearSelections
   >;
 
 export interface ControlFactory<

diff --git a/src/plugins/controls/public/types.ts b/src/plugins/controls/public/types.ts
@@ -11,13 +11,18 @@ import { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
 import { EmbeddableSetup } from '@kbn/embeddable-plugin/public';
 import { UiActionsStart } from '@kbn/ui-actions-plugin/public';
+import { PublishingSubject } from '@kbn/presentation-publishing';
 
 export interface CanClearSelections {
   clearSelections: () => void;
+  hasSelections$: PublishingSubject<boolean | undefined>;
 }
 
 export const isClearableControl = (control: unknown): control is CanClearSelections => {
-  return typeof (control as CanClearSelections).clearSelections === 'function';
+  return (
+    typeof (control as CanClearSelections).clearSelections === 'function' &&
+    Boolean((control as CanClearSelections).hasSelections$)
+  );
 };
 
 /**