Merge branch '31910-add-vue-sidebar-container' into 'master'

[Part  1] Add Vue Issuable sidebar feature flag & app bundle

See merge request gitlab-org/gitlab!18199

app/assets/javascripts/issuable_sidebar/components/sidebar_app.vue

+<script>
+export default {
+  props: {
+    signedIn: {
+      type: Boolean,
+      required: true,
+    },
+    sidebarStatusClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <aside
+    :class="sidebarStatusClass"
+    class="right-sidebar js-right-sidebar js-issuable-sidebar"
+    aria-live="polite"
+  ></aside>
+</template>

app/assets/javascripts/issuable_sidebar/sidebar_bundle.js

+import Vue from 'vue';
+
+import SidebarApp from './components/sidebar_app.vue';
+
+export default () => {
+  const el = document.getElementById('js-vue-issuable-sidebar');
+
+  if (!el) {
+    return false;
+  }
+
+  const { sidebarStatusClass } = el.dataset;
+  // An empty string is present when user is signed in.
+  const signedIn = el.dataset.signedIn === '';
+
+  return new Vue({
+    el,
+    components: { SidebarApp },
+    render: createElement =>
+      createElement('sidebar-app', {
+        props: {
+          signedIn,
+          sidebarStatusClass,
+        },
+      }),
+  });
+};

app/assets/javascripts/pages/projects/issues/show.js

@@ -5,6 +5,7 @@ import ZenMode from '~/zen_mode';
 import '~/notes/index';
 import initIssueableApp from '~/issue_show';
 import initRelatedMergeRequestsApp from '~/related_merge_requests';
+import initVueIssuableSidebarApp from '~/issuable_sidebar/sidebar_bundle';
 
 export default function() {
   initIssueableApp();
@@ -12,5 +13,9 @@ export default function() {
   new Issue(); // eslint-disable-line no-new
   new ShortcutsIssuable(); // eslint-disable-line no-new
   new ZenMode(); // eslint-disable-line no-new
+  if (gon.features && gon.features.vueIssuableSidebar) {
+    initVueIssuableSidebarApp();
+  } else {
     initIssuableSidebar();
+  }
 }

app/assets/javascripts/pages/projects/issues/show/index.js

@@ -3,5 +3,7 @@ import initShow from '../show';
 
 document.addEventListener('DOMContentLoaded', () => {
   initShow();
+  if (gon.features && !gon.features.vueIssuableSidebar) {
     initSidebarBundle();
+  }
 });

app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js

@@ -4,11 +4,16 @@ import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 import { handleLocationHash } from '~/lib/utils/common_utils';
 import howToMerge from '~/how_to_merge';
 import initPipelines from '~/commit/pipelines/pipelines_bundle';
+import initVueIssuableSidebarApp from '~/issuable_sidebar/sidebar_bundle';
 import initWidget from '../../../vue_merge_request_widget';
 
 export default function() {
   new ZenMode(); // eslint-disable-line no-new
+  if (gon.features && gon.features.vueIssuableSidebar) {
+    initVueIssuableSidebarApp();
+  } else {
     initIssuableSidebar();
+  }
   initPipelines();
   new ShortcutsIssuable(true); // eslint-disable-line no-new
   handleLocationHash();

app/assets/javascripts/pages/projects/merge_requests/show/index.js

@@ -4,6 +4,8 @@ import initShow from '../init_merge_request_show';
 
 document.addEventListener('DOMContentLoaded', () => {
   initShow();
+  if (gon.features && !gon.features.vueIssuableSidebar) {
     initSidebarBundle();
+  }
   initMrNotes();
 });

app/controllers/projects/issues_controller.rb

@@ -42,6 +42,10 @@ class Projects::IssuesController < Projects::ApplicationController
   before_action :authorize_import_issues!, only: [:import_csv]
   before_action :authorize_download_code!, only: [:related_branches]
 
+  before_action do
+    push_frontend_feature_flag(:vue_issuable_sidebar, project.group)
+  end
+
   respond_to :html
 
   alias_method :designs, :show

app/controllers/projects/merge_requests_controller.rb

@@ -21,6 +21,10 @@ class Projects::MergeRequestsController < Projects::MergeRequests::ApplicationCo
     push_frontend_feature_flag(:diffs_batch_load, @project)
   end
 
+  before_action do
+    push_frontend_feature_flag(:vue_issuable_sidebar, @project.group)
+  end
+
   around_action :allow_gitaly_ref_name_caching, only: [:index, :show, :discussions]
 
   def index

app/views/shared/issuable/_sidebar.html.haml

@@ -5,7 +5,11 @@
 - signed_in = !!issuable_sidebar.dig(:current_user, :id)
 - can_edit_issuable = issuable_sidebar.dig(:current_user, :can_edit)
 
-%aside.right-sidebar.js-right-sidebar.js-issuable-sidebar{ data: { signed: { in: signed_in } }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
+- if Feature.enabled?(:vue_issuable_sidebar, @project.group)
+  %aside#js-vue-issuable-sidebar{ data: { signed_in: signed_in,
+    sidebar_status_class: sidebar_gutter_collapsed_class } }
+- else
+  %aside.right-sidebar.js-right-sidebar.js-issuable-sidebar{ data: { signed: { in: signed_in } }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
     .issuable-sidebar
       .block.issuable-sidebar-header
         - if signed_in

ee/app/assets/javascripts/epic/components/epic_body.vue

 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 import IssuableBody from '~/issue_show/components/app.vue';
+import IssuableSidebar from '~/issuable_sidebar/components/sidebar_app.vue';
 import RelatedItems from 'ee/related_issues/components/related_issues_root.vue';
 
 import EpicSidebar from './epic_sidebar.vue';
@@ -10,6 +11,7 @@ export default {
   epicsPathIdSeparator: '&',
   components: {
     IssuableBody,
+    IssuableSidebar,
     RelatedItems,
     EpicSidebar,
   },
@@ -30,10 +32,18 @@ export default {
       'initialDescriptionHtml',
       'initialDescriptionText',
       'lockVersion',
+      'sidebarCollapsed',
     ]),
+    ...mapGetters(['isUserSignedIn']),
     isEpicTreeEnabled() {
       return gon.features && gon.features.epicTrees;
     },
+    isVueIssuableEpicSidebarEnabled() {
+      return gon.features && gon.features.vueIssuableEpicSidebar;
+    },
+    sidebarStatusClass() {
+      return this.sidebarCollapsed ? 'right-sidebar-collapsed' : 'right-sidebar-expanded';
+    },
   },
 };
 </script>
@@ -84,6 +94,11 @@ export default {
       css-class="js-related-issues-block"
       path-id-separator="#"
     />
-    <epic-sidebar />
+    <issuable-sidebar
+      v-if="isVueIssuableEpicSidebarEnabled"
+      :signed-in="isUserSignedIn"
+      :sidebar-status-class="sidebarStatusClass"
+    />
+    <epic-sidebar v-else />
   </div>
 </template>

ee/app/assets/javascripts/pages/projects/issues/show/index.js

@@ -5,7 +5,9 @@ import UserCallout from '~/user_callout';
 
 document.addEventListener('DOMContentLoaded', () => {
   initShow();
+  if (gon.features && !gon.features.vueIssuableSidebar) {
     initSidebarBundle();
+  }
   initRelatedIssues();
 
   if (document.getElementById('js-design-management')) {

ee/app/assets/javascripts/pages/projects/merge_requests/show/index.js

@@ -5,7 +5,9 @@ import { initReviewBar } from 'ee/batch_comments';
 
 document.addEventListener('DOMContentLoaded', () => {
   initShow();
+  if (gon.features && !gon.features.vueIssuableSidebar) {
     initSidebarBundle();
+  }
   initMrNotes();
   initReviewBar();
 });

ee/app/controllers/groups/epics_controller.rb

@@ -18,6 +18,7 @@ class Groups::EpicsController < Groups::ApplicationController
   before_action do
     push_frontend_feature_flag(:epic_trees, @group)
     push_frontend_feature_flag(:roadmap_graphql, @group)
+    push_frontend_feature_flag(:vue_issuable_epic_sidebar, @group)
   end
 
   def index

spec/spec_helper.rb

@@ -154,6 +154,17 @@ RSpec.configure do |config|
       .with(:force_autodevops_on_by_default, anything)
       .and_return(false)
 
+    # The following can be removed once Vue Issuable Sidebar
+    # is feature-complete and can be made default in place
+    # of older sidebar.
+    # See https://gitlab.com/groups/gitlab-org/-/epics/1863
+    allow(Feature).to receive(:enabled?)
+      .with(:vue_issuable_sidebar, anything)
+      .and_return(false)
+    allow(Feature).to receive(:enabled?)
+      .with(:vue_issuable_epic_sidebar, anything)
+      .and_return(false)
+
     # Stub these calls due to being expensive operations
     # It can be reenabled for specific tests via:
     #