Merge branch '300642-refactor-milestone-select-sidebar-component-to-vue-apollo' into 'master'

Milestone sidebar widget

See merge request gitlab-org/gitlab!63121

app/assets/javascripts/boards/components/board_content_sidebar.vue

 <script>
 import { GlDrawer } from '@gitlab/ui';
 import { mapState, mapActions, mapGetters } from 'vuex';
+import SidebarDropdownWidget from 'ee_else_ce/sidebar/components/sidebar_dropdown_widget.vue';
 import BoardSidebarDueDate from '~/boards/components/sidebar/board_sidebar_due_date.vue';
 import BoardSidebarLabelsSelect from '~/boards/components/sidebar/board_sidebar_labels_select.vue';
-import BoardSidebarMilestoneSelect from '~/boards/components/sidebar/board_sidebar_milestone_select.vue';
 import BoardSidebarTimeTracker from '~/boards/components/sidebar/board_sidebar_time_tracker.vue';
 import BoardSidebarTitle from '~/boards/components/sidebar/board_sidebar_title.vue';
 import { ISSUABLE } from '~/boards/constants';
@@ -23,11 +23,9 @@ export default {
     BoardSidebarLabelsSelect,
     BoardSidebarDueDate,
     SidebarSubscriptionsWidget,
-    BoardSidebarMilestoneSelect,
+    SidebarDropdownWidget,
     BoardSidebarWeightInput: () =>
       import('ee_component/boards/components/sidebar/board_sidebar_weight_input.vue'),
-    SidebarDropdownWidget: () =>
-      import('ee_component/sidebar/components/sidebar_dropdown_widget.vue'),
   },
   inject: {
     multipleAssigneesFeatureAvailable: {
@@ -97,7 +95,14 @@ export default {
         data-testid="sidebar-epic"
       />
       <div>
-        <board-sidebar-milestone-select />
+        <sidebar-dropdown-widget
+          :iid="activeBoardItem.iid"
+          issuable-attribute="milestone"
+          :workspace-path="projectPathForActiveIssue"
+          :attr-workspace-path="projectPathForActiveIssue"
+          :issuable-type="issuableType"
+          data-testid="sidebar-milestones"
+        />
         <sidebar-dropdown-widget
           v-if="iterationFeatureAvailable"
           :iid="activeBoardItem.iid"

app/assets/javascripts/sidebar/components/sidebar_dropdown_widget.vue

+<script>
+import {
+  GlLink,
+  GlDropdown,
+  GlDropdownItem,
+  GlDropdownText,
+  GlSearchBoxByType,
+  GlDropdownDivider,
+  GlLoadingIcon,
+  GlIcon,
+  GlTooltipDirective,
+} from '@gitlab/ui';
+import createFlash from '~/flash';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { IssuableType } from '~/issue_show/constants';
+import { __, s__, sprintf } from '~/locale';
+import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
+import {
+  IssuableAttributeState,
+  IssuableAttributeType,
+  issuableAttributesQueries,
+  noAttributeId,
+} from '../constants';
+
+export default {
+  noAttributeId,
+  IssuableAttributeState,
+  issuableAttributesQueries,
+  i18n: {
+    [IssuableAttributeType.Milestone]: __('Milestone'),
+    none: __('None'),
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  components: {
+    SidebarEditableItem,
+    GlLink,
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownText,
+    GlDropdownDivider,
+    GlSearchBoxByType,
+    GlIcon,
+    GlLoadingIcon,
+  },
+  inject: {
+    isClassicSidebar: {
+      default: false,
+    },
+  },
+  props: {
+    issuableAttribute: {
+      type: String,
+      required: true,
+      validator(value) {
+        return [IssuableAttributeType.Milestone].includes(value);
+      },
+    },
+    workspacePath: {
+      required: true,
+      type: String,
+    },
+    iid: {
+      required: true,
+      type: String,
+    },
+    attrWorkspacePath: {
+      required: true,
+      type: String,
+    },
+    issuableType: {
+      type: String,
+      required: true,
+      validator(value) {
+        return value === IssuableType.Issue;
+      },
+    },
+  },
+  apollo: {
+    currentAttribute: {
+      query() {
+        const { current } = this.issuableAttributeQuery;
+        const { query } = current[this.issuableType];
+
+        return query;
+      },
+      variables() {
+        return {
+          fullPath: this.workspacePath,
+          iid: this.iid,
+        };
+      },
+      update(data) {
+        return data?.workspace?.issuable.attribute;
+      },
+      error(error) {
+        createFlash({
+          message: this.i18n.currentFetchError,
+          captureError: true,
+          error,
+        });
+      },
+    },
+    attributesList: {
+      query() {
+        const { list } = this.issuableAttributeQuery;
+        const { query } = list[this.issuableType];
+
+        return query;
+      },
+      skip() {
+        return !this.editing;
+      },
+      debounce: 250,
+      variables() {
+        return {
+          fullPath: this.attrWorkspacePath,
+          title: this.searchTerm,
+          state: this.$options.IssuableAttributeState[this.issuableAttribute],
+        };
+      },
+      update(data) {
+        if (data?.workspace) {
+          return data?.workspace?.attributes.nodes;
+        }
+        return [];
+      },
+      error(error) {
+        createFlash({ message: this.i18n.listFetchError, captureError: true, error });
+      },
+    },
+  },
+  data() {
+    return {
+      searchTerm: '',
+      editing: false,
+      updating: false,
+      selectedTitle: null,
+      currentAttribute: null,
+      attributesList: [],
+      tracking: {
+        label: 'right_sidebar',
+        event: 'click_edit_button',
+        property: this.issuableAttribute,
+      },
+    };
+  },
+  computed: {
+    issuableAttributeQuery() {
+      return this.$options.issuableAttributesQueries[this.issuableAttribute];
+    },
+    attributeTitle() {
+      return this.currentAttribute?.title || this.i18n.noAttribute;
+    },
+    attributeUrl() {
+      return this.currentAttribute?.webUrl;
+    },
+    dropdownText() {
+      return this.currentAttribute
+        ? this.currentAttribute?.title
+        : this.$options.i18n[this.issuableAttribute];
+    },
+    loading() {
+      return this.$apollo.queries.currentAttribute.loading;
+    },
+    emptyPropsList() {
+      return this.attributesList.length === 0;
+    },
+    attributeTypeTitle() {
+      return this.$options.i18n[this.issuableAttribute];
+    },
+    i18n() {
+      return {
+        noAttribute: sprintf(s__('DropdownWidget|No %{issuableAttribute}'), {
+          issuableAttribute: this.issuableAttribute,
+        }),
+        assignAttribute: sprintf(s__('DropdownWidget|Assign %{issuableAttribute}'), {
+          issuableAttribute: this.issuableAttribute,
+        }),
+        noAttributesFound: sprintf(s__('DropdownWidget|No %{issuableAttribute} found'), {
+          issuableAttribute: this.issuableAttribute,
+        }),
+        updateError: sprintf(
+          s__(
+            'DropdownWidget|Failed to set %{issuableAttribute} on this %{issuableType}. Please try again.',
+          ),
+          { issuableAttribute: this.issuableAttribute, issuableType: this.issuableType },
+        ),
+        listFetchError: sprintf(
+          s__(
+            'DropdownWidget|Failed to fetch the %{issuableAttribute} for this %{issuableType}. Please try again.',
+          ),
+          { issuableAttribute: this.issuableAttribute, issuableType: this.issuableType },
+        ),
+        currentFetchError: sprintf(
+          s__(
+            'DropdownWidget|An error occurred while fetching the assigned %{issuableAttribute} of the selected %{issuableType}.',
+          ),
+          { issuableAttribute: this.issuableAttribute, issuableType: this.issuableType },
+        ),
+      };
+    },
+  },
+  methods: {
+    updateAttribute(attributeId) {
+      if (this.currentAttribute === null && attributeId === null) return;
+      if (attributeId === this.currentAttribute?.id) return;
+
+      this.updating = true;
+
+      const selectedAttribute =
+        Boolean(attributeId) && this.attributesList.find((p) => p.id === attributeId);
+      this.selectedTitle = selectedAttribute ? selectedAttribute.title : this.$options.i18n.none;
+
+      const { current } = this.issuableAttributeQuery;
+      const { mutation } = current[this.issuableType];
+
+      this.$apollo
+        .mutate({
+          mutation,
+          variables: {
+            fullPath: this.workspacePath,
+            attributeId:
+              this.issuableAttribute === IssuableAttributeType.Milestone
+                ? getIdFromGraphQLId(attributeId)
+                : attributeId,
+            iid: this.iid,
+          },
+        })
+        .then(({ data }) => {
+          if (data.issuableSetAttribute?.errors?.length) {
+            createFlash({
+              message: data.issuableSetAttribute.errors[0],
+              captureError: true,
+              error: data.issuableSetAttribute.errors[0],
+            });
+          } else {
+            this.$emit('attribute-updated', data);
+          }
+        })
+        .catch((error) => {
+          createFlash({ message: this.i18n.updateError, captureError: true, error });
+        })
+        .finally(() => {
+          this.updating = false;
+          this.searchTerm = '';
+          this.selectedTitle = null;
+        });
+    },
+    isAttributeChecked(attributeId = undefined) {
+      return (
+        attributeId === this.currentAttribute?.id || (!this.currentAttribute?.id && !attributeId)
+      );
+    },
+    showDropdown() {
+      this.$refs.newDropdown.show();
+    },
+    handleOpen() {
+      this.editing = true;
+      this.showDropdown();
+    },
+    handleClose() {
+      this.editing = false;
+    },
+    setFocus() {
+      this.$refs.search.focusInput();
+    },
+  },
+};
+</script>
+
+<template>
+  <sidebar-editable-item
+    ref="editable"
+    :title="attributeTypeTitle"
+    :data-testid="`${issuableAttribute}-edit`"
+    :tracking="tracking"
+    :loading="updating || loading"
+    @open="handleOpen"
+    @close="handleClose"
+  >
+    <template #collapsed>
+      <div v-if="isClassicSidebar" v-gl-tooltip class="sidebar-collapsed-icon">
+        <gl-icon :size="16" :aria-label="attributeTypeTitle" :name="issuableAttribute" />
+        <span class="collapse-truncated-title">{{ attributeTitle }}</span>
+      </div>
+      <div
+        :data-testid="`select-${issuableAttribute}`"
+        :class="isClassicSidebar ? 'hide-collapsed' : 'gl-mt-3'"
+      >
+        <span v-if="updating" class="gl-font-weight-bold">{{ selectedTitle }}</span>
+        <span v-else-if="!currentAttribute" class="gl-text-gray-500">
+          {{ $options.i18n.none }}
+        </span>
+        <gl-link v-else class="gl-text-gray-900! gl-font-weight-bold" :href="attributeUrl">
+          {{ attributeTitle }}
+        </gl-link>
+      </div>
+    </template>
+    <template #default>
+      <gl-dropdown
+        ref="newDropdown"
+        lazy
+        :header-text="i18n.assignAttribute"
+        :text="dropdownText"
+        :loading="loading"
+        class="gl-w-full"
+        @shown="setFocus"
+      >
+        <gl-search-box-by-type ref="search" v-model="searchTerm" />
+        <gl-dropdown-item
+          :data-testid="`no-${issuableAttribute}-item`"
+          :is-check-item="true"
+          :is-checked="isAttributeChecked($options.noAttributeId)"
+          @click="updateAttribute($options.noAttributeId)"
+        >
+          {{ i18n.noAttribute }}
+        </gl-dropdown-item>
+        <gl-dropdown-divider />
+        <gl-loading-icon
+          v-if="$apollo.queries.attributesList.loading"
+          class="gl-py-4"
+          data-testid="loading-icon-dropdown"
+        />
+        <template v-else>
+          <gl-dropdown-text v-if="emptyPropsList">
+            {{ i18n.noAttributesFound }}
+          </gl-dropdown-text>
+          <gl-dropdown-item
+            v-for="attrItem in attributesList"
+            :key="attrItem.id"
+            :is-check-item="true"
+            :is-checked="isAttributeChecked(attrItem.id)"
+            :data-testid="`${issuableAttribute}-items`"
+            @click="updateAttribute(attrItem.id)"
+          >
+            {{ attrItem.title }}
+          </gl-dropdown-item>
+        </template>
+      </gl-dropdown>
+    </template>
+  </sidebar-editable-item>
+</template>

app/assets/javascripts/sidebar/constants.js

@@ -29,6 +29,9 @@ import getMergeRequestParticipants from '~/vue_shared/components/sidebar/queries
 import getMrTimelogsQuery from '~/vue_shared/components/sidebar/queries/get_mr_timelogs.query.graphql';
 import updateIssueAssigneesMutation from '~/vue_shared/components/sidebar/queries/update_issue_assignees.mutation.graphql';
 import updateMergeRequestAssigneesMutation from '~/vue_shared/components/sidebar/queries/update_mr_assignees.mutation.graphql';
+import projectIssueMilestoneMutation from './queries/project_issue_milestone.mutation.graphql';
+import projectIssueMilestoneQuery from './queries/project_issue_milestone.query.graphql';
+import projectMilestonesQuery from './queries/project_milestones.query.graphql';
 
 export const ASSIGNEES_DEBOUNCE_DELAY = 250;
 
@@ -143,3 +146,33 @@ export const timelogQueries = {
     query: getMrTimelogsQuery,
   },
 };
+
+export const noAttributeId = null;
+
+export const issuableMilestoneQueries = {
+  [IssuableType.Issue]: {
+    query: projectIssueMilestoneQuery,
+    mutation: projectIssueMilestoneMutation,
+  },
+};
+
+export const milestonesQueries = {
+  [IssuableType.Issue]: {
+    query: projectMilestonesQuery,
+  },
+};
+
+export const IssuableAttributeType = {
+  Milestone: 'milestone',
+};
+
+export const IssuableAttributeState = {
+  [IssuableAttributeType.Milestone]: 'active',
+};
+
+export const issuableAttributesQueries = {
+  [IssuableAttributeType.Milestone]: {
+    current: issuableMilestoneQueries,
+    list: milestonesQueries,
+  },
+};

app/assets/javascripts/sidebar/queries/milestone.fragment.graphql

+fragment MilestoneFragment on Milestone {
+  id
+  title
+  webUrl: webPath
+}

app/assets/javascripts/sidebar/queries/project_issue_milestone.mutation.graphql

+mutation projectIssueMilestoneMutation($fullPath: ID!, $iid: String!, $attributeId: ID) {
+  issuableSetAttribute: updateIssue(
+    input: { projectPath: $fullPath, iid: $iid, milestoneId: $attributeId }
+  ) {
+    __typename
+    errors
+    issuable: issue {
+      __typename
+      id
+      attribute: milestone {
+        title
+        id
+        state
+      }
+    }
+  }
+}

app/assets/javascripts/sidebar/queries/project_issue_milestone.query.graphql

+#import "./milestone.fragment.graphql"
+
+query projectIssueMilestone($fullPath: ID!, $iid: String!) {
+  workspace: project(fullPath: $fullPath) {
+    __typename
+    issuable: issue(iid: $iid) {
+      __typename
+      id
+      attribute: milestone {
+        ...MilestoneFragment
+      }
+    }
+  }
+}

app/assets/javascripts/sidebar/queries/project_milestones.query.graphql

+#import "./milestone.fragment.graphql"
+
+query projectMilestones($fullPath: ID!, $title: String, $state: MilestoneStateEnum) {
+  workspace: project(fullPath: $fullPath) {
+    __typename
+    attributes: milestones(searchTitle: $title, state: $state) {
+      nodes {
+        ...MilestoneFragment
+        state
+      }
+    }
+  }
+}

ee/app/assets/javascripts/sidebar/constants.js

 import { IssuableType } from '~/issue_show/constants';
 import { s__, __ } from '~/locale';
+import {
+  IssuableAttributeType as IssuableAttributeTypeFoss,
+  IssuableAttributeState as IssuableAttributeStateFoss,
+  issuableAttributesQueries as issuableAttributesQueriesFoss,
+} from '~/sidebar/constants';
 import groupEpicsQuery from './queries/group_epics.query.graphql';
 import groupIterationsQuery from './queries/group_iterations.query.graphql';
 import projectIssueEpicMutation from './queries/project_issue_epic.mutation.graphql';
@@ -95,16 +100,19 @@ const epicsQueries = {
 };
 
 export const IssuableAttributeType = {
+  ...IssuableAttributeTypeFoss,
   Iteration: 'iteration',
   Epic: 'epic',
 };
 
 export const IssuableAttributeState = {
+  ...IssuableAttributeStateFoss,
   [IssuableAttributeType.Iteration]: 'opened',
   [IssuableAttributeType.Epic]: 'opened',
 };
 
 export const issuableAttributesQueries = {
+  ...issuableAttributesQueriesFoss,
   [IssuableAttributeType.Iteration]: {
     current: issuableIterationQueries,
     list: iterationsQueries,

ee/spec/frontend/boards/components/__snapshots__/board_content_sidebar_spec.js.snap

@@ -13,26 +13,33 @@ exports[`ee/BoardContentSidebar matches the snapshot 1`] = `
   />
    
   <sidebardropdownwidget-stub
-    attr-workspace-path="gitlab-org"
+    attrworkspacepath="gitlab-org"
     data-testid="sidebar-epic"
     iid="27"
-    issuable-attribute="epic"
-    issuable-type="issue"
-    workspace-path="gitlab-org/gitlab-test"
+    issuableattribute="epic"
+    issuabletype="issue"
+    workspacepath="gitlab-org/gitlab-test"
   />
    
   <div>
-    <boardsidebarmilestoneselect-stub />
+    <sidebardropdownwidget-stub
+      attrworkspacepath="gitlab-org/gitlab-test"
+      data-testid="sidebar-milestones"
+      iid="27"
+      issuableattribute="milestone"
+      issuabletype="issue"
+      workspacepath="gitlab-org/gitlab-test"
+    />
      
     <sidebardropdownwidget-stub
-      attr-workspace-path="gitlab-org"
+      attrworkspacepath="gitlab-org"
       class="gl-mt-5"
       data-qa-selector="iteration_container"
       data-testid="iteration-edit"
       iid="27"
-      issuable-attribute="iteration"
-      issuable-type="issue"
-      workspace-path="gitlab-org/gitlab-test"
+      issuableattribute="iteration"
+      issuabletype="issue"
+      workspacepath="gitlab-org/gitlab-test"
     />
   </div>
    

ee/spec/frontend/boards/components/board_content_sidebar_spec.js

@@ -61,7 +61,6 @@ describe('ee/BoardContentSidebar', () => {
         SidebarConfidentialityWidget: true,
         BoardSidebarDueDate: true,
         SidebarSubscriptionsWidget: true,
-        BoardSidebarMilestoneSelect: true,
         BoardSidebarWeightInput: true,
         SidebarDropdownWidget: true,
       },

spec/features/boards/sidebar_milestones_spec.rb

@@ -38,7 +38,7 @@ RSpec.describe 'Project issue boards sidebar milestones', :js do
 
         wait_for_requests
 
-        page.within('.value') do
+        page.within('[data-testid="select-milestone"]') do
           expect(page).to have_content(milestone.title)
         end
       end
@@ -56,7 +56,7 @@ RSpec.describe 'Project issue boards sidebar milestones', :js do
 
         wait_for_requests
 
-        page.within('.value') do
+        page.within('[data-testid="select-milestone"]') do
           expect(page).not_to have_content(milestone.title)
         end
       end

spec/frontend/boards/components/board_content_sidebar_spec.js

 import { GlDrawer } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
+import SidebarDropdownWidget from 'ee_else_ce/sidebar/components/sidebar_dropdown_widget.vue';
 import { stubComponent } from 'helpers/stub_component';
 import BoardContentSidebar from '~/boards/components/board_content_sidebar.vue';
 import BoardSidebarDueDate from '~/boards/components/sidebar/board_sidebar_due_date.vue';
 import BoardSidebarLabelsSelect from '~/boards/components/sidebar/board_sidebar_labels_select.vue';
-import BoardSidebarMilestoneSelect from '~/boards/components/sidebar/board_sidebar_milestone_select.vue';
 import BoardSidebarTitle from '~/boards/components/sidebar/board_sidebar_title.vue';
 import { ISSUABLE } from '~/boards/constants';
 import SidebarSubscriptionsWidget from '~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue';
@@ -68,6 +68,9 @@ describe('BoardContentSidebar', () => {
             iterations: {
               loading: false,
             },
+            attributesList: {
+              loading: false,
+            },
           },
         },
       },
@@ -84,38 +87,41 @@ describe('BoardContentSidebar', () => {
   });
 
   it('confirms we render GlDrawer', () => {
-    expect(wrapper.find(GlDrawer).exists()).toBe(true);
+    expect(wrapper.findComponent(GlDrawer).exists()).toBe(true);
   });
 
   it('does not render GlDrawer when isSidebarOpen is false', () => {
     createStore({ mockGetters: { isSidebarOpen: () => false } });
     createComponent();
 
-    expect(wrapper.find(GlDrawer).exists()).toBe(false);
+    expect(wrapper.findComponent(GlDrawer).exists()).toBe(false);
   });
 
   it('applies an open attribute', () => {
-    expect(wrapper.find(GlDrawer).props('open')).toBe(true);
+    expect(wrapper.findComponent(GlDrawer).props('open')).toBe(true);
   });
 
   it('renders BoardSidebarLabelsSelect', () => {
-    expect(wrapper.find(BoardSidebarLabelsSelect).exists()).toBe(true);
+    expect(wrapper.findComponent(BoardSidebarLabelsSelect).exists()).toBe(true);
   });
 
   it('renders BoardSidebarTitle', () => {
-    expect(wrapper.find(BoardSidebarTitle).exists()).toBe(true);
+    expect(wrapper.findComponent(BoardSidebarTitle).exists()).toBe(true);
   });
 
   it('renders BoardSidebarDueDate', () => {
-    expect(wrapper.find(BoardSidebarDueDate).exists()).toBe(true);
+    expect(wrapper.findComponent(BoardSidebarDueDate).exists()).toBe(true);
   });
 
   it('renders BoardSidebarSubscription', () => {
-    expect(wrapper.find(SidebarSubscriptionsWidget).exists()).toBe(true);
+    expect(wrapper.findComponent(SidebarSubscriptionsWidget).exists()).toBe(true);
   });
 
-  it('renders BoardSidebarMilestoneSelect', () => {
-    expect(wrapper.find(BoardSidebarMilestoneSelect).exists()).toBe(true);
+  it('renders SidebarDropdownWidget for milestones', () => {
+    expect(wrapper.findComponent(SidebarDropdownWidget).exists()).toBe(true);
+    expect(wrapper.findComponent(SidebarDropdownWidget).props('issuableAttribute')).toEqual(
+      'milestone',
+    );
   });
 
   describe('when we emit close', () => {
@@ -128,7 +134,7 @@ describe('BoardContentSidebar', () => {
     });
 
     it('calls toggleBoardItem with correct parameters', async () => {
-      wrapper.find(GlDrawer).vm.$emit('close');
+      wrapper.findComponent(GlDrawer).vm.$emit('close');
 
       expect(toggleBoardItem).toHaveBeenCalledTimes(1);
       expect(toggleBoardItem).toHaveBeenCalledWith(expect.any(Object), {

spec/frontend/sidebar/mock_data.js

@@ -513,4 +513,83 @@ export const participantsQueryResponse = {
   },
 };
 
+export const mockGroupPath = 'gitlab-org';
+export const mockProjectPath = `${mockGroupPath}/some-project`;
+
+export const mockIssue = {
+  projectPath: mockProjectPath,
+  iid: '1',
+  groupPath: mockGroupPath,
+};
+
+export const mockIssueId = 'gid://gitlab/Issue/1';
+
+export const mockMilestone1 = {
+  __typename: 'Milestone',
+  id: 'gid://gitlab/Milestone/1',
+  title: 'Foobar Milestone',
+  webUrl: 'http://gdk.test:3000/groups/gitlab-org/-/milestones/1',
+  state: 'active',
+};
+
+export const mockMilestone2 = {
+  __typename: 'Milestone',
+  id: 'gid://gitlab/Milestone/2',
+  title: 'Awesome Milestone',
+  webUrl: 'http://gdk.test:3000/groups/gitlab-org/-/milestones/2',
+  state: 'active',
+};
+
+export const mockProjectMilestonesResponse = {
+  data: {
+    workspace: {
+      attributes: {
+        nodes: [mockMilestone1, mockMilestone2],
+      },
+      __typename: 'MilestoneConnection',
+    },
+    __typename: 'Project',
+  },
+};
+
+export const noCurrentMilestoneResponse = {
+  data: {
+    workspace: {
+      issuable: { id: mockIssueId, attribute: null, __typename: 'Issue' },
+      __typename: 'Project',
+    },
+  },
+};
+
+export const mockMilestoneMutationResponse = {
+  data: {
+    issuableSetAttribute: {
+      errors: [],
+      issuable: {
+        id: 'gid://gitlab/Issue/1',
+        attribute: {
+          id: 'gid://gitlab/Milestone/2',
+          title: 'Awesome Milestone',
+          state: 'active',
+          __typename: 'Milestone',
+        },
+        __typename: 'Issue',
+      },
+      __typename: 'UpdateIssuePayload',
+    },
+  },
+};
+
+export const emptyProjectMilestonesResponse = {
+  data: {
+    workspace: {
+      attributes: {
+        nodes: [],
+      },
+      __typename: 'MilestoneConnection',
+    },
+    __typename: 'Project',
+  },
+};
+
 export default mockData;