Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42

2 files changed, 193 insertions, 0 deletions

diff --git a/app/assets/javascripts/attention_requests/components/navigation_popover.vue b/app/assets/javascripts/attention_requests/components/navigation_popover.vue
new file mode 100644
index 00000000000..1542bc9a7e9
--- /dev/null
+++ b/app/assets/javascripts/attention_requests/components/navigation_popover.vue
@@ -0,0 +1,120 @@
+<script>
+import { GlPopover, GlSprintf, GlButton, GlLink, GlIcon } from '@gitlab/ui';
+import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue';
+
+export default {
+  components: {
+    GlPopover,
+    GlSprintf,
+    GlButton,
+    GlLink,
+    GlIcon,
+    UserCalloutDismisser,
+  },
+  inject: {
+    message: {
+      default: '',
+    },
+    observerElSelector: {
+      default: '',
+    },
+    observerElToggledClass: {
+      default: '',
+    },
+    featureName: {
+      default: '',
+    },
+    popoverTarget: {
+      default: '',
+    },
+    showAttentionIcon: {
+      default: false,
+    },
+    delay: {
+      default: 0,
+    },
+    popoverCssClass: {
+      default: '',
+    },
+  },
+  data() {
+    return {
+      showPopover: false,
+      popoverPlacement: this.popoverPosition(),
+    };
+  },
+  mounted() {
+    this.observeEl = document.querySelector(this.observerElSelector);
+    this.observer = new MutationObserver(this.callback);
+    this.observer.observe(this.observeEl, {
+      attributes: true,
+    });
+    this.callback();
+
+    window.addEventListener('resize', () => {
+      this.popoverPlacement = this.popoverPosition();
+    });
+  },
+  beforeDestroy() {
+    this.observer.disconnect();
+  },
+  methods: {
+    callback() {
+      if (this.showPopover) {
+        this.$root.$emit('bv::hide::popover');
+      }
+
+      setTimeout(() => this.toggleShowPopover(), this.delay);
+    },
+    toggleShowPopover() {
+      this.showPopover = this.observeEl.classList.contains(this.observerElToggledClass);
+    },
+    getPopoverTarget() {
+      return document.querySelector(this.popoverTarget);
+    },
+    popoverPosition() {
+      if (bp.isDesktop()) {
+        return 'left';
+      }
+
+      return 'bottom';
+    },
+  },
+  docsPage: helpPagePath('development/code_review.html'),
+};
+</script>
+
+<template>
+  <user-callout-dismisser :feature-name="featureName">
+    <template #default="{ shouldShowCallout, dismiss }">
+      <gl-popover
+        v-if="shouldShowCallout"
+        :show-close-button="false"
+        :target="() => getPopoverTarget()"
+        :show="showPopover"
+        :delay="0"
+        triggers="manual"
+        :placement="popoverPlacement"
+        boundary="window"
+        no-fade
+        :css-classes="[popoverCssClass]"
+      >
+        <p v-for="(m, index) in message" :key="index" class="gl-mb-5">
+          <gl-sprintf :message="m">
+            <template #strong="{ content }">
+              <strong><gl-icon v-if="showAttentionIcon" name="attention" /> {{ content }}</strong>
+            </template>
+          </gl-sprintf>
+        </p>
+        <div class="gl-display-flex gl-align-items-center">
+          <gl-button size="small" variant="confirm" class="gl-mr-5" @click.prevent.stop="dismiss">
+            {{ __('Got it!') }}
+          </gl-button>
+          <gl-link :href="$options.docsPage" target="_blank">{{ __('Learn more') }}</gl-link>
+        </div>
+      </gl-popover>
+    </template>
+  </user-callout-dismisser>
+</template>
diff --git a/app/assets/javascripts/attention_requests/index.js b/app/assets/javascripts/attention_requests/index.js
new file mode 100644
index 00000000000..2a142ab46e5
--- /dev/null
+++ b/app/assets/javascripts/attention_requests/index.js
@@ -0,0 +1,73 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { __ } from '~/locale';
+import createDefaultClient from '~/lib/graphql';
+import NavigationPopover from './components/navigation_popover.vue';
+
+Vue.use(VueApollo);
+
+const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient(),
+});
+
+export const initTopNavPopover = () => {
+  const el = document.getElementById('js-need-attention-nav-onboarding');
+
+  if (!el) return;
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    apolloProvider,
+    provide: {
+      observerElSelector: '.user-counter.dropdown',
+      observerElToggledClass: 'show',
+      message: [
+        __(
+          '%{strongStart}Need your attention%{strongEnd} are the merge requests that need your help to move forward, as an assignee or reviewer.',
+        ),
+      ],
+      featureName: 'attention_requests_top_nav',
+      popoverTarget: '#js-need-attention-nav',
+    },
+    render(h) {
+      return h(NavigationPopover);
+    },
+  });
+};
+
+export const initSideNavPopover = () => {
+  const el = document.getElementById('js-need-attention-sidebar-onboarding');
+
+  if (!el) return;
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    apolloProvider,
+    provide: {
+      observerElSelector: '.js-right-sidebar',
+      observerElToggledClass: 'right-sidebar-expanded',
+      message: [
+        __(
+          'To ask someone to look at a merge request, select %{strongStart}Request attention%{strongEnd}. Select again to remove the request.',
+        ),
+        __(
+          'Some actions remove attention requests, like a reviewer approving or anyone merging the merge request.',
+        ),
+      ],
+      featureName: 'attention_requests_side_nav',
+      popoverTarget: '.js-attention-request-toggle',
+      showAttentionIcon: true,
+      delay: 500,
+      popoverCssClass: 'attention-request-sidebar-popover',
+    },
+    render(h) {
+      return h(NavigationPopover);
+    },
+  });
+};
+
+export default () => {
+  initTopNavPopover();
+};