Initial app bootstrap for merge request dashboard

This is initial bare bones for the merge request dashboard Vue app.

app/assets/javascripts/merge_request_dashboard/components/app.vue

+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlLoadingIcon,
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="page-title-holder">
+      <h1 class="page-title gl-font-size-h-display">{{ __('Merge Requests') }}</h1>
+    </div>
+    <gl-loading-icon size="lg" />
+  </div>
+</template>

app/assets/javascripts/merge_request_dashboard/index.js

+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import App from './components/app.vue';
+
+export function initMergeRequestDashboard(el) {
+  Vue.use(VueApollo);
+
+  return new Vue({
+    el,
+    apolloProvider: new VueApollo({
+      defaultClient: createDefaultClient(),
+    }),
+    render(createElement) {
+      return createElement(App);
+    },
+  });
+}

app/assets/javascripts/pages/dashboard/merge_requests/index.js

@@ -6,23 +6,33 @@ import { initNewResourceDropdown } from '~/vue_shared/components/new_resource_dr
 import { RESOURCE_TYPE_MERGE_REQUEST } from '~/vue_shared/components/new_resource_dropdown/constants';
 import searchUserProjectsWithMergeRequestsEnabled from '~/vue_shared/components/new_resource_dropdown/graphql/search_user_projects_with_merge_requests_enabled.query.graphql';
 
-const IssuableFilteredSearchTokenKeys = createFilteredSearchTokenKeys({
-  disableReleaseFilter: true,
-});
+const el = document.getElementById('js-merge-request-dashboard');
 
-addExtraTokensForMergeRequests(IssuableFilteredSearchTokenKeys, {
-  disableBranchFilter: true,
-  disableReleaseFilter: true,
-  disableEnvironmentFilter: true,
-});
+if (el) {
+  requestIdleCallback(async () => {
+    const { initMergeRequestDashboard } = await import('~/merge_request_dashboard');
 
-initFilteredSearch({
-  page: FILTERED_SEARCH.MERGE_REQUESTS,
-  filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys,
-  useDefaultState: true,
-});
+    initMergeRequestDashboard(el);
+  });
+} else {
+  const IssuableFilteredSearchTokenKeys = createFilteredSearchTokenKeys({
+    disableReleaseFilter: true,
+  });
 
-initNewResourceDropdown({
-  resourceType: RESOURCE_TYPE_MERGE_REQUEST,
-  query: searchUserProjectsWithMergeRequestsEnabled,
-});
+  addExtraTokensForMergeRequests(IssuableFilteredSearchTokenKeys, {
+    disableBranchFilter: true,
+    disableReleaseFilter: true,
+    disableEnvironmentFilter: true,
+  });
+
+  initFilteredSearch({
+    page: FILTERED_SEARCH.MERGE_REQUESTS,
+    filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys,
+    useDefaultState: true,
+  });
+
+  initNewResourceDropdown({
+    resourceType: RESOURCE_TYPE_MERGE_REQUEST,
+    query: searchUserProjectsWithMergeRequestsEnabled,
+  });
+}

app/helpers/merge_requests_helper.rb

@@ -328,6 +328,10 @@ def project_merge_requests_list_data(project, current_user)
       is_signed_in: current_user.present?.to_s
     }
   end
+
+  def merge_request_dashboard_enabled?(current_user)
+    Feature.enabled?(:merge_request_dashboard, current_user, type: :wip)
+  end
 end
 
 MergeRequestsHelper.prepend_mod_with('MergeRequestsHelper')

app/views/dashboard/merge_requests.html.haml

 :ruby
-  title = if params[:reviewer_username] == current_user.username
+  title = if merge_request_dashboard_enabled?(current_user)
+            _('Merge Requests')
+          elsif params[:reviewer_username] == current_user.username
             _("Review requests")
           elsif params[:assignee_username] == current_user.username
             _("Assigned merge requests")
@@ -14,25 +16,31 @@
 = render_if_exists 'shared/dashboard/saml_reauth_notice',
   groups_requiring_saml_reauth: user_groups_requiring_reauth
 
-.page-title-holder.d-flex.align-items-start.flex-column.flex-sm-row.align-items-sm-center
-  %h1.page-title.gl-font-size-h-display= title
+- if merge_request_dashboard_enabled?(current_user)
+  #js-merge-request-dashboard
+    .page-title-holder
+      %h1.page-title.gl-font-size-h-display= _('Merge Requests')
+    = gl_loading_icon(size: 'lg')
+- else
+  .page-title-holder.d-flex.align-items-start.flex-column.flex-sm-row.align-items-sm-center
+    %h1.page-title.gl-font-size-h-display= title
 
-  - if current_user
-    .page-title-controls.ml-0.mb-3.ml-sm-auto.mb-sm-0
-      = render 'shared/new_project_item_vue_select'
+    - if current_user
+      .page-title-controls.ml-0.mb-3.ml-sm-auto.mb-sm-0
+        = render 'shared/new_project_item_vue_select'
 
-.top-area
-  = render 'shared/issuable/nav', type: :merge_requests, display_count: !(@no_filters_set || @search_timeout_occurred)
+  .top-area
+    = render 'shared/issuable/nav', type: :merge_requests, display_count: !(@no_filters_set || @search_timeout_occurred)
 
-= render 'shared/issuable/search_bar',
-  type: :merge_requests,
-  disable_target_branch: true,
-  disable_releases: true,
-  disable_environments: true
+  = render 'shared/issuable/search_bar',
+    type: :merge_requests,
+    disable_target_branch: true,
+    disable_releases: true,
+    disable_environments: true
 
-- if current_user && @no_filters_set
-  = render 'no_filter_selected'
-- elsif @search_timeout_occurred
-  = render 'shared/dashboard/search_timeout_occurred'
-- else
-  = render 'shared/merge_requests'
+  - if current_user && @no_filters_set
+    = render 'no_filter_selected'
+  - elsif @search_timeout_occurred
+    = render 'shared/dashboard/search_timeout_occurred'
+  - else
+    = render 'shared/merge_requests'

config/feature_flags/wip/merge_request_dashboard.yml

+---
+name: merge_request_dashboard
+feature_issue_url: https://gitlab.com/groups/gitlab-org/-/epics/13448
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/150661
+rollout_issue_url:
+milestone: '17.0'
+group: group::code review
+type: wip
+default_enabled: false

spec/spec_helper.rb

@@ -336,6 +336,9 @@
       # Disable license requirement for duo chat (self managed), which is subject to change.
       # See https://gitlab.com/gitlab-org/gitlab/-/issues/457283
       stub_feature_flags(duo_chat_requires_licensed_seat_sm: false)
+
+      # Experimental merge request dashboard
+      stub_feature_flags(merge_request_dashboard: false)
     else
       unstub_all_feature_flags
     end