Add latest changes from gitlab-org/gitlab@master

14 files changed, 134 insertions, 127 deletions

diff --git a/app/assets/javascripts/ci/runner/components/runner_platforms_radio_group.vue b/app/assets/javascripts/ci/runner/components/runner_platforms_radio_group.vue
index 273226141d2..20e791aa3b3 100644
--- a/app/assets/javascripts/ci/runner/components/runner_platforms_radio_group.vue
+++ b/app/assets/javascripts/ci/runner/components/runner_platforms_radio_group.vue
@@ -1,5 +1,4 @@
 <script>
-import AWS_LOGO_URL from '@gitlab/svgs/dist/illustrations/logos/aws.svg?url';
 import DOCKER_LOGO_URL from '@gitlab/svgs/dist/illustrations/third-party-logos/ci_cd-template-logos/docker.png';
 import KUBERNETES_LOGO_URL from '@gitlab/svgs/dist/illustrations/logos/kubernetes.svg?url';
 import { GlFormRadioGroup, GlIcon, GlLink } from '@gitlab/ui';
@@ -8,7 +7,6 @@ import {
   LINUX_PLATFORM,
   MACOS_PLATFORM,
   WINDOWS_PLATFORM,
-  AWS_PLATFORM,
   DOCKER_HELP_URL,
   KUBERNETES_HELP_URL,
 } from '../constants';
