From 105aa449cd04dfdf9f0205b49d3965b2b7953239 Mon Sep 17 00:00:00 2001
From: Coung Ngo <cngo@gitlab.com>
Date: Wed, 22 Oct 2025 13:38:20 +0200
Subject: [PATCH] Internationalize work item types in UI

---
 .../components/create_work_item_modal.vue     | 27 +++++-------
 .../components/work_item_actions.vue          | 35 ++++++++-------
 .../work_item_rolled_up_count_info.vue        |  8 ++--
 .../components/work_item_state_toggle.vue     | 31 +++++++------
 .../javascripts/work_items/constants.js       | 13 +-----
 .../list/components/new_issue_dropdown.vue    |  9 +---
 locale/gitlab.pot                             |  3 ++
 .../components/work_item_actions_spec.js      | 40 +++++++++--------
 .../components/work_item_state_toggle_spec.js | 44 ++++++++++---------
 9 files changed, 102 insertions(+), 108 deletions(-)

diff --git a/app/assets/javascripts/work_items/components/create_work_item_modal.vue b/app/assets/javascripts/work_items/components/create_work_item_modal.vue
index d803fd7e8f1c1c..adef4d6a0efdf8 100644
--- a/app/assets/javascripts/work_items/components/create_work_item_modal.vue
+++ b/app/assets/javascripts/work_items/components/create_work_item_modal.vue
@@ -1,15 +1,15 @@
 <script>
 import { GlButton, GlModal, GlDisclosureDropdownItem, GlTooltipDirective } from '@gitlab/ui';
 import { visitUrl } from '~/lib/utils/url_utility';
-import { __, s__ } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 import { isMetaClick } from '~/lib/utils/common_utils';
 import { newWorkItemPath, canRouterNav, getDraftWorkItemType } from '~/work_items/utils';
 import {
+  NAME_TO_ENUM_MAP,
   NAME_TO_TEXT_LOWERCASE_MAP,
-  sprintfWorkItem,
-  ROUTES,
+  NAME_TO_TEXT_MAP,
   RELATED_ITEM_ID_URL_QUERY_PARAM,
-  NAME_TO_ENUM_MAP,
+  ROUTES,
   WORK_ITEM_TYPE_NAME_INCIDENT,
 } from '../constants';
 import CreateWorkItem from './create_work_item.vue';
@@ -148,25 +148,20 @@ export default {
         query: this.newWorkItemPathQuery,
       });
     },
