Roadmap settings - Move epics state to sidebar

Behind :roadmap_settings feature flag

ee/app/assets/javascripts/roadmap/components/roadmap_daterange.vue

@@ -115,12 +115,13 @@ export default {
         {{ dateRange.text }}
       </gl-dropdown-item>
     </gl-dropdown>
-    <gl-form-group v-if="availablePresets.length">
+    <gl-form-group v-if="availablePresets.length" class="gl-mb-0">
       <gl-form-radio-group
+        data-testid="daterange-presets"
         :checked="presetType"
         stacked
         :options="availablePresets"
-        @change="handleRoadmapLayoutChange"
+        @input="handleRoadmapLayoutChange"
       />
     </gl-form-group>
   </div>

ee/app/assets/javascripts/roadmap/components/roadmap_epics_state.vue

+<script>
+import { GlFormGroup, GlFormRadioGroup } from '@gitlab/ui';
+import { mapActions, mapState } from 'vuex';
+
+import { __ } from '~/locale';
+import { EPICS_STATES } from '../constants';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlFormRadioGroup,
+  },
+  computed: {
+    ...mapState(['epicsState']),
+    availableStates() {
+      const all = { text: __('Show all epics'), value: EPICS_STATES.ALL };
+      const opened = { text: __('Show open epics'), value: EPICS_STATES.OPENED };
+      const closed = { text: __('Show closed epics'), value: EPICS_STATES.CLOSED };
+
+      return [all, opened, closed];
+    },
+  },
+  methods: {
+    ...mapActions(['setEpicsState', 'fetchEpics']),
+    handleEpicStateChange(epicsState) {
+      if (epicsState !== this.epicsState) {
+        this.setEpicsState(epicsState);
+        this.fetchEpics();
+      }
+    },
+  },
+  i18n: {
+    header: __('Epics'),
+  },
+};
+</script>
+
+<template>
+  <gl-form-group class="gl-mb-0" data-testid="roadmap-epics-state">
+    <label for="roadmap-epics-state" class="gl-display-block">{{ $options.i18n.header }}</label>
+    <gl-form-radio-group
+      id="roadmap-epics-state"
+      :checked="epicsState"
+      stacked
+      :options="availableStates"
+      @change="handleEpicStateChange"
+    />
+  </gl-form-group>
+</template>

ee/app/assets/javascripts/roadmap/components/roadmap_filters.vue

