Text changes and UX fixes

UX fixes

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue

@@ -32,12 +32,16 @@ export default {
   },
   computed: {
     currentValue() {
-      /* When the URL contains the epic_iid, we'd get
+      /*
+       * When the URL contains the epic_iid, we'd get: '123'
        */
       if (isNumeric(this.value.data)) {
         return parseInt(this.value.data, 10);
       }
 
+      /*
+       * When the token is added in current session it'd be: 'Foo::&123'
+       */
       const id = this.value.data.split('::&')[1];
 
       if (id) {
@@ -96,7 +100,7 @@ export default {
     }, DEBOUNCE_DELAY),
 
     getEpicValue(epic) {
-      return `"${epic.title}"::&${epic.iid}`;
+      return `${epic.title}::&${epic.iid}`;
     },
   },
   stripQuotes,

ee/app/assets/javascripts/roadmap/constants.js

@@ -49,7 +49,7 @@ export const emptyStateWithFilters = s__(
 );
 
 export const emptyStateWithEpicIidFiltered = s__(
-  'GroupRoadmap|Try adding a start or end date to your epics so that they will display in the roadmap.',
+  'GroupRoadmap|Try adding a start or due date to your epics so that they will display in the roadmap.',
 );
 
 export const PRESET_DEFAULTS = {

locale/gitlab.pot

@@ -15101,7 +15101,7 @@ msgstr ""
 msgid "GroupRoadmap|To widen your search, change or remove filters; from %{startDate} to %{endDate}."
 msgstr ""
 
-msgid "GroupRoadmap|Try adding a start or end date to your epics so that they will display in the roadmap."
+msgid "GroupRoadmap|Try adding a start or due date to your epics so that they will display in the roadmap."
 msgstr ""
 
 msgid "GroupSAML|Active SAML Group Links (%{count})"

spec/frontend/vue_shared/components/filtered_search_bar/tokens/epic_token_spec.js

@@ -71,7 +71,7 @@ describe('EpicToken', () => {
 
     describe('currentValue', () => {
       it('returns numeric `iid` when have string as value', async () => {
-        wrapper.setProps({ value: { data: `"${mockEpics[0].title}"::&${mockEpics[0].iid}` } });
+        wrapper.setProps({ value: { data: `${mockEpics[0].title}::&${mockEpics[0].iid}` } });
         await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.currentValue).toBe(mockEpics[0].iid);
@@ -185,7 +185,7 @@ describe('EpicToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
 
       expect(tokenSegments).toHaveLength(3);
-      expect(tokenSegments.at(2).text()).toBe(`"${mockEpics[0].title}"::&${mockEpics[0].iid}`);
+      expect(tokenSegments.at(2).text()).toBe(`${mockEpics[0].title}::&${mockEpics[0].iid}`);
     });
   });
 });