Add latest changes from gitlab-org/gitlab@master

1 files changed, 9 insertions, 41 deletions

diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_widget/dropdown_widget.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_widget/dropdown_widget.vue
index 2a79ccc2648..446fffd4633 100644
--- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_widget/dropdown_widget.vue
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_widget/dropdown_widget.vue
@@ -1,28 +1,22 @@
 <script>
 import {
-  GlIcon,
   GlLoadingIcon,
   GlDropdown,
   GlDropdownForm,
   GlDropdownDivider,
   GlDropdownItem,
-  GlDropdownSectionHeader,
   GlSearchBoxByType,
 } from '@gitlab/ui';
 import { __ } from '~/locale';
-import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
 
 export default {
   components: {
-    GlIcon,
     GlLoadingIcon,
     GlDropdown,
     GlDropdownForm,
     GlDropdownDivider,
     GlDropdownItem,
-    GlDropdownSectionHeader,
     GlSearchBoxByType,
-    TooltipOnTruncate,
   },
   props: {
     selectText: {
@@ -45,11 +39,6 @@ export default {
       required: false,
       default: () => [],
     },
-    groupedOptions: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
     isLoading: {
       type: Boolean,
       required: false,
@@ -70,6 +59,11 @@ export default {
       required: false,
       default: false,
     },
+    customIsSelectedOption: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
   },
   computed: {
     isSearchEmpty() {
@@ -87,6 +81,9 @@ export default {
       }
     },
     isSelected(option) {
+      if (this.customIsSelectedOption !== undefined) {
+        return this.customIsSelectedOption(option);
+      }
       if (Array.isArray(this.selected)) {
         return this.selected.some((label) => label.title === option.title);
       }
@@ -177,36 +174,7 @@ export default {
               {{ option.title }}
             </slot>
           </gl-dropdown-item>
-          <template v-for="(optionGroup, index) in groupedOptions">
-            <gl-dropdown-divider v-if="index !== 0" :key="index" />
-            <gl-dropdown-section-header :key="optionGroup.id">
-              <div class="gl-display-flex gl-max-w-full">
-                <tooltip-on-truncate
-                  :title="optionGroup.title"
-                  class="gl-text-truncate gl-flex-grow-1"
-                >
-                  {{ optionGroup.title }}
-                </tooltip-on-truncate>
-                <span v-if="optionGroup.secondaryText" class="gl-float-right gl-font-weight-normal">
-                  <gl-icon name="clock" class="gl-mr-2" />
-                  {{ optionGroup.secondaryText }}
-                </span>
-              </div>
-            </gl-dropdown-section-header>
-            <gl-dropdown-item
-              v-for="option in optionGroup.options"
-              :key="optionKey(option)"
-              :is-checked="isSelected(option)"
-              is-check-centered
-              is-check-item
-              data-testid="unselected-option"
-              @click="selectOption(option)"
-            >
-              <slot name="item" :item="option">
-                {{ option.title }}
-              </slot>
-            </gl-dropdown-item>
-          </template>
+          <slot v-bind="{ isSelected }" name="grouped-options"></slot>
           <gl-dropdown-item v-if="noOptionsFound" class="gl-pl-6!">
             {{ $options.i18n.noMatchingResults }}
           </gl-dropdown-item>