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,42 +64,48 @@ export default {
 </script>
 
 <template>
-  <div class="mt-2">
-    <gl-loading-icon v-show="isLoading" size="md" class="mt-3" />
-    <template v-if="!isLoading">
-      <gl-empty-state
-        v-if="!totalItems"
-        :title="__(`You don't have any open merge requests`)"
-        :primary-button-text="__('New merge request')"
-        :primary-button-link="newMergeRequestUrl"
-        :svg-path="emptyStateSvgPath"
-      >
-        <template #description>
-          <div class="text-center">
-            <p>
-              {{
-                __(
-                  'Code Review Analytics displays a table of open merge requests considered to be in code review. There are currently no merge requests in review for this project and/or filters.',
-                )
-              }}
-            </p>
+  <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">
+        <gl-empty-state
+          v-if="!totalItems"
+          :title="__(`You don't have any open merge requests`)"
+          :primary-button-text="__('New merge request')"
+          :primary-button-link="newMergeRequestUrl"
+          :svg-path="emptyStateSvgPath"
+        >
+          <template #description>
+            <div class="text-center">
+              <p>
+                {{
+                  __(
+                    'Code Review Analytics displays a table of open merge requests considered to be in code review. There are currently no merge requests in review for this project and/or filters.',
+                  )
+                }}
+              </p>
+            </div>
+          </template>
+        </gl-empty-state>
+        <template v-else>
+          <div>
+            <span class="font-weight-bold">{{ __('Merge Requests in Review') }}</span>
+            <gl-badge pill>{{ totalItems }}</gl-badge>
           </div>
+          <merge-request-table />
+          <gl-pagination
+            v-model="currentPage"
+            :per-page="perPage"
+            :total-items="totalItems"
+            align="center"
+            class="w-100"
+          />
         </template>
-      </gl-empty-state>
-      <template v-else>
-        <div>
-          <span class="font-weight-bold">{{ __('Merge Requests in Review') }}</span>
-          <gl-badge pill>{{ totalItems }}</gl-badge>
-        </div>
-        <merge-request-table />
-        <gl-pagination
-          v-model="currentPage"
-          :per-page="perPage"
-          :total-items="totalItems"
-          align="center"
-          class="w-100"
-        />
       </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,24 +12,46 @@ describe 'CodeReviewAnalytics', :js do
     stub_licensed_features(code_review_analytics: true)
 
     project.add_reporter(user)
+  end
 
-    sign_in(user)
+  context 'when the "new search" feature is disabled' do
+    before do
+      stub_feature_flags(code_review_analytics_has_new_search: false)
 
-    visit project_analytics_code_reviews_path(project)
-  end
+      sign_in(user)
+
+      visit project_analytics_code_reviews_path(project)
+    end
+
+    it 'renders the filtered search bar correctly' do
+      page.within('.content-wrapper .content .issues-filters') do
+        expect(page).to have_css('.filtered-search-box')
+      end
+    end
+
+    it 'displays label and milestone in search hint' do
+      filtered_search.click
 
-  it 'renders the filtered search bar correctly' do
-    page.within('.content-wrapper .content .issues-filters') do
-      expect(page).to have_css('.filtered-search-box')
+      page.within('#js-dropdown-hint') do
+        expect(page).to have_content('Label')
+        expect(page).to have_content('Milestone')
+      end
     end
   end
 
-  it 'displays label and milestone in search hint' do
-    filtered_search.click
+  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
 
-    page.within('#js-dropdown-hint') do
-      expect(page).to have_content('Label')
-      expect(page).to have_content('Milestone')
+    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(() => {