From 1f49e32f412f5c6f0a0a8bd10a5a698fae842514 Mon Sep 17 00:00:00 2001
From: Abhilash Kotte <akotte@gitlab.com>
Date: Tue, 8 Nov 2022 19:36:43 +0530
Subject: [PATCH] Allow creation & listing objectives in issues list

Create objective via inline form above issues list
Add objective type token to seach bar typetokens
Link Objects to work-item show page
Gaurded using FF okrs_mvc and in ultimate plan

Issue: https://gitlab.com/gitlab-org/incubation-engineering/okr/meta/-/issues/9
---
 .../list/components/issues_list_app.vue       |  23 ++-
 .../javascripts/issues/list/constants.js      |   5 +
 app/assets/javascripts/issues/list/index.js   |   2 +
 .../list/components/issuable_list_root.vue    |   1 +
 .../javascripts/work_items/constants.js       |   5 +-
 .../list/components/issues_list_app.vue       |  60 +++++++-
 .../components/create_work_item_objective.vue | 132 ++++++++++++++++++
 .../list/components/issues_list_app_spec.js   |  63 ++++++++-
 .../create_work_item_objective_spec.js        | 118 ++++++++++++++++
 ee/spec/frontend/work_items/mock_data.js      |  50 +++++++
 locale/gitlab.pot                             |   3 +
 11 files changed, 450 insertions(+), 12 deletions(-)
 create mode 100644 ee/app/assets/javascripts/work_items/components/create_work_item_objective.vue
 create mode 100644 ee/spec/frontend/work_items/components/create_work_item_objective_spec.js
 create mode 100644 ee/spec/frontend/work_items/mock_data.js

diff --git a/app/assets/javascripts/issues/list/components/issues_list_app.vue b/app/assets/javascripts/issues/list/components/issues_list_app.vue
index 241b654df5c0f2..f9da68b8a9c2af 100644
--- a/app/assets/javascripts/issues/list/components/issues_list_app.vue
+++ b/app/assets/javascripts/issues/list/components/issues_list_app.vue
@@ -163,6 +163,16 @@ export default {
       required: false,
       default: () => [],
     },
+    eeTypeTokenOptions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    eeWorkItemTypes: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -239,14 +249,17 @@ export default {
         state: this.state,
         ...this.pageParams,
         ...this.apiFilterParams,
-        types: this.apiFilterParams.types || defaultWorkItemTypes,
+        types: this.apiFilterParams.types || this.defaultWorkItemTypes,
       };
     },
     namespace() {
       return this.isProject ? ITEM_TYPE.PROJECT : ITEM_TYPE.GROUP;
     },
