Add tag bulk action context menu

x-pack/plugins/saved_objects_tagging/common/test_utils/index.ts

@@ -6,6 +6,7 @@
 
 import { SavedObject, SavedObjectReference } from 'src/core/types';
 import { Tag, TagAttributes } from '../types';
+import { TagsCapabilities } from '../capabilities';
 
 export const createTagReference = (id: string): SavedObjectReference => ({
   type: 'tag',
@@ -35,3 +36,13 @@ export const createTagAttributes = (parts: Partial<TagAttributes> = {}): TagAttr
   color: '#FF00CC',
   ...parts,
 });
+
+export const createTagCapabilities = (parts: Partial<TagsCapabilities> = {}): TagsCapabilities => ({
+  view: true,
+  create: true,
+  edit: true,
+  delete: true,
+  assign: true,
+  viewConnections: true,
+  ...parts,
+});

x-pack/plugins/saved_objects_tagging/public/management/actions/bulk_delete.test.ts

@@ -0,0 +1,65 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  overlayServiceMock,
+  notificationServiceMock,
+} from '../../../../../../src/core/public/mocks';
+import { tagClientMock } from '../../tags/tags_client.mock';
+import { TagBulkAction } from '../types';
+import { getBulkDeleteAction } from './bulk_delete';
+
+describe('bulkDeleteAction', () => {
+  let tagClient: ReturnType<typeof tagClientMock.create>;
+  let overlays: ReturnType<typeof overlayServiceMock.createStartContract>;
+  let notifications: ReturnType<typeof notificationServiceMock.createStartContract>;
+  let action: TagBulkAction;
+
+  const tagIds = ['id-1', 'id-2', 'id-3'];
+
+  beforeEach(() => {
+    tagClient = tagClientMock.create();
+    overlays = overlayServiceMock.createStartContract();
+    notifications = notificationServiceMock.createStartContract();
+
+    action = getBulkDeleteAction({ tagClient, overlays, notifications });
+  });
+
+  it('performs the operation if the confirmation is accepted', async () => {
+    overlays.openConfirm.mockResolvedValue(true);
+
+    await action.execute(tagIds);
+
+    expect(overlays.openConfirm).toHaveBeenCalledTimes(1);
+
+    expect(tagClient.bulkDelete).toHaveBeenCalledTimes(1);
+    expect(tagClient.bulkDelete).toHaveBeenCalledWith(tagIds);
+
+    expect(notifications.toasts.addSuccess).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not perform the operation if the confirmation is rejected', async () => {
+    overlays.openConfirm.mockResolvedValue(false);
+
+    await action.execute(tagIds);
+
+    expect(overlays.openConfirm).toHaveBeenCalledTimes(1);
+
+    expect(tagClient.bulkDelete).not.toHaveBeenCalled();
+    expect(notifications.toasts.addSuccess).not.toHaveBeenCalled();
+  });
+
+  it('does not show notification if `client.bulkDelete` rejects ', async () => {
+    overlays.openConfirm.mockResolvedValue(true);
+    tagClient.bulkDelete.mockRejectedValue(new Error('error calling bulkDelete'));
+
+    await expect(action.execute(tagIds)).rejects.toMatchInlineSnapshot(
+      `[Error: error calling bulkDelete]`
+    );
+
+    expect(notifications.toasts.addSuccess).not.toHaveBeenCalled();
+  });
+});

x-pack/plugins/saved_objects_tagging/public/management/actions/bulk_delete.ts

@@ -0,0 +1,81 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { OverlayStart, NotificationsStart } from 'src/core/public';
+import { i18n } from '@kbn/i18n';
+import { ITagInternalClient } from '../../tags';
+import { TagBulkAction } from '../types';
+
+interface GetBulkDeleteActionOptions {
+  overlays: OverlayStart;
+  notifications: NotificationsStart;
+  tagClient: ITagInternalClient;
+}
+
+export const getBulkDeleteAction = ({
+  overlays,
+  notifications,
+  tagClient,
+}: GetBulkDeleteActionOptions): TagBulkAction => {
+  return {
+    id: 'delete',
+    label: i18n.translate('xpack.savedObjectsTagging.management.actions.bulkDelete.label', {
+      defaultMessage: 'Delete',
+    }),
+    icon: 'trash',
+    refreshAfterExecute: true,
+    execute: async (tagIds) => {
+      const confirmed = await overlays.openConfirm(
+        i18n.translate('xpack.savedObjectsTagging.management.actions.bulkDelete.confirm.text', {
+          defaultMessage:
+            'By deleting {count, plural, one {this tag} other {these tags}}, you will no longer be able to assign {count, plural, one {it} other {them}} to saved objects. ' +
+            '{count, plural, one {This tag} other {These tags}} will be removed from any saved objects that currently use {count, plural, one {it} other {them}}. ' +
+            'Are you sure you wish to proceed?',
+          values: {
+            count: tagIds.length,
+          },
+        }),
+        {
+          title: i18n.translate(
+            'xpack.savedObjectsTagging.management.actions.bulkDelete.confirm.title',
+            {
+              defaultMessage: 'Delete {count, plural, one {1 tag} other {# tags}}',
+              values: {
+                count: tagIds.length,
+              },
+            }
+          ),
+          confirmButtonText: i18n.translate(
+            'xpack.savedObjectsTagging.management.actions.bulkDelete.confirm.confirmButtonText',
+            {
+              defaultMessage: 'Delete {count, plural, one {tag} other {tags}}',
+              values: {
+                count: tagIds.length,
+              },
+            }
+          ),
+          buttonColor: 'danger',
+        }
+      );
+
+      if (confirmed) {
+        await tagClient.bulkDelete(tagIds);
+
+        notifications.toasts.addSuccess({
+          title: i18n.translate(
+            'xpack.savedObjectsTagging.management.actions.bulkDelete.notification.successTitle',
+            {
+              defaultMessage: 'Deleted {count, plural, one {1 tag} other {# tags}}',
+              values: {
+                count: tagIds.length,
+              },
+            }
+          ),
+        });
+      }
+    },
+  };
+};

