Add latest changes from gitlab-org/gitlab@master

5 files changed, 151 insertions, 80 deletions

diff --git a/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue
index 65a601ed927..a1ef1f30ebb 100644
--- a/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue
@@ -38,7 +38,16 @@ export default {
       default: CONFIRM_DANGER_MODAL_CANCEL,
     },
   },
+  model: {
+    prop: 'visible',
+    event: 'change',
+  },
   props: {
+    visible: {
+      type: Boolean,
+      required: false,
+      default: null,
+    },
     modalId: {
       type: String,
       required: true,
@@ -89,12 +98,15 @@ export default {
 <template>
   <gl-modal
     ref="modal"
+    :visible="visible"
     :modal-id="modalId"
     :data-testid="modalId"
     :title="$options.i18n.CONFIRM_DANGER_MODAL_TITLE"
     :action-primary="actionPrimary"
     :action-cancel="actionCancel"
+    size="sm"
     @primary="$emit('confirm')"
+    @change="$emit('change', $event)"
   >
     <gl-alert
       v-if="confirmDangerMessage"
diff --git a/app/assets/javascripts/vue_shared/components/groups_list/groups_list.vue b/app/assets/javascripts/vue_shared/components/groups_list/groups_list.vue
index 7da45169fee..a375a167c68 100644
--- a/app/assets/javascripts/vue_shared/components/groups_list/groups_list.vue
+++ b/app/assets/javascripts/vue_shared/components/groups_list/groups_list.vue
@@ -24,6 +24,7 @@ export default {
       :key="group.id"
       :group="group"
       :show-group-icon="showGroupIcon"
+      @delete="$emit('delete', $event)"
     />
   </ul>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/groups_list/groups_list_item.vue b/app/assets/javascripts/vue_shared/components/groups_list/groups_list_item.vue
index 8a301cd0dd0..ca1e7400f2d 100644
--- a/app/assets/javascripts/vue_shared/components/groups_list/groups_list_item.vue
+++ b/app/assets/javascripts/vue_shared/components/groups_list/groups_list_item.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlAvatarLabeled, GlIcon, GlTooltipDirective, GlTruncateText } from '@gitlab/ui';
+import uniqueId from 'lodash/uniqueId';
 
 import { VISIBILITY_TYPE_ICON, GROUP_VISIBILITY_TYPE } from '~/visibility_level/constants';
 import { ACCESS_LEVEL_LABELS } from '~/access_level/constants';
@@ -7,6 +8,9 @@ import UserAccessRoleBadge from '~/vue_shared/components/user_access_role_badge.
 import { __ } from '~/locale';
 import { numberToMetricPrefix } from '~/lib/utils/number_utils';
 import SafeHtml from '~/vue_shared/directives/safe_html';
+import { ACTION_EDIT, ACTION_DELETE } from '~/vue_shared/components/list_actions/constants';
+import ListActions from '~/vue_shared/components/list_actions/list_actions.vue';
+import DangerConfirmModal from '~/vue_shared/components/confirm_danger/confirm_danger_modal.vue';
 
 export default {
   i18n: {
@@ -25,6 +29,8 @@ export default {
     GlIcon,
     UserAccessRoleBadge,
     GlTruncateText,
+    ListActions,
+    DangerConfirmModal,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -41,6 +47,12 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      isDeleteModalVisible: false,
+      modalId: uniqueId('groups-list-item-modal-id-'),
+    };
+  },
   computed: {
     visibility() {
       return this.group.visibility;
@@ -75,94 +87,131 @@ export default {
     groupMembersCount() {
       return numberToMetricPrefix(this.group.groupMembersCount);
     },
+    actions() {
+      return {
+        [ACTION_EDIT]: {
+          href: this.group.editPath,
+        },
+        [ACTION_DELETE]: {
+          action: this.onActionDelete,
+        },
+      };
+    },
+    hasActions() {
+      return this.group.availableActions?.length;
+    },
+    hasActionDelete() {
+      return this.group.availableActions?.includes(ACTION_DELETE);
+    },
+  },
+  methods: {
+    onActionDelete() {
+      this.isDeleteModalVisible = true;
+    },
   },
 };
 </script>
 
 <template>
-  <li class="groups-list-item gl-py-5 gl-md-display-flex gl-align-items-center gl-border-b">
-    <div class="gl-display-flex gl-flex-grow-1">
-      <gl-icon
-        v-if="showGroupIcon"
-        class="gl-mr-3 gl-mt-3 gl-md-mt-5 gl-flex-shrink-0 gl-text-secondary"
-        :name="groupIconName"
-      />
-      <gl-avatar-labeled
-        :entity-id="group.id"
-        :entity-name="group.fullName"
-        :label="group.fullName"
-        :label-link="group.webUrl"
-        shape="rect"
-        :size="$options.avatarSize"
-      >
-        <template #meta>
-          <div class="gl-px-2">
-            <div class="gl-mx-n2 gl-display-flex gl-align-items-center gl-flex-wrap">
-              <div class="gl-px-2">
-                <gl-icon
-                  v-if="visibility"
-                  v-gl-tooltip="visibilityTooltip"
-                  :name="visibilityIcon"
-                  class="gl-text-secondary"
-                />
-              </div>
-              <div class="gl-px-2">
-                <user-access-role-badge v-if="shouldShowAccessLevel">{{
-                  accessLevelLabel
-                }}</user-access-role-badge>
+  <li class="groups-list-item gl-py-5 gl-border-b gl-display-flex gl-align-items-flex-start">
+    <div class="gl-md-display-flex gl-align-items-center gl-flex-grow-1">
+      <div class="gl-display-flex gl-flex-grow-1">
+        <gl-icon
+          v-if="showGroupIcon"
+          class="gl-mr-3 gl-mt-3 gl-md-mt-5 gl-flex-shrink-0 gl-text-secondary"
+          :name="groupIconName"
+        />
+        <gl-avatar-labeled
+          :entity-id="group.id"
+          :entity-name="group.fullName"
+          :label="group.fullName"
+          :label-link="group.webUrl"
+          shape="rect"
+          :size="$options.avatarSize"
+        >
+          <template #meta>
+            <div class="gl-px-2">
+              <div class="gl-mx-n2 gl-display-flex gl-align-items-center gl-flex-wrap">
+                <div class="gl-px-2">
+                  <gl-icon
+                    v-if="visibility"
+                    v-gl-tooltip="visibilityTooltip"
+                    :name="visibilityIcon"
+                    class="gl-text-secondary"
+                  />
+                </div>
+                <div class="gl-px-2">
+                  <user-access-role-badge v-if="shouldShowAccessLevel">{{
+                    accessLevelLabel
+                  }}</user-access-role-badge>
+                </div>
               </div>
             </div>
+          </template>
+          <gl-truncate-text
+            v-if="group.descriptionHtml"
+            :lines="2"
+            :mobile-lines="2"
+            :show-more-text="$options.i18n.showMore"
+            :show-less-text="$options.i18n.showLess"
+            class="gl-mt-2"
+          >
+            <div
+              v-safe-html:[$options.safeHtmlConfig]="group.descriptionHtml"
+              class="gl-font-sm md"
+              data-testid="group-description"
+            ></div>
+          </gl-truncate-text>
+        </gl-avatar-labeled>
+      </div>
+      <div
+        class="gl-md-display-flex gl-flex-direction-column gl-align-items-flex-end gl-flex-shrink-0 gl-mt-3 gl-md-pl-0 gl-md-mt-0 gl-md-ml-3"
+        :class="statsPadding"
+      >
+        <div class="gl-display-flex gl-align-items-center gl-gap-x-3">
+          <div
+            v-gl-tooltip="$options.i18n.subgroups"
+            :aria-label="$options.i18n.subgroups"
+            class="gl-text-secondary"
+            data-testid="subgroups-count"
+          >
+            <gl-icon name="subgroup" />
+            <span>{{ descendantGroupsCount }}</span>
           </div>
-        </template>
-        <gl-truncate-text
-          v-if="group.descriptionHtml"
-          :lines="2"
-          :mobile-lines="2"
-          :show-more-text="$options.i18n.showMore"
-          :show-less-text="$options.i18n.showLess"
-          class="gl-mt-2"
-        >
           <div
-            v-safe-html:[$options.safeHtmlConfig]="group.descriptionHtml"
-            class="gl-font-sm md"
-            data-testid="group-description"
-          ></div>
-        </gl-truncate-text>
-      </gl-avatar-labeled>
-    </div>
-    <div
-      class="gl-md-display-flex gl-flex-direction-column gl-align-items-flex-end gl-flex-shrink-0 gl-mt-3 gl-md-pl-0 gl-md-mt-0 gl-md-ml-3"
-      :class="statsPadding"
-    >
-      <div class="gl-display-flex gl-align-items-center gl-gap-x-3">
-        <div
-          v-gl-tooltip="$options.i18n.subgroups"
-          :aria-label="$options.i18n.subgroups"
-          class="gl-text-secondary"
-          data-testid="subgroups-count"
-        >
-          <gl-icon name="subgroup" />
-          <span>{{ descendantGroupsCount }}</span>
-        </div>
-        <div
-          v-gl-tooltip="$options.i18n.projects"
-          :aria-label="$options.i18n.projects"
-          class="gl-text-secondary"
-          data-testid="projects-count"
-        >
-          <gl-icon name="project" />
-          <span>{{ projectsCount }}</span>
-        </div>
-        <div
-          v-gl-tooltip="$options.i18n.directMembers"
-          :aria-label="$options.i18n.directMembers"
-          class="gl-text-secondary"
-          data-testid="members-count"
-        >
-          <gl-icon name="users" />
-          <span>{{ groupMembersCount }}</span>
+            v-gl-tooltip="$options.i18n.projects"
+            :aria-label="$options.i18n.projects"
+            class="gl-text-secondary"
+            data-testid="projects-count"
+          >
+            <gl-icon name="project" />
+            <span>{{ projectsCount }}</span>
+          </div>
+          <div
+            v-gl-tooltip="$options.i18n.directMembers"
+            :aria-label="$options.i18n.directMembers"
+            class="gl-text-secondary"
+            data-testid="members-count"
+          >
+            <gl-icon name="users" />
+            <span>{{ groupMembersCount }}</span>
+          </div>
         </div>
       </div>
     </div>
+    <list-actions
+      v-if="hasActions"
+      class="gl-ml-3 gl-md-align-self-center"
+      :actions="actions"
+      :available-actions="group.availableActions"
+    />
+
+    <danger-confirm-modal
+      v-if="hasActionDelete"
+      v-model="isDeleteModalVisible"
+      :modal-id="modalId"
+      :phrase="group.fullName"
+      @confirm="$emit('delete', group)"
+    />
   </li>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue b/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue
index 96dc2007ecf..05ce007e615 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/apply_suggestion.vue
@@ -39,6 +39,13 @@ export default {
 
       return n__('Apply %d suggestion', 'Apply %d suggestions', this.batchSuggestionsCount);
     },
+    helperText() {
+      if (this.batchSuggestionsCount <= 1) {
+        return __('This also resolves this thread');
+      }
+
+      return __('This also resolves all related threads');
+    },
   },
   methods: {
     onApply() {
@@ -78,6 +85,10 @@ export default {
         @submit="onApply"
       />
 
+      <span class="gl-mt-2 gl-text-secondary">
+        {{ helperText }}
+      </span>
+
       <gl-button
         class="gl-w-auto! gl-mt-3 gl-align-self-end"
         category="primary"
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
index 855c7a449c4..8a0ca8ebac1 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
@@ -77,9 +77,7 @@ export default {
         return this.inapplicableReason;
       }
 
-      return this.batchSuggestionsCount > 1
-        ? __('This also resolves all related threads')
-        : __('This also resolves this thread');
+      return false;
     },
     isDisableButton() {
       return this.isApplying || !this.canApply;