1 files changed, 52 insertions, 15 deletions
diff --git a/app/assets/javascripts/boards/components/board_content_sidebar.vue b/app/assets/javascripts/boards/components/board_content_sidebar.vue
index e1f8457c0e2..16a8a9d253f 100644
--- a/app/assets/javascripts/boards/components/board_content_sidebar.vue
+++ b/app/assets/javascripts/boards/components/board_content_sidebar.vue
@@ -1,16 +1,17 @@
 <script>
 import { GlDrawer } from '@gitlab/ui';
 import { mapState, mapActions, mapGetters } from 'vuex';
-import BoardSidebarDueDate from '~/boards/components/sidebar/board_sidebar_due_date.vue';
+import SidebarDropdownWidget from 'ee_else_ce/sidebar/components/sidebar_dropdown_widget.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';
 import { contentTop } from '~/lib/utils/common_utils';
 import SidebarAssigneesWidget from '~/sidebar/components/assignees/sidebar_assignees_widget.vue';
 import SidebarConfidentialityWidget from '~/sidebar/components/confidential/sidebar_confidentiality_widget.vue';
+import SidebarDateWidget from '~/sidebar/components/date/sidebar_date_widget.vue';
 import SidebarSubscriptionsWidget from '~/sidebar/components/subscriptions/sidebar_subscriptions_widget.vue';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   headerHeight: `${contentTop()}px`,
@@ -18,19 +19,18 @@ export default {
     GlDrawer,
     BoardSidebarTitle,
     SidebarAssigneesWidget,
+    SidebarDateWidget,
     SidebarConfidentialityWidget,
     BoardSidebarTimeTracker,
     BoardSidebarLabelsSelect,
-    BoardSidebarDueDate,
     SidebarSubscriptionsWidget,
-    BoardSidebarMilestoneSelect,
-    BoardSidebarEpicSelect: () =>
-      import('ee_component/boards/components/sidebar/board_sidebar_epic_select.vue'),
+    SidebarDropdownWidget,
     BoardSidebarWeightInput: () =>
       import('ee_component/boards/components/sidebar/board_sidebar_weight_input.vue'),
-    SidebarIterationWidget: () =>
-      import('ee_component/sidebar/components/sidebar_iteration_widget.vue'),
+    IterationSidebarDropdownWidget: () =>
+      import('ee_component/sidebar/components/iteration_sidebar_dropdown_widget.vue'),
   },
+  mixins: [glFeatureFlagMixin()],
   inject: {
     multipleAssigneesFeatureAvailable: {
       default: false,
@@ -89,20 +89,57 @@ export default {
         :allow-multiple-assignees="multipleAssigneesFeatureAvailable"
         @assignees-updated="setAssignees"
       />
-      <board-sidebar-epic-select v-if="epicFeatureAvailable" class="epic" />
+      <sidebar-dropdown-widget
+        v-if="epicFeatureAvailable"
+        :iid="activeBoardItem.iid"
+        issuable-attribute="epic"
+        :workspace-path="projectPathForActiveIssue"
+        :attr-workspace-path="groupPathForActiveIssue"
+        :issuable-type="issuableType"
+        data-testid="sidebar-epic"
+      />
       <div>
-        <board-sidebar-milestone-select />
-        <sidebar-iteration-widget
-          v-if="iterationFeatureAvailable"
+        <sidebar-dropdown-widget
           :iid="activeBoardItem.iid"
+          issuable-attribute="milestone"
           :workspace-path="projectPathForActiveIssue"
-          :iterations-workspace-path="groupPathForActiveIssue"
+          :attr-workspace-path="projectPathForActiveIssue"
           :issuable-type="issuableType"
-          class="gl-mt-5"
+          data-testid="sidebar-milestones"
         />
+        <template v-if="!glFeatures.iterationCadences">
+          <sidebar-dropdown-widget
+            v-if="iterationFeatureAvailable"
+            :iid="activeBoardItem.iid"
+            issuable-attribute="iteration"
+            :workspace-path="projectPathForActiveIssue"
+            :attr-workspace-path="groupPathForActiveIssue"
+            :issuable-type="issuableType"
+            class="gl-mt-5"
+            data-testid="iteration-edit"
+            data-qa-selector="iteration_container"
+          />
+        </template>
+        <template v-else>
+          <iteration-sidebar-dropdown-widget
+            v-if="iterationFeatureAvailable"
+            :iid="activeBoardItem.iid"
+            :workspace-path="projectPathForActiveIssue"
+            :attr-workspace-path="groupPathForActiveIssue"
+            :issuable-type="issuableType"
+            class="gl-mt-5"
+            data-testid="iteration-edit"
+            data-qa-selector="iteration_container"
+          />
+        </template>
       </div>
       <board-sidebar-time-tracker class="swimlanes-sidebar-time-tracker" />
-      <board-sidebar-due-date />
+      <sidebar-date-widget
+        :iid="activeBoardItem.iid"
+        :full-path="fullPath"
+        :issuable-type="issuableType"
+        data-testid="sidebar-due-date"
+      />
       <board-sidebar-labels-select class="labels" />
       <board-sidebar-weight-input v-if="weightFeatureAvailable" class="weight" />
       <sidebar-confidentiality-widget