Display default text for empty sidebar dropdown

app/assets/javascripts/work_items/components/shared/work_item_sidebar_dropdown_widget_with_edit.vue

@@ -3,7 +3,7 @@ import { GlButton, GlForm, GlLoadingIcon, GlCollapsibleListbox } from '@gitlab/u
 import { isEmpty, debounce } from 'lodash';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 
-import { s__, __ } from '~/locale';
+import { s__, __, sprintf } from '~/locale';
 
 export default {
   i18n: {
@@ -116,6 +116,11 @@ export default {
     resetButton() {
       return this.resetButtonLabel || this.$options.i18n.resetButtonText;
     },
+    toggleText() {
+      return !this.toggleDropdownText && !this.hasValue
+        ? sprintf(__(`No %{label}`), { label: this.dropdownLabel.toLowerCase() })
+        : this.toggleDropdownText;
+    },
   },
   watch: {
     itemValue: {
@@ -212,7 +217,7 @@ export default {
         :infinite-scroll="infiniteScroll"
         :searching="loading"
         :header-text="headerText"
-        :toggle-text="toggleDropdownText"
+        :toggle-text="toggleText"
         :no-results-text="$options.i18n.noMatchingResults"
         :items="listItems"
         :selected="localSelectedItem"

locale/gitlab.pot

@@ -33827,6 +33827,9 @@ msgstr ""
 msgid "No %{header} for this request."
 msgstr ""
+msgid "No %{label}"
+msgstr ""
+
 msgid "No %{providerTitle} repositories found"
 msgstr ""

spec/frontend/work_items/components/shared/work_item_sidebar_dropdown_widget_with_edit_spec.js

@@ -220,5 +220,13 @@ describe('WorkItemSidebarDropdownWidgetWithEdit component', () => {
 
       expect(findCollapsibleListbox().props('infiniteScrollLoading')).toBe(true);
     });
+
+    it('displays default dropdown label when no value is selected', async () => {
+      createComponent({ isEditing: true });
+
+      await nextTick();
+
+      expect(findCollapsibleListbox().props('toggleText')).toBe('No iteration');
+    });
   });
 });