Use LabelsSelect component, add block class for date pickers

ee/app/assets/javascripts/epics/sidebar/components/sidebar_app.vue

 <script>
+  /* global ListLabel */
   /* eslint-disable vue/require-default-prop */
   import Cookies from 'js-cookie';
   import Flash from '~/flash';
   import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
-  import sidebarDatePicker from '~/vue_shared/components/sidebar/date_picker.vue';
-  import sidebarCollapsedGroupedDatePicker from '~/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue';
+  import SidebarDatePicker from '~/vue_shared/components/sidebar/date_picker.vue';
+  import SidebarCollapsedGroupedDatePicker from '~/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue';
+  import SidebarLabelsSelect from '~/vue_shared/components/sidebar/labels_select/base.vue';
   import SidebarService from '../services/sidebar_service';
   import Store from '../stores/sidebar_store';
 
   export default {
     name: 'EpicSidebar',
     components: {
-      sidebarDatePicker,
-      sidebarCollapsedGroupedDatePicker,
+      SidebarDatePicker,
+      SidebarCollapsedGroupedDatePicker,
+      SidebarLabelsSelect,
     },
     props: {
       endpoint: {
@@ -32,6 +35,31 @@
         type: String,
         required: false,
       },
+      initialLabels: {
+        type: Array,
+        required: true,
+      },
+      namespace: {
+        type: String,
+        required: false,
+        default: '#',
+      },
+      updatePath: {
+        type: String,
+        required: true,
+      },
+      labelsPath: {
+        type: String,
+        required: true,
+      },
+      labelsWebUrl: {
+        type: String,
+        required: true,
+      },
+      epicsWebUrl: {
+        type: String,
+        required: true,
+      },
     },
     data() {
       const store = new Store({
@@ -46,13 +74,16 @@
         savingStartDate: false,
         savingEndDate: false,
         service: new SidebarService(this.endpoint),
+        epicContext: {
+          labels: this.initialLabels,
+        },
       };
     },
     methods: {
       toggleSidebar() {
         this.collapsed = !this.collapsed;
 
-        const contentContainer = this.$el.closest('.page-with-sidebar');
+        const contentContainer = this.$el.closest('.page-with-contextual-sidebar');
         contentContainer.classList.toggle('right-sidebar-expanded');
         contentContainer.classList.toggle('right-sidebar-collapsed');
 
@@ -82,6 +113,24 @@
       saveEndDate(date) {
         return this.saveDate('end', date);
       },
+      handleLabelClick(label) {
+        if (label.isAny) {
+          this.epicContext.labels = [];
+        } else {
+          const labelIndex = this.epicContext.labels.findIndex(l => l.id === label.id);
+
+          if (labelIndex === -1) {
+            this.epicContext.labels.push(new ListLabel({
+              id: label.id,
+              title: label.title,
+              color: label.color[0],
+              textColor: label.text_color,
+            }));
+          } else {
+            this.epicContext.labels.splice(labelIndex, 1);
+          }
+        }
+      },
     },
   };
 </script>
@@ -91,9 +140,10 @@
     class="right-sidebar"
     :class="{ 'right-sidebar-expanded' : !collapsed, 'right-sidebar-collapsed': collapsed }"
   >
-    <div class="issuable-sidebar">
+    <div class="issuable-sidebar js-issuable-update">
       <sidebar-date-picker
         v-if="!collapsed"
+        block-class="start-date"
         :collapsed="collapsed"
         :is-loading="savingStartDate"
         :editable="editable"
@@ -106,6 +156,7 @@
       />
       <sidebar-date-picker
         v-if="!collapsed"
+        block-class="end-date"
         :collapsed="collapsed"
         :is-loading="savingEndDate"
         :editable="editable"
@@ -123,6 +174,20 @@
         :show-toggle-sidebar="true"
         @toggleCollapse="toggleSidebar"
       />
+      <sidebar-labels-select
+        ability-name="epic"
+        :context="epicContext"
+        :namespace="namespace"
+        :update-path="updatePath"
+        :labels-path="labelsPath"
+        :labels-web-url="labelsWebUrl"
+        :label-filter-base-path="epicsWebUrl"
+        :can-edit="editable"
+        :show-create="true"
+        @onLabelClick="handleLabelClick"
+      >
+        {{ __('None') }}
+      </sidebar-labels-select>
     </div>
   </aside>
 </template>