Add work item state field

- added the state for work item to the fragment
- created a component to handle WI state

app/assets/javascripts/work_items/components/item_state.vue

+<script>
+import { GlFormGroup, GlFormSelect } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { STATE_OPEN, STATE_CLOSED } from '../constants';
+
+export default {
+  i18n: {
+    status: __('Status'),
+  },
+  states: [
+    {
+      value: STATE_OPEN,
+      text: __('Open'),
+    },
+    {
+      value: STATE_CLOSED,
+      text: __('Closed'),
+    },
+  ],
+  components: {
+    GlFormGroup,
+    GlFormSelect,
+  },
+  props: {
+    state: {
+      type: String,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    currentState() {
+      return this.$options.states[this.state];
+    },
+  },
+  methods: {
+    setState(newState) {
+      if (newState !== this.state) {
+        this.$emit('changed', newState);
+      }
+    },
+  },
+  labelId: 'work-item-state-select',
+};
+</script>
+
+<template>
+  <gl-form-group :label="$options.i18n.status" :label-for="$options.labelId">
+    <gl-form-select
+      :id="$options.labelId"
+      :value="state"
+      :options="$options.states"
+      :disabled="loading"
+      class="gl-w-auto"
+      @change="setState"
+    />
+  </gl-form-group>
+</template>

app/assets/javascripts/work_items/components/work_item_detail.vue

@@ -3,6 +3,7 @@ import { GlAlert } from '@gitlab/ui';
 import { i18n } from '../constants';
 import workItemQuery from '../graphql/work_item.query.graphql';
 import workItemTitleSubscription from '../graphql/work_item_title.subscription.graphql';
+import WorkItemState from './work_item_state.vue';
 import WorkItemTitle from './work_item_title.vue';
 
 export default {
@@ -10,6 +11,7 @@ export default {
   components: {
     GlAlert,
     WorkItemTitle,
+    WorkItemState,
   },
   props: {
     workItemId: {
@@ -49,6 +51,9 @@ export default {
     },
   },
   computed: {
+    workItemLoading() {
+      return this.$apollo.queries.workItem.loading;
+    },
     workItemType() {
       return this.workItem.workItemType?.name;
     },
@@ -63,11 +68,12 @@ export default {
     </gl-alert>
 
     <work-item-title
-      :loading="$apollo.queries.workItem.loading"
+      :loading="workItemLoading"
       :work-item-id="workItem.id"
       :work-item-title="workItem.title"
       :work-item-type="workItemType"
       @error="error = $event"
     />
+    <work-item-state :loading="workItemLoading" :work-item="workItem" @error="error = $event" />
   </section>
 </template>

app/assets/javascripts/work_items/components/work_item_state.vue

+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+import * as Sentry from '@sentry/browser';
+import Tracking from '~/tracking';
+import {
+  i18n,
+  STATE_OPEN,
+  STATE_CLOSED,
+  STATE_EVENT_CLOSE,
+  STATE_EVENT_REOPEN,
+} from '../constants';
+import updateWorkItemMutation from '../graphql/update_work_item.mutation.graphql';
+import ItemState from './item_state.vue';
+
+export default {
+  components: {
+    GlLoadingIcon,
+    ItemState,
+  },
+  mixins: [Tracking.mixin()],
+  props: {
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    workItem: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      updateInProgress: false,
+    };
+  },
+  computed: {
+    workItemType() {
+      return this.workItem.workItemType?.name;
+    },
+    tracking() {
+      return {
+        category: 'workItems:show',
+        label: 'item_state',
+        property: `type_${this.workItemType}`,
+      };
+    },
+  },
+  methods: {
+    async updateWorkItemState(newState) {
+      const stateEventMap = {
+        [STATE_OPEN]: STATE_EVENT_REOPEN,
+        [STATE_CLOSED]: STATE_EVENT_CLOSE,
+      };
+
+      const stateEvent = stateEventMap[newState];
+
+      await this.updateWorkItem(stateEvent);
+    },
+    async updateWorkItem(updatedState) {
+      if (!updatedState) {
+        return;
+      }
+
+      this.updateInProgress = true;
+
+      try {
+        this.track('updated_state');
+
+        const {
+          data: { workItemUpdate },
+        } = await this.$apollo.mutate({
+          mutation: updateWorkItemMutation,
+          variables: {
+            input: {
+              id: this.workItem.id,
+              stateEvent: updatedState,
+            },
+          },
+        });
+
+        if (workItemUpdate?.errors?.length) {
+          throw new Error(workItemUpdate.errors[0]);
+        }
+      } catch (error) {
+        this.$emit('error', i18n.updateError);
+        Sentry.captureException(error);
+      }
+
+      this.updateInProgress = false;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-loading-icon v-if="loading" class="gl-mt-3" size="md" />
+  <item-state
+    v-else-if="workItem.state"
+    :state="workItem.state"
+    :loading="updateInProgress"
+    @changed="updateWorkItemState"
+  />
+</template>

app/assets/javascripts/work_items/constants.js

 import { s__ } from '~/locale';
 
+export const STATE_OPEN = 'OPEN';
+export const STATE_CLOSED = 'CLOSED';
+
+export const STATE_EVENT_REOPEN = 'REOPEN';
+export const STATE_EVENT_CLOSE = 'CLOSE';
+
 export const i18n = {
   fetchError: s__('WorkItem|Something went wrong when fetching the work item. Please try again.'),
   updateError: s__('WorkItem|Something went wrong while updating the work item. Please try again.'),

app/assets/javascripts/work_items/graphql/work_item.fragment.graphql

 fragment WorkItem on WorkItem {
   id
   title
+  state
   workItemType {
     id
     name

app/assets/javascripts/work_items/pages/create_work_item.vue

@@ -115,7 +115,7 @@ export default {
             },
           },
           update(store, { data: { workItemCreate } }) {
-            const { id, title, workItemType } = workItemCreate.workItem;
+            const { id, title, workItemType, state } = workItemCreate.workItem;
 
             store.writeQuery({
               query: workItemQuery,
@@ -127,6 +127,7 @@ export default {
                   __typename: 'WorkItem',
                   id,
                   title,
+                  state,
                   workItemType,
                 },
               },

spec/frontend/work_items/components/item_state_spec.js

+import { mount } from '@vue/test-utils';
+import { STATE_OPEN, STATE_CLOSED } from '~/work_items/constants';
+import ItemState from '~/work_items/components/item_state.vue';
+
+describe('ItemState', () => {
+  let wrapper;
+
+  const findLabel = () => wrapper.find('label').text();
+  const selectedValue = () => wrapper.find('option:checked').element.value;
+
+  const clickOpen = () => wrapper.findAll('option').at(0).setSelected();
+
+  const createComponent = ({ state = STATE_OPEN, disabled = false } = {}) => {
+    wrapper = mount(ItemState, {
+      propsData: {
+        state,
+        disabled,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders label and dropdown', () => {
+    createComponent();
+
+    expect(findLabel()).toBe('Status');
+    expect(selectedValue()).toBe(STATE_OPEN);
+  });
+
+  it('renders dropdown for closed', () => {
+    createComponent({ state: STATE_CLOSED });
+
+    expect(selectedValue()).toBe(STATE_CLOSED);
+  });
+
+  it('emits changed event', async () => {
+    createComponent({ state: STATE_CLOSED });
+
+    await clickOpen();
+
+    expect(wrapper.emitted('changed')).toEqual([[STATE_OPEN]]);
+  });
+
+  it('does not emits changed event if clicking selected value', async () => {
+    createComponent({ state: STATE_OPEN });
+
+    await clickOpen();
+
+    expect(wrapper.emitted('changed')).toBeUndefined();
+  });
+});

spec/frontend/work_items/components/work_item_state_spec.js

+import { GlLoadingIcon } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import { mockTracking } from 'helpers/tracking_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import ItemState from '~/work_items/components/item_state.vue';
+import WorkItemState from '~/work_items/components/work_item_state.vue';
+import {
+  i18n,
+  STATE_OPEN,
+  STATE_CLOSED,
+  STATE_EVENT_CLOSE,
+  STATE_EVENT_REOPEN,
+} from '~/work_items/constants';
+import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
+import { updateWorkItemMutationResponse, workItemQueryResponse } from '../mock_data';
+
+describe('WorkItemState component', () => {
+  let wrapper;
+
+  Vue.use(VueApollo);
+
+  const mutationSuccessHandler = jest.fn().mockResolvedValue(updateWorkItemMutationResponse);
+
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findItemState = () => wrapper.findComponent(ItemState);
+
+  const createComponent = ({
+    state = STATE_OPEN,
+    loading = false,
+    mutationHandler = mutationSuccessHandler,
+  } = {}) => {
+    const { id, workItemType } = workItemQueryResponse.data.workItem;
+    wrapper = shallowMount(WorkItemState, {
+      apolloProvider: createMockApollo([[updateWorkItemMutation, mutationHandler]]),
+      propsData: {
+        loading,
+        workItem: {
+          id,
+          state,
+          workItemType,
+        },
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when loading', () => {
+    beforeEach(() => {
+      createComponent({ loading: true });
+    });
+
+    it('renders loading spinner', () => {
+      expect(findLoadingIcon().exists()).toBe(true);
+    });
+
+    it('does not render state', () => {
+      expect(findItemState().exists()).toBe(false);
+    });
+  });
+
+  describe('when loaded', () => {
+    beforeEach(() => {
+      createComponent({ loading: false });
+    });
+
+    it('does not render loading spinner', () => {
+      expect(findLoadingIcon().exists()).toBe(false);
+    });
+
+    it('renders state', () => {
+      expect(findItemState().props('state')).toBe(workItemQueryResponse.data.workItem.state);
+    });
+  });
+
+  describe('when updating the state', () => {
+    it('calls a mutation', () => {
+      createComponent();
+
+      findItemState().vm.$emit('changed', STATE_CLOSED);
+
+      expect(mutationSuccessHandler).toHaveBeenCalledWith({
+        input: {
+          id: workItemQueryResponse.data.workItem.id,
+          stateEvent: STATE_EVENT_CLOSE,
+        },
+      });
+    });
+
+    it('calls a mutation with REOPEN', () => {
+      createComponent({
+        state: STATE_CLOSED,
+      });
+
+      findItemState().vm.$emit('changed', STATE_OPEN);
+
+      expect(mutationSuccessHandler).toHaveBeenCalledWith({
+        input: {
+          id: workItemQueryResponse.data.workItem.id,
+          stateEvent: STATE_EVENT_REOPEN,
+        },
+      });
+    });
+
+    it('emits an error message when the mutation was unsuccessful', async () => {
+      createComponent({ mutationHandler: jest.fn().mockRejectedValue('Error!') });
+
+      findItemState().vm.$emit('changed', STATE_CLOSED);
+      await waitForPromises();
+
+      expect(wrapper.emitted('error')).toEqual([[i18n.updateError]]);
+    });
+
+    it('tracks editing the state', async () => {
+      const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
+
+      createComponent();
+
+      findItemState().vm.$emit('changed', STATE_CLOSED);
+      await waitForPromises();
+
+      expect(trackingSpy).toHaveBeenCalledWith('workItems:show', 'updated_state', {
+        category: 'workItems:show',
+        label: 'item_state',
+        property: 'type_Task',
+      });
+    });
+  });
+});

spec/frontend/work_items/mock_data.js

@@ -4,6 +4,7 @@ export const workItemQueryResponse = {
       __typename: 'WorkItem',
       id: 'gid://gitlab/WorkItem/1',
       title: 'Test',
+      state: 'OPEN',
       workItemType: {
         __typename: 'WorkItemType',
         id: 'gid://gitlab/WorkItems::Type/5',
@@ -21,6 +22,7 @@ export const updateWorkItemMutationResponse = {
         __typename: 'WorkItem',
         id: 'gid://gitlab/WorkItem/1',
         title: 'Updated title',
+        state: 'OPEN',
         workItemType: {
           __typename: 'WorkItemType',
           id: 'gid://gitlab/WorkItems::Type/5',
@@ -53,6 +55,7 @@ export const createWorkItemMutationResponse = {
         __typename: 'WorkItem',
         id: 'gid://gitlab/WorkItem/1',
         title: 'Updated title',
+        state: 'OPEN',
         workItemType: {
           __typename: 'WorkItemType',
           id: 'gid://gitlab/WorkItems::Type/5',