@@ -206,6 +206,7 @@ export default {
         />
       </gl-form-group>
       <gl-dropdown
+        v-if="!glFeatures.roadmapSettings"
         :text="selectedEpicStateTitle"
         class="gl-mr-0 gl-lg-mr-3 mb-sm-2 dropdown-epics-state"
         toggle-class="gl-rounded-base!"

ee/app/assets/javascripts/roadmap/components/roadmap_settings.vue

 <script>
 import { GlDrawer } from '@gitlab/ui';
 import RoadmapDaterange from './roadmap_daterange.vue';
+import RoadmapEpicsState from './roadmap_epics_state.vue';
 
 export default {
   components: {
     GlDrawer,
     RoadmapDaterange,
+    RoadmapEpicsState,
   },
   props: {
     isOpen: {
@@ -44,6 +46,7 @@ export default {
     </template>
     <template #default>
       <roadmap-daterange :timeframe-range-type="timeframeRangeType" />
+      <roadmap-epics-state />
     </template>
   </gl-drawer>
 </template>

ee/spec/features/groups/group_roadmap_spec.rb

@@ -10,7 +10,6 @@ RSpec.describe 'group epic roadmap', :js do
   let(:user_dev) { create(:user) }
   let(:group) { create(:group) }
   let(:milestone) { create(:milestone, group: group) }
-  let(:state_dropdown) { find('.dropdown-epics-state') }
 
   let!(:bug_label) { create(:group_label, group: group, title: 'Bug') }
   let!(:critical_label) { create(:group_label, group: group, title: 'Critical') }
@@ -50,6 +49,7 @@ RSpec.describe 'group epic roadmap', :js do
     let!(:epic_with_bug) { create(:labeled_epic, group: group, start_date: 10.days.ago, end_date: 1.day.ago, labels: [bug_label]) }
     let!(:epic_with_critical) { create(:labeled_epic, group: group, start_date: 20.days.ago, end_date: 2.days.ago, labels: [critical_label]) }
     let!(:closed_epic) { create(:epic, :closed, group: group, start_date: 20.days.ago, end_date: 2.days.ago) }
+    let(:state_dropdown) { find('.dropdown-epics-state') }
 
     before do
       stub_feature_flags(roadmap_settings: false)
@@ -95,6 +95,63 @@ RSpec.describe 'group epic roadmap', :js do
         end
       end
     end
+
+    it 'renders the epics state dropdown' do
+      page.within('.content-wrapper .content .epics-filters') do
+        expect(page).to have_css('.dropdown-epics-state')
+      end
+    end
+
+    describe 'roadmap page with epics state filter' do
+      before do
+        state_dropdown.find('.dropdown-toggle').click
+      end
+
+      it 'renders open epics only' do
+        state_dropdown.find('button', text: 'Open epics').click
+
+        page.within('.roadmap-container .epics-list-section') do
+          expect(page).to have_selector('.epics-list-item .epic-title', count: 2)
+        end
+      end
+
+      it 'renders closed epics only' do
+        state_dropdown.find('button', text: 'Closed epics').click
+
+        page.within('.roadmap-container .epics-list-section') do
+          expect(page).to have_selector('.epics-list-item .epic-title', count: 1)
+        end
+      end
+
+      it 'saves last selected epic state', quarantine: 'https://gitlab.com/gitlab-org/gitlab/-/issues/341827' do
+        state_dropdown.find('button', text: 'Open epics').click
+
+        wait_for_all_requests
+        visit group_roadmap_path(group)
+        wait_for_requests
+
+        expect(state_dropdown.find('.dropdown-toggle')).to have_text("Open epics")
+        page.within('.roadmap-container .epics-list-section') do
+          expect(page).to have_selector('.epics-list-item .epic-title', count: 2)
+        end
+      end
+    end
+
+    describe 'roadmap page with filter applied' do
+      before do
+        search_for_label(bug_label)
+      end
+
+      it 'keeps label filter when filtering by state' do
+        state_dropdown.find('.dropdown-toggle').click
+        state_dropdown.find('button', text: 'Open epics').click
+
+        page.within('.roadmap-container .epics-list-section') do
+          expect(page).to have_selector('.epics-list-item .epic-title', count: 1)
+          expect(page).to have_content(epic_with_bug.title)
+        end
+      end
+    end
   end
 
   context 'when epics exist for the group' do
@@ -110,12 +167,12 @@ RSpec.describe 'group epic roadmap', :js do
     end
 
     describe 'roadmap page' do
-      context 'roadmap daterange filtering' do
       def open_settings_sidebar
         click_button 'Settings'
         expect(page).to have_selector('[data-testid="roadmap-settings"]')
       end
 
+      context 'roadmap daterange filtering' do
         def select_date_range(range_type)
           open_settings_sidebar
 
@@ -132,7 +189,7 @@ RSpec.describe 'group epic roadmap', :js do
 
           page.within('[data-testid="roadmap-settings"]') do
             expect(page).to have_selector('[data-testid="daterange-dropdown"]')
-            expect(page).not_to have_selector('.gl-form-checkbox-group')
+            expect(page).not_to have_selector('[data-testid="daterange-presets"]')
             expect(page.find('[data-testid="daterange-dropdown"] button.dropdown-toggle')).to have_content('This quarter')
           end
         end
@@ -141,7 +198,7 @@ RSpec.describe 'group epic roadmap', :js do
           select_date_range('This year')
 
           page.within('[data-testid="roadmap-settings"]') do
-            expect(page).to have_selector('.gl-form-checkbox-group')
+            expect(page).to have_selector('[data-testid="daterange-presets"]')
             expect(page).to have_selector('input[value="MONTHS"]')
             expect(page).to have_selector('input[value="WEEKS"]')
           end
@@ -151,7 +208,7 @@ RSpec.describe 'group epic roadmap', :js do
           select_date_range('Within 3 years')
 
           page.within('[data-testid="roadmap-settings"]') do
-            expect(page).to have_selector('.gl-form-checkbox-group')
+            expect(page).to have_selector('[data-testid="daterange-presets"]')
             expect(page).to have_selector('input[value="QUARTERS"]')
             expect(page).to have_selector('input[value="MONTHS"]')
             expect(page).to have_selector('input[value="WEEKS"]')
@@ -159,9 +216,43 @@ RSpec.describe 'group epic roadmap', :js do
         end
       end
 
-      it 'renders the epics state dropdown' do
-        page.within('.content-wrapper .content .epics-filters') do
-          expect(page).to have_css('.dropdown-epics-state')
+      describe 'roadmap page with epics state filter' do
+        def select_state(state)
+          page.within('[data-testid="roadmap-epics-state"]') do
+            choose state
+          end
+        end
+
+        before do
+          open_settings_sidebar
+        end
+
+        it 'renders open epics only' do
+          select_state('Show open epics')
+
+          page.within('.roadmap-container .epics-list-section') do
+            expect(page).to have_selector('.epics-list-item .epic-title', count: 2)
+          end
+        end
+
+        it 'renders closed epics only' do
+          select_state('Show closed epics')
+
+          page.within('.roadmap-container .epics-list-section') do
+            expect(page).to have_selector('.epics-list-item .epic-title', count: 1)
+          end
+        end
+
+        it 'saves last selected epic state', quarantine: 'https://gitlab.com/gitlab-org/gitlab/-/issues/341827' do
+          select_state('Show open epics')
+
+          wait_for_all_requests
+          visit group_roadmap_path(group)
+          wait_for_requests
+
+          page.within('.roadmap-container .epics-list-section') do
+            expect(page).to have_selector('.epics-list-item .epic-title', count: 2)
+          end
         end
       end
 
@@ -209,41 +300,6 @@ RSpec.describe 'group epic roadmap', :js do
       end
     end
 
-    describe 'roadmap page with epics state filter' do
-      before do
-        state_dropdown.find('.dropdown-toggle').click
-      end
-
-      it 'renders open epics only' do
-        state_dropdown.find('button', text: 'Open epics').click
-
-        page.within('.roadmap-container .epics-list-section') do
-          expect(page).to have_selector('.epics-list-item .epic-title', count: 2)
-        end
-      end
-
-      it 'renders closed epics only' do
-        state_dropdown.find('button', text: 'Closed epics').click
-
-        page.within('.roadmap-container .epics-list-section') do
-          expect(page).to have_selector('.epics-list-item .epic-title', count: 1)
-        end
-      end
-
-      it 'saves last selected epic state', quarantine: 'https://gitlab.com/gitlab-org/gitlab/-/issues/341827' do
-        state_dropdown.find('button', text: 'Open epics').click
-
-        wait_for_all_requests
-        visit group_roadmap_path(group)
-        wait_for_requests
-
-        expect(state_dropdown.find('.dropdown-toggle')).to have_text("Open epics")
-        page.within('.roadmap-container .epics-list-section') do
-          expect(page).to have_selector('.epics-list-item .epic-title', count: 2)
-        end
-      end
-    end
-
     describe 'roadmap page with filter applied' do
       before do
         search_for_label(bug_label)
@@ -260,15 +316,15 @@ RSpec.describe 'group epic roadmap', :js do
         end
       end
 
-      it 'keeps label filter when filtering by state' do
-        state_dropdown.find('.dropdown-toggle').click
-        state_dropdown.find('button', text: 'Open epics').click
+      # it 'keeps label filter when filtering by state' do
+      #   state_dropdown.find('.dropdown-toggle').click
+      #   state_dropdown.find('button', text: 'Open epics').click
 
-        page.within('.roadmap-container .epics-list-section') do
-          expect(page).to have_selector('.epics-list-item .epic-title', count: 1)
-          expect(page).to have_content(epic_with_bug.title)
-        end
-      end
+      #   page.within('.roadmap-container .epics-list-section') do
+      #     expect(page).to have_selector('.epics-list-item .epic-title', count: 1)
+      #     expect(page).to have_content(epic_with_bug.title)
+      #   end
+      # end
     end
 
     describe 'roadmap page with sort order applied' do

ee/spec/frontend/roadmap/components/roadmap_epics_state_spec.js

+import { GlFormGroup, GlFormRadioGroup } from '@gitlab/ui';
+
+import { __ } from '~/locale';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import createStore from 'ee/roadmap/store';
+import RoadmapEpicsState from 'ee/roadmap/components/roadmap_epics_state.vue';
+import { EPICS_STATES } from 'ee/roadmap/constants';
+
+describe('RoadmapEpicsState', () => {
+  let wrapper;
+
+  const availableStates = [
+    { text: __('Show all epics'), value: EPICS_STATES.ALL },
+    { text: __('Show open epics'), value: EPICS_STATES.OPENED },
+    { text: __('Show closed epics'), value: EPICS_STATES.CLOSED },
+  ];
+
+  const createComponent = () => {
+    const store = createStore();
+
+    store.dispatch('setInitialData', {
+      epicsState: EPICS_STATES.All,
+    });
+
+    wrapper = shallowMountExtended(RoadmapEpicsState, {
+      store,
+    });
+  };
+
+  const findFormGroup = () => wrapper.findComponent(GlFormGroup);
+  const findFormRadioGroup = () => wrapper.findComponent(GlFormRadioGroup);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('template', () => {
+    it('renders field label', () => {
+      expect(wrapper.find('label').exists()).toBe(true);
+      expect(wrapper.find('label').text()).toContain('Epics');
+    });
+
+    it('renders form group', () => {
+      expect(findFormGroup().exists()).toBe(true);
+    });
+
+    it('renders radio form group', () => {
+      expect(findFormRadioGroup().exists()).toBe(true);
+      expect(findFormRadioGroup().props('options')).toEqual(availableStates);
+    });
+  });
+});

ee/spec/frontend/roadmap/components/roadmap_settings_spec.js

@@ -2,6 +2,7 @@ import { GlDrawer } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import RoadmapSettings from 'ee/roadmap/components/roadmap_settings.vue';
 import RoadmapDaterange from 'ee/roadmap/components/roadmap_daterange.vue';
+import RoadmapEpicsState from 'ee/roadmap/components/roadmap_epics_state.vue';
 
 describe('RoadmapSettings', () => {
   let wrapper;
@@ -14,6 +15,7 @@ describe('RoadmapSettings', () => {
 
   const findSettingsDrawer = () => wrapper.findComponent(GlDrawer);
   const findDaterange = () => wrapper.findComponent(RoadmapDaterange);
+  const findEpicsSate = () => wrapper.findComponent(RoadmapEpicsState);
 
   beforeEach(() => {
     createComponent();
@@ -32,5 +34,9 @@ describe('RoadmapSettings', () => {
     it('renders roadmap daterange component', () => {
       expect(findDaterange().exists()).toBe(true);
     });
+
+    it('renders roadmap epics state component', () => {
+      expect(findEpicsSate().exists()).toBe(true);
+    });
   });
 });

locale/gitlab.pot

@@ -33033,6 +33033,9 @@ msgstr ""
 msgid "Show all breadcrumbs"
 msgstr ""
 
+msgid "Show all epics"
+msgstr ""
+
 msgid "Show all issues."
 msgstr ""
 
@@ -33045,6 +33048,9 @@ msgstr ""
 msgid "Show archived projects only"
 msgstr ""
 
+msgid "Show closed epics"
+msgstr ""
+
 msgid "Show command"
 msgstr ""
 
@@ -33081,6 +33087,9 @@ msgstr ""
 msgid "Show one file at a time"
 msgstr ""
 
+msgid "Show open epics"
+msgstr ""
+
 msgid "Show the Closed list"
 msgstr ""