x-pack/plugins/saved_objects_tagging/public/management/actions/clear_selection.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { TagBulkAction } from '../types';
+
+interface GetClearSelectionActionOptions {
+  clearSelection: () => void;
+}
+
+export const getClearSelectionAction = ({
+  clearSelection,
+}: GetClearSelectionActionOptions): TagBulkAction => {
+  return {
+    id: 'clear_selection',
+    label: i18n.translate('xpack.savedObjectsTagging.management.actions.clearSelection.label', {
+      defaultMessage: 'Clear selection',
+    }),
+    icon: 'cross',
+    refreshAfterExecute: true,
+    execute: async () => {
+      clearSelection();
+    },
+  };
+};

x-pack/plugins/saved_objects_tagging/public/management/actions/index.test.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { coreMock } from '../../../../../../src/core/public/mocks';
+import { createTagCapabilities } from '../../../common/test_utils';
+import { TagsCapabilities } from '../../../common/capabilities';
+import { tagClientMock } from '../../tags/tags_client.mock';
+import { TagBulkAction } from '../types';
+
+import { getBulkActions } from './index';
+
+describe('getBulkActions', () => {
+  let core: ReturnType<typeof coreMock.createStart>;
+  let tagClient: ReturnType<typeof tagClientMock.create>;
+  let clearSelection: jest.Mock;
+
+  beforeEach(() => {
+    core = coreMock.createStart();
+    tagClient = tagClientMock.create();
+    clearSelection = jest.fn();
+  });
+
+  const getActions = (caps: Partial<TagsCapabilities>) =>
+    getBulkActions({
+      core,
+      tagClient,
+      clearSelection,
+      capabilities: createTagCapabilities(caps),
+    });
+
+  const getIds = (actions: TagBulkAction[]) => actions.map((action) => action.id);
+
+  it('only returns the `delete` action if user got `delete` permission', () => {
+    let actions = getActions({ delete: true });
+
+    expect(getIds(actions)).toContain('delete');
+
+    actions = getActions({ delete: false });
+
+    expect(getIds(actions)).not.toContain('delete');
+  });
+});

x-pack/plugins/saved_objects_tagging/public/management/actions/index.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { CoreStart } from 'src/core/public';
+import { TagsCapabilities } from '../../../common';
+import { ITagInternalClient } from '../../tags';
+import { TagBulkAction } from '../types';
+import { getBulkDeleteAction } from './bulk_delete';
+import { getClearSelectionAction } from './clear_selection';
+
+interface GetBulkActionOptions {
+  core: CoreStart;
+  capabilities: TagsCapabilities;
+  tagClient: ITagInternalClient;
+  clearSelection: () => void;
+}
+
+export const getBulkActions = ({
+  core: { notifications, overlays },
+  capabilities,
+  tagClient,
+  clearSelection,
+}: GetBulkActionOptions): TagBulkAction[] => {
+  const actions: TagBulkAction[] = [];
+
+  if (capabilities.delete) {
+    actions.push(getBulkDeleteAction({ notifications, overlays, tagClient }));
+  }
+
+  // only add clear selection if user has permission to perform any other action
+  // as having at least one action will show the bulk action menu, and the selection column on the table
+  // and we want to avoid doing that only for the 'unselect' action.
+  if (actions.length > 0) {
+    actions.push(getClearSelectionAction({ clearSelection }));
+  }
+
+  return actions;
+};

x-pack/plugins/saved_objects_tagging/public/management/components/_action_bar.scss

@@ -0,0 +1,11 @@
+.tagMgt__actionBar {
+  > .euiHorizontalRule {
+    margin: 8px 0 3px;
+  }
+}
+
+.tagMgt__actionBar + .euiSpacer {
+  display: none;
+}
+
+// $euiBorderColor