1 files changed, 57 insertions, 8 deletions
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue
index c1d1bc7da91..aff93ebc9c0 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue
@@ -1,16 +1,21 @@
 <script>
-import { GlFilteredSearchSuggestion } from '@gitlab/ui';
+import { GlDropdownDivider, GlDropdownSectionHeader, GlFilteredSearchSuggestion } from '@gitlab/ui';
 import createFlash from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { __ } from '~/locale';
 import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
+import { formatDate } from '~/lib/utils/datetime_utility';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { DEFAULT_ITERATIONS } from '../constants';
 
 export default {
   components: {
     BaseToken,
+    GlDropdownDivider,
+    GlDropdownSectionHeader,
     GlFilteredSearchSuggestion,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     active: {
       type: Boolean,
@@ -40,6 +45,27 @@ export default {
     getActiveIteration(iterations, data) {
       return iterations.find((iteration) => this.getValue(iteration) === data);
     },
+    groupIterationsByCadence(iterations) {
+      const cadences = [];
+      iterations.forEach((iteration) => {
+        if (!iteration.iterationCadence) {
+          return;
+        }
+        const { title } = iteration.iterationCadence;
+        const cadenceIteration = {
+          id: iteration.id,
+          title: iteration.title,
+          period: this.getIterationPeriod(iteration),
+        };
+        const cadence = cadences.find((cad) => cad.title === title);
+        if (cadence) {
+          cadence.iterations.push(cadenceIteration);
+        } else {
+          cadences.push({ title, iterations: [cadenceIteration] });
+        }
+      });
+      return cadences;
+    },
     fetchIterations(searchTerm) {
       this.loading = true;
       this.config
@@ -57,6 +83,16 @@ export default {
     getValue(iteration) {
       return String(getIdFromGraphQLId(iteration.id));
     },
+    /**
+     * TODO: https://gitlab.com/gitlab-org/gitlab/-/issues/344619
+     * This method also exists as a utility function in ee/../iterations/utils.js
+     * Remove the duplication when iteration token is moved to EE.
+     */
+    getIterationPeriod({ startDate, dueDate }) {
+      const start = formatDate(startDate, 'mmm d, yyyy', true);
+      const due = formatDate(dueDate, 'mmm d, yyyy', true);
+      return `${start} - ${due}`;
+    },
   },
 };
 </script>
@@ -77,13 +113,26 @@ export default {
       {{ activeTokenValue ? activeTokenValue.title : inputValue }}
     </template>
     <template #suggestions-list="{ suggestions }">
-      <gl-filtered-search-suggestion
-        v-for="iteration in suggestions"
-        :key="iteration.id"
-        :value="getValue(iteration)"
-      >
-        {{ iteration.title }}
-      </gl-filtered-search-suggestion>
+      <template v-for="(cadence, index) in groupIterationsByCadence(suggestions)">
+        <gl-dropdown-divider v-if="index !== 0" :key="index" />
+        <gl-dropdown-section-header
+          :key="cadence.title"
+          class="gl-overflow-hidden"
+          :title="cadence.title"
+        >
+          {{ cadence.title }}
+        </gl-dropdown-section-header>
+        <gl-filtered-search-suggestion
+          v-for="iteration in cadence.iterations"
+          :key="iteration.id"
+          :value="getValue(iteration)"
+        >
+          {{ iteration.title }}
+          <div v-if="glFeatures.iterationCadences" class="gl-text-gray-400">
+            {{ iteration.period }}
+          </div>
+        </gl-filtered-search-suggestion>
+      </template>
     </template>
   </base-token>
 </template>