Add latest changes from gitlab-org/gitlab@master

6 files changed, 34 insertions, 38 deletions

diff --git a/app/assets/javascripts/super_sidebar/components/brand_logo.vue b/app/assets/javascripts/super_sidebar/components/brand_logo.vue
index 2e6c597ea96..c280c03591b 100644
--- a/app/assets/javascripts/super_sidebar/components/brand_logo.vue
+++ b/app/assets/javascripts/super_sidebar/components/brand_logo.vue
@@ -26,7 +26,7 @@ export default {
 
 <template>
   <a
-    v-gl-tooltip:super-sidebar.hover.bottom="$options.i18n.homepage"
+    v-gl-tooltip:super-sidebar.bottom="$options.i18n.homepage"
     class="brand-logo"
     :href="rootPath"
     data-track-action="click_link"
diff --git a/app/assets/javascripts/super_sidebar/components/create_menu.vue b/app/assets/javascripts/super_sidebar/components/create_menu.vue
index c526afa2371..279e689bd8d 100644
--- a/app/assets/javascripts/super_sidebar/components/create_menu.vue
+++ b/app/assets/javascripts/super_sidebar/components/create_menu.vue
@@ -62,7 +62,7 @@ export default {
 
 <template>
   <gl-disclosure-dropdown
-    v-gl-tooltip:super-sidebar.hover.bottom="dropdownOpen ? '' : $options.i18n.createNew"
+    v-gl-tooltip:super-sidebar.bottom="dropdownOpen ? '' : $options.i18n.createNew"
     category="tertiary"
     icon="plus"
     no-caret
diff --git a/app/assets/javascripts/super_sidebar/components/super_sidebar_toggle.vue b/app/assets/javascripts/super_sidebar/components/super_sidebar_toggle.vue
index 049a61e17c7..71c1460423e 100644
--- a/app/assets/javascripts/super_sidebar/components/super_sidebar_toggle.vue
+++ b/app/assets/javascripts/super_sidebar/components/super_sidebar_toggle.vue
@@ -89,7 +89,7 @@ export default {
 
 <template>
   <gl-button
-    v-gl-tooltip.hover="tooltip"
+    v-gl-tooltip="tooltip"
     aria-controls="super-sidebar"
     :aria-expanded="ariaExpanded"
     :aria-label="$options.i18n.primaryNavigationSidebar"
diff --git a/app/assets/javascripts/super_sidebar/components/user_bar.vue b/app/assets/javascripts/super_sidebar/components/user_bar.vue
index ea634d43a96..88ea4d828b7 100644
--- a/app/assets/javascripts/super_sidebar/components/user_bar.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_bar.vue
@@ -153,7 +153,7 @@ export default {
       class="gl-display-flex gl-justify-content-space-between gl-gap-2"
     >
       <counter
-        v-gl-tooltip:super-sidebar.hover.bottom="$options.i18n.issues"
+        v-gl-tooltip:super-sidebar.bottom="$options.i18n.issues"
         class="gl-flex-basis-third dashboard-shortcuts-issues"
         icon="issues"
         :count="userCounts.assigned_issues"
@@ -171,7 +171,7 @@ export default {
         @hidden="mrMenuShown = false"
       >
         <counter
-          v-gl-tooltip:super-sidebar.hover.bottom="mrMenuShown ? '' : $options.i18n.mergeRequests"
+          v-gl-tooltip:super-sidebar.bottom="mrMenuShown ? '' : $options.i18n.mergeRequests"
           class="gl-w-full"
           icon="merge-request-open"
           :count="mergeRequestTotalCount"
@@ -183,7 +183,7 @@ export default {
         />
       </merge-request-menu>
       <counter
-        v-gl-tooltip:super-sidebar.hover.bottom="$options.i18n.todoList"
+        v-gl-tooltip:super-sidebar.bottom="$options.i18n.todoList"
         class="gl-flex-basis-third shortcuts-todos js-todos-count"
         icon="todo-done"
         :count="userCounts.todos"
@@ -197,7 +197,7 @@ export default {
     </div>
     <button
       id="super-sidebar-search"
-      v-gl-tooltip.bottom.hover.html="searchTooltip"
+      v-gl-tooltip.bottom.html="searchTooltip"
       v-gl-modal="$options.SEARCH_MODAL_ID"
       class="counter gl-display-block gl-py-3 gl-bg-gray-10 gl-rounded-base gl-text-gray-900 gl-border-none gl-inset-border-1-gray-a-08 gl-line-height-1 gl-focus--focus gl-w-full"
       data-testid="super-sidebar-search-button"
diff --git a/app/assets/javascripts/vue_shared/alert_details/components/alert_status.vue b/app/assets/javascripts/vue_shared/alert_details/components/alert_status.vue
index 8d2ef20b381..3855e4fc078 100644
--- a/app/assets/javascripts/vue_shared/alert_details/components/alert_status.vue
+++ b/app/assets/javascripts/vue_shared/alert_details/components/alert_status.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlCollapsibleListbox } from '@gitlab/ui';
 import updateAlertStatusMutation from '~/graphql_shared/mutations/alert_status_update.mutation.graphql';
 import { s__ } from '~/locale';
 import Tracking from '~/tracking';
@@ -11,10 +11,10 @@ export default {
       'AlertManagement|There was an error while updating the status of the alert.',
     ),
     UPDATE_ALERT_STATUS_INSTRUCTION: s__('AlertManagement|Please try again.'),
+    ASSIGN_STATUS_HEADER: s__('AlertManagement|Assign status'),
   },
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlCollapsibleListbox,
   },
   inject: {
     trackAlertStatusUpdateOptions: {
@@ -44,10 +44,20 @@ export default {
       default: () => PAGE_CONFIG.OPERATIONS.STATUSES,
     },
   },
+  data() {
+    return {
+      alertStatus: this.alert.status,
+    };
+  },
   computed: {
     dropdownClass() {
-      // eslint-disable-next-line no-nested-ternary
-      return this.isSidebar ? (this.isDropdownShowing ? 'show' : 'gl-display-none') : '';
+      return this.isSidebar && !this.isDropdownShowing ? 'gl-display-none' : '';
+    },
+    items() {
+      return Object.entries(this.statuses).map(([value, text]) => ({ value, text }));
+    },
+    headerText() {
+      return this.isSidebar ? this.$options.i18n.ASSIGN_STATUS_HEADER : '';
     },
   },
   methods: {
@@ -97,30 +107,15 @@ export default {
 
 <template>
   <div class="dropdown dropdown-menu-selectable" :class="dropdownClass">
-    <gl-dropdown
+    <gl-collapsible-listbox
       ref="dropdown"
-      right
-      :text="statuses[alert.status]"
-      class="w-100"
-      toggle-class="dropdown-menu-toggle"
-      @keydown.esc.native="$emit('hide-dropdown')"
-      @hide="$emit('hide-dropdown')"
-    >
-      <p v-if="isSidebar" class="gl-dropdown-header-top" data-testid="dropdown-header">
-        {{ s__('AlertManagement|Assign status') }}
-      </p>
-      <div class="dropdown-content dropdown-body">
-        <gl-dropdown-item
-          v-for="(label, field) in statuses"
-          :key="field"
-          data-testid="statusDropdownItem"
-          :active="field === alert.status"
-          :active-class="'is-active'"
-          @click="updateAlertStatus(field)"
-        >
-          {{ label }}
-        </gl-dropdown-item>
-      </div>
-    </gl-dropdown>
+      v-model="alertStatus"
+      placement="right"
+      :header-text="headerText"
+      :items="items"
+      block
+      @hidden="$emit('hide-dropdown')"
+      @select="updateAlertStatus"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue
index c512585b980..7b099516c5b 100644
--- a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue
+++ b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue
@@ -58,9 +58,10 @@ export default {
     },
     toggleFormDropdown() {
       this.isDropdownShowing = !this.isDropdownShowing;
-      const { dropdown } = this.$refs.status.$refs.dropdown.$refs;
+      const { dropdown } = this.$refs.status.$refs;
+
       if (dropdown && this.isDropdownShowing) {
-        dropdown.show();
+        dropdown.open();
       }
     },
     handleUpdating(isMutationInProgress) {