Add latest changes from gitlab-org/gitlab@13-6-stable-eev13.6.0-rc42

3 files changed, 53 insertions, 53 deletions

diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue
index 871f5c9a845..e057012a246 100644
--- a/app/assets/javascripts/groups/components/app.vue
+++ b/app/assets/javascripts/groups/components/app.vue
@@ -3,9 +3,8 @@
 
 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';
+import { GlLoadingIcon, GlModal } from '@gitlab/ui';
+import { __, s__, sprintf } from '~/locale';
 import { HIDDEN_CLASS } from '~/lib/utils/constants';
 import { getParameterByName } from '~/lib/utils/common_utils';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
@@ -16,8 +15,8 @@ import groupsComponent from './groups.vue';
 
 export default {
   components: {
-    DeprecatedModal,
     groupsComponent,
+    GlModal,
     GlLoadingIcon,
   },
   props: {
@@ -49,13 +48,30 @@ export default {
       isLoading: true,
       isSearchEmpty: false,
       searchEmptyMessage: '',
-      showModal: false,
-      groupLeaveConfirmationMessage: '',
       targetGroup: null,
       targetParentGroup: null,
     };
   },
   computed: {
+    primaryProps() {
+      return {
+        text: __('Leave group'),
+        attributes: [{ variant: 'warning' }, { category: 'primary' }],
+      };
+    },
+    cancelProps() {
+      return {
+        text: __('Cancel'),
+      };
+    },
+    groupLeaveConfirmationMessage() {
+      if (!this.targetGroup) {
+        return '';
+      }
+      return sprintf(s__('GroupsTree|Are you sure you want to leave the "%{fullName}" group?'), {
+        fullName: this.targetGroup.fullName,
+      });
+    },
     groups() {
       return this.store.getGroups();
     },
@@ -171,27 +187,17 @@ export default {
       }
     },
     showLeaveGroupModal(group, parentGroup) {
-      const { fullName } = group;
       this.targetGroup = group;
       this.targetParentGroup = parentGroup;
-      this.showModal = true;
-      this.groupLeaveConfirmationMessage = sprintf(
-        s__('GroupsTree|Are you sure you want to leave the "%{fullName}" group?'),
-        { fullName },
-      );
-    },
-    hideLeaveGroupModal() {
-      this.showModal = false;
     },
     leaveGroup() {
-      this.showModal = false;
       this.targetGroup.isBeingRemoved = true;
       this.service
         .leaveGroup(this.targetGroup.leavePath)
         .then(res => {
           $.scrollTo(0);
           this.store.removeGroup(this.targetGroup, this.targetParentGroup);
-          Flash(res.data.notice, 'notice');
+          this.$toast.show(res.data.notice);
         })
         .catch(err => {
           let message = COMMON_STR.FAILURE;
@@ -245,21 +251,21 @@ export default {
       class="loading-animation prepend-top-20"
     />
     <groups-component
-      v-if="!isLoading"
+      v-else
       :groups="groups"
       :search-empty="isSearchEmpty"
       :search-empty-message="searchEmptyMessage"
       :page-info="pageInfo"
       :action="action"
     />
-    <deprecated-modal
-      v-show="showModal"
-      :primary-button-label="__('Leave')"
+    <gl-modal
+      modal-id="leave-group-modal"
       :title="__('Are you sure?')"
-      :text="groupLeaveConfirmationMessage"
-      kind="warning"
-      @cancel="hideLeaveGroupModal"
-      @submit="leaveGroup"
-    />
+      :action-primary="primaryProps"
+      :action-cancel="cancelProps"
+      @primary="leaveGroup"
+    >
+      {{ groupLeaveConfirmationMessage }}
+    </gl-modal>
   </div>
 </template>
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 44349b33386..6e99b6ad4fa 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -1,8 +1,7 @@
 <script>
 /* eslint-disable vue/no-v-html */
-import { GlLoadingIcon, GlBadge } from '@gitlab/ui';
+import { GlLoadingIcon, GlBadge, GlTooltipDirective } from '@gitlab/ui';
 import { visitUrl } from '../../lib/utils/url_utility';
-import tooltip from '../../vue_shared/directives/tooltip';
 import identicon from '../../vue_shared/components/identicon.vue';
 import eventHub from '../event_hub';
 import { VISIBILITY_TYPE_ICON, GROUP_VISIBILITY_TYPE } from '../constants';
@@ -17,7 +16,7 @@ import { showLearnGitLabGroupItemPopover } from '~/onboarding_issues';
 
 export default {
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   components: {
     GlBadge,
@@ -127,11 +126,10 @@ export default {
         <div class="group-text flex-grow-1 flex-shrink-1">
           <div class="d-flex align-items-center flex-wrap title namespace-title gl-mr-3">
             <a
-              v-tooltip
+              v-gl-tooltip.bottom
               :href="group.relativePath"
               :title="group.fullName"
               class="no-expand gl-mt-3 gl-mr-3 gl-text-gray-900!"
-              data-placement="bottom"
               >{{
                 // ending bracket must be by closing tag to prevent
                 // link hover text-decoration from over-extending
diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue
index 2e92a608f76..ff52f5ef51c 100644
--- a/app/assets/javascripts/groups/components/item_actions.vue
+++ b/app/assets/javascripts/groups/components/item_actions.vue
@@ -1,15 +1,15 @@
 <script>
-import { GlIcon } from '@gitlab/ui';
-import tooltip from '~/vue_shared/directives/tooltip';
+import { GlTooltipDirective, GlButton, GlModalDirective } from '@gitlab/ui';
 import eventHub from '../event_hub';
 import { COMMON_STR } from '../constants';
 
 export default {
   components: {
-    GlIcon,
+    GlButton,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
+    GlModal: GlModalDirective,
   },
   props: {
     parentGroup: {
@@ -45,32 +45,28 @@ export default {
 
 <template>
   <div class="controls d-flex justify-content-end">
-    <a
+    <gl-button
       v-if="group.canLeave"
-      v-tooltip
-      :href="group.leavePath"
+      v-gl-tooltip.top
+      v-gl-modal.leave-group-modal
       :title="leaveBtnTitle"
       :aria-label="leaveBtnTitle"
-      data-container="body"
-      data-placement="bottom"
       data-testid="leave-group-btn"
-      class="leave-group btn btn-xs no-expand gl-text-gray-500 gl-ml-5"
-      @click.prevent="onLeaveGroup"
-    >
-      <gl-icon name="leave" class="position-top-0" />
-    </a>
-    <a
+      size="small"
+      icon="leave"
+      class="leave-group gl-ml-3"
+      @click.stop="onLeaveGroup"
+    />
+    <gl-button
       v-if="group.canEdit"
-      v-tooltip
+      v-gl-tooltip.top
       :href="group.editPath"
       :title="editBtnTitle"
       :aria-label="editBtnTitle"
-      data-container="body"
-      data-placement="bottom"
       data-testid="edit-group-btn"
-      class="edit-group btn btn-xs no-expand gl-text-gray-500 gl-ml-5"
-    >
-      <gl-icon name="settings" class="position-top-0 align-middle" />
-    </a>
+      size="small"
+      icon="pencil"
+      class="edit-group gl-ml-3"
+    />
   </div>
 </template>