Add latest changes from gitlab-org/gitlab@master

4 files changed, 86 insertions, 0 deletions

diff --git a/app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers.vue b/app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers.vue
index ad061dd2e6b..5f1350690eb 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers.vue
@@ -9,6 +9,8 @@ import eventHub from '~/sidebar/event_hub';
 import Store from '~/sidebar/stores/sidebar_store';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import getMergeRequestReviewersQuery from '~/vue_shared/components/sidebar/queries/get_merge_request_reviewers.query.graphql';
+import mergeRequestReviewersUpdatedSubscription from '~/vue_shared/components/sidebar/queries/merge_request_reviewers.subscription.graphql';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import ReviewerTitle from './reviewer_title.vue';
 import Reviewers from './reviewers.vue';
 
@@ -66,6 +68,36 @@ export default {
       error() {
         createAlert({ message: __('An error occurred while fetching reviewers.') });
       },
+      subscribeToMore: {
+        document() {
+          return mergeRequestReviewersUpdatedSubscription;
+        },
+        variables() {
+          return {
+            issuableId: this.issuable?.id,
+          };
+        },
+        skip() {
+          return !this.issuable?.id || !this.isRealtimeEnabled;
+        },
+        updateQuery(
+          _,
+          {
+            subscriptionData: {
+              data: { mergeRequestReviewersUpdated },
+            },
+          },
+        ) {
+          if (mergeRequestReviewersUpdated) {
+            this.store.setReviewersFromRealtime(
+              mergeRequestReviewersUpdated.reviewers.nodes.map((r) => ({
+                ...r,
+                id: getIdFromGraphQLId(r.id),
+              })),
+            );
+          }
+        },
+      },
     },
   },
   data() {
@@ -87,6 +119,9 @@ export default {
     canUpdate() {
       return this.issuable.userPermissions?.adminMergeRequest || false;
     },
+    isRealtimeEnabled() {
+      return this.glFeatures.realtimeReviewers;
+    },
   },
   created() {
     this.store = new Store();
diff --git a/app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers_inputs.vue b/app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers_inputs.vue
new file mode 100644
index 00000000000..a135dfdca72
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/reviewers/sidebar_reviewers_inputs.vue
@@ -0,0 +1,34 @@
+<script>
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { state } from './sidebar_reviewers.vue';
+
+export default {
+  data() {
+    return state;
+  },
+  computed: {
+    reviewers() {
+      return this.issuable?.reviewers?.nodes || [];
+    },
+  },
+  methods: {
+    getIdFromGraphQLId,
+  },
+};
+</script>
+
+<template>
+  <div>
+    <input
+      v-for="reviewer in reviewers"
+      :key="reviewer.id"
+      type="hidden"
+      name="merge_request[reviewer_ids][]"
+      :value="getIdFromGraphQLId(reviewer.id)"
+      :data-avatar-url="reviewer.avatarUrl"
+      :data-name="reviewer.name"
+      :data-username="reviewer.username"
+      :data-can-merge="reviewer.mergeRequestInteraction.canMerge"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js
index 9b5bad710dd..1d9ddfe6bfd 100644
--- a/app/assets/javascripts/sidebar/mount_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_sidebar.js
@@ -33,6 +33,7 @@ import CopyEmailToClipboard from './components/copy_email_to_clipboard.vue';
 import SidebarEscalationStatus from './components/incidents/sidebar_escalation_status.vue';
 import IssuableLockForm from './components/lock/issuable_lock_form.vue';
 import SidebarReviewers from './components/reviewers/sidebar_reviewers.vue';
+import SidebarReviewersInputs from './components/reviewers/sidebar_reviewers_inputs.vue';
 import SidebarSeverity from './components/severity/sidebar_severity.vue';
 import SidebarSubscriptionsWidget from './components/subscriptions/sidebar_subscriptions_widget.vue';
 import SidebarTimeTracking from './components/time_tracking/sidebar_time_tracking.vue';
@@ -210,6 +211,18 @@ function mountReviewersComponent(mediator) {
       }),
   });
 
+  const reviewersInputEl = document.querySelector('.js-reviewers-inputs');
+
+  if (reviewersInputEl) {
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: reviewersInputEl,
+      render(createElement) {
+        return createElement(SidebarReviewersInputs);
+      },
+    });
+  }
+
   const reviewerDropdown = document.querySelector('.js-sidebar-reviewer-dropdown');
 
   if (reviewerDropdown) {
diff --git a/app/assets/javascripts/sidebar/stores/sidebar_store.js b/app/assets/javascripts/sidebar/stores/sidebar_store.js
index e2581a8f30e..baf906bb96c 100644
--- a/app/assets/javascripts/sidebar/stores/sidebar_store.js
+++ b/app/assets/javascripts/sidebar/stores/sidebar_store.js
@@ -138,6 +138,10 @@ export default class SidebarStore {
     this.assignees = data;
   }
 
+  setReviewersFromRealtime(data) {
+    this.reviewers = data;
+  }
+
   setAutocompleteProjects(projects) {
     this.autocompleteProjects = projects;
   }