Merge branch '332302-reuse-add-to-do-mark-as-done-sidebar-widget-in-epic-sidebar' into 'master'

Migrate epic sidebar todo button to widget

See merge request gitlab-org/gitlab!68325

app/assets/javascripts/graphql_shared/constants.js

 export const TYPE_CI_RUNNER = 'Ci::Runner';
+export const TYPE_EPIC = 'Epic';
 export const TYPE_GROUP = 'Group';
 export const TYPE_ISSUE = 'Issue';
 export const TYPE_ITERATION = 'Iteration';

ee/app/assets/javascripts/epic/components/epic_sidebar.vue

@@ -3,12 +3,15 @@ import { mapState, mapGetters, mapActions } from 'vuex';
 
 import AncestorsTree from 'ee/sidebar/components/ancestors_tree/ancestors_tree.vue';
 
+import { TYPE_EPIC } from '~/graphql_shared/constants';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { IssuableType } from '~/issue_show/constants';
 import notesEventHub from '~/notes/event_hub';
 import SidebarConfidentialityWidget from '~/sidebar/components/confidential/sidebar_confidentiality_widget.vue';
 import SidebarParticipants from '~/sidebar/components/participants/participants.vue';
 import SidebarReferenceWidget from '~/sidebar/components/reference/sidebar_reference_widget.vue';
 import SidebarSubscriptionsWidget from '~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue';
+import SidebarTodoWidget from '~/sidebar/components/todo_toggle/sidebar_todo_widget.vue';
 import sidebarEventHub from '~/sidebar/event_hub';
 import SidebarDatePickerCollapsed from '~/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue';
 
@@ -17,13 +20,11 @@ import epicUtils from '../utils/epic_utils';
 import SidebarDatePicker from './sidebar_items/sidebar_date_picker.vue';
 import SidebarHeader from './sidebar_items/sidebar_header.vue';
 import SidebarLabels from './sidebar_items/sidebar_labels.vue';
