Add skeleton for GlFilteredSearch

- Implement feature flag checks
and render legacy filtered search
when feature flag is disabled

ee/app/assets/javascripts/analytics/code_review_analytics/code_review_analytics_bundle.js

 import Vue from 'vue';
 import store from './store';
 import CodeAnalyticsApp from './components/app.vue';
-import FilteredSearchCodeReviewAnalytics from './filtered_search_code_review_analytics';
 
 export default () => {
   const container = document.getElementById('js-code-review-analytics');
@@ -13,10 +12,6 @@ export default () => {
   new Vue({
     el: container,
     store,
-    created() {
-      this.filterManager = new FilteredSearchCodeReviewAnalytics();
-      this.filterManager.setup();
-    },
     render(h) {
       return h(CodeAnalyticsApp, {
         props: {

ee/app/assets/javascripts/analytics/code_review_analytics/components/app.vue

 <script>
 import { mapState, mapActions } from 'vuex';
 import { GlBadge, GlLoadingIcon, GlEmptyState, GlPagination } from '@gitlab/ui';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import MergeRequestTable from './merge_request_table.vue';
+import FilteredSearchCodeReviewAnalytics from '../filtered_search_code_review_analytics';
 
 export default {
   components: {
@@ -11,6 +13,7 @@ export default {
     GlEmptyState,
     MergeRequestTable,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     projectId: {
       type: Number,
@@ -41,8 +44,16 @@ export default {
         this.fetchMergeRequests();
       },
     },
+    codeReviewAnalyticsHasNewSearch() {
+      return this.glFeatures.codeReviewAnalyticsHasNewSearch;
+    },
   },
   created() {
+    if (!this.codeReviewAnalyticsHasNewSearch) {
+      this.filterManager = new FilteredSearchCodeReviewAnalytics();
+      this.filterManager.setup();
+    }
+
     this.setProjectId(this.projectId);
     this.fetchMergeRequests();
   },
@@ -53,6 +64,11 @@ export default {
 </script>
 
 <template>
+  <div>
+    <div
+      v-if="codeReviewAnalyticsHasNewSearch"
+      class="bg-secondary-50 p-3 border-top border-bottom"
+    ></div>
     <div class="mt-2">
       <gl-loading-icon v-show="isLoading" size="md" class="mt-3" />
       <template v-if="!isLoading">
@@ -91,4 +107,5 @@ export default {
         </template>
       </template>
     </div>
+  </div>
 </template>

ee/app/controllers/projects/analytics/code_reviews_controller.rb

@@ -4,6 +4,9 @@ module Projects
   module Analytics
     class CodeReviewsController < Projects::ApplicationController
       before_action :authorize_read_code_review_analytics!
+      before_action do
+        push_frontend_feature_flag(:code_review_analytics_has_new_search)
+      end
 
       def index
       end

ee/app/views/projects/analytics/code_reviews/index.html.haml

@@ -5,5 +5,6 @@
   %h3
     = _('Code Review')
   %span.text-secondary= _('Review time is defined as the time it takes from first comment until merged.')
-= render 'shared/issuable/search_bar', type: :issues_analytics, show_sorting_dropdown: false
+- if Feature.disabled?(:code_review_analytics_has_new_search)
+  = render 'shared/issuable/search_bar', type: :issues_analytics, show_sorting_dropdown: false
 #js-code-review-analytics{ data: { project_id: @project.id, new_merge_request_url: namespace_project_new_merge_request_path(@project.namespace), empty_state_svg_path: image_path('illustrations/merge_requests.svg') } }

ee/spec/features/analytics/code_analytics_spec.rb

@@ -2,7 +2,7 @@
 
 require 'spec_helper'
 
-describe 'CodeReviewAnalytics', :js do
+describe 'CodeReviewAnalytics Filtered Search', :js do
   include FilteredSearchHelpers
 
   let(:user) { create(:user) }
@@ -12,6 +12,11 @@ describe 'CodeReviewAnalytics', :js do
     stub_licensed_features(code_review_analytics: true)
 
     project.add_reporter(user)
+  end
+
+  context 'when the "new search" feature is disabled' do
+    before do
+      stub_feature_flags(code_review_analytics_has_new_search: false)
 
       sign_in(user)
 
@@ -32,4 +37,21 @@ describe 'CodeReviewAnalytics', :js do
         expect(page).to have_content('Milestone')
       end
     end
+  end
+
+  context 'when the "new search" feature is enabled' do
+    before do
+      stub_feature_flags(code_review_analytics_has_new_search: true)
+
+      sign_in(user)
+
+      visit project_analytics_code_reviews_path(project)
+    end
+
+    it 'does not render the filtered search bar' do
+      page.within('.content-wrapper .content') do
+        expect(page).not_to have_css('.issues-filters')
+      end
+    end
+  end
 end

ee/spec/frontend/analytics/code_review_analytics/components/app_spec.js

@@ -5,6 +5,12 @@ import CodeReviewAnalyticsApp from 'ee/analytics/code_review_analytics/component
 import MergeRequestTable from 'ee/analytics/code_review_analytics/components/merge_request_table.vue';
 import createState from 'ee/analytics/code_review_analytics/store/state';
 
+jest.mock('ee/analytics/code_review_analytics/filtered_search_code_review_analytics', () =>
+  jest.fn().mockImplementation(() => ({
+    setup: jest.fn(),
+  })),
+);
+
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
@@ -47,6 +53,11 @@ describe('CodeReviewAnalyticsApp component', () => {
         newMergeRequestUrl: 'new_merge_request',
         emptyStateSvgPath: 'svg',
       },
+      provide: {
+        glFeatures: {
+          codeReviewAnalyticsHasNewSearch: false,
+        },
+      },
     });
 
   beforeEach(() => {