Add latest changes from gitlab-org/gitlab@13-4-stable-ee

11 files changed, 157 insertions, 14 deletions

diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue
index 0b401f4d732..871f5c9a845 100644
--- a/app/assets/javascripts/groups/components/app.vue
+++ b/app/assets/javascripts/groups/components/app.vue
@@ -2,6 +2,7 @@
 /* global Flash */
 
 import $ from 'jquery';
+import 'vendor/jquery.scrollTo';
 import { GlLoadingIcon } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index be90ba12678..44349b33386 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -1,4 +1,5 @@
 <script>
+/* eslint-disable vue/no-v-html */
 import { GlLoadingIcon, GlBadge } from '@gitlab/ui';
 import { visitUrl } from '../../lib/utils/url_utility';
 import tooltip from '../../vue_shared/directives/tooltip';
diff --git a/app/assets/javascripts/groups/components/invite_members_banner.vue b/app/assets/javascripts/groups/components/invite_members_banner.vue
new file mode 100644
index 00000000000..da7adab1d86
--- /dev/null
+++ b/app/assets/javascripts/groups/components/invite_members_banner.vue
@@ -0,0 +1,76 @@
+<script>
+import { GlBanner } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { parseBoolean, setCookie, getCookie } from '~/lib/utils/common_utils';
+import Tracking from '~/tracking';
+
+const trackingMixin = Tracking.mixin();
+
+export default {
+  components: {
+    GlBanner,
+  },
+  mixins: [trackingMixin],
+  inject: ['svgPath', 'inviteMembersPath', 'isDismissedKey', 'trackLabel'],
+  data() {
+    return {
+      isDismissed: parseBoolean(getCookie(this.isDismissedKey)),
+      tracking: {
+        label: this.trackLabel,
+      },
+    };
+  },
+  created() {
+    this.$nextTick(() => {
+      this.addTrackingAttributesToButton();
+    });
+  },
+  mounted() {
+    this.trackOnShow();
+  },
+  methods: {
+    handleClose() {
+      setCookie(this.isDismissedKey, true);
+      this.isDismissed = true;
+      this.track(this.$options.dismissEvent);
+    },
+    trackOnShow() {
+      if (!this.isDismissed) this.track(this.$options.displayEvent);
+    },
+    addTrackingAttributesToButton() {
+      if (this.$refs.banner === undefined) return;
+
+      const button = this.$refs.banner.$el.querySelector(`[href='${this.inviteMembersPath}']`);
+
+      if (button) {
+        button.setAttribute('data-track-event', this.$options.buttonClickEvent);
+        button.setAttribute('data-track-label', this.trackLabel);
+      }
+    },
+  },
+  i18n: {
+    title: s__('InviteMembersBanner|Collaborate with your team'),
+    body: s__(
+      "InviteMembersBanner|We noticed that you haven't invited anyone to this group. Invite your colleagues so you can discuss issues, collaborate on merge requests, and share your knowledge.",
+    ),
+    button_text: s__('InviteMembersBanner|Invite your colleagues'),
+  },
+  displayEvent: 'invite_members_banner_displayed',
+  buttonClickEvent: 'invite_members_banner_button_clicked',
+  dismissEvent: 'invite_members_banner_dismissed',
+};
+</script>
+
+<template>
+  <gl-banner
+    v-if="!isDismissed"
+    ref="banner"
+    :title="$options.i18n.title"
+    :button-text="$options.i18n.button_text"
+    :svg-path="svgPath"
+    :button-link="inviteMembersPath"
+    @close="handleClose"
+  >
+    <p>{{ $options.i18n.body }}</p>
+  </gl-banner>
+</template>
diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue
index ac4c12dda24..5487e25066e 100644
--- a/app/assets/javascripts/groups/components/item_actions.vue
+++ b/app/assets/javascripts/groups/components/item_actions.vue
@@ -1,12 +1,12 @@
 <script>
