[ci skip] Add todo button in Epic sidebar

app/assets/javascripts/sidebar/components/todo_toggle/todo.vue

+<script>
+import { __ } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
+
+import Icon from '~/vue_shared/components/icon.vue';
+import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
+
+const MARK_TEXT = __('Mark todo as done');
+const TODO_TEXT = __('Add todo');
+
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    Icon,
+    LoadingIcon,
+  },
+  props: {
+    issuableId: {
+      type: Number,
+      required: true,
+    },
+    issuableType: {
+      type: String,
+      required: true,
+    },
+    isAddTodo: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isButtonTypeAddTodo: this.isAddTodo,
+      isActionActive: false,
+    };
+  },
+  computed: {
+    buttonClasses() {
+      return this.collapsed ?
+        'btn-blank btn-todo sidebar-collapsed-icon dont-change-state' :
+        'btn btn-default btn-todo issuable-header-btn float-right';
+    },
+    buttonLabel() {
+      return this.isButtonTypeAddTodo ? MARK_TEXT : TODO_TEXT;
+    },
+    collapsedButtonIconClasses() {
+      return this.isButtonTypeAddTodo ? 'todo-undone' : '';
+    },
+    collapsedButtonIcon() {
+      return this.isButtonTypeAddTodo ? 'check-circle' : 'plus-square';
+    },
+  },
+};
+</script>
+
+<template>
+  <button
+    v-tooltip
+    :class="buttonClasses"
+    :title="buttonLabel"
+    :aria-label="buttonLabel"
+    :data-issuable-id="issuableId"
+    :data-issuable-type="issuableType"
+    type="button"
+    data-container="body"
+    data-placement="left"
+    data-boundary="viewport"
+  >
+    <icon
+      v-if="collapsed"
+      :css-classes="collapsedButtonIconClasses"
+      :name="collapsedButtonIcon"
+    />
+    <span
+      v-else
+      class="issuable-todo-inner"
+    >
+      {{ buttonLabel }}
+    </span>
+    <loading-icon
+      v-if="isActionActive"
+      :inline="true"
+    />
+  </button>
+</template>

app/assets/javascripts/vue_shared/components/sidebar/toggle_sidebar.vue

@@ -12,6 +12,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    cssClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     tooltipLabel() {
@@ -30,10 +35,12 @@ export default {
   <button
     v-tooltip
     :title="tooltipLabel"
+    :class="cssClasses"
     type="button"
     class="btn btn-blank gutter-toggle btn-sidebar-action"
     data-container="body"
     data-placement="left"
+    data-boundary="viewport"
     @click="toggle"
   >
     <i

app/assets/stylesheets/pages/issuable.scss

@@ -462,6 +462,7 @@
 
       .todo-undone {
         color: $gl-link-color;
+        fill: $gl-link-color;
       }
 
       .author {

ee/app/assets/javascripts/epics/epic_show/components/epic_show_app.vue

@@ -16,6 +16,10 @@
       relatedIssuesRoot,
     },
     props: {
+      epicId: {
+        type: Number,
+        required: true,
+      },
       endpoint: {
         type: String,
         required: true,
@@ -170,6 +174,7 @@
         />
       </div>
       <epic-sidebar
+        :epic-id="epicId"
         :endpoint="endpoint"
         :editable="canUpdate"
         :initial-start-date="startDate"

ee/app/assets/javascripts/epics/epic_show/epic_show_bundle.js

@@ -9,6 +9,7 @@ export default () => {
   const props = Object.assign({}, initialData, metaData, el.dataset);
 
   // Convert backend casing to match frontend style guide
+  props.epicId = props.epic_id;
   props.startDate = props.start_date;
   props.endDate = props.end_date;
 

ee/app/helpers/epics_helper.rb

@@ -4,6 +4,7 @@ module EpicsHelper
     group = epic.group
 
     epic_meta = {
+      epic_id: epic.id,
       created: epic.created_at,
       author: {
         name: author.name,