@@ -43,8 +41,6 @@ export default {
   MACOS_PLATFORM,
   WINDOWS_PLATFORM,
 
-  AWS_PLATFORM,
-  AWS_LOGO_URL,
   DOCKER_HELP_URL,
   DOCKER_LOGO_URL,
   KUBERNETES_HELP_URL,
@@ -72,20 +68,6 @@ export default {
     </div>
 
     <div class="gl-mt-3 gl-mb-6">
-      <label>{{ s__('Runners|Cloud templates') }}</label>
-      <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
-      <div class="gl-display-flex gl-flex-wrap gl-gap-5">
-        <runner-platforms-radio
-          v-model="model"
-          :image="$options.AWS_LOGO_URL"
-          :value="$options.AWS_PLATFORM"
-        >
-          AWS
-        </runner-platforms-radio>
-      </div>
-    </div>
-
-    <div class="gl-mt-3 gl-mb-6">
       <label>{{ s__('Runners|Containers') }}</label>
 
       <div class="gl-display-flex gl-flex-wrap gl-gap-5">
diff --git a/app/assets/javascripts/ci/runner/constants.js b/app/assets/javascripts/ci/runner/constants.js
index 1225c0d7583..4e36a410a66 100644
--- a/app/assets/javascripts/ci/runner/constants.js
+++ b/app/assets/javascripts/ci/runner/constants.js
@@ -195,7 +195,6 @@ export const GROUP_FILTERED_SEARCH_NAMESPACE = 'group_runners';
 export const LINUX_PLATFORM = 'linux';
 export const MACOS_PLATFORM = 'osx';
 export const WINDOWS_PLATFORM = 'windows';
-export const AWS_PLATFORM = 'aws';
 
 export const DOWNLOAD_LOCATIONS = {
   [LINUX_PLATFORM]: [
diff --git a/app/assets/javascripts/filtered_search/add_extra_tokens_for_merge_requests.js b/app/assets/javascripts/filtered_search/add_extra_tokens_for_merge_requests.js
index 50fca995c81..4d3647cdf5c 100644
--- a/app/assets/javascripts/filtered_search/add_extra_tokens_for_merge_requests.js
+++ b/app/assets/javascripts/filtered_search/add_extra_tokens_for_merge_requests.js
@@ -101,8 +101,10 @@ export default (IssuableTokenKeys, disableTargetBranchFilter = false) => {
     ],
   };
 
-  IssuableTokenKeys.tokenKeys.splice(3, 0, approvedToken.token);
-  IssuableTokenKeys.conditions.push(...approvedToken.conditions);
+  if (gon.features.mrApprovedFilter) {
+    IssuableTokenKeys.tokenKeys.splice(3, 0, approvedToken.token);
+    IssuableTokenKeys.conditions.push(...approvedToken.conditions);
+  }
 
   const approvedBy = {
     token: {
@@ -149,7 +151,7 @@ export default (IssuableTokenKeys, disableTargetBranchFilter = false) => {
     ],
   };
 
-  const tokenPosition = 4;
+  const tokenPosition = gon.features.mrApprovedFilter ? 4 : 3;
   IssuableTokenKeys.tokenKeys.splice(tokenPosition, 0, approvedBy.token);
   IssuableTokenKeys.tokenKeysWithAlternative.splice(
     tokenPosition,
diff --git a/app/assets/javascripts/issuable/components/csv_import_export_buttons.vue b/app/assets/javascripts/issuable/components/csv_import_export_buttons.vue
index 2cc01c302ec..b492194d1cf 100644
--- a/app/assets/javascripts/issuable/components/csv_import_export_buttons.vue
+++ b/app/assets/javascripts/issuable/components/csv_import_export_buttons.vue
@@ -1,12 +1,5 @@
 <script>
-import {
-  GlButtonGroup,
-  GlButton,
-  GlDropdown,
-  GlDropdownItem,
-  GlTooltipDirective,
-  GlModalDirective,
-} from '@gitlab/ui';
+import { GlDropdownItem, GlModalDirective } from '@gitlab/ui';
 import { TYPE_ISSUE } from '~/issues/constants';
 import { __ } from '~/locale';
 import CsvExportModal from './csv_export_modal.vue';
@@ -17,19 +10,13 @@ export default {
     exportAsCsvButtonText: __('Export as CSV'),
     importCsvText: __('Import CSV'),
     importFromJiraText: __('Import from Jira'),
-    importIssuesText: __('Import issues'),
   },
-  name: 'CsvImportExportButtons',
   components: {
-    GlButtonGroup,
-    GlButton,
-    GlDropdown,
     GlDropdownItem,
     CsvExportModal,
     CsvImportModal,
   },
   directives: {
-    GlTooltip: GlTooltipDirective,
     GlModal: GlModalDirective,
   },
   inject: {
@@ -42,18 +29,12 @@ export default {
     showImportButton: {
       default: false,
     },
-    containerClass: {
-      default: '',
-    },
     canEdit: {
       default: false,
     },
     projectImportJiraPath: {
       default: null,
     },
-    showLabel: {
-      default: false,
-    },
   },
   props: {
     exportCsvPath: {
@@ -74,48 +55,30 @@ export default {
     importModalId() {
       return `${this.issuableType}-import-modal`;
     },
-    importButtonTooltipText() {
-      return this.showLabel ? null : this.$options.i18n.importIssuesText;
-    },
-    importButtonIcon() {
-      return this.showLabel ? null : 'import';
-    },
   },
 };
 </script>
 
 <template>
-  <div :class="containerClass">
-    <gl-button-group class="gl-w-full">
-      <gl-button
-        v-if="showExportButton"
-        v-gl-tooltip="$options.i18n.exportAsCsvButtonText"
-        v-gl-modal="exportModalId"
-        icon="export"
-        :aria-label="$options.i18n.exportAsCsvButtonText"
-        data-qa-selector="export_as_csv_button"
-      />
-      <gl-dropdown
-        v-if="showImportButton"
-        v-gl-tooltip="importButtonTooltipText"
-        data-qa-selector="import_issues_dropdown"
-        :text="$options.i18n.importIssuesText"
-        :text-sr-only="!showLabel"
-        :icon="importButtonIcon"
-        class="gl-w-full gl-md-w-auto"
-      >
-        <gl-dropdown-item v-gl-modal="importModalId">
-          {{ $options.i18n.importCsvText }}
-        </gl-dropdown-item>
-        <gl-dropdown-item
-          v-if="canEdit"
-          :href="projectImportJiraPath"
-          data-qa-selector="import_from_jira_link"
-        >
-          {{ $options.i18n.importFromJiraText }}
-        </gl-dropdown-item>
-      </gl-dropdown>
-    </gl-button-group>
+  <ul class="gl-display-contents">
+    <gl-dropdown-item
+      v-if="showExportButton"
+      v-gl-modal="exportModalId"
+      data-qa-selector="export_as_csv_button"
+    >
+      {{ $options.i18n.exportAsCsvButtonText }}
+    </gl-dropdown-item>
+    <gl-dropdown-item v-if="showImportButton" v-gl-modal="importModalId">
+      {{ $options.i18n.importCsvText }}
+    </gl-dropdown-item>
+    <gl-dropdown-item
+      v-if="showImportButton && canEdit"
+      :href="projectImportJiraPath"
+      data-qa-selector="import_from_jira_link"
+    >
+      {{ $options.i18n.importFromJiraText }}
+    </gl-dropdown-item>
+
     <csv-export-modal
       v-if="showExportButton"
       :modal-id="exportModalId"
@@ -123,5 +86,5 @@ export default {
       :issuable-count="issuableCount"
     />
     <csv-import-modal v-if="showImportButton" :modal-id="importModalId" />
-  </div>
+  </ul>
 </template>
diff --git a/app/assets/javascripts/issuable/index.js b/app/assets/javascripts/issuable/index.js
index ed336deb2ed..acc0161bf6a 100644
--- a/app/assets/javascripts/issuable/index.js
+++ b/app/assets/javascripts/issuable/index.js
@@ -36,11 +36,9 @@ export function initCsvImportExportButtons() {
     email,
     exportCsvPath,
     importCsvIssuesPath,
-    containerClass,
     canEdit,
     projectImportJiraPath,
     maxAttachmentSize,
-    showLabel,
   } = el.dataset;
 
   return new Vue({
@@ -52,11 +50,9 @@ export function initCsvImportExportButtons() {
       issuableType,
       email,
       importCsvIssuesPath,
-      containerClass,
       canEdit: parseBoolean(canEdit),
       projectImportJiraPath,
       maxAttachmentSize,
-      showLabel,
     },
     render: (createElement) =>
       createElement(CsvImportExportButtons, {
diff --git a/app/assets/javascripts/issues/list/components/empty_state_without_any_issues.vue b/app/assets/javascripts/issues/list/components/empty_state_without_any_issues.vue
index 652d4e0fb42..98429f3ffd1 100644
--- a/app/assets/javascripts/issues/list/components/empty_state_without_any_issues.vue
+++ b/app/assets/javascripts/issues/list/components/empty_state_without_any_issues.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlButton, GlDropdown, GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue';
 import NewResourceDropdown from '~/vue_shared/components/new_resource_dropdown/new_resource_dropdown.vue';
@@ -12,6 +12,7 @@ export default {
   components: {
     CsvImportExportButtons,
     GlButton,
+    GlDropdown,
     GlEmptyState,
     GlLink,
     GlSprintf,
@@ -71,12 +72,19 @@ export default {
         <gl-button v-if="showNewIssueLink" :href="newIssuePath" variant="confirm">
           {{ $options.i18n.newIssueLabel }}
         </gl-button>
-        <csv-import-export-buttons
+
+        <gl-dropdown
           v-if="showCsvButtons"
           class="gl-w-full gl-sm-w-auto gl-sm-mr-3"
-          :export-csv-path="exportCsvPathWithQuery"
-          :issuable-count="currentTabCount"
-        />
+          :text="$options.i18n.importIssues"
+          data-qa-selector="import_issues_dropdown"
+        >
+          <csv-import-export-buttons
+            :export-csv-path="exportCsvPathWithQuery"
+            :issuable-count="currentTabCount"
+          />
+        </gl-dropdown>
+
         <new-resource-dropdown
           v-if="showNewIssueDropdown"
           class="gl-align-self-center"
diff --git a/app/assets/javascripts/issues/list/components/issues_list_app.vue b/app/assets/javascripts/issues/list/components/issues_list_app.vue
index 525daab41d5..7d077603530 100644
--- a/app/assets/javascripts/issues/list/components/issues_list_app.vue
+++ b/app/assets/javascripts/issues/list/components/issues_list_app.vue
@@ -1,5 +1,12 @@
 <script>
-import { GlButton, GlFilteredSearchToken, GlTooltipDirective } from '@gitlab/ui';
+import {
+  GlButton,
+  GlFilteredSearchToken,
+  GlTooltipDirective,
+  GlDropdown,
+  GlDropdownItem,
+  GlDropdownDivider,
+} from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import { isEmpty } from 'lodash';
@@ -9,8 +16,8 @@ import getIssuesQuery from 'ee_else_ce/issues/list/queries/get_issues.query.grap
 import getIssuesCountsQuery from 'ee_else_ce/issues/list/queries/get_issues_counts.query.graphql';
 import { createAlert, VARIANT_INFO } from '~/alert';
 import { TYPENAME_USER } from '~/graphql_shared/constants';
-import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue';
+import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import IssuableByEmail from '~/issuable/components/issuable_by_email.vue';
 import {
   STATUS_ALL,
@@ -114,6 +121,9 @@ export default {
     EmptyStateWithAnyIssues,
     EmptyStateWithoutAnyIssues,
     GlButton,
+    GlDropdown,
+    GlDropdownDivider,
+    GlDropdownItem,
     IssuableByEmail,
     IssuableList,
     IssueCardStatistics,
@@ -802,26 +812,6 @@ export default {
     >
       <template #nav-actions>
         <gl-button
-          v-gl-tooltip
-          :href="rssPath"
-          icon="rss"
-          :title="$options.i18n.rssLabel"
-          :aria-label="$options.i18n.rssLabel"
-        />
-        <gl-button
-          v-gl-tooltip
-          :href="calendarPath"
-          icon="calendar"
-          :title="$options.i18n.calendarLabel"
-          :aria-label="$options.i18n.calendarLabel"
-        />
-        <csv-import-export-buttons
-          v-if="showCsvButtons"
-          class="gl-md-mr-3"
-          :export-csv-path="exportCsvPathWithQuery"
-          :issuable-count="currentTabCount"
-        />
-        <gl-button
           v-if="canBulkUpdate"
           :disabled="isBulkEditButtonDisabled"
           @click="handleBulkUpdateClick"
@@ -842,6 +832,30 @@ export default {
           :query-variables="newIssueDropdownQueryVariables"
           :extract-projects="extractProjects"
         />
+        <gl-dropdown
+          v-gl-tooltip.hover="$options.i18n.actionsLabel"
+          category="tertiary"
+          icon="ellipsis_v"
+          no-caret
+          :text="$options.i18n.actionsLabel"
+          text-sr-only
+          data-qa-selector="issues_list_more_actions_dropdown"
+        >
+          <csv-import-export-buttons
+            v-if="showCsvButtons"
+            :export-csv-path="exportCsvPathWithQuery"
+            :issuable-count="currentTabCount"
+          />
+
+          <gl-dropdown-divider v-if="showCsvButtons" />
+
+          <gl-dropdown-item :href="rssPath">
+            {{ $options.i18n.rssLabel }}
+          </gl-dropdown-item>
+          <gl-dropdown-item :href="calendarPath">
+            {{ $options.i18n.calendarLabel }}
+          </gl-dropdown-item>
+        </gl-dropdown>
       </template>
 
       <template #timeframe="{ issuable = {} }">
diff --git a/app/assets/javascripts/issues/list/constants.js b/app/assets/javascripts/issues/list/constants.js
index f998033b792..990ba1c0621 100644
--- a/app/assets/javascripts/issues/list/constants.js
+++ b/app/assets/javascripts/issues/list/constants.js
@@ -85,6 +85,7 @@ export const i18n = {
   editIssues: __('Edit issues'),
   errorFetchingCounts: __('An error occurred while getting issue counts'),
   errorFetchingIssues: __('An error occurred while loading issues'),
+  importIssues: __('Import issues'),
   issueRepositioningMessage: __(
     'Issues are being rebalanced at the moment, so manual reordering is disabled.',
   ),
diff --git a/app/assets/javascripts/issues/show/components/task_list_item_actions.vue b/app/assets/javascripts/issues/show/components/task_list_item_actions.vue
index 03d298e0ddf..5160903c762 100644
--- a/app/assets/javascripts/issues/show/components/task_list_item_actions.vue
+++ b/app/assets/javascripts/issues/show/components/task_list_item_actions.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDisclosureDropdown, GlDisclosureDropdownItem } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import eventHub from '../event_hub';
 
@@ -10,38 +10,48 @@ export default {
     taskActions: s__('WorkItem|Task actions'),
   },
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlDisclosureDropdown,
+    GlDisclosureDropdownItem,
   },
   inject: ['canUpdate'],
   methods: {
     convertToTask() {
       eventHub.$emit('convert-task-list-item', this.$el.closest('li').dataset.sourcepos);
+      this.closeDropdown();
     },
     deleteTaskListItem() {
       eventHub.$emit('delete-task-list-item', this.$el.closest('li').dataset.sourcepos);
+      this.closeDropdown();
+    },
+    closeDropdown() {
+      this.$refs.dropdown.close();
     },
   },
 };
 </script>
 
 <template>
-  <gl-dropdown
+  <gl-disclosure-dropdown
+    v-if="canUpdate"
+    ref="dropdown"
     class="task-list-item-actions-wrapper"
     category="tertiary"
     icon="ellipsis_v"
-    lazy
     no-caret
-    right
-    :text="$options.i18n.taskActions"
+    placement="right"
+    :toggle-text="$options.i18n.taskActions"
     text-sr-only
-    toggle-class="task-list-item-actions gl-opacity-0 gl-p-2!"
+    toggle-class="task-list-item-actions gl-opacity-0 gl-p-2! "
   >
-    <gl-dropdown-item v-if="canUpdate" @click="convertToTask">
-      {{ $options.i18n.convertToTask }}
-    </gl-dropdown-item>
-    <gl-dropdown-item v-if="canUpdate" variant="danger" @click="deleteTaskListItem">
-      {{ $options.i18n.delete }}
-    </gl-dropdown-item>
-  </gl-dropdown>
+    <gl-disclosure-dropdown-item class="gl-ml-2!" @action="convertToTask">
+      <template #list-item>
+        {{ $options.i18n.convertToTask }}
+      </template>
+    </gl-disclosure-dropdown-item>
+    <gl-disclosure-dropdown-item class="gl-ml-2!" @action="deleteTaskListItem">
+      <template #list-item>
+        <span class="gl-text-red-500!">{{ $options.i18n.delete }}</span>
+      </template>
+    </gl-disclosure-dropdown-item>
+  </gl-disclosure-dropdown>
 </template>
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js
index 983fc6d48aa..89cdbf6acba 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/constants/list.js
@@ -4,6 +4,7 @@ import { NAME_SORT_FIELD } from './common';
 //  Translations strings
 
 export const CONTAINER_REGISTRY_TITLE = s__('ContainerRegistry|Container Registry');
+export const SETTINGS_TEXT = s__('ContainerRegistry|Configure in settings');
 export const CONNECTION_ERROR_TITLE = s__('ContainerRegistry|Docker connection error');
 export const CONNECTION_ERROR_MESSAGE = s__(
   `ContainerRegistry|We are having trouble connecting to the Container Registry. Please try refreshing the page. If this error persists, please review  %{docLinkStart}the troubleshooting documentation%{docLinkEnd}.`,
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js b/app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js
index a558550c91f..afddf78203d 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/index.js
@@ -36,6 +36,7 @@ export default () => {
     isGroupPage,
     isAdmin,
     showCleanupPolicyLink,
+    showContainerRegistrySettings,
     showUnfinishedTagCleanupCallout,
     connectionError,
     invalidPathError,
@@ -69,6 +70,7 @@ export default () => {
             isGroupPage: parseBoolean(isGroupPage),
             isAdmin: parseBoolean(isAdmin),
             showCleanupPolicyLink: parseBoolean(showCleanupPolicyLink),
+            showContainerRegistrySettings: parseBoolean(showContainerRegistrySettings),
             showUnfinishedTagCleanupCallout: parseBoolean(showUnfinishedTagCleanupCallout),
             connectionError: parseBoolean(connectionError),
             invalidPathError: parseBoolean(invalidPathError),
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue
index ca416f6fcea..fe29fa8fdd7 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue
@@ -1,5 +1,6 @@
 <script>
 import {
+  GlButton,
   GlEmptyState,
   GlTooltipDirective,
   GlSprintf,
@@ -28,12 +29,14 @@ import {
   GRAPHQL_PAGE_SIZE,
   FETCH_IMAGES_LIST_ERROR_MESSAGE,
   SORT_FIELDS,
+  SETTINGS_TEXT,
 } from '../constants/index';
 import getContainerRepositoriesDetails from '../graphql/queries/get_container_repositories_details.query.graphql';
 
 export default {
   name: 'RegistryListPage',
   components: {
+    GlButton,
     GlEmptyState,
     ProjectEmptyState: () =>
       import(
@@ -75,6 +78,7 @@ export default {
     CONNECTION_ERROR_MESSAGE,
     EMPTY_RESULT_TITLE,
     EMPTY_RESULT_MESSAGE,
+    SETTINGS_TEXT,
   },
   searchConfig: SORT_FIELDS,
   apollo: {
@@ -306,6 +310,13 @@ export default {
             :docker-push-command="dockerPushCommand"
             :docker-login-command="dockerLoginCommand"
           />
+          <gl-button
+            v-if="config.showContainerRegistrySettings"
+            v-gl-tooltip="$options.i18n.SETTINGS_TEXT"
+            icon="settings"
+            :href="config.cleanupPoliciesSettingsPath"
+            :aria-label="$options.i18n.SETTINGS_TEXT"
+          />
         </template>
       </registry-header>
       <persisted-search
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary.vue b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary.vue
index 650fa798db6..367395f4446 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_summary.vue
@@ -33,6 +33,11 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      isUserAvatarListExpanded: false,
+    };
+  },
   computed: {
     approvers() {
       return this.approvalState.approvedBy?.nodes || [];
@@ -120,6 +125,14 @@ export default {
       return gon.current_user_id;
     },
   },
+  methods: {
+    onUserAvatarListExpanded() {
+      this.isUserAvatarListExpanded = true;
+    },
+    onUserAvatarListCollapsed() {
+      this.isUserAvatarListExpanded = false;
+    },
+  },
 };
 </script>
 
@@ -130,9 +143,12 @@ export default {
       <span v-if="approvalLeftMessage">{{ message }}</span>
       <span v-else class="gl-font-weight-bold">{{ message }}</span>
       <user-avatar-list
-        class="gl-display-inline-flex gl-vertical-align-middle"
+        class="gl-display-inline-block"
+        :class="{ 'gl-pt-1': isUserAvatarListExpanded }"
         :img-size="24"
         :items="approvers"
+        @expanded="onUserAvatarListExpanded"
+        @collapsed="onUserAvatarListCollapsed"
       />
     </template>
     <template v-if="disableCommittersApproval && currentUserHasCommitted">
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue
index 167db3ce1f2..335f9ab1df4 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue
@@ -60,9 +60,11 @@ export default {
   methods: {
     expand() {
       this.isExpanded = true;
+      this.$emit('expanded');
     },
     collapse() {
       this.isExpanded = false;
+      this.$emit('collapsed');
     },
   },
 };