Add latest changes from gitlab-org/gitlab@master

1 files changed, 24 insertions, 28 deletions

diff --git a/app/assets/javascripts/issues/show/components/fields/type.vue b/app/assets/javascripts/issues/show/components/fields/type.vue
index 5695efd7114..c5064f46e97 100644
--- a/app/assets/javascripts/issues/show/components/fields/type.vue
+++ b/app/assets/javascripts/issues/show/components/fields/type.vue
@@ -1,6 +1,5 @@
 <script>
-import { GlFormGroup, GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
-import { capitalize } from 'lodash';
+import { GlFormGroup, GlIcon, GlListbox } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { issuableTypes, INCIDENT_TYPE } from '../../constants';
 import getIssueStateQuery from '../../queries/get_issue_state.query.graphql';
@@ -16,8 +15,7 @@ export default {
   components: {
     GlFormGroup,
     GlIcon,
-    GlDropdown,
-    GlDropdownItem,
+    GlListbox,
   },
   inject: {
     canCreateIncident: {
@@ -30,20 +28,22 @@ export default {
   data() {
     return {
       issueState: {},
+      selectedIssueType: '',
     };
   },
   apollo: {
     issueState: {
       query: getIssueStateQuery,
+      result({
+        data: {
+          issueState: { issueType },
+        },
+      }) {
+        this.selectedIssueType = issueType;
+      },
     },
   },
   computed: {
-    dropdownText() {
-      const {
-        issueState: { issueType },
-      } = this;
-      return issuableTypes.find((type) => type.value === issueType)?.text || capitalize(issueType);
-    },
     shouldShowIncident() {
       return this.issueType === INCIDENT_TYPE || this.canCreateIncident;
     },
@@ -72,25 +72,21 @@ export default {
     label-for="issuable-type"
     class="mb-2 mb-md-0"
   >
-    <gl-dropdown
-      id="issuable-type"
-      :aria-labelledby="$options.i18n.label"
-      :text="dropdownText"
+    <gl-listbox
+      v-model="selectedIssueType"
+      toggle-class="gl-mb-0"
+      :items="$options.issuableTypes"
       :header-text="$options.i18n.label"
-      class="gl-w-full"
-      toggle-class="dropdown-menu-toggle"
+      :list-aria-labelled-by="$options.i18n.label"
+      block
+      @select="updateIssueType"
     >
-      <gl-dropdown-item
-        v-for="type in $options.issuableTypes"
-        v-show="isShown(type)"
-        :key="type.value"
-        :is-checked="issueState.issueType === type.value"
-        is-check-item
-        @click="updateIssueType(type.value)"
-      >
-        <gl-icon :name="type.icon" />
-        {{ type.text }}
-      </gl-dropdown-item>
-    </gl-dropdown>
+      <template #list-item="{ item }">
+        <span v-show="isShown(item)" data-testid="issue-type-list-item">
+          <gl-icon :name="item.icon" />
+          {{ item.text }}
+        </span>
+      </template>
+    </gl-listbox>
   </gl-form-group>
 </template>