Add latest changes from gitlab-org/gitlab@master

3 files changed, 12 insertions, 22 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
index 30528ce8d17..c498f12d5c7 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDropdown, GlDropdownItem, GlEmptyState, GlIcon, GlLoadingIcon } from '@gitlab/ui';
+import { GlEmptyState, GlIcon, GlLoadingIcon, GlCollapsibleListbox } from '@gitlab/ui';
 import { isEqual } from 'lodash';
 import { createAlert, VARIANT_INFO, VARIANT_WARNING } from '~/flash';
 import { getParameterByName } from '~/lib/utils/url_utility';
@@ -26,8 +26,7 @@ export default {
   PipelineKeyOptions,
   components: {
     EmptyState,
-    GlDropdown,
-    GlDropdownItem,
+    GlCollapsibleListbox,
     GlEmptyState,
     GlIcon,
     GlLoadingIcon,
@@ -315,7 +314,7 @@ export default {
       this.updateContent(this.requestData);
     },
     changeVisibilityPipelineID(val) {
-      this.selectedPipelineKeyOption = val;
+      this.selectedPipelineKeyOption = PipelineKeyOptions.find((e) => val === e.value);
     },
   },
 };
@@ -355,21 +354,12 @@ export default {
           :params="validatedParams"
           @filterPipelines="filterPipelines"
         />
-        <gl-dropdown
-          class="gl-display-flex"
-          :text="selectedPipelineKeyOption.text"
-          data-testid="pipeline-key-dropdown"
-        >
-          <gl-dropdown-item
-            v-for="(val, index) in $options.PipelineKeyOptions"
-            :key="index"
-            :is-checked="selectedPipelineKeyOption.key === val.key"
-            is-check-item
-            @click="changeVisibilityPipelineID(val)"
-          >
-            {{ val.text }}
-          </gl-dropdown-item>
-        </gl-dropdown>
+        <gl-collapsible-listbox
+          data-testid="pipeline-key-collapsible-box"
+          :toggle-text="selectedPipelineKeyOption.text"
+          :items="$options.PipelineKeyOptions"
+          @select="changeVisibilityPipelineID"
+        />
       </div>
     </div>
 
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
index 346f5735576..ed32d643c0e 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue
@@ -161,7 +161,7 @@ export default {
         <pipeline-url
           :pipeline="item"
           :pipeline-schedule-url="pipelineScheduleUrl"
-          :pipeline-key="pipelineKeyOption.key"
+          :pipeline-key="pipelineKeyOption.value"
         />
       </template>
 
diff --git a/app/assets/javascripts/pipelines/constants.js b/app/assets/javascripts/pipelines/constants.js
index ed8ec614304..2f37f90e625 100644
--- a/app/assets/javascripts/pipelines/constants.js
+++ b/app/assets/javascripts/pipelines/constants.js
@@ -71,12 +71,12 @@ export const PipelineKeyOptions = [
   {
     text: __('Show Pipeline ID'),
     label: __('Pipeline ID'),
-    key: 'id',
+    value: 'id',
   },
   {
     text: __('Show Pipeline IID'),
     label: __('Pipeline IID'),
-    key: 'iid',
+    value: 'iid',
   },
 ];