+import { GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
-import icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../event_hub';
 import { COMMON_STR } from '../constants';
 
 export default {
   components: {
-    icon,
+    GlIcon,
   },
   directives: {
     tooltip,
@@ -56,7 +56,7 @@ export default {
       class="leave-group btn btn-xs no-expand gl-text-gray-500 gl-ml-5"
       @click.prevent="onLeaveGroup"
     >
-      <icon name="leave" class="position-top-0" />
+      <gl-icon name="leave" class="position-top-0" />
     </a>
     <a
       v-if="group.canEdit"
@@ -68,7 +68,7 @@ export default {
       data-placement="bottom"
       class="edit-group btn btn-xs no-expand gl-text-gray-500 gl-ml-5"
     >
-      <icon name="settings" class="position-top-0 align-middle" />
+      <gl-icon name="settings" class="position-top-0 align-middle" />
     </a>
   </div>
 </template>
diff --git a/app/assets/javascripts/groups/components/item_caret.vue b/app/assets/javascripts/groups/components/item_caret.vue
index cd3e3de4cb4..e23b0fa7413 100644
--- a/app/assets/javascripts/groups/components/item_caret.vue
+++ b/app/assets/javascripts/groups/components/item_caret.vue
@@ -1,9 +1,9 @@
 <script>
-import icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    icon,
+    GlIcon,
   },
   props: {
     isGroupOpen: {
@@ -21,5 +21,5 @@ export default {
 </script>
 
 <template>
-  <span class="folder-caret gl-mr-2"> <icon :size="10" :name="iconClass" /> </span>
+  <span class="folder-caret gl-mr-2"> <gl-icon :size="10" :name="iconClass" /> </span>
 </template>
diff --git a/app/assets/javascripts/groups/components/item_stats_value.vue b/app/assets/javascripts/groups/components/item_stats_value.vue
index 27b1c632643..18efd8c6823 100644
--- a/app/assets/javascripts/groups/components/item_stats_value.vue
+++ b/app/assets/javascripts/groups/components/item_stats_value.vue
@@ -1,10 +1,10 @@
 <script>
+import { GlIcon } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
-import icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    icon,
+    GlIcon,
   },
   directives: {
     tooltip,
@@ -57,6 +57,6 @@ export default {
     :title="title"
     data-container="body"
   >
-    <icon :name="iconName" /> <span v-if="isValuePresent" class="stat-value"> {{ value }} </span>
+    <gl-icon :name="iconName" /> <span v-if="isValuePresent" class="stat-value"> {{ value }} </span>
   </span>
 </template>
diff --git a/app/assets/javascripts/groups/components/item_type_icon.vue b/app/assets/javascripts/groups/components/item_type_icon.vue
index ae69fbd7bde..c3787c2df21 100644
--- a/app/assets/javascripts/groups/components/item_type_icon.vue
+++ b/app/assets/javascripts/groups/components/item_type_icon.vue
@@ -1,10 +1,10 @@
 <script>
-import icon from '~/vue_shared/components/icon.vue';
+import { GlIcon } from '@gitlab/ui';
 import { ITEM_TYPE } from '../constants';
 
 export default {
   components: {
-    icon,
+    GlIcon,
   },
   props: {
     itemType: {
@@ -29,5 +29,5 @@ export default {
 </script>
 
 <template>
-  <span class="item-type-icon"> <icon :name="iconClass" /> </span>
+  <span class="item-type-icon"> <gl-icon :name="iconClass" /> </span>
 </template>
diff --git a/app/assets/javascripts/groups/init_invite_members_banner.js b/app/assets/javascripts/groups/init_invite_members_banner.js
new file mode 100644
index 00000000000..c7967827917
--- /dev/null
+++ b/app/assets/javascripts/groups/init_invite_members_banner.js
@@ -0,0 +1,23 @@
+import Vue from 'vue';
+import InviteMembersBanner from '~/groups/components/invite_members_banner.vue';
+
+export default function initInviteMembersBanner() {
+  const el = document.querySelector('.js-group-invite-members-banner');
+
+  if (!el) {
+    return false;
+  }
+
+  const { svgPath, inviteMembersPath, isDismissedKey, trackLabel } = el.dataset;
+
+  return new Vue({
+    el,
+    provide: {
+      svgPath,
+      inviteMembersPath,
+      isDismissedKey,
+      trackLabel,
+    },
+    render: createElement => createElement(InviteMembersBanner),
+  });
+}
diff --git a/app/assets/javascripts/groups/members/components/app.vue b/app/assets/javascripts/groups/members/components/app.vue
new file mode 100644
index 00000000000..e94b28f5773
--- /dev/null
+++ b/app/assets/javascripts/groups/members/components/app.vue
@@ -0,0 +1,11 @@
+<script>
+export default {
+  name: 'GroupMembersApp',
+};
+</script>
+
+<template>
+  <span>
+    <!-- Temporary empty template -->
+  </span>
+</template>
diff --git a/app/assets/javascripts/groups/members/index.js b/app/assets/javascripts/groups/members/index.js
new file mode 100644
index 00000000000..4ca1756f10c
--- /dev/null
+++ b/app/assets/javascripts/groups/members/index.js
@@ -0,0 +1,30 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import App from './components/app.vue';
+import membersModule from '~/vuex_shared/modules/members';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+
+export default el => {
+  if (!el) {
+    return () => {};
+  }
+
+  Vue.use(Vuex);
+
+  const { members, groupId } = el.dataset;
+
+  const store = new Vuex.Store({
+    ...membersModule({
+      members: convertObjectPropsToCamelCase(JSON.parse(members), { deep: true }),
+      sourceId: parseInt(groupId, 10),
+      currentUserId: gon.current_user_id || null,
+    }),
+  });
+
+  return new Vue({
+    el,
+    components: { App },
+    store,
+    render: createElement => createElement('app'),
+  });
+};
diff --git a/app/assets/javascripts/groups/transfer_dropdown.js b/app/assets/javascripts/groups/transfer_dropdown.js
index e94b163dfb1..cefd803c631 100644
--- a/app/assets/javascripts/groups/transfer_dropdown.js
+++ b/app/assets/javascripts/groups/transfer_dropdown.js
@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import { __ } from '~/locale';
+import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 
 export default class TransferDropdown {
   constructor() {
@@ -16,7 +17,7 @@ export default class TransferDropdown {
   buildDropdown() {
     const extraOptions = [{ id: '-1', text: __('No parent group') }, { type: 'divider' }];
 
-    this.groupDropdown.glDropdown({
+    initDeprecatedJQueryDropdown(this.groupDropdown, {
       selectable: true,
       filterable: true,
       toggleLabel: item => item.text,