+    defaultWorkItemTypes() {
+      return [...defaultWorkItemTypes, ...this.eeWorkItemTypes];
+    },
     typeTokenOptions() {
-      return defaultTypeTokenOptions.concat(TYPE_TOKEN_TASK_OPTION);
+      return [...defaultTypeTokenOptions, TYPE_TOKEN_TASK_OPTION, ...this.eeTypeTokenOptions];
     },
     hasOrFeature() {
       return this.glFeatures.orIssuableQueries;
@@ -872,7 +885,7 @@ export default {
           <gl-icon name="thumb-down" />
           {{ issuable.downvotes }}
         </li>
-        <slot :issuable="issuable"></slot>
+        <slot name="blocking-count" :issuable="issuable"></slot>
       </template>
 
       <template #empty-state>
@@ -908,6 +921,10 @@ export default {
           :svg-path="emptyStateSvgPath"
         />
       </template>
+
+      <template #list-body>
+        <slot name="list-body"></slot>
+      </template>
     </issuable-list>
 
     <template v-else-if="isSignedIn">
diff --git a/app/assets/javascripts/issues/list/constants.js b/app/assets/javascripts/issues/list/constants.js
index 01aa9fd900931b..262aafdd0bf773 100644
--- a/app/assets/javascripts/issues/list/constants.js
+++ b/app/assets/javascripts/issues/list/constants.js
@@ -149,6 +149,11 @@ export const specialFilterValues = [
 ];
 
 export const TYPE_TOKEN_TASK_OPTION = { icon: 'issue-type-task', title: 'task', value: 'task' };
+export const TYPE_TOKEN_OBJECTIVE_OPTION = {
+  icon: 'issue-type-issue',
+  title: 'objective',
+  value: 'objective',
+};
 
 // This should be consistent with Issue::TYPES_FOR_LIST in the backend
 // https://gitlab.com/gitlab-org/gitlab/-/blob/1379c2d7bffe2a8d809f23ac5ef9b4114f789c07/app/models/issue.rb#L48
diff --git a/app/assets/javascripts/issues/list/index.js b/app/assets/javascripts/issues/list/index.js
index 5e04dd1971cce6..c5845eb8e4077e 100644
--- a/app/assets/javascripts/issues/list/index.js
+++ b/app/assets/javascripts/issues/list/index.js
@@ -77,6 +77,7 @@ export function mountIssuesListApp() {
     hasIssueWeightsFeature,
     hasIterationsFeature,
     hasScopedLabelsFeature,
+    hasOkrsFeature,
     importCsvIssuesPath,
     initialEmail,
     initialSort,
@@ -127,6 +128,7 @@ export function mountIssuesListApp() {
       hasIssueWeightsFeature: parseBoolean(hasIssueWeightsFeature),
       hasIterationsFeature: parseBoolean(hasIterationsFeature),
       hasScopedLabelsFeature: parseBoolean(hasScopedLabelsFeature),
+      hasOkrsFeature: parseBoolean(hasOkrsFeature),
       initialSort,
       isAnonymousSearchDisabled: parseBoolean(isAnonymousSearchDisabled),
       isIssueRepositioningDisabled: parseBoolean(isIssueRepositioningDisabled),
diff --git a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue
index dd3d7c8f4d6ed1..5b6c5bf6e03361 100644
--- a/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue
+++ b/app/assets/javascripts/vue_shared/issuable/list/components/issuable_list_root.vue
@@ -331,6 +331,7 @@ export default {
         <slot name="sidebar-items" :checked-issuables="bulkEditIssuables"></slot>
       </template>
     </issuable-bulk-edit-sidebar>
+    <slot name="list-body"></slot>
     <ul v-if="issuablesLoading" class="content-list">
       <li v-for="n in skeletonItemCount" :key="n" class="issue gl-px-5! gl-py-5!">
         <gl-skeleton-loader />
diff --git a/app/assets/javascripts/work_items/constants.js b/app/assets/javascripts/work_items/constants.js
index 7fcbb8c07fec93..582532b51fd77e 100644
--- a/app/assets/javascripts/work_items/constants.js
+++ b/app/assets/javascripts/work_items/constants.js
@@ -27,7 +27,6 @@ export const WORK_ITEM_TYPE_ENUM_ISSUE = 'ISSUE';
 export const WORK_ITEM_TYPE_ENUM_TASK = 'TASK';
 export const WORK_ITEM_TYPE_ENUM_TEST_CASE = 'TEST_CASE';
 export const WORK_ITEM_TYPE_ENUM_REQUIREMENTS = 'REQUIREMENTS';
-
 export const WORK_ITEM_TYPE_ENUM_OBJECTIVE = 'OBJECTIVE';
 
 export const WORK_ITEM_TYPE_VALUE_OBJECTIVE = 'Objective';
@@ -120,6 +119,10 @@ export const WORK_ITEMS_TREE_TEXT_MAP = {
 export const FORM_TYPES = {
   create: 'create',
   add: 'add',
+  [WORK_ITEM_TYPE_ENUM_OBJECTIVE]: {
+    icon: `issue-type-issue`,
+    name: s__('WorkItem|Objective'),
+  },
 };
 
 export const DEFAULT_PAGE_SIZE_ASSIGNEES = 10;
diff --git a/ee/app/assets/javascripts/issues/list/components/issues_list_app.vue b/ee/app/assets/javascripts/issues/list/components/issues_list_app.vue
index 223fc7055994ad..a293727ac45b13 100644
--- a/ee/app/assets/javascripts/issues/list/components/issues_list_app.vue
+++ b/ee/app/assets/javascripts/issues/list/components/issues_list_app.vue
@@ -1,6 +1,7 @@
 <script>
 import { ITEM_TYPE } from '~/groups/constants';
 import IssuesListApp from '~/issues/list/components/issues_list_app.vue';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import {
   OPERATORS_IS,
   TOKEN_TYPE_EPIC,
@@ -14,7 +15,11 @@ import {
   TOKEN_TITLE_HEALTH,
   TOKEN_TYPE_HEALTH,
 } from 'ee/vue_shared/components/filtered_search_bar/constants';
+import { TYPE_TOKEN_OBJECTIVE_OPTION } from '~/issues/list/constants';
+import { WORK_ITEM_TYPE_ENUM_OBJECTIVE } from '~/work_items/constants';
+
 import BlockingIssuesCount from 'ee/issues/components/blocking_issues_count.vue';
+import CreateWorkItemObjective from 'ee/work_items/components/create_work_item_objective.vue';
 import searchIterationsQuery from '../queries/search_iterations.query.graphql';
 
 const EpicToken = () =>
@@ -27,22 +32,46 @@ const HealthToken = () =>
   import('ee/vue_shared/components/filtered_search_bar/tokens/health_token.vue');
 
 export default {
+  name: 'IssuesListAppEE',
   components: {
     BlockingIssuesCount,
     IssuesListApp,
+    CreateWorkItemObjective,
   },
+  mixins: [glFeatureFlagMixin()],
   inject: [
     'fullPath',
     'groupPath',
     'hasIssueWeightsFeature',
     'hasIterationsFeature',
     'hasIssuableHealthStatusFeature',
+    'hasOkrsFeature',
     'isProject',
   ],
   computed: {
     namespace() {
       return this.isProject ? ITEM_TYPE.PROJECT : ITEM_TYPE.GROUP;
     },
+    workItemTypes() {
+      const types = [];
+      if (this.isOkrsEnabled) {
+        types.push(WORK_ITEM_TYPE_ENUM_OBJECTIVE);
+      }
+      return types;
+    },
+    typeTokenOptions() {
+      const typeTokens = [];
+      if (this.isOkrsEnabled) {
+        typeTokens.push(TYPE_TOKEN_OBJECTIVE_OPTION);
+      }
+      return typeTokens;
+    },
+    isOkrsEnabled() {
+      return this.hasOkrsFeature && this.glFeatures.okrsMvc;
+    },
+    showObjectiveCreationForm() {
+      return this.isOkrsEnabled;
+    },
     searchTokens() {
       const tokens = [];
 
@@ -112,17 +141,34 @@ export default {
         })
         .then(({ data }) => data[this.namespace]?.iterations.nodes);
     },
+    handleObjectiveCreationSuccess({ objective }) {
+      if (objective.id) {
+        // Refresh results on list
+        this.$refs.issuesListApp.$apollo.queries.issues.refetch();
+        this.$refs.issuesListApp.$apollo.queries.issuesCounts.refetch();
+      }
+    },
   },
 };
 </script>
 
 <template>
-  <issues-list-app #default="{ issuable }" :ee-search-tokens="searchTokens">
-    <blocking-issues-count
-      class="blocking-issues gl-display-none gl-sm-display-block"
-      :blocking-issues-count="issuable.blockingCount"
-      is-list-item
-      data-testid="blocking-issues"
-    />
+  <issues-list-app
+    ref="issuesListApp"
+    :ee-work-item-types="workItemTypes"
+    :ee-type-token-options="typeTokenOptions"
+    :ee-search-tokens="searchTokens"
+  >
+    <template #blocking-count="{ issuable }">
+      <blocking-issues-count
+        class="blocking-issues gl-display-none gl-sm-display-block"
+        :blocking-issues-count="issuable.blockingCount"
+        is-list-item
+        data-testid="blocking-issues"
+      />
+    </template>
+    <template v-if="showObjectiveCreationForm" #list-body>
+      <create-work-item-objective @objective-created="handleObjectiveCreationSuccess" />
+    </template>
   </issues-list-app>
 </template>
diff --git a/ee/app/assets/javascripts/work_items/components/create_work_item_objective.vue b/ee/app/assets/javascripts/work_items/components/create_work_item_objective.vue
new file mode 100644
index 00000000000000..886066f5352f48
--- /dev/null
+++ b/ee/app/assets/javascripts/work_items/components/create_work_item_objective.vue
@@ -0,0 +1,132 @@
+<script>
+import { GlAlert, GlFormInput, GlButton } from '@gitlab/ui';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import createWorkItemMutation from '~/work_items/graphql/create_work_item.mutation.graphql';
+import projectWorkItemTypesQuery from '~/work_items/graphql/project_work_item_types.query.graphql';
+import {
+  WORK_ITEM_TYPE_VALUE_OBJECTIVE,
+  sprintfWorkItem,
+  I18N_WORK_ITEM_ERROR_CREATING,
+} from '~/work_items/constants';
+
+export default {
+  components: {
+    GlAlert,
+    GlFormInput,
+    GlButton,
+  },
+  mixins: [glFeatureFlagMixin()],
+  inject: ['fullPath'],
+  data() {
+    return {
+      title: '',
+      error: null,
+      loading: false,
+    };
+  },
+  apollo: {
+    workItemTypes: {
+      query: projectWorkItemTypesQuery,
+      variables() {
+        return {
+          fullPath: this.fullPath,
+        };
+      },
+      update(data) {
+        return data.workspace?.workItemTypes?.nodes.filter(
+          (node) => node.name === WORK_ITEM_TYPE_VALUE_OBJECTIVE,
+        );
+      },
+      error() {
+        this.error = this.$options.fetchTypesErrorText;
+      },
+    },
+  },
+  computed: {
+    isButtonDisabled() {
+      return this.title.trim().length === 0;
+    },
+    createErrorText() {
+      const workItemType = this.workItemTypes.find(
+        (item) => item.value === this.selectedWorkItemType,
+      )?.text;
+
+      return sprintfWorkItem(I18N_WORK_ITEM_ERROR_CREATING, workItemType);
+    },
+    objectiveWorkItemType() {
+      return this.workItemTypes[0]?.id;
+    },
+    fetchByIid() {
+      return this.glFeatures.useIidInWorkItemsPath;
+    },
+  },
+  methods: {
+    async createObjective() {
+      this.loading = true;
+      await this.createStandaloneWorkItem();
+      this.loading = false;
+    },
+    async createStandaloneWorkItem() {
+      try {
+        const {
+          data: {
+            workItemCreate: { workItem },
+          },
+        } = await this.$apollo.mutate({
+          mutation: createWorkItemMutation,
+          variables: {
+            input: {
+              title: this.title,
+              projectPath: this.fullPath,
+              workItemTypeId: this.objectiveWorkItemType,
+            },
+          },
+        });
+        this.$emit('objective-created', { objective: workItem });
+        this.resetForm();
+      } catch {
+        this.error = this.createErrorText;
+      }
+    },
+    handleCancelClick() {
+      this.resetForm();
+    },
+    resetForm() {
+      this.title = '';
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <gl-alert v-if="error" variant="danger" @dismiss="error = null">{{ error }}</gl-alert>
+    <form
+      class="gl-md-display-flex gl-flex-grow-1 gl-border-t-0 row-content-block"
+      @submit.prevent="createObjective"
+    >
+      <gl-form-input
+        v-model.trim="title"
+        type="text"
+        class="gl-flex-grow-1 gl-mr-3"
+        :placeholder="__('Title')"
+      />
+      <gl-button
+        type="button"
+        data-testid="cancel-button"
+        class="gl-mr-3"
+        @click="handleCancelClick"
+      >
+        {{ __('Cancel') }}
+      </gl-button>
+      <gl-button
+        variant="confirm"
+        :disabled="isButtonDisabled"
+        :loading="loading"
+        data-testid="create-button"
+        type="submit"
+      >
+        {{ s__('WorkItem|Create Objective') }}
+      </gl-button>
+    </form>
+  </div>
+</template>
diff --git a/ee/spec/frontend/issues/list/components/issues_list_app_spec.js b/ee/spec/frontend/issues/list/components/issues_list_app_spec.js
index c0eb82cc9fb19e..81f54f7dda6dae 100644
--- a/ee/spec/frontend/issues/list/components/issues_list_app_spec.js
+++ b/ee/spec/frontend/issues/list/components/issues_list_app_spec.js
@@ -9,7 +9,9 @@ import waitForPromises from 'helpers/wait_for_promises';
 import { getIssuesCountsQueryResponse, getIssuesQueryResponse } from 'jest/issues/list/mock_data';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import IssuableList from '~/vue_shared/issuable/list/components/issuable_list_root.vue';
-import { CREATED_DESC } from '~/issues/list/constants';
+import { CREATED_DESC, TYPE_TOKEN_OBJECTIVE_OPTION } from '~/issues/list/constants';
+import CEIssuesListApp from '~/issues/list/components/issues_list_app.vue';
+import { WORK_ITEM_TYPE_ENUM_OBJECTIVE } from '~/work_items/constants';
 import {
   TOKEN_TYPE_ASSIGNEE,
   TOKEN_TYPE_AUTHOR,
@@ -52,6 +54,7 @@ describe('EE IssuesListApp component', () => {
     hasIssueWeightsFeature: true,
     hasIterationsFeature: true,
     hasScopedLabelsFeature: true,
+    hasOkrsFeature: true,
     initialEmail: 'email@example.com',
     initialSort: CREATED_DESC,
     isAnonymousSearchDisabled: false,
@@ -75,8 +78,11 @@ describe('EE IssuesListApp component', () => {
 
   const findIssuableList = () => wrapper.findComponent(IssuableList);
 
+  const findIssueListApp = () => wrapper.findComponent(CEIssuesListApp);
+
   const mountComponent = ({
     provide = {},
+    okrsMvc = false,
     issuesQueryResponse = jest.fn().mockResolvedValue(defaultQueryResponse),
     issuesCountsQueryResponse = jest.fn().mockResolvedValue(getIssuesCountsQueryResponse),
   } = {}) => {
@@ -89,6 +95,9 @@ describe('EE IssuesListApp component', () => {
     return mount(IssuesListApp, {
       apolloProvider,
       provide: {
+        glFeatures: {
+          okrsMvc,
+        },
         ...defaultProvide,
         ...provide,
       },
@@ -113,6 +122,58 @@ describe('EE IssuesListApp component', () => {
     });
   });
 
+  describe('workItemTypes', () => {
+    describe.each`
+      hasOkrsFeature | okrsMvc  | eeWorkItemTypes                    | message
+      ${false}       | ${true}  | ${[]}                              | ${'NOT include'}
+      ${true}        | ${false} | ${[]}                              | ${'NOT include'}
+      ${true}        | ${true}  | ${[WORK_ITEM_TYPE_ENUM_OBJECTIVE]} | ${'include'}
+    `(
+      'when hasOkrsFeature is "$hasOkrsFeature" and okrsMvc is "$okrsMvc"',
+      ({ hasOkrsFeature, okrsMvc, eeWorkItemTypes, message }) => {
+        beforeEach(() => {
+          wrapper = mountComponent({
+            provide: {
+              hasOkrsFeature,
+            },
+            okrsMvc,
+          });
+        });
+
+        it(`should ${message} objective in work item types`, () => {
+          expect(findIssueListApp().props('eeWorkItemTypes')).toMatchObject(eeWorkItemTypes);
+        });
+      },
+    );
+  });
+
+  describe('typeTokenOptions', () => {
+    describe.each`
+      hasOkrsFeature | okrsMvc  | eeWorkItemTypeTokens             | message
+      ${false}       | ${true}  | ${[]}                            | ${'NOT include'}
+      ${true}        | ${false} | ${[]}                            | ${'NOT include'}
+      ${true}        | ${true}  | ${[TYPE_TOKEN_OBJECTIVE_OPTION]} | ${'include'}
+    `(
+      'when hasOkrsFeature is "$hasOkrsFeature" and okrsMvc is "$okrsMvc"',
+      ({ hasOkrsFeature, okrsMvc, eeWorkItemTypeTokens, message }) => {
+        beforeEach(() => {
+          wrapper = mountComponent({
+            provide: {
+              hasOkrsFeature,
+            },
+            okrsMvc,
+          });
+        });
+
+        it(`should ${message} objective in type tokens`, () => {
+          expect(findIssueListApp().props('eeTypeTokenOptions')).toMatchObject(
+            eeWorkItemTypeTokens,
+          );
+        });
+      },
+    );
+  });
+
   describe('tokens', () => {
     const mockCurrentUser = {
       id: 1,
diff --git a/ee/spec/frontend/work_items/components/create_work_item_objective_spec.js b/ee/spec/frontend/work_items/components/create_work_item_objective_spec.js
new file mode 100644
index 00000000000000..1bff2cb3121c03
--- /dev/null
+++ b/ee/spec/frontend/work_items/components/create_work_item_objective_spec.js
@@ -0,0 +1,118 @@
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlAlert, GlFormInput } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import CreateWorkItemObjective from 'ee/work_items/components/create_work_item_objective.vue';
+import projectWorkItemTypesQuery from '~/work_items/graphql/project_work_item_types.query.graphql';
+import createWorkItemMutation from '~/work_items/graphql/create_work_item.mutation.graphql';
+import { projectWorkItemTypesQueryResponse, createWorkItemMutationResponse } from '../mock_data';
+
+Vue.use(VueApollo);
+
+describe('Create work item Objective component', () => {
+  let wrapper;
+  let fakeApollo;
+
+  const querySuccessHandler = jest.fn().mockResolvedValue(projectWorkItemTypesQueryResponse);
+  const createWorkItemSuccessHandler = jest.fn().mockResolvedValue(createWorkItemMutationResponse);
+  const errorHandler = jest.fn().mockRejectedValue('Houston, we have a problem');
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findTitleInput = () => wrapper.findComponent(GlFormInput);
+  const findCreateButton = () => wrapper.find('[data-testid="create-button"]');
+
+  const createComponent = ({
+    data = {},
+    props = {},
+    queryHandler = querySuccessHandler,
+    mutationHandler = createWorkItemSuccessHandler,
+    fetchByIid = false,
+  } = {}) => {
+    fakeApollo = createMockApollo(
+      [
+        [projectWorkItemTypesQuery, queryHandler],
+        [createWorkItemMutation, mutationHandler],
+      ],
+      {},
+      { typePolicies: { Project: { merge: true } } },
+    );
+    wrapper = shallowMount(CreateWorkItemObjective, {
+      apolloProvider: fakeApollo,
+      data() {
+        return {
+          ...data,
+        };
+      },
+      propsData: {
+        ...props,
+      },
+      mocks: {
+        $router: {
+          go: jest.fn(),
+        },
+      },
+      provide: {
+        fullPath: 'full-path',
+        glFeatures: {
+          useIidInWorkItemsPath: fetchByIid,
+        },
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    fakeApollo = null;
+  });
+
+  it('does not render error by default', () => {
+    createComponent();
+
+    expect(findAlert().exists()).toBe(false);
+  });
+
+  it('renders a disabled Create button when title input is empty', () => {
+    createComponent();
+
+    expect(findCreateButton().props('disabled')).toBe(true);
+  });
+
+  it('hides the alert on dismissing the error', async () => {
+    createComponent({ data: { error: true } });
+
+    expect(findAlert().exists()).toBe(true);
+
+    findAlert().vm.$emit('dismiss');
+    await nextTick();
+
+    expect(findAlert().exists()).toBe(false);
+  });
+
+  describe('when title input field has a text', () => {
+    beforeEach(async () => {
+      const mockTitle = 'Test title';
+      createComponent();
+      await waitForPromises();
+      findTitleInput().vm.$emit('input', mockTitle);
+    });
+
+    it('renders a enabled Create button', () => {
+      expect(findCreateButton().props('disabled')).toBe(false);
+    });
+  });
+
+  it('shows an alert on mutation error', async () => {
+    createComponent({ mutationHandler: errorHandler });
+    await waitForPromises();
+
+    findTitleInput().vm.$emit('input', 'some title');
+    wrapper.find('form').trigger('submit');
+    await waitForPromises();
+
+    expect(findAlert().text()).toBe(
+      'Something went wrong when creating work item. Please try again.',
+    );
+  });
+});
diff --git a/ee/spec/frontend/work_items/mock_data.js b/ee/spec/frontend/work_items/mock_data.js
new file mode 100644
index 00000000000000..a8bb2cf4330d98
--- /dev/null
+++ b/ee/spec/frontend/work_items/mock_data.js
@@ -0,0 +1,50 @@
+export const projectWorkItemTypesQueryResponse = {
+  data: {
+    workspace: {
+      id: 'gid://gitlab/WorkItem/1',
+      workItemTypes: {
+        nodes: [
+          { id: 'gid://gitlab/WorkItems::Type/1', name: 'Issue' },
+          { id: 'gid://gitlab/WorkItems::Type/2', name: 'Incident' },
+          { id: 'gid://gitlab/WorkItems::Type/3', name: 'Task' },
+        ],
+      },
+    },
+  },
+};
+
+export const createWorkItemMutationResponse = {
+  data: {
+    workItemCreate: {
+      __typename: 'WorkItemCreatePayload',
+      workItem: {
+        __typename: 'WorkItem',
+        id: 'gid://gitlab/WorkItem/1',
+        iid: '1',
+        title: 'Updated title',
+        state: 'OPEN',
+        description: 'description',
+        confidential: false,
+        createdAt: '2022-08-03T12:41:54Z',
+        closedAt: null,
+        project: {
+          __typename: 'Project',
+          id: '1',
+          fullPath: 'test-project-path',
+        },
+        workItemType: {
+          __typename: 'WorkItemType',
+          id: 'gid://gitlab/WorkItems::Type/5',
+          name: 'Task',
+          iconName: 'issue-type-task',
+        },
+        userPermissions: {
+          deleteWorkItem: false,
+          updateWorkItem: false,
+        },
+        widgets: [],
+      },
+      errors: [],
+    },
+  },
+};
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 3995ce97c92608..e396237cca5e6f 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -46359,6 +46359,9 @@ msgstr ""
 msgid "WorkItem|Collapse tasks"
 msgstr ""
 
+msgid "WorkItem|Create Objective"
+msgstr ""
+
 msgid "WorkItem|Create task"
 msgstr ""
 
-- 
GitLab