[Dashboard] [Controls] Use uiActions for control hover actions

examples/controls_example/public/edit_example.tsx

@@ -6,10 +6,12 @@
  * Side Public License, v 1.
  */
 
+import { pickBy } from 'lodash';
 import React, { useState } from 'react';
 import {
   EuiButton,
   EuiButtonEmpty,
+  EuiButtonGroup,
   EuiFlexGroup,
   EuiFlexItem,
   EuiLoadingContent,
@@ -19,8 +21,13 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import { ViewMode } from '@kbn/embeddable-plugin/public';
-import { LazyControlGroupRenderer, ControlGroupContainer } from '@kbn/controls-plugin/public';
+import {
+  LazyControlGroupRenderer,
+  ControlGroupContainer,
+  ControlGroupInput,
+} from '@kbn/controls-plugin/public';
 import { withSuspense } from '@kbn/presentation-util-plugin/public';
+import { ACTION_EDIT_CONTROL, ACTION_DELETE_CONTROL } from '@kbn/controls-plugin/public';
 
 const ControlGroupRenderer = withSuspense(LazyControlGroupRenderer);
 
@@ -30,6 +37,27 @@ export const EditExample = () => {
   const [isSaving, setIsSaving] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [controlGroup, setControlGroup] = useState<ControlGroupContainer>();
+  const [toggleIconIdToSelectedMapIcon, setToggleIconIdToSelectedMapIcon] = useState<{
+    [id: string]: boolean;
+  }>({});
+
+  function onChangeIconsMultiIcons(optionId: string) {
+    const newToggleIconIdToSelectedMapIcon = {
+      ...toggleIconIdToSelectedMapIcon,
+      ...{
+        [optionId]: !toggleIconIdToSelectedMapIcon[optionId],
+      },
+    };
+
+    if (controlGroup) {
+      const disabledActions: string[] = Object.keys(
+        pickBy(newToggleIconIdToSelectedMapIcon, (value) => value)
+      );
+      controlGroup.updateInput({ disabledActions });
+    }
+
+    setToggleIconIdToSelectedMapIcon(newToggleIconIdToSelectedMapIcon);
+  }
 
   async function onSave() {
     setIsSaving(true);
@@ -48,16 +76,20 @@ export const EditExample = () => {
     // simulated async load await
     await new Promise((resolve) => setTimeout(resolve, 1000));
 
-    let input = {};
+    let input: Partial<ControlGroupInput> = {};
     const inputAsString = localStorage.getItem(INPUT_KEY);
     if (inputAsString) {
       try {
         input = JSON.parse(inputAsString);
+        const disabledActions = input.disabledActions ?? [];
+        setToggleIconIdToSelectedMapIcon({
+          [ACTION_EDIT_CONTROL]: disabledActions.includes(ACTION_EDIT_CONTROL),
+          [ACTION_DELETE_CONTROL]: disabledActions.includes(ACTION_DELETE_CONTROL),
+        });
       } catch (e) {
         // ignore parse errors
       }
     }
-
     setIsLoading(false);
     return input;
   }
@@ -72,7 +104,7 @@ export const EditExample = () => {
       </EuiText>
       <EuiSpacer size="m" />
       <EuiPanel hasBorder={true}>
-        <EuiFlexGroup gutterSize="s" alignItems="center">
+        <EuiFlexGroup gutterSize="m" alignItems="center">
           <EuiFlexItem grow={false}>
             <EuiButtonEmpty
               color="primary"
@@ -85,11 +117,32 @@ export const EditExample = () => {
               Add control
             </EuiButtonEmpty>
           </EuiFlexItem>
+          <EuiFlexItem grow={true}>
+            <EuiButtonGroup
+              legend="Text style"
+              buttonSize="m"
+              options={[
+                {
+                  id: ACTION_EDIT_CONTROL,
+                  label: 'Disable edit action',
+                  value: ACTION_EDIT_CONTROL,
+                },
+                {
+                  id: ACTION_DELETE_CONTROL,
+                  label: 'Disable delete action',
+                  value: ACTION_DELETE_CONTROL,
+                },
+              ]}
+              idToSelectedMap={toggleIconIdToSelectedMapIcon}
+              type="multi"
+              onChange={(id: string) => onChangeIconsMultiIcons(id)}
+            />
+          </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButton
+              fill
               color="primary"
               isDisabled={controlGroup === undefined || isSaving}
-              fill
               onClick={onSave}
               isLoading={isSaving}
             >

src/plugins/controls/kibana.jsonc

@@ -15,10 +15,9 @@
       "embeddable",
       "dataViews",
       "data",
-      "unifiedSearch"
+      "unifiedSearch",
+      "uiActions"
     ],
-    "extraPublicDirs": [
-      "common"
-    ]
+    "extraPublicDirs": ["common"]
   }
 }

src/plugins/controls/public/control_group/actions/delete_control_action.test.tsx

@@ -0,0 +1,87 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import {
+  lazyLoadReduxEmbeddablePackage,
+  ReduxEmbeddablePackage,
+} from '@kbn/presentation-util-plugin/public';
+import { ErrorEmbeddable } from '@kbn/embeddable-plugin/public';
+
+import { ControlOutput } from '../../types';
+import { ControlGroupInput } from '../types';
+import { pluginServices } from '../../services';
+import { DeleteControlAction } from './delete_control_action';
+import { OptionsListEmbeddableInput } from '../../options_list';
+import { controlGroupInputBuilder } from '../control_group_input_builder';
+import { ControlGroupContainer } from '../embeddable/control_group_container';
+import { OptionsListEmbeddable } from '../../options_list/embeddable/options_list_embeddable';
+
+let container: ControlGroupContainer;
+let embeddable: OptionsListEmbeddable;
+let reduxEmbeddablePackage: ReduxEmbeddablePackage;
+
+beforeAll(async () => {
+  reduxEmbeddablePackage = await lazyLoadReduxEmbeddablePackage();
+
+  const controlGroupInput = { chainingSystem: 'NONE', panels: {} } as ControlGroupInput;
+  controlGroupInputBuilder.addOptionsListControl(controlGroupInput, {
+    dataViewId: 'test-data-view',
+    title: 'test',
+    fieldName: 'test-field',
+    width: 'medium',
+    grow: false,
+  });
+  container = new ControlGroupContainer(reduxEmbeddablePackage, controlGroupInput);
+  await container.untilInitialized();
+
+  embeddable = container.getChild(container.getChildIds()[0]);
+});
+
+test('Action is incompatible with Error Embeddables', async () => {
+  const deleteControlAction = new DeleteControlAction();
+  const errorEmbeddable = new ErrorEmbeddable('Wow what an awful error', { id: ' 404' });
+  expect(await deleteControlAction.isCompatible({ embeddable: errorEmbeddable as any })).toBe(
+    false
+  );
+});
+
+test('Execute throws an error when called with an embeddable not in a parent', async () => {
+  const deleteControlAction = new DeleteControlAction();
+  const optionsListEmbeddable = new OptionsListEmbeddable(
+    reduxEmbeddablePackage,
+    {} as OptionsListEmbeddableInput,
+    {} as ControlOutput
+  );
+  await expect(async () => {
+    await deleteControlAction.execute({ embeddable: optionsListEmbeddable });
+  }).rejects.toThrow(Error);
+});
+
+describe('Execute should open a confirm modal', () => {
+  test('Canceling modal will keep control', async () => {
+    const spyOn = jest.fn().mockResolvedValue(false);
+    pluginServices.getServices().overlays.openConfirm = spyOn;
+
+    const deleteControlAction = new DeleteControlAction();
+    await deleteControlAction.execute({ embeddable });
+    expect(spyOn).toHaveBeenCalled();
+
+    expect(container.getPanelCount()).toBe(1);
+  });
+
+  test('Confirming modal will delete control', async () => {
+    const spyOn = jest.fn().mockResolvedValue(true);
+    pluginServices.getServices().overlays.openConfirm = spyOn;
+
+    const deleteControlAction = new DeleteControlAction();
+    await deleteControlAction.execute({ embeddable });
+    expect(spyOn).toHaveBeenCalled();
+
+    expect(container.getPanelCount()).toBe(0);
+  });
+});

src/plugins/controls/public/control_group/actions/delete_control_action.tsx

@@ -0,0 +1,91 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+
+import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
+import { ViewMode, isErrorEmbeddable } from '@kbn/embeddable-plugin/public';
+import { Action, IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
+
+import { ACTION_DELETE_CONTROL } from '.';
+import { pluginServices } from '../../services';
+import { ControlGroupStrings } from '../control_group_strings';
+import { ControlEmbeddable, DataControlInput } from '../../types';
+import { isControlGroup } from '../embeddable/control_group_helpers';
+
+export interface DeleteControlActionContext {
+  embeddable: ControlEmbeddable<DataControlInput>;
+}
+
+export class DeleteControlAction implements Action<DeleteControlActionContext> {
+  public readonly type = ACTION_DELETE_CONTROL;
+  public readonly id = ACTION_DELETE_CONTROL;
+  public order = 2;
+
+  private openConfirm;
+
+  constructor() {
+    ({
+      overlays: { openConfirm: this.openConfirm },
+    } = pluginServices.getServices());
+  }
+
+  public readonly MenuItem = ({ context }: { context: DeleteControlActionContext }) => {
+    return (
+      <EuiToolTip content={this.getDisplayName(context)}>
+        <EuiButtonIcon
+          data-test-subj={`control-action-${context.embeddable.id}-delete`}
+          aria-label={this.getDisplayName(context)}
+          iconType={this.getIconType(context)}
+          onClick={() => this.execute(context)}
+          color="danger"
+        />
+      </EuiToolTip>
+    );
+  };
+
+  public getDisplayName({ embeddable }: DeleteControlActionContext) {
+    if (!embeddable.parent || !isControlGroup(embeddable.parent)) {
+      throw new IncompatibleActionError();
+    }
+    return ControlGroupStrings.floatingActions.getRemoveButtonTitle();
+  }
+
+  public getIconType({ embeddable }: DeleteControlActionContext) {
+    if (!embeddable.parent || !isControlGroup(embeddable.parent)) {
+      throw new IncompatibleActionError();
+    }
+    return 'cross';
+  }
+
+  public async isCompatible({ embeddable }: DeleteControlActionContext) {
+    if (isErrorEmbeddable(embeddable)) return false;
+    const controlGroup = embeddable.parent;
+    return Boolean(
+      controlGroup &&
+        isControlGroup(controlGroup) &&
+        controlGroup.getInput().viewMode === ViewMode.EDIT
+    );
+  }
+
+  public async execute({ embeddable }: DeleteControlActionContext) {
+    if (!embeddable.parent || !isControlGroup(embeddable.parent)) {
+      throw new IncompatibleActionError();
+    }
+    this.openConfirm(ControlGroupStrings.management.deleteControls.getSubtitle(), {
+      confirmButtonText: ControlGroupStrings.management.deleteControls.getConfirm(),
+      cancelButtonText: ControlGroupStrings.management.deleteControls.getCancel(),
+      title: ControlGroupStrings.management.deleteControls.getDeleteTitle(),
+      buttonColor: 'danger',
+    }).then((confirmed) => {
+      if (confirmed) {
+        embeddable.parent?.removeEmbeddable(embeddable.id);
+      }
+    });
+  }
+}