From daa84995799b03f06d018584fa6e6a296b5b2395 Mon Sep 17 00:00:00 2001
From: Chad Lavimoniere <clavimoniere@gitlab.com>
Date: Fri, 23 Feb 2024 13:30:37 -0500
Subject: [PATCH 1/3] Update todo and notifications for work items

Use the new two-button layout used on issuables for work items.

This work is behind a feature flag (:notifications_todos_buttons) and a
followup will be necessary to remove that later.

Changelog: changed
---
 .../work_item_actions_without_subscribe.vue   | 380 +++++++++++++++++
 .../components/work_item_detail.vue           |  36 ++
 .../work_item_notifications_widget.vue        | 134 ++++++
 .../work_items/components/work_item_todos.vue |   3 +-
 .../groups/work_items_controller.rb           |   1 +
 .../projects/work_items_controller.rb         |   1 +
 ...ork_item_actions_without_subscribe_spec.js | 391 ++++++++++++++++++
 .../work_item_notifications_widget_spec.js    | 145 +++++++
 8 files changed, 1090 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/work_items/components/work_item_actions_without_subscribe.vue
 create mode 100644 app/assets/javascripts/work_items/components/work_item_notifications_widget.vue
 create mode 100644 spec/frontend/work_items/components/work_item_actions_without_subscribe_spec.js
 create mode 100644 spec/frontend/work_items/components/work_item_notifications_widget_spec.js

