Roadmap settings - Turn off progress tracking

Review feedback

app/assets/stylesheets/utilities.scss

@@ -200,6 +200,12 @@
   }
 }
 
+.gl-xl-ml-3 {
+  @include media-breakpoint-up(lg) {
+    margin-left: $gl-spacing-scale-3;
+  }
+}
+
 .gl-mb-n3 {
   margin-bottom: -$gl-spacing-scale-3;
 }

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

@@ -82,7 +82,7 @@ export default {
       :timeframe-range-type="timeframeRangeType"
       @toggleSettings="toggleSettings"
     />
-    <div :class="{ 'overflow-reset': epicsFetchResultEmpty }" class="roadmap-container">
+    <div :class="{ 'overflow-reset': epicsFetchResultEmpty }" class="roadmap-container gl-relative">
       <gl-loading-icon v-if="epicsFetchInProgress" class="gl-mt-5" size="md" />
       <epics-list-empty
         v-else-if="epicsFetchResultEmpty"

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

@@ -94,7 +94,7 @@ export default {
     <gl-dropdown
       id="roadmap-daterange"
       icon="calendar"
-      class="gl-mb-3 roadmap-daterange-dropdown"
+      class="roadmap-daterange-dropdown"
       toggle-class="gl-rounded-base!"
       :text="daterangeDropdownText"
       data-testid="daterange-dropdown"
@@ -110,7 +110,7 @@ export default {
         {{ dateRange.text }}
       </gl-dropdown-item>
     </gl-dropdown>
-    <gl-form-group v-if="availablePresets.length" class="gl-mb-0">
+    <gl-form-group v-if="availablePresets.length" class="gl-mb-0 gl-mt-3">
       <gl-form-radio-group
         data-testid="daterange-presets"
         :checked="presetType"

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

@@ -255,7 +255,7 @@ export default {
       <gl-button
         v-if="glFeatures.roadmapSettings"
         icon="settings"
-        class="gl-mb-3 gl-lg-ml-3 gl-sm-mt-3"
+        class="gl-mb-3 gl-xl-ml-3 gl-inset-border-1-gray-400!"
         :aria-label="$options.i18n.settings"
         data-testid="settings-button"
         @click="$emit('toggleSettings', $event)"

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

@@ -35,20 +35,18 @@ export default {
     <gl-form-group
       class="gl-mb-0"
       :label="$options.i18n.header"
+      label-class="gl-pb-2!"
       data-testid="roadmap-progress-tracking"
     >
-      <label for="toggle-progress-tracking" class="gl-font-weight-normal">
-        {{ $options.i18n.toggleLabel }}
-      </label>
       <gl-toggle
-        id="toggle-progress-tracking"
         :value="isProgressTrackingActive"
         :label="$options.i18n.toggleLabel"
-        label-position="hidden"
-        aria-describedby="toggleTrackingProgress"
-        data-testid="toggle-progress-tracking"
         @change="toggleProgressTrackingActive"
-      />
+      >
+        <template #label>
+          <span class="gl-font-weight-normal">{{ $options.i18n.toggleLabel }}</span>
+        </template>
+      </gl-toggle>
       <gl-form-radio-group
         v-if="isProgressTrackingActive"
         :checked="progressTracking"

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

@@ -23,18 +23,6 @@ export default {
       required: true,
     },
   },
-  methods: {
-    getDrawerHeaderHeight() {
-      const wrapperEl = document.querySelector('.roadmap-container');
-
-      if (wrapperEl) {
-        const topPosition = wrapperEl.getBoundingClientRect().top + window.pageYOffset;
-        return `${topPosition}px`;
-      }
-
-      return '';
-    },
-  },
 };
 </script>
 
@@ -42,7 +30,7 @@ export default {
   <gl-drawer
     v-bind="$attrs"
     :open="isOpen"
-    :header-height="getDrawerHeaderHeight()"
+    class="gl-absolute"
     @close="$emit('toggleSettings', $event)"
   >
     <template #title>

ee/app/assets/javascripts/roadmap/mixins/filtered_search_mixin.js

@@ -53,8 +53,8 @@ export default {
         'not[author_username]': notAuthorUsername,
         'not[my_reaction_emoji]': notMyReactionEmoji,
         'not[label_name][]': notLabelName,
-        showProgress: this.isProgressTrackingActive,
         progress: this.progressTracking,
+        show_progress: this.isProgressTrackingActive,
         show_milestones: this.isShowingMilestones,
         milestones_type: this.milestonesType,
       };

ee/app/assets/javascripts/roadmap/roadmap_bundle.js

@@ -110,9 +110,9 @@ export default () => {
         timeframe,
         progressTracking: rawFilterParams.progress || PROGRESS_WEIGHT,
         isProgressTrackingActive:
-          rawFilterParams.showProgress === undefined
+          rawFilterParams.show_progress === undefined
             ? true
-            : parseBoolean(rawFilterParams.showProgress),
+            : parseBoolean(rawFilterParams.show_progress),
         isShowingMilestones:
           rawFilterParams.show_milestones === undefined
             ? true

ee/app/assets/stylesheets/page_bundles/roadmap.scss

@@ -525,11 +525,9 @@ html.group-epics-roadmap-html {
   .sort-dropdown-container {
     // This override is needed to make sort-dropdown have same height
     // as filtered search bar.
-    @include media-breakpoint-up(sm) {
-      .dropdown,
-      > button {
-        margin-bottom: $gl-padding-8;
-      }
+    .dropdown,
+    > button {
+      margin-bottom: $gl-padding-8;
     }
   }
 }

ee/spec/features/groups/group_roadmap_spec.rb

@@ -248,9 +248,10 @@ RSpec.describe 'group epic roadmap', :js do
       end
 
       describe 'roadmap with epics progress tracking' do
-        def select_progress_tracking(tracking)
-          page.within('[data-testid="roadmap-progress-tracking"]') do
-            choose tracking
+        def wait_for_epics(count, icon)
+          page.within('.roadmap-container .epics-list-section') do
+            expect(page).to have_selector('.epic-bar-progress', count: count)
+            expect(page).to have_selector("[data-testid='#{icon}']", count: count)
           end
         end
 
@@ -258,27 +259,21 @@ RSpec.describe 'group epic roadmap', :js do
           open_settings_sidebar
         end
 
-        it 'renders progress bar using weight' do
-          select_progress_tracking('Use issue weight')
+        it 'renders progress bar using weight', :aggregate_failures do
+          choose 'Use issue weight'
 
-          page.within('.roadmap-container .epics-list-section') do
-            expect(page).to have_selector('.epic-bar-progress', count: 3)
-            expect(page).to have_selector('[data-testid="weight-icon"]', count: 3)
-          end
+          wait_for_epics(3, "weight-icon")
         end
 
-        it 'renders progress bar issue count' do
-          select_progress_tracking('Use issue count')
+        it 'renders progress bar issue count', :aggregate_failures do
+          choose 'Use issue count'
 
-          page.within('.roadmap-container .epics-list-section') do
-            expect(page).to have_selector('.epic-bar-progress', count: 3)
-            expect(page).to have_selector('[data-testid="issue-closed-icon"]', count: 3)
-          end
+          wait_for_epics(3, "issue-closed-icon")
         end
 
-        it 'turns off progress tracking' do
+        it 'turns off progress tracking', :aggregate_failures do
           page.within('[data-testid="roadmap-progress-tracking"]') do
-            find('[data-testid="toggle-progress-tracking"]').click
+            click_button class: 'gl-toggle'
           end
 
           page.within('.roadmap-container .epics-list-section') do

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

@@ -125,7 +125,7 @@ describe('RoadmapFilters', () => {
         await nextTick();
 
         expect(global.window.location.href).toBe(
-          `${TEST_HOST}/?state=${EPICS_STATES.CLOSED}&sort=end_date_asc&layout=MONTHS&author_username=root&label_name%5B%5D=Bug&milestone_title=4.0&confidential=true&showProgress=true&progress=WEIGHT&show_milestones=true&milestones_type=ALL`,
+          `${TEST_HOST}/?state=${EPICS_STATES.CLOSED}&sort=end_date_asc&layout=MONTHS&author_username=root&label_name%5B%5D=Bug&milestone_title=4.0&confidential=true&progress=WEIGHT&show_progress=true&show_milestones=true&milestones_type=ALL`,
         );
       });
     });