-import SidebarTodo from './sidebar_items/sidebar_todo.vue';
 
 export default {
   dateTypes,
   components: {
     SidebarHeader,
-    SidebarTodo,
     SidebarDatePicker,
     SidebarDatePickerCollapsed,
     SidebarLabels,
@@ -32,6 +33,7 @@ export default {
     SidebarConfidentialityWidget,
     SidebarSubscriptionsWidget,
     SidebarReferenceWidget,
+    SidebarTodoWidget,
   },
   inject: ['iid'],
   data() {
@@ -58,6 +60,7 @@ export default {
       'epicStartDateSaveInProgress',
       'epicDueDateSaveInProgress',
       'fullPath',
+      'epicId',
     ]),
     ...mapGetters([
       'isUserSignedIn',
@@ -75,6 +78,9 @@ export default {
     issuableType() {
       return IssuableType.Epic;
     },
+    fullEpicId() {
+      return convertToGraphQLId(TYPE_EPIC, this.epicId);
+    },
   },
   mounted() {
     this.toggleSidebarFlag(epicUtils.getCollapsedGutter());
@@ -166,12 +172,16 @@ export default {
     :aria-label="__('Epic')"
   >
     <div class="issuable-sidebar js-issuable-update">
-      <sidebar-header :sidebar-collapsed="sidebarCollapsed" />
-      <sidebar-todo
-        v-show="sidebarCollapsed && isUserSignedIn"
-        :sidebar-collapsed="sidebarCollapsed"
-        data-testid="todo"
-      />
+      <sidebar-header :sidebar-collapsed="sidebarCollapsed">
+        <sidebar-todo-widget
+          v-if="isUserSignedIn"
+          :issuable-id="fullEpicId"
+          :issuable-iid="String(iid)"
+          :full-path="fullPath"
+          :issuable-type="issuableType"
+          data-testid="todo"
+        />
+      </sidebar-header>
       <sidebar-date-picker
         v-show="!sidebarCollapsed"
         :can-update="canUpdate"

ee/app/assets/javascripts/epic/components/sidebar_items/sidebar_header.vue

@@ -3,12 +3,9 @@ import { mapActions } from 'vuex';
 
 import ToggleSidebar from '~/vue_shared/components/sidebar/toggle_sidebar.vue';
 
-import SidebarTodo from './sidebar_todo.vue';
-
 export default {
   components: {
     ToggleSidebar,
-    SidebarTodo,
   },
   props: {
     sidebarCollapsed: {
@@ -24,12 +21,11 @@ export default {
 
 <template>
   <div class="block issuable-sidebar-header">
-    <span class="issuable-header-text hide-collapsed float-left">{{ __('To Do') }}</span>
     <toggle-sidebar
       :collapsed="sidebarCollapsed"
       css-classes="float-right"
       @toggle="toggleSidebar({ sidebarCollapsed })"
     />
-    <sidebar-todo v-show="!sidebarCollapsed" :sidebar-collapsed="sidebarCollapsed" />
+    <slot></slot>
   </div>
 </template>

ee/app/assets/javascripts/epic/epic_bundle.js

@@ -45,6 +45,7 @@ export default () => {
       canUpdate: epicData.canUpdate,
       fullPath: epicData.fullPath,
       iid: epicMeta.epicIid,
+      isClassicSidebar: true,
     },
     created() {
       this.setEpicMeta({

ee/spec/frontend/epic/components/epic_sidebar_spec.js

@@ -12,6 +12,7 @@ import { parsePikadayDate } from '~/lib/utils/datetime_utility';
 
 import SidebarReferenceWidget from '~/sidebar/components/reference/sidebar_reference_widget.vue';
 import SidebarSubscriptionsWidget from '~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue';
+import SidebarTodoWidget from '~/sidebar/components/todo_toggle/sidebar_todo_widget.vue';
 
 import { mockEpicMeta, mockEpicData, mockAncestors } from '../mock_data';
 
@@ -177,14 +178,6 @@ describe('EpicSidebarComponent', () => {
       expect(wrapper.find('.issuable-sidebar.js-issuable-update').exists()).toBe(true);
     });
 
-    it('renders Todo toggle button element when sidebar is collapsed and user is signed in', async () => {
-      store.dispatch('toggleSidebarFlag', true);
-
-      await nextTick();
-
-      expect(wrapper.find('[data-testid="todo"]').exists()).toBe(true);
-    });
-
     it('renders Start date & Due date elements when sidebar is expanded', async () => {
       wrapper.vm.$store.dispatch('toggleSidebarFlag', false);
 
@@ -214,6 +207,17 @@ describe('EpicSidebarComponent', () => {
       expect(wrapper.find(SidebarSubscriptionsWidget).exists()).toBe(true);
     });
 
+    it('renders SidebarTodoWidget when user is signed in', () => {
+      const todoWidget = wrapper.find(SidebarTodoWidget);
+      expect(todoWidget.exists()).toBe(true);
+      expect(todoWidget.props()).toMatchObject({
+        issuableId: 'gid://gitlab/Epic/1',
+        issuableIid: '1',
+        fullPath: 'frontend-fixtures-group',
+        issuableType: 'epic',
+      });
+    });
+
     it('renders SidebarReferenceWidget', () => {
       expect(wrapper.find(SidebarReferenceWidget).exists()).toBe(true);
     });
@@ -254,6 +258,16 @@ describe('EpicSidebarComponent', () => {
     });
   });
 
+  describe('when user is not signed in', () => {
+    beforeEach(() => {
+      gon.current_user_id = null;
+    });
+
+    it('does not render SidebarTodoWidget', () => {
+      expect(wrapper.find(SidebarTodoWidget).exists()).toBe(false);
+    });
+  });
+
   describe('mounted', () => {
     it('makes request to get epic details', () => {
       const actionSpies = {

ee/spec/frontend/epic/components/sidebar_items/sidebar_header_spec.js

@@ -32,24 +32,6 @@ describe('SidebarHeaderComponent', () => {
       expect(vm.$el.classList.contains('issuable-sidebar-header')).toBe(true);
     });
 
-    it('renders Todo text element', () => {
-      const todoEl = vm.$el.querySelector('.issuable-header-text.hide-collapsed.float-left');
-
-      expect(todoEl).not.toBeNull();
-      expect(todoEl.innerText.trim()).toBe('To Do');
-    });
-
-    it('renders Todo toggle button element when sidebar is expanded', (done) => {
-      vm.sidebarCollapsed = false;
-
-      vm.$nextTick()
-        .then(() => {
-          expect(vm.$el.querySelector('button.btn-todo')).not.toBeNull();
-        })
-        .then(done)
-        .catch(done.fail);
-    });
-
     it('renders toggle sidebar button element', () => {
       expect(vm.$el.querySelector('button.btn-sidebar-action')).not.toBeNull();
     });