diff --git a/app/assets/javascripts/work_items/components/work_item_actions_without_subscribe.vue b/app/assets/javascripts/work_items/components/work_item_actions_without_subscribe.vue
new file mode 100644
index 00000000000000..f4709d08df831c
--- /dev/null
+++ b/app/assets/javascripts/work_items/components/work_item_actions_without_subscribe.vue
@@ -0,0 +1,380 @@
+<script>
+import {
+  GlDisclosureDropdown,
+  GlDisclosureDropdownItem,
+  GlDropdownDivider,
+  GlLoadingIcon,
+  GlModal,
+  GlModalDirective,
+} from '@gitlab/ui';
+
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
+
+import { __, s__ } from '~/locale';
+import Tracking from '~/tracking';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import toast from '~/vue_shared/plugins/global_toast';
+import { isLoggedIn } from '~/lib/utils/common_utils';
+
+import {
+  sprintfWorkItem,
+  I18N_WORK_ITEM_DELETE,
+  I18N_WORK_ITEM_ARE_YOU_SURE_DELETE,
+  TEST_ID_CONFIDENTIALITY_TOGGLE_ACTION,
+  TEST_ID_DELETE_ACTION,
+  TEST_ID_PROMOTE_ACTION,
+  TEST_ID_COPY_CREATE_NOTE_EMAIL_ACTION,
+  TEST_ID_COPY_REFERENCE_ACTION,
+  TEST_ID_TOGGLE_ACTION,
+  I18N_WORK_ITEM_ERROR_CONVERTING,
+  WORK_ITEM_TYPE_VALUE_KEY_RESULT,
+  WORK_ITEM_TYPE_VALUE_OBJECTIVE,
+  I18N_WORK_ITEM_COPY_CREATE_NOTE_EMAIL,
+  I18N_WORK_ITEM_ERROR_COPY_REFERENCE,
+  I18N_WORK_ITEM_ERROR_COPY_EMAIL,
+  TEST_ID_LOCK_ACTION,
+} from '../constants';
+import updateWorkItemMutation from '../graphql/update_work_item.mutation.graphql';
+import convertWorkItemMutation from '../graphql/work_item_convert.mutation.graphql';
+import projectWorkItemTypesQuery from '../graphql/project_work_item_types.query.graphql';
+import WorkItemStateToggle from './work_item_state_toggle.vue';
+
+export default {
+  i18n: {
+    enableConfidentiality: s__('WorkItem|Turn on confidentiality'),
+    disableConfidentiality: s__('WorkItem|Turn off confidentiality'),
+    copyReference: __('Copy reference'),
+    referenceCopied: __('Reference copied'),
+    emailAddressCopied: __('Email address copied'),
+  },
+  components: {
+    GlDisclosureDropdown,
+    GlDisclosureDropdownItem,
+    GlDropdownDivider,
+    GlLoadingIcon,
+    GlModal,
+    WorkItemStateToggle,
+  },
+  directives: {
+    GlModal: GlModalDirective,
+  },
+  mixins: [glFeatureFlagMixin(), Tracking.mixin({ label: 'actions_menu' })],
+  isLoggedIn: isLoggedIn(),
+  confidentialityTestId: TEST_ID_CONFIDENTIALITY_TOGGLE_ACTION,
+  copyReferenceTestId: TEST_ID_COPY_REFERENCE_ACTION,
+  copyCreateNoteEmailTestId: TEST_ID_COPY_CREATE_NOTE_EMAIL_ACTION,
+  deleteActionTestId: TEST_ID_DELETE_ACTION,
+  promoteActionTestId: TEST_ID_PROMOTE_ACTION,
+  lockDiscussionTestId: TEST_ID_LOCK_ACTION,
+  stateToggleTestId: TEST_ID_TOGGLE_ACTION,
+  inject: ['isGroup'],
+  props: {
+    fullPath: {
+      type: String,
+      required: true,
+    },
+    workItemState: {
+      type: String,
+      required: true,
+    },
+    workItemId: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    workItemType: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    workItemTypeId: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    canUpdate: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    canDelete: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isConfidential: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isDiscussionLocked: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isParentConfidential: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    workItemReference: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    workItemCreateNoteEmail: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    isModal: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isLockDiscussionUpdating: false,
+    };
+  },
+  apollo: {
+    workItemTypes: {
+      query: projectWorkItemTypesQuery,
+      variables() {
+        return {
+          fullPath: this.fullPath,
+        };
+      },
+      update(data) {
+        return data.workspace?.workItemTypes?.nodes;
+      },
+      skip() {
+        return !this.canUpdate;
+      },
+    },
+  },
+  computed: {
+    i18n() {
+      return {
+        deleteWorkItem: sprintfWorkItem(I18N_WORK_ITEM_DELETE, this.workItemType),
+        areYouSureDelete: sprintfWorkItem(I18N_WORK_ITEM_ARE_YOU_SURE_DELETE, this.workItemType),
+        convertError: sprintfWorkItem(I18N_WORK_ITEM_ERROR_CONVERTING, this.workItemType),
+        copyCreateNoteEmail: sprintfWorkItem(
+          I18N_WORK_ITEM_COPY_CREATE_NOTE_EMAIL,
+          this.workItemType,
+        ),
+        copyReferenceError: sprintfWorkItem(I18N_WORK_ITEM_ERROR_COPY_REFERENCE, this.workItemType),
+        copyCreateNoteEmailError: sprintfWorkItem(
+          I18N_WORK_ITEM_ERROR_COPY_EMAIL,
+          this.workItemType,
+        ),
+      };
+    },
+    canLockWorkItem() {
+      return this.canUpdate && this.glFeatures.workItemsBeta;
+    },
+    canPromoteToObjective() {
+      return this.canUpdate && this.workItemType === WORK_ITEM_TYPE_VALUE_KEY_RESULT;
+    },
+    confidentialItemText() {
+      return this.isConfidential
+        ? this.$options.i18n.disableConfidentiality
+        : this.$options.i18n.enableConfidentiality;
+    },
+    lockDiscussionText() {
+      return this.isDiscussionLocked ? __('Unlock discussion') : __('Lock discussion');
+    },
+    objectiveWorkItemTypeId() {
+      return this.workItemTypes.find((type) => type.name === WORK_ITEM_TYPE_VALUE_OBJECTIVE).id;
+    },
+  },
+  methods: {
+    copyToClipboard(text, message) {
+      if (this.isModal) {
+        navigator.clipboard.writeText(text);
+      }
+      toast(message);
+      this.closeDropdown();
+    },
+    handleToggleWorkItemConfidentiality() {
+      this.track('click_toggle_work_item_confidentiality');
+      this.$emit('toggleWorkItemConfidentiality', !this.isConfidential);
+      this.closeDropdown();
+    },
+    handleDelete() {
+      this.$refs.modal.show();
+      this.closeDropdown();
+    },
+    handleDeleteWorkItem() {
+      this.track('click_delete_work_item');
+      this.$emit('deleteWorkItem');
+    },
+    handleCancelDeleteWorkItem({ trigger }) {
+      if (trigger !== 'ok') {
+        this.track('cancel_delete_work_item');
+      }
+    },
+    throwConvertError() {
+      this.$emit('error', this.i18n.convertError);
+    },
+    closeDropdown() {
+      this.$refs.workItemsMoreActions.close();
+    },
+    toggleDiscussionLock() {
+      this.isLockDiscussionUpdating = true;
+
+      this.$apollo
+        .mutate({
+          mutation: updateWorkItemMutation,
+          variables: {
+            input: {
+              id: this.workItemId,
+              notesWidget: {
+                discussionLocked: !this.isDiscussionLocked,
+              },
+            },
+          },
+        })
+        .then(({ data }) => {
+          const { errors } = data.workItemUpdate;
+          if (errors?.length) {
+            throw new Error(errors);
+          }
+
+          toast(this.isDiscussionLocked ? __('Discussion locked.') : __('Discussion unlocked.'));
+        })
+        .catch((error) => {
+          this.$emit('error', error.message);
+          Sentry.captureException(error);
+        })
+        .finally(() => {
+          this.isLockDiscussionUpdating = false;
+        });
+    },
+    async promoteToObjective() {
+      try {
+        const {
+          data: {
+            workItemConvert: { errors },
+          },
+        } = await this.$apollo.mutate({
+          mutation: convertWorkItemMutation,
+          variables: {
+            input: {
+              id: this.workItemId,
+              workItemTypeId: this.objectiveWorkItemTypeId,
+            },
+          },
+        });
+        if (errors.length > 0) {
+          this.throwConvertError();
+          return;
+        }
+        this.$toast.show(s__('WorkItem|Promoted to objective.'));
+        this.track('promote_kr_to_objective');
+        this.$emit('promotedToObjective');
+      } catch (error) {
+        this.throwConvertError();
+        Sentry.captureException(error);
+      } finally {
+        this.closeDropdown();
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-disclosure-dropdown
+      ref="workItemsMoreActions"
+      icon="ellipsis_v"
+      data-testid="work-item-actions-dropdown"
+      text-sr-only
+      :toggle-text="__('More actions')"
+      category="tertiary"
+      :auto-close="false"
+      no-caret
+      right
+    >
+      <gl-disclosure-dropdown-item
+        v-if="canPromoteToObjective"
+        :data-testid="$options.promoteActionTestId"
+        @action="promoteToObjective"
+      >
+        <template #list-item>{{ __('Promote to objective') }}</template>
+      </gl-disclosure-dropdown-item>
+
+      <gl-disclosure-dropdown-item
+        v-if="canLockWorkItem"
+        :data-testid="$options.lockDiscussionTestId"
+        @action="toggleDiscussionLock"
+      >
+        <template #list-item>
+          <gl-loading-icon v-if="isLockDiscussionUpdating" class="gl-mr-1" inline />
+          {{ lockDiscussionText }}
+        </template>
+      </gl-disclosure-dropdown-item>
+
+      <gl-disclosure-dropdown-item
+        v-if="canUpdate && !isParentConfidential"
+        :data-testid="$options.confidentialityTestId"
+        @action="handleToggleWorkItemConfidentiality"
+      >
+        <template #list-item>{{ confidentialItemText }}</template>
+      </gl-disclosure-dropdown-item>
+
+      <work-item-state-toggle
+        v-if="canUpdate"
+        :data-testid="$options.stateToggleTestId"
+        :work-item-id="workItemId"
+        :work-item-state="workItemState"
+        :work-item-type="workItemType"
+        show-as-dropdown-item
+      />
+
+      <gl-disclosure-dropdown-item
+        :data-testid="$options.copyReferenceTestId"
+        :data-clipboard-text="workItemReference"
+        @action="copyToClipboard(workItemReference, $options.i18n.referenceCopied)"
+      >
+        <template #list-item>{{ $options.i18n.copyReference }}</template>
+      </gl-disclosure-dropdown-item>
+
+      <gl-disclosure-dropdown-item
+        v-if="$options.isLoggedIn && workItemCreateNoteEmail"
+        :data-testid="$options.copyCreateNoteEmailTestId"
+        :data-clipboard-text="workItemCreateNoteEmail"
+        @action="copyToClipboard(workItemCreateNoteEmail, $options.i18n.emailAddressCopied)"
+      >
+        <template #list-item>{{ i18n.copyCreateNoteEmail }}</template>
+      </gl-disclosure-dropdown-item>
+
+      <template v-if="canDelete">
+        <gl-dropdown-divider />
+        <gl-disclosure-dropdown-item
+          :data-testid="$options.deleteActionTestId"
+          variant="danger"
+          @action="handleDelete"
+        >
+          <template #list-item>
+            <span class="text-danger">{{ i18n.deleteWorkItem }}</span>
+          </template>
+        </gl-disclosure-dropdown-item>
+      </template>
+    </gl-disclosure-dropdown>
+
+    <gl-modal
+      ref="modal"
+      modal-id="work-item-confirm-delete"
+      :title="i18n.deleteWorkItem"
+      :ok-title="i18n.deleteWorkItem"
+      ok-variant="danger"
+      @ok="handleDeleteWorkItem"
+      @hide="handleCancelDeleteWorkItem"
+    >
+      {{ i18n.areYouSureDelete }}
+    </gl-modal>
+  </div>
+</template>
diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue
index 537be3b40ba456..8937d6a7393f53 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -33,7 +33,9 @@ import { findHierarchyWidgetChildren } from '../utils';
 
 import WorkItemTree from './work_item_links/work_item_tree.vue';
 import WorkItemActions from './work_item_actions.vue';
+import WorkItemActionsWithoutSubscribe from './work_item_actions_without_subscribe.vue';
 import WorkItemTodos from './work_item_todos.vue';
+import WorkItemNotificationsWidget from './work_item_notifications_widget.vue';
 import WorkItemTitle from './work_item_title.vue';
 import WorkItemAttributesWrapper from './work_item_attributes_wrapper.vue';
 import WorkItemCreatedUpdated from './work_item_created_updated.vue';
@@ -58,7 +60,9 @@ export default {
     GlSkeletonLoader,
     GlEmptyState,
     WorkItemActions,
+    WorkItemActionsWithoutSubscribe,
     WorkItemTodos,
+    WorkItemNotificationsWidget,
     WorkItemCreatedUpdated,
     WorkItemDescription,
     WorkItemAwardEmoji,
@@ -181,6 +185,9 @@ export default {
     workItemsMvc2Enabled() {
       return this.glFeatures.workItemsMvc2;
     },
+    newTodoAndNotificationsEnabled() {
+      return this.glFeatures.notificationsTodosButtons;
+    },
     parentWorkItem() {
       return this.isWidgetPresent(WIDGET_TYPE_HIERARCHY)?.parent;
     },
@@ -482,7 +489,36 @@ export default {
               :current-user-todos="currentUserTodos"
               @error="updateError = $event"
             />
+            <template v-if="newTodoAndNotificationsEnabled">
+              <work-item-notifications-widget
+                :full-path="fullPath"
+                :work-item-id="workItem.id"
+                :subscribed-to-notifications="workItemNotificationsSubscribed"
+                :can-update="canUpdate"
+                @error="updateError = $event"
+              />
+              <work-item-actions-without-subscribe
+                :full-path="fullPath"
+                :work-item-id="workItem.id"
+                :work-item-type="workItemType"
+                :work-item-type-id="workItemTypeId"
+                :can-delete="canDelete"
+                :can-update="canUpdate"
+                :is-confidential="workItem.confidential"
+                :is-discussion-locked="isDiscussionLocked"
+                :is-parent-confidential="parentWorkItemConfidentiality"
+                :work-item-reference="workItem.reference"
+                :work-item-create-note-email="workItem.createNoteEmail"
+                :is-modal="isModal"
+                :work-item-state="workItem.state"
+                @deleteWorkItem="$emit('deleteWorkItem', { workItemType, workItemId: workItem.id })"
+                @toggleWorkItemConfidentiality="toggleConfidentiality"
+                @error="updateError = $event"
+                @promotedToObjective="$emit('promotedToObjective', workItemIid)"
+              />
+            </template>
             <work-item-actions
+              v-else
               :full-path="fullPath"
               :work-item-id="workItem.id"
               :subscribed-to-notifications="workItemNotificationsSubscribed"
diff --git a/app/assets/javascripts/work_items/components/work_item_notifications_widget.vue b/app/assets/javascripts/work_items/components/work_item_notifications_widget.vue
new file mode 100644
index 00000000000000..f9d31f20a2546d
--- /dev/null
+++ b/app/assets/javascripts/work_items/components/work_item_notifications_widget.vue
@@ -0,0 +1,134 @@
+<script>
+import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
+
+import { __, s__ } from '~/locale';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import toast from '~/vue_shared/plugins/global_toast';
+import { isLoggedIn } from '~/lib/utils/common_utils';
+
+import updateWorkItemNotificationsMutation from '../graphql/update_work_item_notifications.mutation.graphql';
+import projectWorkItemTypesQuery from '../graphql/project_work_item_types.query.graphql';
+
+const ICON_ON = 'notifications';
+const ICON_OFF = 'notifications-off';
+
+export default {
+  i18n: {
+    notificationOn: s__('WorkItem|Notifications turned on.'),
+    notificationOff: s__('WorkItem|Notifications turned off.'),
+    labelOn: __('Notifications on'),
+    labelOff: __('Notifications off'),
+  },
+  components: {
+    GlButton,
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  mixins: [glFeatureFlagMixin()],
+  isLoggedIn: isLoggedIn(),
+  inject: ['isGroup'],
+  props: {
+    fullPath: {
+      type: String,
+      required: true,
+    },
+    workItemId: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    canUpdate: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    subscribedToNotifications: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isLockDiscussionUpdating: false,
+      emailsDisabled: false,
+    };
+  },
+  apollo: {
+    workItemTypes: {
+      query: projectWorkItemTypesQuery,
+      variables() {
+        return {
+          fullPath: this.fullPath,
+        };
+      },
+      update(data) {
+        return data.workspace?.workItemTypes?.nodes;
+      },
+      skip() {
+        return !this.canUpdate;
+      },
+    },
+  },
+  computed: {
+    notificationTooltip() {
+      return this.subscribedToNotifications
+        ? this.$options.i18n.labelOn
+        : this.$options.i18n.labelOff;
+    },
+    notificationIcon() {
+      return this.subscribedToNotifications ? ICON_ON : ICON_OFF;
+    },
+  },
+  methods: {
+    toggleNotifications(subscribed) {
+      this.$apollo
+        .mutate({
+          mutation: updateWorkItemNotificationsMutation,
+          variables: {
+            input: {
+              id: this.workItemId,
+              subscribed,
+            },
+          },
+        })
+        .then(({ data }) => {
+          const { errors } = data.workItemSubscribe;
+          if (errors?.length) {
+            throw new Error(errors[0]);
+          }
+
+          toast(
+            subscribed ? this.$options.i18n.notificationOn : this.$options.i18n.notificationOff,
+          );
+        })
+        .catch((error) => {
+          this.$emit('error', error.message);
+          Sentry.captureException(error);
+        });
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-button
+    ref="tooltip"
+    v-gl-tooltip.hover
+    category="secondary"
+    data-testid="subscribe-button"
+    :title="notificationTooltip"
+    class="btn-icon"
+    @click="toggleNotifications(!subscribedToNotifications)"
+  >
+    <gl-icon
+      :name="notificationIcon"
+      :size="16"
+      :class="{ 'gl-fill-blue-500': subscribedToNotifications }"
+    />
+  </gl-button>
+</template>
diff --git a/app/assets/javascripts/work_items/components/work_item_todos.vue b/app/assets/javascripts/work_items/components/work_item_todos.vue
index 62518616398304..b2ca163afc02d6 100644
--- a/app/assets/javascripts/work_items/components/work_item_todos.vue
+++ b/app/assets/javascripts/work_items/components/work_item_todos.vue
@@ -175,9 +175,10 @@ export default {
 <template>
   <gl-button
     v-gl-tooltip.hover
-    :loading="isLoading"
+    :disabled="isLoading"
     :title="buttonLabel"
     category="secondary"
+    class="btn-icon"
     :aria-label="buttonLabel"
     @click="onToggle"
   >
diff --git a/app/controllers/groups/work_items_controller.rb b/app/controllers/groups/work_items_controller.rb
index c1482f094daea7..79ac3c14afcb10 100644
--- a/app/controllers/groups/work_items_controller.rb
+++ b/app/controllers/groups/work_items_controller.rb
@@ -5,6 +5,7 @@ class WorkItemsController < Groups::ApplicationController
     feature_category :team_planning
 
     before_action do
+      push_frontend_feature_flag(:notifications_todos_buttons)
       push_force_frontend_feature_flag(:work_items, group&.work_items_feature_flag_enabled?)
       push_force_frontend_feature_flag(:work_items_beta, group&.work_items_beta_feature_flag_enabled?)
       push_force_frontend_feature_flag(:work_items_mvc_2, group&.work_items_mvc_2_feature_flag_enabled?)
diff --git a/app/controllers/projects/work_items_controller.rb b/app/controllers/projects/work_items_controller.rb
index 9b75f5e7b9853b..c8315060b39513 100644
--- a/app/controllers/projects/work_items_controller.rb
+++ b/app/controllers/projects/work_items_controller.rb
@@ -8,6 +8,7 @@ class Projects::WorkItemsController < Projects::ApplicationController
 
   before_action :authorize_import_access!, only: [:import_csv, :authorize] # rubocop:disable Rails/LexicallyScopedActionFilter
   before_action do
+    push_frontend_feature_flag(:notifications_todos_buttons)
     push_force_frontend_feature_flag(:work_items, project&.work_items_feature_flag_enabled?)
     push_force_frontend_feature_flag(:work_items_beta, project&.work_items_beta_feature_flag_enabled?)
     push_force_frontend_feature_flag(:work_items_mvc_2, project&.work_items_mvc_2_feature_flag_enabled?)
diff --git a/spec/frontend/work_items/components/work_item_actions_without_subscribe_spec.js b/spec/frontend/work_items/components/work_item_actions_without_subscribe_spec.js
new file mode 100644
index 00000000000000..a0c91a90a241f6
--- /dev/null
+++ b/spec/frontend/work_items/components/work_item_actions_without_subscribe_spec.js
@@ -0,0 +1,391 @@
+import {
+  GlDisclosureDropdown,
+  GlDropdownDivider,
+  GlModal,
+  GlDisclosureDropdownItem,
+} from '@gitlab/ui';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { stubComponent } from 'helpers/stub_component';
+import waitForPromises from 'helpers/wait_for_promises';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
+import { isLoggedIn } from '~/lib/utils/common_utils';
+import toast from '~/vue_shared/plugins/global_toast';
+import WorkItemActionsWithoutSubscribe from '~/work_items/components/work_item_actions_without_subscribe.vue';
+import WorkItemStateToggle from '~/work_items/components/work_item_state_toggle.vue';
+import {
+  STATE_OPEN,
+  TEST_ID_CONFIDENTIALITY_TOGGLE_ACTION,
+  TEST_ID_COPY_CREATE_NOTE_EMAIL_ACTION,
+  TEST_ID_COPY_REFERENCE_ACTION,
+  TEST_ID_DELETE_ACTION,
+  TEST_ID_LOCK_ACTION,
+  TEST_ID_PROMOTE_ACTION,
+  TEST_ID_TOGGLE_ACTION,
+} from '~/work_items/constants';
+import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
+import updateWorkItemNotificationsMutation from '~/work_items/graphql/update_work_item_notifications.mutation.graphql';
+import projectWorkItemTypesQuery from '~/work_items/graphql/project_work_item_types.query.graphql';
+import convertWorkItemMutation from '~/work_items/graphql/work_item_convert.mutation.graphql';
+
+import {
+  convertWorkItemMutationResponse,
+  projectWorkItemTypesQueryResponse,
+  convertWorkItemMutationErrorResponse,
+  updateWorkItemMutationResponse,
+} from '../mock_data';
+
+jest.mock('~/lib/utils/common_utils');
+jest.mock('~/vue_shared/plugins/global_toast');
+
+describe('WorkItemActions component', () => {
+  Vue.use(VueApollo);
+
+  let wrapper;
+  const mockWorkItemReference = 'gitlab-org/gitlab-test#1';
+  const mockWorkItemCreateNoteEmail =
+    'gitlab-incoming+gitlab-org-gitlab-test-2-ddpzuq0zd2wefzofcpcdr3dg7-issue-1@gmail.com';
+
+  const findModal = () => wrapper.findComponent(GlModal);
+  const findConfidentialityToggleButton = () =>
+    wrapper.findByTestId(TEST_ID_CONFIDENTIALITY_TOGGLE_ACTION);
+  const findLockDiscussionButton = () => wrapper.findByTestId(TEST_ID_LOCK_ACTION);
+  const findDeleteButton = () => wrapper.findByTestId(TEST_ID_DELETE_ACTION);
+  const findPromoteButton = () => wrapper.findByTestId(TEST_ID_PROMOTE_ACTION);
+  const findCopyReferenceButton = () => wrapper.findByTestId(TEST_ID_COPY_REFERENCE_ACTION);
+  const findWorkItemToggleOption = () => wrapper.findComponent(WorkItemStateToggle);
+  const findCopyCreateNoteEmailButton = () =>
+    wrapper.findByTestId(TEST_ID_COPY_CREATE_NOTE_EMAIL_ACTION);
+  const findDropdownItems = () => wrapper.findAll('[data-testid="work-item-actions-dropdown"] > *');
+  const findDropdownItemsActual = () =>
+    findDropdownItems().wrappers.map((x) => {
+      if (x.is(GlDropdownDivider)) {
+        return { divider: true };
+      }
+
+      return {
+        testId: x.attributes('data-testid'),
+        text: x.text(),
+      };
+    });
+
+  const modalShowSpy = jest.fn();
+  const $toast = {
+    show: jest.fn(),
+    hide: jest.fn(),
+  };
+
+  const typesQuerySuccessHandler = jest.fn().mockResolvedValue(projectWorkItemTypesQueryResponse);
+  const convertWorkItemMutationSuccessHandler = jest
+    .fn()
+    .mockResolvedValue(convertWorkItemMutationResponse);
+  const convertWorkItemMutationErrorHandler = jest
+    .fn()
+    .mockResolvedValue(convertWorkItemMutationErrorResponse);
+  const lockDiscussionMutationResolver = jest
+    .fn()
+    .mockResolvedValue(updateWorkItemMutationResponse);
+
+  const createComponent = ({
+    canUpdate = true,
+    canDelete = true,
+    isConfidential = false,
+    isDiscussionLocked = false,
+    subscribed = false,
+    isParentConfidential = false,
+    convertWorkItemMutationHandler = convertWorkItemMutationSuccessHandler,
+    notificationsMutationHandler,
+    lockDiscussionMutationHandler = lockDiscussionMutationResolver,
+    workItemType = 'Task',
+    workItemReference = mockWorkItemReference,
+    workItemCreateNoteEmail = mockWorkItemCreateNoteEmail,
+  } = {}) => {
+    wrapper = shallowMountExtended(WorkItemActionsWithoutSubscribe, {
+      isLoggedIn: isLoggedIn(),
+      apolloProvider: createMockApollo([
+        [projectWorkItemTypesQuery, typesQuerySuccessHandler],
+        [convertWorkItemMutation, convertWorkItemMutationHandler],
+        [updateWorkItemNotificationsMutation, notificationsMutationHandler],
+        [updateWorkItemMutation, lockDiscussionMutationHandler],
+      ]),
+      propsData: {
+        workItemState: STATE_OPEN,
+        fullPath: 'gitlab-org/gitlab-test',
+        workItemId: 'gid://gitlab/WorkItem/1',
+        canUpdate,
+        canDelete,
+        isConfidential,
+        isDiscussionLocked,
+        subscribed,
+        isParentConfidential,
+        workItemType,
+        workItemReference,
+        workItemCreateNoteEmail,
+      },
+      provide: {
+        isGroup: false,
+        glFeatures: { workItemsBeta: true, workItemsMvc2: true },
+      },
+      mocks: {
+        $toast,
+      },
+      stubs: {
+        GlModal: stubComponent(GlModal, {
+          methods: {
+            show: jest.fn(),
+          },
+        }),
+        GlDisclosureDropdownItem,
+        GlDisclosureDropdown: stubComponent(GlDisclosureDropdown, {
+          methods: {
+            close: modalShowSpy,
+          },
+        }),
+      },
+    });
+  };
+
+  beforeEach(() => {
+    isLoggedIn.mockReturnValue(true);
+  });
+
+  it('renders modal', () => {
+    createComponent();
+
+    expect(findModal().props('visible')).toBe(false);
+  });
+
+  it('renders dropdown actions', () => {
+    createComponent();
+
+    expect(findDropdownItemsActual()).toEqual([
+      {
+        testId: TEST_ID_LOCK_ACTION,
+        text: 'Lock discussion',
+      },
+      {
+        testId: TEST_ID_CONFIDENTIALITY_TOGGLE_ACTION,
+        text: 'Turn on confidentiality',
+      },
+      {
+        testId: TEST_ID_TOGGLE_ACTION,
+        text: '',
+      },
+      {
+        testId: TEST_ID_COPY_REFERENCE_ACTION,
+        text: 'Copy reference',
+      },
+      {
+        testId: TEST_ID_COPY_CREATE_NOTE_EMAIL_ACTION,
+        text: 'Copy task email address',
+      },
+      {
+        divider: true,
+      },
+      {
+        testId: TEST_ID_DELETE_ACTION,
+        text: 'Delete task',
+      },
+    ]);
+  });
+
+  describe('lock discussion action', () => {
+    it.each`
+      isDiscussionLocked | buttonText
+      ${false}           | ${'Lock discussion'}
+      ${true}            | ${'Unlock discussion'}
+    `('renders with text "$buttonText"', ({ isDiscussionLocked, buttonText }) => {
+      createComponent({ isDiscussionLocked });
+
+      expect(findLockDiscussionButton().text()).toBe(buttonText);
+    });
+
+    it.each`
+      isDiscussionLocked | toastMessage
+      ${false}           | ${'Discussion unlocked.'}
+      ${true}            | ${'Discussion locked.'}
+    `(
+      'shows toast when clicked, with message "$toastMessage"',
+      async ({ isDiscussionLocked, toastMessage }) => {
+        createComponent({ isDiscussionLocked });
+
+        findLockDiscussionButton().vm.$emit('action');
+        await waitForPromises();
+
+        expect(toast).toHaveBeenCalledWith(toastMessage);
+      },
+    );
+
+    it('calls update mutation when clicked', async () => {
+      createComponent();
+
+      findLockDiscussionButton().vm.$emit('action');
+      await waitForPromises();
+
+      expect(lockDiscussionMutationResolver).toHaveBeenCalledWith({
+        input: {
+          id: 'gid://gitlab/WorkItem/1',
+          notesWidget: {
+            discussionLocked: true,
+          },
+        },
+      });
+    });
+
+    it('emits error when update mutation fails', async () => {
+      createComponent({
+        lockDiscussionMutationHandler: jest.fn().mockRejectedValue(new Error('oh no!')),
+      });
+
+      findLockDiscussionButton().vm.$emit('action');
+      await waitForPromises();
+
+      expect(wrapper.emitted('error')).toEqual([['oh no!']]);
+    });
+  });
+
+  describe('toggle confidentiality action', () => {
+    it.each`
+      isConfidential | buttonText
+      ${true}        | ${'Turn off confidentiality'}
+      ${false}       | ${'Turn on confidentiality'}
+    `(
+      'renders confidentiality toggle button with text "$buttonText"',
+      ({ isConfidential, buttonText }) => {
+        createComponent({ isConfidential });
+
+        expect(findConfidentialityToggleButton().text()).toBe(buttonText);
+      },
+    );
+
+    it('emits `toggleWorkItemConfidentiality` event when clicked', () => {
+      createComponent();
+
+      findConfidentialityToggleButton().vm.$emit('action');
+
+      expect(wrapper.emitted('toggleWorkItemConfidentiality')[0]).toEqual([true]);
+    });
+
+    it.each`
+      props                             | propName                  | value
+      ${{ isParentConfidential: true }} | ${'isParentConfidential'} | ${true}
+      ${{ canUpdate: false }}           | ${'canUpdate'}            | ${false}
+    `('does not render when $propName is $value', ({ props }) => {
+      createComponent(props);
+
+      expect(findConfidentialityToggleButton().exists()).toBe(false);
+    });
+  });
+
+  describe('delete action', () => {
+    it('shows confirm modal when clicked', () => {
+      createComponent();
+
+      findDeleteButton().vm.$emit('action');
+
+      expect(modalShowSpy).toHaveBeenCalled();
+    });
+
+    it('emits event when clicking OK button', () => {
+      createComponent();
+
+      findModal().vm.$emit('ok');
+
+      expect(wrapper.emitted('deleteWorkItem')).toEqual([[]]);
+    });
+
+    it('does not render when canDelete is false', () => {
+      createComponent({ canDelete: false });
+
+      expect(findDeleteButton().exists()).toBe(false);
+    });
+  });
+
+  describe('promote action', () => {
+    it.each`
+      workItemType   | show
+      ${'Task'}      | ${false}
+      ${'Objective'} | ${false}
+    `('does not show promote button for $workItemType', ({ workItemType, show }) => {
+      createComponent({ workItemType });
+
+      expect(findPromoteButton().exists()).toBe(show);
+    });
+
+    it('promote key result to objective', async () => {
+      createComponent({ workItemType: 'Key Result' });
+      await waitForPromises();
+
+      expect(findPromoteButton().exists()).toBe(true);
+
+      findPromoteButton().vm.$emit('action');
+      await waitForPromises();
+
+      expect(convertWorkItemMutationSuccessHandler).toHaveBeenCalled();
+      expect($toast.show).toHaveBeenCalledWith('Promoted to objective.');
+      expect(wrapper.emitted('promotedToObjective')).toEqual([[]]);
+    });
+
+    it('emits error when promote mutation fails', async () => {
+      createComponent({
+        workItemType: 'Key Result',
+        convertWorkItemMutationHandler: convertWorkItemMutationErrorHandler,
+      });
+      await waitForPromises();
+
+      expect(findPromoteButton().exists()).toBe(true);
+
+      findPromoteButton().vm.$emit('action');
+      await waitForPromises();
+
+      expect(convertWorkItemMutationErrorHandler).toHaveBeenCalled();
+      expect(wrapper.emitted('error')).toEqual([
+        ['Something went wrong while promoting the key result. Please try again.'],
+      ]);
+    });
+  });
+
+  describe('copy reference action', () => {
+    it('shows toast when user clicks on the action', () => {
+      createComponent();
+
+      expect(findCopyReferenceButton().exists()).toBe(true);
+
+      findCopyReferenceButton().vm.$emit('action');
+
+      expect(toast).toHaveBeenCalledWith('Reference copied');
+    });
+  });
+
+  describe('copy email address action', () => {
+    it.each(['key result', 'objective'])(
+      'renders correct button name when work item is %s',
+      (workItemType) => {
+        createComponent({ workItemType });
+
+        expect(findCopyCreateNoteEmailButton().text()).toEqual(
+          `Copy ${workItemType} email address`,
+        );
+      },
+    );
+
+    it('shows toast when user clicks on the action', () => {
+      createComponent();
+
+      expect(findCopyCreateNoteEmailButton().exists()).toBe(true);
+
+      findCopyCreateNoteEmailButton().vm.$emit('action');
+
+      expect(toast).toHaveBeenCalledWith('Email address copied');
+    });
+  });
+
+  it('renders the toggle status button', () => {
+    createComponent();
+
+    expect(findWorkItemToggleOption().exists()).toBe(true);
+  });
+});
diff --git a/spec/frontend/work_items/components/work_item_notifications_widget_spec.js b/spec/frontend/work_items/components/work_item_notifications_widget_spec.js
new file mode 100644
index 00000000000000..56c2be0d8008dc
--- /dev/null
+++ b/spec/frontend/work_items/components/work_item_notifications_widget_spec.js
@@ -0,0 +1,145 @@
+import { GlButton, GlIcon } from '@gitlab/ui';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
+import { isLoggedIn } from '~/lib/utils/common_utils';
+import toast from '~/vue_shared/plugins/global_toast';
+import WorkItemNotificationsWidget from '~/work_items/components/work_item_notifications_widget.vue';
+import updateWorkItemNotificationsMutation from '~/work_items/graphql/update_work_item_notifications.mutation.graphql';
+import projectWorkItemTypesQuery from '~/work_items/graphql/project_work_item_types.query.graphql';
+
+import {
+  projectWorkItemTypesQueryResponse,
+  updateWorkItemNotificationsMutationResponse,
+} from '../mock_data';
+
+jest.mock('~/lib/utils/common_utils');
+jest.mock('~/vue_shared/plugins/global_toast');
+
+describe('WorkItemActions component', () => {
+  Vue.use(VueApollo);
+
+  let wrapper;
+  const mockWorkItemReference = 'gitlab-org/gitlab-test#1';
+
+  const findNotificationsButton = () => wrapper.findComponent(GlButton);
+
+  const $toast = {
+    show: jest.fn(),
+    hide: jest.fn(),
+  };
+
+  const typesQuerySuccessHandler = jest.fn().mockResolvedValue(projectWorkItemTypesQueryResponse);
+  const toggleNotificationsOffHandler = jest
+    .fn()
+    .mockResolvedValue(updateWorkItemNotificationsMutationResponse(false));
+  const toggleNotificationsOnHandler = jest
+    .fn()
+    .mockResolvedValue(updateWorkItemNotificationsMutationResponse(true));
+  const toggleNotificationsFailureHandler = jest
+    .fn()
+    .mockRejectedValue(new Error('Failed to subscribe'));
+
+  const createComponent = ({
+    canUpdate = true,
+    subscribedToNotifications = false,
+    notificationsMutationHandler,
+    workItemType = 'Task',
+    workItemReference = mockWorkItemReference,
+  } = {}) => {
+    wrapper = shallowMountExtended(WorkItemNotificationsWidget, {
+      isLoggedIn: isLoggedIn(),
+      apolloProvider: createMockApollo([
+        [projectWorkItemTypesQuery, typesQuerySuccessHandler],
+        [updateWorkItemNotificationsMutation, notificationsMutationHandler],
+      ]),
+      propsData: {
+        fullPath: 'gitlab-org/gitlab-test',
+        workItemId: 'gid://gitlab/WorkItem/1',
+        canUpdate,
+        subscribedToNotifications,
+        workItemType,
+        workItemReference,
+      },
+      provide: {
+        isGroup: false,
+        glFeatures: { workItemsBeta: true, workItemsMvc2: true },
+      },
+      mocks: {
+        $toast,
+      },
+      stubs: {},
+    });
+  };
+
+  beforeEach(() => {
+    isLoggedIn.mockReturnValue(true);
+  });
+
+  it('renders button', () => {
+    createComponent();
+
+    expect(findNotificationsButton().exists()).toBe(true);
+  });
+
+  describe('notifications action', () => {
+    beforeEach(() => {
+      createComponent();
+      isLoggedIn.mockReturnValue(true);
+    });
+
+    it.each`
+      scenario                   | subscribedToNotifications | notificationsMutationHandler     | subscribed | toastMessage
+      ${'notifications are off'} | ${false}                  | ${toggleNotificationsOnHandler}  | ${true}    | ${'Notifications turned on.'}
+      ${'notifications are on'}  | ${true}                   | ${toggleNotificationsOffHandler} | ${false}   | ${'Notifications turned off.'}
+    `(
+      'calls mutation and displays toast when notification button is clicked while $scenario',
+      async ({
+        subscribedToNotifications,
+        notificationsMutationHandler,
+        subscribed,
+        toastMessage,
+      }) => {
+        createComponent({
+          notificationsMutationHandler,
+          subscribedToNotifications,
+        });
+
+        findNotificationsButton().vm.$emit('click');
+        await waitForPromises();
+
+        expect(notificationsMutationHandler).toHaveBeenCalledWith({
+          input: {
+            id: 'gid://gitlab/WorkItem/1',
+            subscribed,
+          },
+        });
+        expect(toast).toHaveBeenCalledWith(toastMessage);
+      },
+    );
+
+    it.each`
+      scenario                   | subscribedToNotifications | icon
+      ${'notifications are off'} | ${false}                  | ${'notifications-off'}
+      ${'notifications are on'}  | ${true}                   | ${'notifications'}
+    `('uses the correct icon when $scenario', ({ subscribedToNotifications, icon }) => {
+      createComponent({ subscribedToNotifications });
+      expect(findNotificationsButton().findComponent(GlIcon).props('name')).toBe(icon);
+    });
+
+    it('emits error when the update notification mutation fails', async () => {
+      createComponent({
+        notificationsMutationHandler: toggleNotificationsFailureHandler,
+      });
+
+      findNotificationsButton().vm.$emit('click');
+      await waitForPromises();
+
+      expect(wrapper.emitted('error')).toEqual([['Failed to subscribe']]);
+    });
+  });
+});
-- 
GitLab


From e232ebca18482f3323564ea5791109130d5bdd4d Mon Sep 17 00:00:00 2001
From: Chad Lavimoniere <clavimoniere@gitlab.com>
Date: Wed, 28 Feb 2024 16:47:14 -0500
Subject: [PATCH 2/3] Update work item rspecs

---
 .../projects/work_items/work_item_spec.rb     |  6 +++++
 .../features/work_items_shared_examples.rb    | 22 +++++++++++++------
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/spec/features/projects/work_items/work_item_spec.rb b/spec/features/projects/work_items/work_item_spec.rb
index ae7eec5c4c6d90..113658520b3194 100644
--- a/spec/features/projects/work_items/work_item_spec.rb
+++ b/spec/features/projects/work_items/work_item_spec.rb
@@ -3,6 +3,10 @@
 require 'spec_helper'
 
 RSpec.describe 'Work item', :js, feature_category: :team_planning do
+  before do
+    stub_feature_flags(notifications_todos_buttons: false)
+  end
+
   include ListboxHelpers
 
   let_it_be_with_reload(:user) { create(:user) }
@@ -20,6 +24,7 @@
 
   context 'for signed in user' do
     before do
+      stub_feature_flags(notifications_todos_buttons: false)
       stub_const("AutocompleteSources::ExpiresIn::AUTOCOMPLETE_EXPIRES_IN", 0)
       project.add_developer(user)
       sign_in(user)
@@ -73,6 +78,7 @@
     context 'when work_items_mvc_2 is enabled' do
       before do
         stub_feature_flags(work_items_mvc_2: true)
+        stub_feature_flags(notifications_todos_buttons: false)
 
         page.refresh
         wait_for_all_requests
diff --git a/spec/support/shared_examples/features/work_items_shared_examples.rb b/spec/support/shared_examples/features/work_items_shared_examples.rb
index fdd6dd163f41bc..9be141b2bf7563 100644
--- a/spec/support/shared_examples/features/work_items_shared_examples.rb
+++ b/spec/support/shared_examples/features/work_items_shared_examples.rb
@@ -3,7 +3,7 @@
 RSpec.shared_context 'with work_items_mvc_2' do |flag|
   before do
     stub_feature_flags(work_items_mvc_2: flag)
-
+    stub_feature_flags(notifications_todos_buttons: false)
     page.refresh
     wait_for_all_requests
   end
@@ -486,6 +486,7 @@ def click_reply_and_enter_slash
 
         before do
           project.add_developer(other_user)
+          stub_feature_flags(notifications_todos_buttons: false)
         end
 
         it 'shows conflict message when description changes', :aggregate_failures do
@@ -624,14 +625,21 @@ def click_reply_and_enter_slash
 
 RSpec.shared_examples 'work items notifications' do
   it 'displays toast when notification is toggled' do
-    click_button _('More actions'), match: :first
-
-    within_testid('notifications-toggle-form') do
-      expect(page).not_to have_button(class: 'gl-toggle is-checked')
+    if Feature.enabled?(:notifications_todos_buttons)
+      def notification_button
+        find('button[data-testid="subscribe-button"]')
+      end
+      notification_button.click
+      expect(page).to have_selector('svg[data-testid="notifications"]')
+    else
+      click_button _('More actions'), match: :first
+      within_testid('notifications-toggle-form') do
+        expect(page).not_to have_button(class: 'gl-toggle is-checked')
 
-      click_button(class: 'gl-toggle')
+        click_button(class: 'gl-toggle')
 
-      expect(page).to have_button(class: 'gl-toggle is-checked')
+        expect(page).to have_button(class: 'gl-toggle is-checked')
+      end
     end
 
     expect(page).to have_css('.gl-toast', text: _('Notifications turned on.'))
-- 
GitLab


From 120e9d5d7e8e89e5e43951cdeda6c162c6212f32 Mon Sep 17 00:00:00 2001
From: Chad Lavimoniere <clavimoniere@gitlab.com>
Date: Mon, 4 Mar 2024 16:43:01 -0500
Subject: [PATCH 3/3] Incorporate suggestion from @apennells

---
 .../components/work_item_actions.vue          |   7 +-
 .../work_item_actions_without_subscribe.vue   | 380 -----------------
 .../components/work_item_detail.vue           |  40 +-
 .../components/work_item_actions_spec.js      |  12 +-
 ...ork_item_actions_without_subscribe_spec.js | 391 ------------------
 5 files changed, 25 insertions(+), 805 deletions(-)
 delete mode 100644 app/assets/javascripts/work_items/components/work_item_actions_without_subscribe.vue
 delete mode 100644 spec/frontend/work_items/components/work_item_actions_without_subscribe_spec.js

diff --git a/app/assets/javascripts/work_items/components/work_item_actions.vue b/app/assets/javascripts/work_items/components/work_item_actions.vue
index eed6eb2b6eefb4..791a7b277baa12 100644
--- a/app/assets/javascripts/work_items/components/work_item_actions.vue
+++ b/app/assets/javascripts/work_items/components/work_item_actions.vue
@@ -145,6 +145,11 @@ export default {
       required: false,
       default: false,
     },
+    hideSubscribe: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -337,7 +342,7 @@ export default {
       no-caret
       right
     >
-      <template v-if="$options.isLoggedIn">
+      <template v-if="$options.isLoggedIn && !hideSubscribe">
         <gl-disclosure-dropdown-item
           class="gl-display-flex gl-justify-content-end gl-w-full"
           :data-testid="$options.notificationsToggleFormTestId"
diff --git a/app/assets/javascripts/work_items/components/work_item_actions_without_subscribe.vue b/app/assets/javascripts/work_items/components/work_item_actions_without_subscribe.vue
deleted file mode 100644
index f4709d08df831c..00000000000000
--- a/app/assets/javascripts/work_items/components/work_item_actions_without_subscribe.vue
+++ /dev/null
@@ -1,380 +0,0 @@
-<script>
-import {
-  GlDisclosureDropdown,
-  GlDisclosureDropdownItem,
-  GlDropdownDivider,
-  GlLoadingIcon,
-  GlModal,
-  GlModalDirective,
-} from '@gitlab/ui';
-
-import * as Sentry from '~/sentry/sentry_browser_wrapper';
-
-import { __, s__ } from '~/locale';
-import Tracking from '~/tracking';
-import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import toast from '~/vue_shared/plugins/global_toast';
-import { isLoggedIn } from '~/lib/utils/common_utils';
-
-import {
-  sprintfWorkItem,
-  I18N_WORK_ITEM_DELETE,
-  I18N_WORK_ITEM_ARE_YOU_SURE_DELETE,
-  TEST_ID_CONFIDENTIALITY_TOGGLE_ACTION,
-  TEST_ID_DELETE_ACTION,
-  TEST_ID_PROMOTE_ACTION,
-  TEST_ID_COPY_CREATE_NOTE_EMAIL_ACTION,
-  TEST_ID_COPY_REFERENCE_ACTION,
-  TEST_ID_TOGGLE_ACTION,
-  I18N_WORK_ITEM_ERROR_CONVERTING,
-  WORK_ITEM_TYPE_VALUE_KEY_RESULT,
-  WORK_ITEM_TYPE_VALUE_OBJECTIVE,
-  I18N_WORK_ITEM_COPY_CREATE_NOTE_EMAIL,
-  I18N_WORK_ITEM_ERROR_COPY_REFERENCE,
-  I18N_WORK_ITEM_ERROR_COPY_EMAIL,
-  TEST_ID_LOCK_ACTION,
-} from '../constants';
-import updateWorkItemMutation from '../graphql/update_work_item.mutation.graphql';
-import convertWorkItemMutation from '../graphql/work_item_convert.mutation.graphql';
-import projectWorkItemTypesQuery from '../graphql/project_work_item_types.query.graphql';
-import WorkItemStateToggle from './work_item_state_toggle.vue';
-
-export default {
-  i18n: {
-    enableConfidentiality: s__('WorkItem|Turn on confidentiality'),
-    disableConfidentiality: s__('WorkItem|Turn off confidentiality'),
-    copyReference: __('Copy reference'),
-    referenceCopied: __('Reference copied'),
-    emailAddressCopied: __('Email address copied'),
-  },
-  components: {
-    GlDisclosureDropdown,
-    GlDisclosureDropdownItem,
-    GlDropdownDivider,
-    GlLoadingIcon,
-    GlModal,
-    WorkItemStateToggle,
-  },
-  directives: {
-    GlModal: GlModalDirective,
-  },
-  mixins: [glFeatureFlagMixin(), Tracking.mixin({ label: 'actions_menu' })],
-  isLoggedIn: isLoggedIn(),
-  confidentialityTestId: TEST_ID_CONFIDENTIALITY_TOGGLE_ACTION,
-  copyReferenceTestId: TEST_ID_COPY_REFERENCE_ACTION,
-  copyCreateNoteEmailTestId: TEST_ID_COPY_CREATE_NOTE_EMAIL_ACTION,
-  deleteActionTestId: TEST_ID_DELETE_ACTION,
-  promoteActionTestId: TEST_ID_PROMOTE_ACTION,
-  lockDiscussionTestId: TEST_ID_LOCK_ACTION,
-  stateToggleTestId: TEST_ID_TOGGLE_ACTION,
-  inject: ['isGroup'],
-  props: {
-    fullPath: {
-      type: String,
-      required: true,
-    },
-    workItemState: {
-      type: String,
-      required: true,
-    },
-    workItemId: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    workItemType: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    workItemTypeId: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    canUpdate: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    canDelete: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isConfidential: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isDiscussionLocked: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isParentConfidential: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    workItemReference: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    workItemCreateNoteEmail: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    isModal: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      isLockDiscussionUpdating: false,
-    };
-  },
-  apollo: {
-    workItemTypes: {
-      query: projectWorkItemTypesQuery,
-      variables() {
-        return {
-          fullPath: this.fullPath,
-        };
-      },
-      update(data) {
-        return data.workspace?.workItemTypes?.nodes;
-      },
-      skip() {
-        return !this.canUpdate;
-      },
-    },
-  },
-  computed: {
-    i18n() {
-      return {
-        deleteWorkItem: sprintfWorkItem(I18N_WORK_ITEM_DELETE, this.workItemType),
-        areYouSureDelete: sprintfWorkItem(I18N_WORK_ITEM_ARE_YOU_SURE_DELETE, this.workItemType),
-        convertError: sprintfWorkItem(I18N_WORK_ITEM_ERROR_CONVERTING, this.workItemType),
-        copyCreateNoteEmail: sprintfWorkItem(
-          I18N_WORK_ITEM_COPY_CREATE_NOTE_EMAIL,
-          this.workItemType,
-        ),
-        copyReferenceError: sprintfWorkItem(I18N_WORK_ITEM_ERROR_COPY_REFERENCE, this.workItemType),
-        copyCreateNoteEmailError: sprintfWorkItem(
-          I18N_WORK_ITEM_ERROR_COPY_EMAIL,
-          this.workItemType,
-        ),
-      };
-    },
-    canLockWorkItem() {
-      return this.canUpdate && this.glFeatures.workItemsBeta;
-    },
-    canPromoteToObjective() {
-      return this.canUpdate && this.workItemType === WORK_ITEM_TYPE_VALUE_KEY_RESULT;
-    },
-    confidentialItemText() {
-      return this.isConfidential
-        ? this.$options.i18n.disableConfidentiality
-        : this.$options.i18n.enableConfidentiality;
-    },
-    lockDiscussionText() {
-      return this.isDiscussionLocked ? __('Unlock discussion') : __('Lock discussion');
-    },
-    objectiveWorkItemTypeId() {
-      return this.workItemTypes.find((type) => type.name === WORK_ITEM_TYPE_VALUE_OBJECTIVE).id;
-    },
-  },
-  methods: {
-    copyToClipboard(text, message) {
-      if (this.isModal) {
-        navigator.clipboard.writeText(text);
-      }
-      toast(message);
-      this.closeDropdown();
-    },
-    handleToggleWorkItemConfidentiality() {
-      this.track('click_toggle_work_item_confidentiality');
-      this.$emit('toggleWorkItemConfidentiality', !this.isConfidential);
-      this.closeDropdown();
-    },
-    handleDelete() {
-      this.$refs.modal.show();
-      this.closeDropdown();
-    },
-    handleDeleteWorkItem() {
-      this.track('click_delete_work_item');
-      this.$emit('deleteWorkItem');
-    },
-    handleCancelDeleteWorkItem({ trigger }) {
-      if (trigger !== 'ok') {
-        this.track('cancel_delete_work_item');
-      }
-    },
-    throwConvertError() {
-      this.$emit('error', this.i18n.convertError);
-    },
-    closeDropdown() {
-      this.$refs.workItemsMoreActions.close();
-    },
-    toggleDiscussionLock() {
-      this.isLockDiscussionUpdating = true;
-
-      this.$apollo
-        .mutate({
-          mutation: updateWorkItemMutation,
-          variables: {
-            input: {
-              id: this.workItemId,
-              notesWidget: {
-                discussionLocked: !this.isDiscussionLocked,
-              },
-            },
-          },
-        })
-        .then(({ data }) => {
-          const { errors } = data.workItemUpdate;
-          if (errors?.length) {
-            throw new Error(errors);
-          }
-
-          toast(this.isDiscussionLocked ? __('Discussion locked.') : __('Discussion unlocked.'));
-        })
-        .catch((error) => {
-          this.$emit('error', error.message);
-          Sentry.captureException(error);
-        })
-        .finally(() => {
-          this.isLockDiscussionUpdating = false;
-        });
-    },
-    async promoteToObjective() {
-      try {
-        const {
-          data: {
-            workItemConvert: { errors },
-          },
-        } = await this.$apollo.mutate({
-          mutation: convertWorkItemMutation,
-          variables: {
-            input: {
-              id: this.workItemId,
-              workItemTypeId: this.objectiveWorkItemTypeId,
-            },
-          },
-        });
-        if (errors.length > 0) {
-          this.throwConvertError();
-          return;
-        }
-        this.$toast.show(s__('WorkItem|Promoted to objective.'));
-        this.track('promote_kr_to_objective');
-        this.$emit('promotedToObjective');
-      } catch (error) {
-        this.throwConvertError();
-        Sentry.captureException(error);
-      } finally {
-        this.closeDropdown();
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-disclosure-dropdown
-      ref="workItemsMoreActions"
-      icon="ellipsis_v"
-      data-testid="work-item-actions-dropdown"
-      text-sr-only
-      :toggle-text="__('More actions')"
-      category="tertiary"
-      :auto-close="false"
-      no-caret
-      right
-    >
-      <gl-disclosure-dropdown-item
-        v-if="canPromoteToObjective"
-        :data-testid="$options.promoteActionTestId"
-        @action="promoteToObjective"
-      >
-        <template #list-item>{{ __('Promote to objective') }}</template>
-      </gl-disclosure-dropdown-item>
-
-      <gl-disclosure-dropdown-item
-        v-if="canLockWorkItem"
-        :data-testid="$options.lockDiscussionTestId"
-        @action="toggleDiscussionLock"
-      >
-        <template #list-item>
-          <gl-loading-icon v-if="isLockDiscussionUpdating" class="gl-mr-1" inline />
-          {{ lockDiscussionText }}
-        </template>
-      </gl-disclosure-dropdown-item>
-
-      <gl-disclosure-dropdown-item
-        v-if="canUpdate && !isParentConfidential"
-        :data-testid="$options.confidentialityTestId"
-        @action="handleToggleWorkItemConfidentiality"
-      >
-        <template #list-item>{{ confidentialItemText }}</template>
-      </gl-disclosure-dropdown-item>
-
-      <work-item-state-toggle
-        v-if="canUpdate"
-        :data-testid="$options.stateToggleTestId"
-        :work-item-id="workItemId"
-        :work-item-state="workItemState"
-        :work-item-type="workItemType"
-        show-as-dropdown-item
-      />
-
-      <gl-disclosure-dropdown-item
-        :data-testid="$options.copyReferenceTestId"
-        :data-clipboard-text="workItemReference"
-        @action="copyToClipboard(workItemReference, $options.i18n.referenceCopied)"
-      >
-        <template #list-item>{{ $options.i18n.copyReference }}</template>
-      </gl-disclosure-dropdown-item>
-
-      <gl-disclosure-dropdown-item
-        v-if="$options.isLoggedIn && workItemCreateNoteEmail"
-        :data-testid="$options.copyCreateNoteEmailTestId"
-        :data-clipboard-text="workItemCreateNoteEmail"
-        @action="copyToClipboard(workItemCreateNoteEmail, $options.i18n.emailAddressCopied)"
-      >
-        <template #list-item>{{ i18n.copyCreateNoteEmail }}</template>
-      </gl-disclosure-dropdown-item>
-
-      <template v-if="canDelete">
-        <gl-dropdown-divider />
-        <gl-disclosure-dropdown-item
-          :data-testid="$options.deleteActionTestId"
-          variant="danger"
-          @action="handleDelete"
-        >
-          <template #list-item>
-            <span class="text-danger">{{ i18n.deleteWorkItem }}</span>
-          </template>
-        </gl-disclosure-dropdown-item>
-      </template>
-    </gl-disclosure-dropdown>
-
-    <gl-modal
-      ref="modal"
-      modal-id="work-item-confirm-delete"
-      :title="i18n.deleteWorkItem"
-      :ok-title="i18n.deleteWorkItem"
-      ok-variant="danger"
-      @ok="handleDeleteWorkItem"
-      @hide="handleCancelDeleteWorkItem"
-    >
-      {{ i18n.areYouSureDelete }}
-    </gl-modal>
-  </div>
-</template>
diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue
index 8f9e59e2fb2fc4..6dbfd436ddf442 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -33,7 +33,6 @@ import { findHierarchyWidgetChildren } from '../utils';
 
 import WorkItemTree from './work_item_links/work_item_tree.vue';
 import WorkItemActions from './work_item_actions.vue';
-import WorkItemActionsWithoutSubscribe from './work_item_actions_without_subscribe.vue';
 import WorkItemTodos from './work_item_todos.vue';
 import WorkItemNotificationsWidget from './work_item_notifications_widget.vue';
 import WorkItemTitle from './work_item_title.vue';
@@ -60,7 +59,6 @@ export default {
     GlSkeletonLoader,
     GlEmptyState,
     WorkItemActions,
-    WorkItemActionsWithoutSubscribe,
     WorkItemTodos,
     WorkItemNotificationsWidget,
     WorkItemCreatedUpdated,
@@ -492,38 +490,18 @@ export default {
               :current-user-todos="currentUserTodos"
               @error="updateError = $event"
             />
-            <template v-if="newTodoAndNotificationsEnabled">
-              <work-item-notifications-widget
-                :full-path="fullPath"
-                :work-item-id="workItem.id"
-                :subscribed-to-notifications="workItemNotificationsSubscribed"
-                :can-update="canUpdate"
-                @error="updateError = $event"
-              />
-              <work-item-actions-without-subscribe
-                :full-path="fullPath"
-                :work-item-id="workItem.id"
-                :work-item-type="workItemType"
-                :work-item-type-id="workItemTypeId"
-                :can-delete="canDelete"
-                :can-update="canUpdate"
-                :is-confidential="workItem.confidential"
-                :is-discussion-locked="isDiscussionLocked"
-                :is-parent-confidential="parentWorkItemConfidentiality"
-                :work-item-reference="workItem.reference"
-                :work-item-create-note-email="workItem.createNoteEmail"
-                :is-modal="isModal"
-                :work-item-state="workItem.state"
-                @deleteWorkItem="$emit('deleteWorkItem', { workItemType, workItemId: workItem.id })"
-                @toggleWorkItemConfidentiality="toggleConfidentiality"
-                @error="updateError = $event"
-                @promotedToObjective="$emit('promotedToObjective', workItemIid)"
-              />
-            </template>
+            <work-item-notifications-widget
+              v-if="newTodoAndNotificationsEnabled"
+              :full-path="fullPath"
+              :work-item-id="workItem.id"
+              :subscribed-to-notifications="workItemNotificationsSubscribed"
+              :can-update="canUpdate"
+              @error="updateError = $event"
+            />
             <work-item-actions
-              v-else
               :full-path="fullPath"
               :work-item-id="workItem.id"
+              :hide-subscribe="newTodoAndNotificationsEnabled"
               :subscribed-to-notifications="workItemNotificationsSubscribed"
               :work-item-type="workItemType"
               :work-item-type-id="workItemTypeId"
diff --git a/spec/frontend/work_items/components/work_item_actions_spec.js b/spec/frontend/work_items/components/work_item_actions_spec.js
index f16960f2414507..4888f68d8e9025 100644
--- a/spec/frontend/work_items/components/work_item_actions_spec.js
+++ b/spec/frontend/work_items/components/work_item_actions_spec.js
@@ -115,6 +115,7 @@ describe('WorkItemActions component', () => {
     workItemType = 'Task',
     workItemReference = mockWorkItemReference,
     workItemCreateNoteEmail = mockWorkItemCreateNoteEmail,
+    hideSubscribe = undefined,
   } = {}) => {
     wrapper = shallowMountExtended(WorkItemActions, {
       isLoggedIn: isLoggedIn(),
@@ -137,6 +138,7 @@ describe('WorkItemActions component', () => {
         workItemType,
         workItemReference,
         workItemCreateNoteEmail,
+        hideSubscribe,
       },
       provide: {
         isGroup: false,
@@ -330,8 +332,14 @@ describe('WorkItemActions component', () => {
       isLoggedIn.mockReturnValue(true);
     });
 
-    it('renders toggle button', () => {
-      expect(findNotificationsToggle().exists()).toBe(true);
+    it.each`
+      scenario                                     | hideSubscribe
+      ${'does not show notification subscription'} | ${true}
+      ${'shows notification subscription'}         | ${false}
+      ${'shows notification subscription'}         | ${undefined}
+    `('$scenario when hideSubscribe is set to $hideSubscribe', ({ hideSubscribe }) => {
+      createComponent({ hideSubscribe });
+      expect(findNotificationsToggle().exists()).toBe(!hideSubscribe);
     });
 
     it.each`
diff --git a/spec/frontend/work_items/components/work_item_actions_without_subscribe_spec.js b/spec/frontend/work_items/components/work_item_actions_without_subscribe_spec.js
deleted file mode 100644
index a0c91a90a241f6..00000000000000
--- a/spec/frontend/work_items/components/work_item_actions_without_subscribe_spec.js
+++ /dev/null
@@ -1,391 +0,0 @@
-import {
-  GlDisclosureDropdown,
-  GlDropdownDivider,
-  GlModal,
-  GlDisclosureDropdownItem,
-} from '@gitlab/ui';
-import Vue from 'vue';
-import VueApollo from 'vue-apollo';
-
-import createMockApollo from 'helpers/mock_apollo_helper';
-import { stubComponent } from 'helpers/stub_component';
-import waitForPromises from 'helpers/wait_for_promises';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-
-import { isLoggedIn } from '~/lib/utils/common_utils';
-import toast from '~/vue_shared/plugins/global_toast';
-import WorkItemActionsWithoutSubscribe from '~/work_items/components/work_item_actions_without_subscribe.vue';
-import WorkItemStateToggle from '~/work_items/components/work_item_state_toggle.vue';
-import {
-  STATE_OPEN,
-  TEST_ID_CONFIDENTIALITY_TOGGLE_ACTION,
-  TEST_ID_COPY_CREATE_NOTE_EMAIL_ACTION,
-  TEST_ID_COPY_REFERENCE_ACTION,
-  TEST_ID_DELETE_ACTION,
-  TEST_ID_LOCK_ACTION,
-  TEST_ID_PROMOTE_ACTION,
-  TEST_ID_TOGGLE_ACTION,
-} from '~/work_items/constants';
-import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
-import updateWorkItemNotificationsMutation from '~/work_items/graphql/update_work_item_notifications.mutation.graphql';
-import projectWorkItemTypesQuery from '~/work_items/graphql/project_work_item_types.query.graphql';
-import convertWorkItemMutation from '~/work_items/graphql/work_item_convert.mutation.graphql';
-
-import {
-  convertWorkItemMutationResponse,
-  projectWorkItemTypesQueryResponse,
-  convertWorkItemMutationErrorResponse,
-  updateWorkItemMutationResponse,
-} from '../mock_data';
-
-jest.mock('~/lib/utils/common_utils');
-jest.mock('~/vue_shared/plugins/global_toast');
-
-describe('WorkItemActions component', () => {
-  Vue.use(VueApollo);
-
-  let wrapper;
-  const mockWorkItemReference = 'gitlab-org/gitlab-test#1';
-  const mockWorkItemCreateNoteEmail =
-    'gitlab-incoming+gitlab-org-gitlab-test-2-ddpzuq0zd2wefzofcpcdr3dg7-issue-1@gmail.com';
-
-  const findModal = () => wrapper.findComponent(GlModal);
-  const findConfidentialityToggleButton = () =>
-    wrapper.findByTestId(TEST_ID_CONFIDENTIALITY_TOGGLE_ACTION);
-  const findLockDiscussionButton = () => wrapper.findByTestId(TEST_ID_LOCK_ACTION);
-  const findDeleteButton = () => wrapper.findByTestId(TEST_ID_DELETE_ACTION);
-  const findPromoteButton = () => wrapper.findByTestId(TEST_ID_PROMOTE_ACTION);
-  const findCopyReferenceButton = () => wrapper.findByTestId(TEST_ID_COPY_REFERENCE_ACTION);
-  const findWorkItemToggleOption = () => wrapper.findComponent(WorkItemStateToggle);
-  const findCopyCreateNoteEmailButton = () =>
-    wrapper.findByTestId(TEST_ID_COPY_CREATE_NOTE_EMAIL_ACTION);
-  const findDropdownItems = () => wrapper.findAll('[data-testid="work-item-actions-dropdown"] > *');
-  const findDropdownItemsActual = () =>
-    findDropdownItems().wrappers.map((x) => {
-      if (x.is(GlDropdownDivider)) {
-        return { divider: true };
-      }
-
-      return {
-        testId: x.attributes('data-testid'),
-        text: x.text(),
-      };
-    });
-
-  const modalShowSpy = jest.fn();
-  const $toast = {
-    show: jest.fn(),
-    hide: jest.fn(),
-  };
-
-  const typesQuerySuccessHandler = jest.fn().mockResolvedValue(projectWorkItemTypesQueryResponse);
-  const convertWorkItemMutationSuccessHandler = jest
-    .fn()
-    .mockResolvedValue(convertWorkItemMutationResponse);
-  const convertWorkItemMutationErrorHandler = jest
-    .fn()
-    .mockResolvedValue(convertWorkItemMutationErrorResponse);
-  const lockDiscussionMutationResolver = jest
-    .fn()
-    .mockResolvedValue(updateWorkItemMutationResponse);
-
-  const createComponent = ({
-    canUpdate = true,
-    canDelete = true,
-    isConfidential = false,
-    isDiscussionLocked = false,
-    subscribed = false,
-    isParentConfidential = false,
-    convertWorkItemMutationHandler = convertWorkItemMutationSuccessHandler,
-    notificationsMutationHandler,
-    lockDiscussionMutationHandler = lockDiscussionMutationResolver,
-    workItemType = 'Task',
-    workItemReference = mockWorkItemReference,
-    workItemCreateNoteEmail = mockWorkItemCreateNoteEmail,
-  } = {}) => {
-    wrapper = shallowMountExtended(WorkItemActionsWithoutSubscribe, {
-      isLoggedIn: isLoggedIn(),
-      apolloProvider: createMockApollo([
-        [projectWorkItemTypesQuery, typesQuerySuccessHandler],
-        [convertWorkItemMutation, convertWorkItemMutationHandler],
-        [updateWorkItemNotificationsMutation, notificationsMutationHandler],
-        [updateWorkItemMutation, lockDiscussionMutationHandler],
-      ]),
-      propsData: {
-        workItemState: STATE_OPEN,
-        fullPath: 'gitlab-org/gitlab-test',
-        workItemId: 'gid://gitlab/WorkItem/1',
-        canUpdate,
-        canDelete,
-        isConfidential,
-        isDiscussionLocked,
-        subscribed,
-        isParentConfidential,
-        workItemType,
-        workItemReference,
-        workItemCreateNoteEmail,
-      },
-      provide: {
-        isGroup: false,
-        glFeatures: { workItemsBeta: true, workItemsMvc2: true },
-      },
-      mocks: {
-        $toast,
-      },
-      stubs: {
-        GlModal: stubComponent(GlModal, {
-          methods: {
-            show: jest.fn(),
-          },
-        }),
-        GlDisclosureDropdownItem,
-        GlDisclosureDropdown: stubComponent(GlDisclosureDropdown, {
-          methods: {
-            close: modalShowSpy,
-          },
-        }),
-      },
-    });
-  };
-
-  beforeEach(() => {
-    isLoggedIn.mockReturnValue(true);
-  });
-
-  it('renders modal', () => {
-    createComponent();
-
-    expect(findModal().props('visible')).toBe(false);
-  });
-
-  it('renders dropdown actions', () => {
-    createComponent();
-
-    expect(findDropdownItemsActual()).toEqual([
-      {
-        testId: TEST_ID_LOCK_ACTION,
-        text: 'Lock discussion',
-      },
-      {
-        testId: TEST_ID_CONFIDENTIALITY_TOGGLE_ACTION,
-        text: 'Turn on confidentiality',
-      },
-      {
-        testId: TEST_ID_TOGGLE_ACTION,
-        text: '',
-      },
-      {
-        testId: TEST_ID_COPY_REFERENCE_ACTION,
-        text: 'Copy reference',
-      },
-      {
-        testId: TEST_ID_COPY_CREATE_NOTE_EMAIL_ACTION,
-        text: 'Copy task email address',
-      },
-      {
-        divider: true,
-      },
-      {
-        testId: TEST_ID_DELETE_ACTION,
-        text: 'Delete task',
-      },
-    ]);
-  });
-
-  describe('lock discussion action', () => {
-    it.each`
-      isDiscussionLocked | buttonText
-      ${false}           | ${'Lock discussion'}
-      ${true}            | ${'Unlock discussion'}
-    `('renders with text "$buttonText"', ({ isDiscussionLocked, buttonText }) => {
-      createComponent({ isDiscussionLocked });
-
-      expect(findLockDiscussionButton().text()).toBe(buttonText);
-    });
-
-    it.each`
-      isDiscussionLocked | toastMessage
-      ${false}           | ${'Discussion unlocked.'}
-      ${true}            | ${'Discussion locked.'}
-    `(
-      'shows toast when clicked, with message "$toastMessage"',
-      async ({ isDiscussionLocked, toastMessage }) => {
-        createComponent({ isDiscussionLocked });
-
-        findLockDiscussionButton().vm.$emit('action');
-        await waitForPromises();
-
-        expect(toast).toHaveBeenCalledWith(toastMessage);
-      },
-    );
-
-    it('calls update mutation when clicked', async () => {
-      createComponent();
-
-      findLockDiscussionButton().vm.$emit('action');
-      await waitForPromises();
-
-      expect(lockDiscussionMutationResolver).toHaveBeenCalledWith({
-        input: {
-          id: 'gid://gitlab/WorkItem/1',
-          notesWidget: {
-            discussionLocked: true,
-          },
-        },
-      });
-    });
-
-    it('emits error when update mutation fails', async () => {
-      createComponent({
-        lockDiscussionMutationHandler: jest.fn().mockRejectedValue(new Error('oh no!')),
-      });
-
-      findLockDiscussionButton().vm.$emit('action');
-      await waitForPromises();
-
-      expect(wrapper.emitted('error')).toEqual([['oh no!']]);
-    });
-  });
-
-  describe('toggle confidentiality action', () => {
-    it.each`
-      isConfidential | buttonText
-      ${true}        | ${'Turn off confidentiality'}
-      ${false}       | ${'Turn on confidentiality'}
-    `(
-      'renders confidentiality toggle button with text "$buttonText"',
-      ({ isConfidential, buttonText }) => {
-        createComponent({ isConfidential });
-
-        expect(findConfidentialityToggleButton().text()).toBe(buttonText);
-      },
-    );
-
-    it('emits `toggleWorkItemConfidentiality` event when clicked', () => {
-      createComponent();
-
-      findConfidentialityToggleButton().vm.$emit('action');
-
-      expect(wrapper.emitted('toggleWorkItemConfidentiality')[0]).toEqual([true]);
-    });
-
-    it.each`
-      props                             | propName                  | value
-      ${{ isParentConfidential: true }} | ${'isParentConfidential'} | ${true}
-      ${{ canUpdate: false }}           | ${'canUpdate'}            | ${false}
-    `('does not render when $propName is $value', ({ props }) => {
-      createComponent(props);
-
-      expect(findConfidentialityToggleButton().exists()).toBe(false);
-    });
-  });
-
-  describe('delete action', () => {
-    it('shows confirm modal when clicked', () => {
-      createComponent();
-
-      findDeleteButton().vm.$emit('action');
-
-      expect(modalShowSpy).toHaveBeenCalled();
-    });
-
-    it('emits event when clicking OK button', () => {
-      createComponent();
-
-      findModal().vm.$emit('ok');
-
-      expect(wrapper.emitted('deleteWorkItem')).toEqual([[]]);
-    });
-
-    it('does not render when canDelete is false', () => {
-      createComponent({ canDelete: false });
-
-      expect(findDeleteButton().exists()).toBe(false);
-    });
-  });
-
-  describe('promote action', () => {
-    it.each`
-      workItemType   | show
-      ${'Task'}      | ${false}
-      ${'Objective'} | ${false}
-    `('does not show promote button for $workItemType', ({ workItemType, show }) => {
-      createComponent({ workItemType });
-
-      expect(findPromoteButton().exists()).toBe(show);
-    });
-
-    it('promote key result to objective', async () => {
-      createComponent({ workItemType: 'Key Result' });
-      await waitForPromises();
-
-      expect(findPromoteButton().exists()).toBe(true);
-
-      findPromoteButton().vm.$emit('action');
-      await waitForPromises();
-
-      expect(convertWorkItemMutationSuccessHandler).toHaveBeenCalled();
-      expect($toast.show).toHaveBeenCalledWith('Promoted to objective.');
-      expect(wrapper.emitted('promotedToObjective')).toEqual([[]]);
-    });
-
-    it('emits error when promote mutation fails', async () => {
-      createComponent({
-        workItemType: 'Key Result',
-        convertWorkItemMutationHandler: convertWorkItemMutationErrorHandler,
-      });
-      await waitForPromises();
-
-      expect(findPromoteButton().exists()).toBe(true);
-
-      findPromoteButton().vm.$emit('action');
-      await waitForPromises();
-
-      expect(convertWorkItemMutationErrorHandler).toHaveBeenCalled();
-      expect(wrapper.emitted('error')).toEqual([
-        ['Something went wrong while promoting the key result. Please try again.'],
-      ]);
-    });
-  });
-
-  describe('copy reference action', () => {
-    it('shows toast when user clicks on the action', () => {
-      createComponent();
-
-      expect(findCopyReferenceButton().exists()).toBe(true);
-
-      findCopyReferenceButton().vm.$emit('action');
-
-      expect(toast).toHaveBeenCalledWith('Reference copied');
-    });
-  });
-
-  describe('copy email address action', () => {
-    it.each(['key result', 'objective'])(
-      'renders correct button name when work item is %s',
-      (workItemType) => {
-        createComponent({ workItemType });
-
-        expect(findCopyCreateNoteEmailButton().text()).toEqual(
-          `Copy ${workItemType} email address`,
-        );
-      },
-    );
-
-    it('shows toast when user clicks on the action', () => {
-      createComponent();
-
-      expect(findCopyCreateNoteEmailButton().exists()).toBe(true);
-
-      findCopyCreateNoteEmailButton().vm.$emit('action');
-
-      expect(toast).toHaveBeenCalledWith('Email address copied');
-    });
-  });
-
-  it('renders the toggle status button', () => {
-    createComponent();
-
-    expect(findWorkItemToggleOption().exists()).toBe(true);
-  });
-});
-- 
GitLab