-    selectedWorkItemTypeLowercase() {
-      return NAME_TO_TEXT_LOWERCASE_MAP[this.selectedWorkItemTypeName];
-    },
     newWorkItemButtonText() {
       return this.alwaysShowWorkItemTypeSelect && this.selectedWorkItemTypeName
-        ? sprintfWorkItem(s__('WorkItem|New %{workItemType}'), '')
+        ? s__('WorkItem|New item')
         : this.newWorkItemText;
     },
     newWorkItemText() {
-      return sprintfWorkItem(
-        s__('WorkItem|New %{workItemType}'),
-        this.selectedWorkItemTypeLowercase,
-      );
+      return sprintf(s__('WorkItem|New %{workItemType}'), {
+        workItemType: NAME_TO_TEXT_LOWERCASE_MAP[this.selectedWorkItemTypeName],
+      });
     },
     workItemCreatedText() {
-      return sprintfWorkItem(
-        s__('WorkItem|%{workItemType} created'),
-        this.selectedWorkItemTypeLowercase,
-      );
+      return sprintf(s__('WorkItem|%{workItemType} created'), {
+        workItemType: NAME_TO_TEXT_MAP[this.selectedWorkItemTypeName],
+      });
     },
   },
   watch: {
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 a954c35ed00d96..8923ac93d45748 100644
--- a/app/assets/javascripts/work_items/components/work_item_actions.vue
+++ b/app/assets/javascripts/work_items/components/work_item_actions.vue
@@ -15,7 +15,7 @@ import {
 import { nextTick } from 'vue';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 
-import { __, s__ } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 import { getModifierKey } from '~/constants';
 import Tracking from '~/tracking';
 import { shouldDisableShortcuts } from '~/behaviors/shortcuts/shortcuts_toggle';
@@ -25,9 +25,9 @@ import { isLoggedIn } from '~/lib/utils/common_utils';
 
 import WorkItemChangeTypeModal from 'ee_else_ce/work_items/components/work_item_change_type_modal.vue';
 import {
-  sprintfWorkItem,
   BASE_ALLOWED_CREATE_TYPES,
   CREATION_CONTEXT_RELATED_ITEM,
+  NAME_TO_TEXT_LOWERCASE_MAP,
   STATE_CLOSED,
   WORK_ITEM_TYPE_NAME_KEY_RESULT,
   WORK_ITEM_TYPE_NAME_OBJECTIVE,
@@ -288,34 +288,37 @@ export default {
   computed: {
     i18n() {
       return {
-        deleteWorkItem: sprintfWorkItem(s__('WorkItem|Delete %{workItemType}'), this.workItemType),
-        convertError: sprintfWorkItem(
+        deleteWorkItem: sprintf(s__('WorkItem|Delete %{workItemType}'), {
+          workItemType: NAME_TO_TEXT_LOWERCASE_MAP[this.workItemType],
+        }),
+        convertError: sprintf(
           s__(
             'WorkItem|Something went wrong while promoting the %{workItemType}. Please try again.',
           ),
-          this.workItemType,
+          { workItemType: NAME_TO_TEXT_LOWERCASE_MAP[this.workItemType] },
         ),
-        copyCreateNoteEmail: sprintfWorkItem(
-          s__('WorkItem|Copy %{workItemType} email address'),
-          this.workItemType,
-        ),
-        copyReferenceError: sprintfWorkItem(
+        copyCreateNoteEmail: sprintf(s__('WorkItem|Copy %{workItemType} email address'), {
+          workItemType: NAME_TO_TEXT_LOWERCASE_MAP[this.workItemType],
+        }),
+        copyReferenceError: sprintf(
           s__(
             'WorkItem|Something went wrong while copying the %{workItemType} reference. Please try again.',
           ),
-          this.workItemType,
+          { workItemType: NAME_TO_TEXT_LOWERCASE_MAP[this.workItemType] },
         ),
-        copyCreateNoteEmailError: sprintfWorkItem(
+        copyCreateNoteEmailError: sprintf(
           s__(
             'WorkItem|Something went wrong while copying the %{workItemType} email address. Please try again.',
           ),
-          this.workItemType,
+          { workItemType: NAME_TO_TEXT_LOWERCASE_MAP[this.workItemType] },
         ),
       };
     },
     newRelatedItemLabel() {
       return this.workItemType === WORK_ITEM_TYPE_NAME_EPIC
-        ? sprintfWorkItem(s__('WorkItem|New related %{workItemType}'), this.workItemType)
+        ? sprintf(s__('WorkItem|New related %{workItemType}'), {
+            workItemType: NAME_TO_TEXT_LOWERCASE_MAP[this.workItemType],
+          })
         : s__('WorkItem|New related item');
     },
     areYouSureDeleteMessage() {
@@ -326,7 +329,9 @@ export default {
         : s__(
             'WorkItem|Are you sure you want to delete the %{workItemType}? This action cannot be reversed.',
           );
-      return sprintfWorkItem(message, this.workItemType);
+      return sprintf(message, {
+        workItemType: NAME_TO_TEXT_LOWERCASE_MAP[this.workItemType],
+      });
     },
     canPromoteToObjective() {
       return this.canUpdateMetadata && this.workItemType === WORK_ITEM_TYPE_NAME_KEY_RESULT;
diff --git a/app/assets/javascripts/work_items/components/work_item_links/work_item_rolled_up_count_info.vue b/app/assets/javascripts/work_items/components/work_item_links/work_item_rolled_up_count_info.vue
index 26867105262f98..a47a8ef6ce403c 100644
--- a/app/assets/javascripts/work_items/components/work_item_links/work_item_rolled_up_count_info.vue
+++ b/app/assets/javascripts/work_items/components/work_item_links/work_item_rolled_up_count_info.vue
@@ -1,6 +1,6 @@
 <script>
-import { s__ } from '~/locale';
-import { sprintfWorkItem } from '~/work_items/constants';
+import { s__, sprintf } from '~/locale';
+import { NAME_TO_TEXT_LOWERCASE_MAP } from '~/work_items/constants';
 import WorkItemTypeIcon from '~/work_items/components/work_item_type_icon.vue';
 
 export default {
@@ -15,7 +15,9 @@ export default {
   },
   methods: {
     getItemsClosedLabel(workItemType) {
-      return sprintfWorkItem(s__('WorkItem| %{workItemType}s closed'), workItemType);
+      return sprintf(s__('WorkItem| %{workItemType}s closed'), {
+        workItemType: NAME_TO_TEXT_LOWERCASE_MAP[workItemType],
+      });
     },
   },
 };
diff --git a/app/assets/javascripts/work_items/components/work_item_state_toggle.vue b/app/assets/javascripts/work_items/components/work_item_state_toggle.vue
index cf79df36c3a029..02ac4911f4dd70 100644
--- a/app/assets/javascripts/work_items/components/work_item_state_toggle.vue
+++ b/app/assets/javascripts/work_items/components/work_item_state_toggle.vue
@@ -11,7 +11,6 @@ import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import Tracking from '~/tracking';
 import { __, s__, sprintf } from '~/locale';
 import {
-  sprintfWorkItem,
   I18N_WORK_ITEM_ERROR_UPDATING,
   STATE_OPEN,
   STATE_EVENT_CLOSE,
@@ -180,7 +179,7 @@ export default {
           ? s__('WorkItem|Comment & close %{workItemType}')
           : s__('WorkItem|Comment & reopen %{workItemType}');
       }
-      return sprintfWorkItem(baseText, this.workItemType);
+      return sprintf(baseText, { workItemType: NAME_TO_TEXT_LOWERCASE_MAP[this.workItemType] });
     },
     toggleWorkItemStateIcon() {
       return this.isWorkItemOpen ? 'issue-close' : 'issue-open-m';
@@ -197,7 +196,7 @@ export default {
       const baseText = this.isWorkItemOpen
         ? s__('WorkItem|Closing %{workItemType}')
         : s__('WorkItem|Reopening %{workItemType}');
-      return sprintfWorkItem(baseText, this.workItemType);
+      return sprintf(baseText, { workItemType: NAME_TO_TEXT_LOWERCASE_MAP[this.workItemType] });
     },
     isBlocked() {
       return this.blockerItems.length > 0;
@@ -217,29 +216,27 @@ export default {
       return this.updateWorkItem;
     },
     blockedByModalTitle() {
-      return sprintfWorkItem(
-        s__('WorkItem|Are you sure you want to close this blocked %{workItemType}?'),
-        this.workItemType,
-      );
+      return sprintf(s__('WorkItem|Are you sure you want to close this blocked %{workItemType}?'), {
+        workItemType: NAME_TO_TEXT_LOWERCASE_MAP[this.workItemType],
+      });
     },
     blockedByModalBody() {
-      return sprintfWorkItem(
+      return sprintf(
         s__('WorkItem|This %{workItemType} is currently blocked by the following items:'),
-        this.workItemType,
+        { workItemType: NAME_TO_TEXT_LOWERCASE_MAP[this.workItemType] },
       );
     },
     openChildrenModalTitle() {
-      return sprintfWorkItem(
-        s__('WorkItem|Are you sure you want to close this %{workItemType}?'),
-        this.workItemType,
-      );
+      return sprintf(s__('WorkItem|Are you sure you want to close this %{workItemType}?'), {
+        workItemType: NAME_TO_TEXT_LOWERCASE_MAP[this.workItemType],
+      });
     },
     openChildrenModalBody() {
-      return sprintfWorkItem(
+      return sprintf(
         s__(
           'WorkItem|This %{workItemType} has open child items. If you close this %{workItemType}, they will remain open.',
         ),
-        this.workItemType,
+        { workItemType: NAME_TO_TEXT_LOWERCASE_MAP[this.workItemType] },
       );
     },
     modalActionCancel() {
@@ -249,7 +246,9 @@ export default {
     },
     modalActionPrimary() {
       return {
-        text: sprintfWorkItem(s__('WorkItem|Yes, close %{workItemType}'), this.workItemType),
+        text: sprintf(s__('WorkItem|Yes, close %{workItemType}'), {
+          workItemType: NAME_TO_TEXT_LOWERCASE_MAP[this.workItemType],
+        }),
       };
     },
   },
diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js
index d62b54c17a67ab..09dfb9170264af 100644
--- a/app/assets/javascripts/work_items/constants.js
+++ b/app/assets/javascripts/work_items/constants.js
@@ -1,5 +1,4 @@
-import { __, s__, sprintf } from '~/locale';
-import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
+import { __, s__ } from '~/locale';
 
 export const BULK_EDIT_NO_VALUE = 'no-value';
 
@@ -98,16 +97,6 @@ export const I18N_WORK_ITEM_SEARCH_ERROR = s__(
 
 export const MAX_WORK_ITEMS = 10;
 
-export const sprintfWorkItem = (msg, workItemTypeArg, parentWorkItemType = '') => {
-  const workItemType = workItemTypeArg || s__('WorkItem|item');
-  return capitalizeFirstCharacter(
-    sprintf(msg, {
-      workItemType: workItemType.toLocaleLowerCase(),
-      parentWorkItemType: parentWorkItemType.toLocaleLowerCase(),
-    }),
-  );
-};
-
 export const FORM_TYPES = {
   create: 'create',
   add: 'add',
diff --git a/ee/app/assets/javascripts/issues/list/components/new_issue_dropdown.vue b/ee/app/assets/javascripts/issues/list/components/new_issue_dropdown.vue
index 66a6205e31ed7d..73a85dbc76d872 100644
--- a/ee/app/assets/javascripts/issues/list/components/new_issue_dropdown.vue
+++ b/ee/app/assets/javascripts/issues/list/components/new_issue_dropdown.vue
@@ -5,12 +5,8 @@ import {
   GlDisclosureDropdown,
   GlDisclosureDropdownItem,
 } from '@gitlab/ui';
-import { __, s__ } from '~/locale';
-import {
-  CREATION_CONTEXT_LIST_ROUTE,
-  sprintfWorkItem,
-  WORK_ITEM_TYPE_NAME_OBJECTIVE,
-} from '~/work_items/constants';
+import { __ } from '~/locale';
+import { CREATION_CONTEXT_LIST_ROUTE, WORK_ITEM_TYPE_NAME_OBJECTIVE } from '~/work_items/constants';
 
 export default {
   CREATION_CONTEXT_LIST_ROUTE,
@@ -18,7 +14,6 @@ export default {
   i18n: {
     newIssueLabel: __('New issue'),
     toggleSrText: __('Issue type'),
-    newObjectiveLabel: sprintfWorkItem(s__('WorkItem|New %{workItemType}')),
   },
   components: {
     GlDisclosureDropdown,
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index d2c2fe7a027148..55869923d533d3 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -75263,6 +75263,9 @@ msgstr ""
 msgid "WorkItem|New custom field"
 msgstr ""
 
+msgid "WorkItem|New item"
+msgstr ""
+
 msgid "WorkItem|New related %{workItemType}"
 msgstr ""
 
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 18bdecd7318bba..940ffcffab95bc 100644
--- a/spec/frontend/work_items/components/work_item_actions_spec.js
+++ b/spec/frontend/work_items/components/work_item_actions_spec.js
@@ -18,7 +18,9 @@ import WorkItemChangeTypeModal from 'ee_else_ce/work_items/components/work_item_
 import MoveWorkItemModal from '~/work_items/components/move_work_item_modal.vue';
 import {
   CREATION_CONTEXT_RELATED_ITEM,
+  NAME_TO_TEXT_LOWERCASE_MAP,
   STATE_OPEN,
+  WORK_ITEM_TYPE_NAME_EPIC,
   WORK_ITEM_TYPE_NAME_INCIDENT,
   WORK_ITEM_TYPE_NAME_ISSUE,
   WORK_ITEM_TYPE_NAME_KEY_RESULT,
@@ -144,7 +146,7 @@ describe('WorkItemActions component', () => {
     convertWorkItemMutationHandler = convertWorkItemMutationSuccessHandler,
     notificationsMutationHandler,
     lockDiscussionMutationHandler = lockDiscussionMutationResolver,
-    workItemType = 'Task',
+    workItemType = WORK_ITEM_TYPE_NAME_TASK,
     workItemReference = mockWorkItemReference,
     workItemCreateNoteEmail = mockWorkItemCreateNoteEmail,
     hideSubscribe = undefined,
@@ -237,7 +239,7 @@ describe('WorkItemActions component', () => {
   });
 
   it('renders dropdown actions', async () => {
-    createComponent({ workItemType: 'Issue' });
+    createComponent({ workItemType: WORK_ITEM_TYPE_NAME_ISSUE });
 
     await waitForPromises();
 
@@ -312,7 +314,7 @@ describe('WorkItemActions component', () => {
   });
 
   it('renders "New related epic" instead of the default "New related item" when type is Epic', () => {
-    createComponent({ workItemType: 'Epic' });
+    createComponent({ workItemType: WORK_ITEM_TYPE_NAME_EPIC });
 
     expect(findDropdownItemsActual()).toEqual(
       expect.arrayContaining([
@@ -517,9 +519,9 @@ describe('WorkItemActions component', () => {
 
   describe('promote action', () => {
     it.each`
-      workItemType   | show
-      ${'Task'}      | ${false}
-      ${'Objective'} | ${false}
+      workItemType                     | show
+      ${WORK_ITEM_TYPE_NAME_TASK}      | ${false}
+      ${WORK_ITEM_TYPE_NAME_OBJECTIVE} | ${false}
     `('does not show promote button for $workItemType', ({ workItemType, show }) => {
       createComponent({ workItemType });
 
@@ -527,7 +529,7 @@ describe('WorkItemActions component', () => {
     });
 
     it('promote key result to objective', async () => {
-      createComponent({ workItemType: 'Key Result' });
+      createComponent({ workItemType: WORK_ITEM_TYPE_NAME_KEY_RESULT });
       await waitForPromises();
 
       expect(findPromoteButton().exists()).toBe(true);
@@ -542,7 +544,7 @@ describe('WorkItemActions component', () => {
 
     it('emits error when promote mutation fails', async () => {
       createComponent({
-        workItemType: 'Key Result',
+        workItemType: WORK_ITEM_TYPE_NAME_KEY_RESULT,
         convertWorkItemMutationHandler: convertWorkItemMutationErrorHandler,
       });
       await waitForPromises();
@@ -572,13 +574,13 @@ describe('WorkItemActions component', () => {
   });
 
   describe('copy email address action', () => {
-    it.each(['key result', 'objective'])(
+    it.each([WORK_ITEM_TYPE_NAME_KEY_RESULT, WORK_ITEM_TYPE_NAME_OBJECTIVE])(
       'renders correct button name when work item is %s',
       (workItemType) => {
         createComponent({ workItemType });
 
         expect(findCopyCreateNoteEmailButton().text()).toEqual(
-          `Copy ${workItemType} email address`,
+          `Copy ${NAME_TO_TEXT_LOWERCASE_MAP[workItemType]} email address`,
         );
       },
     );
@@ -695,14 +697,14 @@ describe('WorkItemActions component', () => {
         relatedItem: {
           id: 'gid://gitlab/WorkItem/1',
           reference: 'gitlab-org/gitlab-test#1',
-          type: 'Task',
+          type: WORK_ITEM_TYPE_NAME_TASK,
           webUrl: 'gitlab-org/gitlab-test/-/work_items/1',
         },
       });
     });
 
     it('opens the create work item modal', async () => {
-      createComponent({ workItemType: 'Task' });
+      createComponent({ workItemType: WORK_ITEM_TYPE_NAME_TASK });
 
       findNewRelatedItemButton().vm.$emit('action');
       await nextTick();
@@ -712,9 +714,9 @@ describe('WorkItemActions component', () => {
 
     it.each`
       isProjectSelectorVisible | workItemType
-      ${false}                 | ${'Epic'}
-      ${true}                  | ${'Issue'}
-      ${true}                  | ${'Task'}
+      ${false}                 | ${WORK_ITEM_TYPE_NAME_EPIC}
+      ${true}                  | ${WORK_ITEM_TYPE_NAME_ISSUE}
+      ${true}                  | ${WORK_ITEM_TYPE_NAME_TASK}
     `(
       'when workItemType is $workItemType, sets `CreateWorkItemModal` `showProjectSelector` prop to $isProjectSelectorVisible',
       ({ isProjectSelectorVisible, workItemType }) => {
@@ -737,7 +739,7 @@ describe('WorkItemActions component', () => {
 
   describe('change type action', () => {
     it('opens the change type modal', () => {
-      createComponent({ workItemType: 'Task' });
+      createComponent({ workItemType: WORK_ITEM_TYPE_NAME_TASK });
 
       findChangeTypeButton().vm.$emit('action');
 
@@ -745,7 +747,7 @@ describe('WorkItemActions component', () => {
     });
 
     it('hides the action in case of Epic type', () => {
-      createComponent({ workItemType: 'Epic' });
+      createComponent({ workItemType: WORK_ITEM_TYPE_NAME_EPIC });
 
       expect(findChangeTypeButton().exists()).toBe(false);
     });
@@ -866,7 +868,7 @@ describe('WorkItemActions component', () => {
   });
   describe('view options', () => {
     it('toggles truncation enabled', () => {
-      createComponent({ workItemType: 'Task' });
+      createComponent({ workItemType: WORK_ITEM_TYPE_NAME_TASK });
 
       expect(findTruncationToggle().exists()).toBe(true);
 
@@ -876,7 +878,7 @@ describe('WorkItemActions component', () => {
     });
 
     it('toggles sidebar visibility', () => {
-      createComponent({ workItemType: 'Task' });
+      createComponent({ workItemType: WORK_ITEM_TYPE_NAME_TASK });
 
       expect(findSidebarToggle().exists()).toBe(true);
 
diff --git a/spec/frontend/work_items/components/work_item_state_toggle_spec.js b/spec/frontend/work_items/components/work_item_state_toggle_spec.js
index 35afd44f478602..104a461e251838 100644
--- a/spec/frontend/work_items/components/work_item_state_toggle_spec.js
+++ b/spec/frontend/work_items/components/work_item_state_toggle_spec.js
@@ -7,11 +7,15 @@ import waitForPromises from 'helpers/wait_for_promises';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import WorkItemStateToggle from '~/work_items/components/work_item_state_toggle.vue';
 import {
-  STATE_OPEN,
-  STATE_CLOSED,
   STATE_EVENT_CLOSE,
   STATE_EVENT_REOPEN,
+  STATE_CLOSED,
+  STATE_OPEN,
   TRACKING_CATEGORY_SHOW,
+  WORK_ITEM_TYPE_NAME_EPIC,
+  WORK_ITEM_TYPE_NAME_KEY_RESULT,
+  WORK_ITEM_TYPE_NAME_OBJECTIVE,
+  WORK_ITEM_TYPE_NAME_TASK,
 } from '~/work_items/constants';
 import { updateCountsForParent } from '~/work_items/graphql/cache_utils';
 import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
@@ -62,7 +66,7 @@ describe('Work Item State toggle button component', () => {
     workItemOpenChildCountHandler = openChildCountSuccessHandler,
     canUpdate = true,
     workItemState = STATE_OPEN,
-    workItemType = 'Task',
+    workItemType = WORK_ITEM_TYPE_NAME_TASK,
     hasComment = false,
     disabled = false,
     parentId = null,
@@ -98,13 +102,13 @@ describe('Work Item State toggle button component', () => {
 
   describe('work item State button text', () => {
     it.each`
-      workItemState   | workItemType    | buttonText
-      ${STATE_OPEN}   | ${'Task'}       | ${'Close task'}
-      ${STATE_CLOSED} | ${'Task'}       | ${'Reopen task'}
-      ${STATE_OPEN}   | ${'Objective'}  | ${'Close objective'}
-      ${STATE_CLOSED} | ${'Objective'}  | ${'Reopen objective'}
-      ${STATE_OPEN}   | ${'Key result'} | ${'Close key result'}
-      ${STATE_CLOSED} | ${'Key result'} | ${'Reopen key result'}
+      workItemState   | workItemType                      | buttonText
+      ${STATE_OPEN}   | ${WORK_ITEM_TYPE_NAME_TASK}       | ${'Close task'}
+      ${STATE_CLOSED} | ${WORK_ITEM_TYPE_NAME_TASK}       | ${'Reopen task'}
+      ${STATE_OPEN}   | ${WORK_ITEM_TYPE_NAME_OBJECTIVE}  | ${'Close objective'}
+      ${STATE_CLOSED} | ${WORK_ITEM_TYPE_NAME_OBJECTIVE}  | ${'Reopen objective'}
+      ${STATE_OPEN}   | ${WORK_ITEM_TYPE_NAME_KEY_RESULT} | ${'Close key result'}
+      ${STATE_CLOSED} | ${WORK_ITEM_TYPE_NAME_KEY_RESULT} | ${'Reopen key result'}
     `(
       'is "$buttonText" when "$workItemType" state is "$workItemState"',
       ({ workItemState, workItemType, buttonText }) => {
@@ -115,13 +119,13 @@ describe('Work Item State toggle button component', () => {
     );
 
     it.each`
-      workItemState   | workItemType    | buttonText
-      ${STATE_OPEN}   | ${'Task'}       | ${'Comment & close task'}
-      ${STATE_CLOSED} | ${'Task'}       | ${'Comment & reopen task'}
-      ${STATE_OPEN}   | ${'Objective'}  | ${'Comment & close objective'}
-      ${STATE_CLOSED} | ${'Objective'}  | ${'Comment & reopen objective'}
-      ${STATE_OPEN}   | ${'Key result'} | ${'Comment & close key result'}
-      ${STATE_CLOSED} | ${'Key result'} | ${'Comment & reopen key result'}
+      workItemState   | workItemType                      | buttonText
+      ${STATE_OPEN}   | ${WORK_ITEM_TYPE_NAME_TASK}       | ${'Comment & close task'}
+      ${STATE_CLOSED} | ${WORK_ITEM_TYPE_NAME_TASK}       | ${'Comment & reopen task'}
+      ${STATE_OPEN}   | ${WORK_ITEM_TYPE_NAME_OBJECTIVE}  | ${'Comment & close objective'}
+      ${STATE_CLOSED} | ${WORK_ITEM_TYPE_NAME_OBJECTIVE}  | ${'Comment & reopen objective'}
+      ${STATE_OPEN}   | ${WORK_ITEM_TYPE_NAME_KEY_RESULT} | ${'Comment & close key result'}
+      ${STATE_CLOSED} | ${WORK_ITEM_TYPE_NAME_KEY_RESULT} | ${'Comment & reopen key result'}
     `(
       'is "$buttonText" when "$workItemType" state is "$workItemState" and hasComment is true',
       ({ workItemState, workItemType, buttonText }) => {
@@ -208,7 +212,7 @@ describe('Work Item State toggle button component', () => {
           cache: expect.anything(Object),
           parentId: 'example-id',
           isClosing: true,
-          workItemType: 'Task',
+          workItemType: WORK_ITEM_TYPE_NAME_TASK,
         });
       });
     });
@@ -261,7 +265,7 @@ describe('Work Item State toggle button component', () => {
         workItemLinkedItemsHandler: jest
           .fn()
           .mockResolvedValue(workItemsClosedAndOpenLinkedItemsResponse),
-        workItemType: 'Epic',
+        workItemType: WORK_ITEM_TYPE_NAME_EPIC,
       });
       await waitForPromises();
 
@@ -275,7 +279,7 @@ describe('Work Item State toggle button component', () => {
     beforeEach(async () => {
       createComponent({
         workItemOpenChildCountHandler: jest.fn().mockResolvedValue(mockOpenChildrenCount),
-        workItemType: 'Epic',
+        workItemType: WORK_ITEM_TYPE_NAME_EPIC,
       });
       await waitForPromises();
     });
-- 
GitLab