Clean up vsa_predefined_date_ranges feature flag

Removed all references to the feature flag since it's been enabled by
default

Changelog: other

app/assets/javascripts/analytics/cycle_analytics/components/value_stream_filters.vue

@@ -11,7 +11,6 @@ import {
   LAST_30_DAYS,
 } from '~/analytics/shared/constants';
 import { getCurrentUtcDate, datesMatch } from '~/lib/utils/datetime_utility';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import DateRangesDropdown from '~/analytics/shared/components/date_ranges_dropdown.vue';
 import FilterBar from './filter_bar.vue';
 
@@ -26,7 +25,6 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  mixins: [glFeatureFlagsMixin()],
   props: {
     selectedProjects: {
       type: Array,
@@ -85,9 +83,6 @@ export default {
     isDefaultDateRange() {
       return datesMatch(this.startDate, LAST_30_DAYS) && datesMatch(this.endDate, this.currentDate);
     },
-    supportsPredefinedDateRanges() {
-      return this.glFeatures?.vsaPredefinedDateRanges;
-    },
     dateRangeOption() {
       const { predefinedDateRange } = this;
 
@@ -100,11 +95,8 @@ export default {
     isCustomDateRangeSelected() {
       return this.dateRangeOption === DATE_RANGE_CUSTOM_VALUE;
     },
-    shouldShowPredefinedDateRanges() {
-      return this.supportsPredefinedDateRanges && this.hasPredefinedDateRangesFilter;
-    },
     shouldShowDateRangePicker() {
-      if (this.shouldShowPredefinedDateRanges) {
+      if (this.hasPredefinedDateRangesFilter) {
         return this.hasDateRangeFilter && this.isCustomDateRangeSelected;
       }
 
@@ -149,6 +141,7 @@ export default {
     <div
       v-if="shouldShowFilterDropdowns"
       class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-gap-5"
+      data-testid="vsa-filter-dropdowns-container"
     >
       <projects-dropdown-filter
         v-if="hasProjectFilter"
@@ -166,7 +159,7 @@ export default {
         data-testid="vsa-date-range-filter-container"
       >
         <date-ranges-dropdown
-          v-if="shouldShowPredefinedDateRanges"
+          v-if="hasPredefinedDateRangesFilter"
           data-testid="vsa-predefined-date-ranges-dropdown"
           :selected="dateRangeOption"
           :tooltip="maxDateRangeTooltip"

app/controllers/projects/cycle_analytics_controller.rb

@@ -23,7 +23,6 @@ class Projects::CycleAnalyticsController < Projects::ApplicationController
   before_action do
     push_licensed_feature(:cycle_analytics_for_groups) if project.licensed_feature_available?(:cycle_analytics_for_groups)
     push_licensed_feature(:group_level_analytics_dashboard) if project.licensed_feature_available?(:group_level_analytics_dashboard)
-    push_frontend_feature_flag(:vsa_predefined_date_ranges, project)
 
     if project.licensed_feature_available?(:cycle_analytics_for_projects)
       push_licensed_feature(:cycle_analytics_for_projects)

config/feature_flags/development/vsa_predefined_date_ranges.yml

----
-name: vsa_predefined_date_ranges
-introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/131825
-rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/425317
-milestone: '16.5'
-type: development
-group: group::optimize
-default_enabled: true

doc/user/group/value_stream_analytics/index.md

@@ -217,9 +217,7 @@ You can change the name of a project environment in your GitLab CI/CD configurat
 > - Horizontal stage path [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/12196) in 13.0 and [feature flag removed](https://gitlab.com/gitlab-org/gitlab/-/issues/323982) in 13.12
 > - Predefined date ranges dropdown list [introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/408656/) in GitLab 16.5 [with a flag](../../../administration/feature_flags.md) named `vsa_predefined_date_ranges`. Disabled by default.
 > - Predefined date ranges dropdown list [enabled on self-managed and GitLab.com](https://gitlab.com/gitlab-org/gitlab/-/issues/433149) in GitLab 16.7.
-
-FLAG:
-On self-managed GitLab, by default the predefined date ranges dropdown list feature is available. To hide the feature per user, an administrator can [disable the feature flag](../../../administration/feature_flags.md) named `vsa_predefined_date_ranges`. On GitLab.com, this feature is available.
+> - Predefined date ranges dropdown list [generally available](https://gitlab.com/gitlab-org/gitlab/-/issues/438051) in GitLab 16.9. Feature flag `vsa_predefined_date_ranges` removed.
 
 Prerequisites:
 

ee/app/controllers/groups/analytics/cycle_analytics_controller.rb

@@ -13,7 +13,6 @@ class Groups::Analytics::CycleAnalyticsController < Groups::Analytics::Applicati
 
   before_action do
     push_licensed_feature(:group_level_analytics_dashboard) if group_feature?(:group_level_analytics_dashboard)
-    push_frontend_feature_flag(:vsa_predefined_date_ranges, @group)
 
     render_403 unless can?(current_user, :read_cycle_analytics, @group)
   end

ee/spec/features/groups/analytics/cycle_analytics/filters_and_data_spec.rb

@@ -123,7 +123,7 @@ def vsa_stages(selected_group)
       end
     end
 
-    shared_examples 'has default filters' do |has_predefined_date_ranges: false|
+    shared_examples 'has default filters' do
       it 'shows the projects filter' do
         expect(page).to have_selector('.dropdown-projects', visible: true)
       end
@@ -132,24 +132,14 @@ def vsa_stages(selected_group)
         expect(page).to have_selector(filter_bar_selector, visible: false)
       end
 
-      if has_predefined_date_ranges
-        it 'shows the predefined date ranges dropdown with `Last 30 days` selected' do
-          page.within(predefined_date_ranges_dropdown_selector) do
-            expect(page).to have_button('Last 30 days')
-          end
-        end
-
-        it 'does not show the date range picker' do
-          expect(page).not_to have_css(date_range_picker_selector)
-        end
-      else
-        it 'shows the date range picker' do
-          expect(page).to have_css(date_range_picker_selector, visible: true)
+      it 'shows the predefined date ranges dropdown with `Last 30 days` selected' do
+        page.within(predefined_date_ranges_dropdown_selector) do
+          expect(page).to have_button('Last 30 days')
         end
+      end
 
-        it 'does not show the predefined date ranges dropdown' do
-          expect(page).not_to have_css(predefined_date_ranges_dropdown_selector)
-        end
+      it 'does not show the date range picker' do
+        expect(page).not_to have_css(date_range_picker_selector)
       end
     end
 
@@ -276,110 +266,55 @@ def vsa_stages(selected_group)
       end
 
       context 'with created_before and created_after set' do
-        context 'when the `vsa_predefined_date_ranges` feature flag is enabled' do
-          before do
-            visit group_analytics_cycle_analytics_path(group, created_before: '2019-12-31', created_after: '2019-11-01')
-
-            wait_for_requests
-          end
-
-          it 'shows predefined date ranges dropdown with `Custom` option selected' do
-            page.within(predefined_date_ranges_dropdown_selector) do
-              expect(page).to have_button('Custom')
-            end
-          end
+        before do
+          visit group_analytics_cycle_analytics_path(group, created_before: '2019-12-31', created_after: '2019-11-01')
 
-          it_behaves_like 'date range prepopulated', start_date: '2019-11-01', end_date: '2019-12-31'
+          wait_for_requests
         end
 
-        context 'when the `vsa_predefined_date_ranges` feature flag is disabled' do
-          before do
-            stub_feature_flags(vsa_predefined_date_ranges: false)
-            visit group_analytics_cycle_analytics_path(group, created_before: '2019-12-31', created_after: '2019-11-01')
-
-            wait_for_requests
-          end
-
-          it 'does not show predefined date ranges dropdown' do
-            expect(page).not_to have_css(predefined_date_ranges_dropdown_selector)
+        it 'shows predefined date ranges dropdown with `Custom` option selected' do
+          page.within(predefined_date_ranges_dropdown_selector) do
+            expect(page).to have_button('Custom')
           end
-
-          it_behaves_like 'date range prepopulated', start_date: '2019-11-01', end_date: '2019-12-31'
         end
+
+        it_behaves_like 'date range prepopulated', start_date: '2019-11-01', end_date: '2019-12-31'
       end
     end
 
     context 'with a group' do
       let(:selected_group) { group }
 
-      context 'when the `vsa_predefined_date_ranges` feature flag is enabled' do
-        before do
-          select_group_and_custom_value_stream(group, custom_value_stream_name)
-        end
-
-        it_behaves_like 'group value stream analytics'
-
-        it_behaves_like 'has overview metrics'
-
-        it_behaves_like 'has default filters', has_predefined_date_ranges: true
-
-        it_behaves_like 'value streams dashboard link' do
-          let(:target_group) { group }
-        end
+      before do
+        select_group_and_custom_value_stream(group, custom_value_stream_name)
       end
 
-      context 'when the `vsa_predefined_date_ranges` feature flag is disabled' do
-        before do
-          stub_feature_flags(vsa_predefined_date_ranges: false)
-          select_group_and_custom_value_stream(group, custom_value_stream_name)
-        end
-
-        it_behaves_like 'group value stream analytics'
+      it_behaves_like 'group value stream analytics'
 
-        it_behaves_like 'has overview metrics'
+      it_behaves_like 'has overview metrics'
 
-        it_behaves_like 'has default filters'
+      it_behaves_like 'has default filters'
 
-        it_behaves_like 'value streams dashboard link' do
-          let(:target_group) { group }
-        end
+      it_behaves_like 'value streams dashboard link' do
+        let(:target_group) { group }
       end
     end
 
     context 'with a sub group' do
       let(:selected_group) { sub_group }
 
-      context 'when the `vsa_predefined_date_ranges` feature flag is enabled' do
-        before do
-          select_group_and_custom_value_stream(sub_group, 'First subgroup value stream')
-        end
-
-        it_behaves_like 'group value stream analytics'
-
-        it_behaves_like 'has overview metrics'
-
-        it_behaves_like 'has default filters', has_predefined_date_ranges: true
-
-        it_behaves_like 'value streams dashboard link' do
-          let(:target_group) { sub_group }
-        end
+      before do
+        select_group_and_custom_value_stream(sub_group, 'First subgroup value stream')
       end
 
-      context 'when the `vsa_predefined_date_ranges` feature flag is disabled' do
-        before do
-          stub_feature_flags(vsa_predefined_date_ranges: false)
-          select_group_and_custom_value_stream(sub_group, 'First subgroup value stream')
-        end
+      it_behaves_like 'group value stream analytics'
 
-        it_behaves_like 'group value stream analytics'
+      it_behaves_like 'has overview metrics'
 
-        it_behaves_like 'has overview metrics'
+      it_behaves_like 'has default filters'
 
-        it_behaves_like 'has default filters'
-
-        it_behaves_like 'value streams dashboard link' do
-          let(:target_group) { sub_group }
-        end
+      it_behaves_like 'value streams dashboard link' do
+        let(:target_group) { sub_group }
       end
     end
   end

spec/features/cycle_analytics_spec.rb

@@ -93,43 +93,6 @@ def set_daterange(from_date, to_date)
 
       let(:stage_table_events) { stage_table.all(stage_table_event_selector) }
 
-      shared_examples 'filters the issues by date' do
-        it 'can filter the issues by date' do
-          expect(page).to have_selector(stage_table_event_selector)
-
-          set_daterange(from, to)
-
-          expect(page).not_to have_selector(stage_table_event_selector)
-          expect(page).not_to have_selector(stage_table_pagination_selector)
-        end
-      end
-
-      shared_examples 'filters the metrics by date' do
-        it 'can filter the metrics by date' do
-          expect(metrics_values).to match_array(%w[21 2 1])
-
-          set_daterange(from, to)
-
-          expect(metrics_values).to eq(['-'] * 3)
-        end
-      end
-
-      shared_examples 'navigates directly to a value stream stream stage with filters applied' do
-        before do
-          visit project_cycle_analytics_path(project, created_before: '2019-12-31', created_after: '2019-11-01', stage_id: 'code', milestone_title: milestone.title)
-          wait_for_requests
-        end
-
-        it 'can navigate directly to a value stream stream stage with filters applied' do
-          expect(page).to have_selector('.gl-path-active-item-indigo', text: 'Code')
-          expect(page.find(".js-daterange-picker-from input").value).to eq("2019-11-01")
-          expect(page.find(".js-daterange-picker-to input").value).to eq("2019-12-31")
-
-          filter_bar = page.find(stage_filter_bar)
-          expect(filter_bar.find(".gl-filtered-search-token-data-content").text).to eq("%#{milestone.title}")
-        end
-      end
-
       it 'displays metrics' do
         metrics_tiles = page.find(metrics_selector)
 
@@ -184,43 +147,39 @@ def set_daterange(from_date, to_date)
         expect(page).not_to have_text(original_first_title, exact: true)
       end
 
-      context 'when the `vsa_predefined_date_ranges` feature flag is enabled' do
-        before do
-          visit project_cycle_analytics_path(project)
-
-          wait_for_requests
-        end
-
-        it 'shows predefined date ranges dropdown with `Custom` option selected' do
-          page.within(predefined_date_ranges_dropdown_selector) do
-            expect(page).to have_button('Custom')
-          end
+      it 'shows predefined date ranges dropdown with `Custom` option selected' do
+        page.within(predefined_date_ranges_dropdown_selector) do
+          expect(page).to have_button('Custom')
         end
+      end
 
-        it_behaves_like 'filters the issues by date'
+      it 'can filter the issues by date' do
+        expect(page).to have_selector(stage_table_event_selector)
 
-        it_behaves_like 'filters the metrics by date'
+        set_daterange(from, to)
 
-        it_behaves_like 'navigates directly to a value stream stream stage with filters applied'
+        expect(page).not_to have_selector(stage_table_event_selector)
+        expect(page).not_to have_selector(stage_table_pagination_selector)
       end
 
-      context 'when the `vsa_predefined_date_ranges` feature flag is disabled' do
-        before do
-          stub_feature_flags(vsa_predefined_date_ranges: false)
-          visit project_cycle_analytics_path(project)
+      it 'can filter the metrics by date' do
+        expect(metrics_values).to match_array(%w[21 2 1])
 
-          wait_for_requests
-        end
+        set_daterange(from, to)
 
-        it 'does not show predefined date ranges dropdown' do
-          expect(page).not_to have_css(predefined_date_ranges_dropdown_selector)
-        end
+        expect(metrics_values).to eq(['-'] * 3)
+      end
 
-        it_behaves_like 'filters the issues by date'
+      it 'can navigate directly to a value stream stream stage with filters applied' do
+        visit project_cycle_analytics_path(project, created_before: '2019-12-31', created_after: '2019-11-01', stage_id: 'code', milestone_title: milestone.title)
+        wait_for_requests
 
-        it_behaves_like 'filters the metrics by date'
+        expect(page).to have_selector('.gl-path-active-item-indigo', text: 'Code')
+        expect(page.find(".js-daterange-picker-from input").value).to eq("2019-11-01")
+        expect(page.find(".js-daterange-picker-to input").value).to eq("2019-12-31")
 
-        it_behaves_like 'navigates directly to a value stream stream stage with filters applied'
+        filter_bar = page.find(stage_filter_bar)
+        expect(filter_bar.find(".gl-filtered-search-token-data-content").text).to eq("%#{milestone.title}")
       end
 
       def stage_time_column

spec/frontend/analytics/cycle_analytics/components/value_stream_filters_spec.js

@@ -15,14 +15,11 @@ import { currentGroup, selectedProjects } from '../mock_data';
 
 const { path } = currentGroup;
 const groupPath = `groups/${path}`;
-const defaultFeatureFlags = {
-  vsaPredefinedDateRanges: false,
-};
 
 const startDate = LAST_30_DAYS;
 const endDate = new Date('2019-01-14T00:00:00.000Z');
 
-function createComponent({ props = {}, featureFlags = defaultFeatureFlags } = {}) {
+function createComponent({ props = {} } = {}) {
   return shallowMountExtended(ValueStreamFilters, {
     propsData: {
       selectedProjects,
@@ -32,11 +29,6 @@ function createComponent({ props = {}, featureFlags = defaultFeatureFlags } = {}
       endDate,
       ...props,
     },
-    provide: {
-      glFeatures: {
-        ...featureFlags,
-      },
-    },
   });
 }
 
@@ -45,213 +37,238 @@ describe('ValueStreamFilters', () => {
 
   let wrapper;
 
+  const findFilterDropdownsContainer = () => wrapper.findByTestId('vsa-filter-dropdowns-container');
   const findProjectsDropdown = () => wrapper.findComponent(ProjectsDropdownFilter);
   const findDateRangePicker = () => wrapper.findComponent(Daterange);
   const findFilterBar = () => wrapper.findComponent(FilterBar);
   const findDateRangesDropdown = () => wrapper.findComponent(DateRangesDropdown);
 
-  beforeEach(() => {
-    wrapper = createComponent();
-  });
-
-  it('will render the filter bar', () => {
-    expect(findFilterBar().exists()).toBe(true);
-  });
-
-  it('will render the projects dropdown', () => {
-    expect(findProjectsDropdown().exists()).toBe(true);
-    expect(wrapper.findComponent(ProjectsDropdownFilter).props()).toEqual(
-      expect.objectContaining({
-        queryParams: wrapper.vm.projectsQueryParams,
-        multiSelect: wrapper.vm.$options.multiProjectSelect,
-      }),
-    );
-  });
-
-  it('will render the date range picker', () => {
-    expect(findDateRangePicker().exists()).toBe(true);
-  });
-
-  it('will not render the date ranges dropdown', () => {
-    expect(findDateRangesDropdown().exists()).toBe(false);
-  });
-
-  it('will emit `selectProject` when a project is selected', () => {
-    findProjectsDropdown().vm.$emit('selected');
-
-    expect(wrapper.emitted('selectProject')).not.toBeUndefined();
-  });
-
-  it('will emit `setDateRange` when the date range changes', () => {
-    findDateRangePicker().vm.$emit('change');
-
-    expect(wrapper.emitted('setDateRange')).not.toBeUndefined();
-  });
-
-  describe('hasDateRangeFilter = false', () => {
+  describe('default', () => {
     beforeEach(() => {
-      wrapper = createComponent({ props: { hasDateRangeFilter: false } });
+      wrapper = createComponent();
     });
 
-    it('should not render the date range picker', () => {
-      expect(findDateRangePicker().exists()).toBe(false);
+    it('will render the filter bar', () => {
+      expect(findFilterBar().exists()).toBe(true);
     });
-  });
 
-  describe('hasProjectFilter = false', () => {
-    beforeEach(() => {
-      wrapper = createComponent({ props: { hasProjectFilter: false } });
+    it('should render the filter dropdowns container', () => {
+      expect(findFilterDropdownsContainer().exists()).toBe(true);
     });
 
-    it('will not render the project dropdown', () => {
-      expect(findProjectsDropdown().exists()).toBe(false);
+    it('should render a separator between filtered search bar and dropdowns', () => {
+      expect(wrapper.find('hr').exists()).toBe(true);
     });
-  });
-
-  describe('`vsaPredefinedDateRanges` feature flag is enabled', () => {
-    const lastMonthValue = 'lastMonthValue';
-    const mockDateRange = {
-      value: lastMonthValue,
-      startDate: new Date('2023-08-08T00:00:00.000Z'),
-      endDate: new Date('2023-09-08T00:00:00.000Z'),
-    };
 
-    beforeEach(() => {
-      wrapper = createComponent({ featureFlags: { vsaPredefinedDateRanges: true } });
-    });
+    describe('filter dropdowns', () => {
+      describe('projects dropdown', () => {
+        it('will render the projects dropdown', () => {
+          expect(findProjectsDropdown().exists()).toBe(true);
+          expect(findProjectsDropdown().props()).toEqual(
+            expect.objectContaining({
+              queryParams: wrapper.vm.projectsQueryParams,
+              multiSelect: wrapper.vm.$options.multiProjectSelect,
+            }),
+          );
+        });
 
-    it('should render date ranges dropdown', () => {
-      expect(findDateRangesDropdown().exists()).toBe(true);
-    });
+        it('will emit `selectProject` when a project is selected', () => {
+          findProjectsDropdown().vm.$emit('selected');
 
-    it('should not render date range picker', () => {
-      expect(findDateRangePicker().exists()).toBe(false);
-    });
+          expect(wrapper.emitted('selectProject')).toHaveLength(1);
+        });
+      });
 
-    describe('when a date range is selected from the dropdown', () => {
-      describe('predefined date range option', () => {
-        beforeEach(async () => {
-          findDateRangesDropdown().vm.$emit('selected', mockDateRange);
+      describe('date range filters', () => {
+        it('should render date ranges dropdown', () => {
+          expect(findDateRangesDropdown().exists()).toBe(true);
+        });
 
-          await nextTick();
+        it('should not render date range picker', () => {
+          expect(findDateRangePicker().exists()).toBe(false);
         });
 
-        it('should emit `setDateRange` with date range', () => {
-          const { value, ...dateRange } = mockDateRange;
+        describe('date ranges dropdown', () => {
+          const lastMonthValue = 'lastMonthValue';
+          const mockDateRange = {
+            value: lastMonthValue,
+            startDate: new Date('2023-08-08T00:00:00.000Z'),
+            endDate: new Date('2023-09-08T00:00:00.000Z'),
+          };
 
-          expect(wrapper.emitted('setDateRange')).toEqual([[dateRange]]);
-        });
+          describe('when a date range is selected from the dropdown', () => {
+            describe('predefined date range option', () => {
+              beforeEach(async () => {
+                findDateRangesDropdown().vm.$emit('selected', mockDateRange);
 
-        it('should emit `setPredefinedDateRange` with correct value', () => {
-          expect(wrapper.emitted('setPredefinedDateRange')).toEqual([[lastMonthValue]]);
-        });
-      });
+                await nextTick();
+              });
 
-      describe('custom date range option', () => {
-        beforeEach(async () => {
-          findDateRangesDropdown().vm.$emit('customDateRangeSelected');
+              it('should emit `setDateRange` with date range', () => {
+                const { value, ...dateRange } = mockDateRange;
 
-          await nextTick();
-        });
+                expect(wrapper.emitted('setDateRange')).toEqual([[dateRange]]);
+              });
 
-        it('should emit `setPredefinedDateRange` with custom date range value', () => {
-          expect(wrapper.emitted('setPredefinedDateRange')).toEqual([[DATE_RANGE_CUSTOM_VALUE]]);
-        });
+              it('should emit `setPredefinedDateRange` with correct value', () => {
+                expect(wrapper.emitted('setPredefinedDateRange')).toEqual([[lastMonthValue]]);
+              });
+            });
 
-        it('should not emit `setDateRange`', () => {
-          expect(wrapper.emitted('setDateRange')).toBeUndefined();
-        });
-      });
-    });
+            describe('custom date range option', () => {
+              beforeEach(async () => {
+                findDateRangesDropdown().vm.$emit('customDateRangeSelected');
 
-    describe.each`
-      predefinedDateRange        | shouldRenderDateRangePicker | dateRangeType
-      ${DATE_RANGE_CUSTOM_VALUE} | ${true}                     | ${'custom date range'}
-      ${lastMonthValue}          | ${false}                    | ${'predefined date range'}
-    `(
-      'when the `predefinedDateRange` prop is set to a $dateRangeType',
-      ({ predefinedDateRange, shouldRenderDateRangePicker }) => {
-        beforeEach(() => {
-          wrapper = createComponent({
-            props: { predefinedDateRange },
-            featureFlags: { vsaPredefinedDateRanges: true },
+                await nextTick();
+              });
+
+              it('should emit `setPredefinedDateRange` with custom date range value', () => {
+                expect(wrapper.emitted('setPredefinedDateRange')).toEqual([
+                  [DATE_RANGE_CUSTOM_VALUE],
+                ]);
+              });
+
+              it('should not emit `setDateRange`', () => {
+                expect(wrapper.emitted('setDateRange')).toBeUndefined();
+              });
+            });
           });
-        });
 
-        it("should be passed into the dropdown's `selected` prop", () => {
-          expect(findDateRangesDropdown().props('selected')).toBe(predefinedDateRange);
+          describe.each`
+            predefinedDateRange        | shouldRenderDateRangePicker | dateRangeType
+            ${DATE_RANGE_CUSTOM_VALUE} | ${true}                     | ${'custom date range'}
+            ${lastMonthValue}          | ${false}                    | ${'predefined date range'}
+          `(
+            'when the `predefinedDateRange` prop is set to a $dateRangeType',
+            ({ predefinedDateRange, shouldRenderDateRangePicker }) => {
+              beforeEach(() => {
+                wrapper = createComponent({
+                  props: { predefinedDateRange },
+                });
+              });
+
+              it("should be passed into the dropdown's `selected` prop", () => {
+                expect(findDateRangesDropdown().props('selected')).toBe(predefinedDateRange);
+              });
+
+              it(`should ${
+                shouldRenderDateRangePicker ? '' : 'not'
+              } render the date range picker`, () => {
+                expect(findDateRangePicker().exists()).toBe(shouldRenderDateRangePicker);
+              });
+            },
+          );
+
+          describe('when the `predefinedDateRange` prop is null', () => {
+            const laterStartDate = new Date('2018-12-01T00:00:00.000Z');
+            const earlierStartDate = new Date('2019-01-01T00:00:00.000Z');
+            const customEndDate = new Date('2019-02-01T00:00:00.000Z');
+
+            describe.each`
+              dateRange                                   | expectedDateRangeOption          | shouldRenderDateRangePicker | description
+              ${{ startDate, endDate }}                   | ${DATE_RANGE_LAST_30_DAYS_VALUE} | ${false}                    | ${'is default'}
+              ${{ startDate: laterStartDate, endDate }}   | ${DATE_RANGE_CUSTOM_VALUE}       | ${true}                     | ${'has a later start date than the default'}
+              ${{ startDate: earlierStartDate, endDate }} | ${DATE_RANGE_CUSTOM_VALUE}       | ${true}                     | ${'has an earlier start date than the default'}
+              ${{ startDate, endDate: customEndDate }}    | ${DATE_RANGE_CUSTOM_VALUE}       | ${true}                     | ${'has an end date that is not today'}
+            `(
+              'date range $description',
+              ({ dateRange, expectedDateRangeOption, shouldRenderDateRangePicker }) => {
+                beforeEach(() => {
+                  wrapper = createComponent({
+                    props: { predefinedDateRange: null, ...dateRange },
+                  });
+                });
+
+                it("should set the dropdown's `selected` prop to the correct value", () => {
+                  expect(findDateRangesDropdown().props('selected')).toBe(expectedDateRangeOption);
+                });
+
+                it(`should ${
+                  shouldRenderDateRangePicker ? '' : 'not'
+                } render the date range picker`, () => {
+                  expect(findDateRangePicker().exists()).toBe(shouldRenderDateRangePicker);
+                });
+              },
+            );
+          });
         });
 
-        it(`should ${
-          shouldRenderDateRangePicker ? '' : 'not'
-        } render the date range picker`, () => {
-          expect(findDateRangePicker().exists()).toBe(shouldRenderDateRangePicker);
-        });
-      },
-    );
-
-    describe('when the `predefinedDateRange` prop is null', () => {
-      const laterStartDate = new Date('2018-12-01T00:00:00.000Z');
-      const earlierStartDate = new Date('2019-01-01T00:00:00.000Z');
-      const customEndDate = new Date('2019-02-01T00:00:00.000Z');
-
-      describe.each`
-        dateRange                                   | expectedDateRangeOption          | shouldRenderDateRangePicker | description
-        ${{ startDate, endDate }}                   | ${DATE_RANGE_LAST_30_DAYS_VALUE} | ${false}                    | ${'is default'}
-        ${{ startDate: laterStartDate, endDate }}   | ${DATE_RANGE_CUSTOM_VALUE}       | ${true}                     | ${'has a later start date than the default'}
-        ${{ startDate: earlierStartDate, endDate }} | ${DATE_RANGE_CUSTOM_VALUE}       | ${true}                     | ${'has an earlier start date than the default'}
-        ${{ startDate, endDate: customEndDate }}    | ${DATE_RANGE_CUSTOM_VALUE}       | ${true}                     | ${'has an end date that is not today'}
-      `(
-        'date range $description',
-        ({ dateRange, expectedDateRangeOption, shouldRenderDateRangePicker }) => {
+        describe('date range picker', () => {
           beforeEach(() => {
             wrapper = createComponent({
-              props: { predefinedDateRange: null, ...dateRange },
-              featureFlags: { vsaPredefinedDateRanges: true },
+              props: { predefinedDateRange: DATE_RANGE_CUSTOM_VALUE },
             });
           });
 
-          it("should set the dropdown's `selected` prop to the correct value", () => {
-            expect(findDateRangesDropdown().props('selected')).toBe(expectedDateRangeOption);
-          });
+          it('should emit `setDateRange` when the date range changes', () => {
+            findDateRangePicker().vm.$emit('change');
 
-          it(`should ${
-            shouldRenderDateRangePicker ? '' : 'not'
-          } render the date range picker`, () => {
-            expect(findDateRangePicker().exists()).toBe(shouldRenderDateRangePicker);
+            expect(wrapper.emitted('setDateRange')).toHaveLength(1);
           });
-        },
-      );
-    });
-
-    describe('hasPredefinedDateRangesFilter = false', () => {
-      beforeEach(() => {
-        wrapper = createComponent({
-          props: { hasPredefinedDateRangesFilter: false },
-          featureFlags: { vsaPredefinedDateRanges: true },
         });
       });
+    });
+  });
 
-      it('should not render the date ranges dropdown', () => {
-        expect(findDateRangesDropdown().exists()).toBe(false);
-      });
+  describe('hasProjectFilter = false', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ props: { hasProjectFilter: false } });
     });
 
-    describe('hasDateRangeFilter = false', () => {
-      beforeEach(() => {
-        wrapper = createComponent({
-          props: { hasDateRangeFilter: false },
-          featureFlags: { vsaPredefinedDateRanges: true },
-        });
+    it('will not render the project dropdown', () => {
+      expect(findProjectsDropdown().exists()).toBe(false);
+    });
+  });
+
+  describe('hasDateRangeFilter = false', () => {
+    beforeEach(() => {
+      wrapper = createComponent({
+        props: { hasDateRangeFilter: false },
       });
+    });
+
+    it('should not render the date range picker', () => {
+      expect(findDateRangePicker().exists()).toBe(false);
+    });
 
-      it('should not render the date range picker', () => {
-        expect(findDateRangePicker().exists()).toBe(false);
+    it('should remove custom date range option from date ranges dropdown', () => {
+      expect(findDateRangesDropdown().props('includeCustomDateRangeOption')).toBe(false);
+    });
+  });
+
+  describe('hasPredefinedDateRangesFilter = false', () => {
+    beforeEach(() => {
+      wrapper = createComponent({
+        props: { hasPredefinedDateRangesFilter: false },
       });
+    });
 
-      it('should remove custom date range option from date ranges dropdown', () => {
-        expect(findDateRangesDropdown().props('includeCustomDateRangeOption')).toBe(false);
+    it('should not render the date ranges dropdown', () => {
+      expect(findDateRangesDropdown().exists()).toBe(false);
+    });
+
+    it('should render date range picker', () => {
+      expect(findDateRangePicker().exists()).toBe(true);
+    });
+  });
+
+  describe('hasProjectFilter=false, hasDateRangeFilter=false, and hasPredefinedDateRangesFilter=false', () => {
+    beforeEach(() => {
+      wrapper = createComponent({
+        props: {
+          hasProjectFilter: false,
+          hasDateRangeFilter: false,
+          hasPredefinedDateRangesFilter: false,
+        },
       });
     });
+
+    it('should not render the filter dropdowns container', () => {
+      expect(findFilterDropdownsContainer().exists()).toBe(false);
+    });
+
+    it('should not render a separator between filtered search bar and dropdowns', () => {
+      expect(wrapper.find('hr').exists()).toBe(false);
+    });
   });
 });