Ensure we don't show warning when there are <1000 epics on a roadmap

Review feedback

ee/app/assets/javascripts/roadmap/components/roadmap_app.vue

@@ -2,6 +2,7 @@
 import Cookies from 'js-cookie';
 import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
+import { __ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 import EpicsListEmpty from './epics_list_empty.vue';
@@ -12,6 +13,13 @@ import eventHub from '../event_hub';
 import { EXTEND_AS, EPICS_LIMIT_DISMISSED_COOKIE_NAME } from '../constants';
 
 export default {
+  i18n: {
+    warningTitle: __('Some of your epics may not be visible'),
+    warningBody: __(
+      'Roadmaps are limited to 1,000 epics. These will display in your selected sort order.',
+    ),
+    warningButtonLabel: __('Learn more'),
+  },
   components: {
     EpicsListEmpty,
     GlAlert,
@@ -149,16 +157,13 @@ export default {
     <gl-alert
       v-if="isWarningVisible"
       variant="warning"
-      :secondary-button-text="__('Learn more')"
-      secondary-button-link="https://docs.gitlab.com/ee/user/group/roadmap/"
+      :title="$options.i18n.warningTitle"
+      :primary-button-text="$options.i18n.warningButtonLabel"
+      primary-button-link="https://docs.gitlab.com/ee/user/group/roadmap/"
       data-testid="epics_limit_callout"
       @dismiss="dismissTooManyEpicsWarning"
     >
-      {{
-        s__(
-          'Some of your epics may not be visible. A roadmap is limited to the first 1,000 epics, in your selected sort order.',
-        )
-      }}
+      {{ $options.i18n.warningBody }}
     </gl-alert>
     <div :class="{ 'overflow-reset': epicsFetchResultEmpty }" class="roadmap-container">
       <gl-loading-icon v-if="epicsFetchInProgress" class="gl-mt-5" size="md" />

ee/lib/ee/gitlab/gon_helper.rb

+# frozen_string_literal: true
+
+module EE
+  module Gitlab
+    module GonHelper
+      extend ::Gitlab::Utils::Override
+
+      override :add_gon_variables
+      def add_gon_variables
+        super
+
+        gon.roadmap_epics_limit = 1000
+      end
+    end
+  end
+end

ee/spec/features/groups/group_roadmap_spec.rb

@@ -161,14 +161,14 @@ RSpec.describe 'group epic roadmap', :js do
       create_list(:epic, 2, group: group, start_date: 10.days.ago, end_date: 1.day.ago)
       visit group_roadmap_path(group)
       wait_for_requests
-      execute_script("gon.roadmap_epics_limit = 1 ;")
+      execute_script("gon.roadmap_epics_limit = 1;")
     end
 
     describe 'roadmap page' do
       it 'renders warning callout banner' do
         page.within('.content-wrapper .content') do
           expect(page).to have_selector('[data-testid="epics_limit_callout"]', count: 1)
-          expect(find('[data-testid="epics_limit_callout"]')).to have_content 'Some of your epics may not be visible. A roadmap is limited to the first 1,000 epics, in your selected sort order.'
+          expect(find('[data-testid="epics_limit_callout"]')).to have_content 'Some of your epics may not be visible Roadmaps are limited to 1,000 epics. These will display in your selected sort order.'
         end
 
         page.within('[data-testid="epics_limit_callout"]') do

ee/spec/frontend/roadmap/components/roadmap_app_spec.js

-import { GlLoadingIcon } from '@gitlab/ui';
+import Cookies from 'js-cookie';
+import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import EpicsListEmpty from 'ee/roadmap/components/epics_list_empty.vue';
@@ -14,6 +15,7 @@ import {
   basePath,
   epicsPath,
   mockFormattedEpic,
+  mockFormattedChildEpic2,
   mockGroupId,
   mockNewEpicEndpoint,
   mockSortedBy,
@@ -239,4 +241,31 @@ describe('RoadmapApp', () => {
       });
     });
   });
+
+  describe('roadmap epics limit warning', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+      Cookies.set('epics_limit_warning_dismissed', false);
+      store.commit(types.RECEIVE_EPICS_SUCCESS, [mockFormattedEpic, mockFormattedChildEpic2]);
+      window.gon.roadmap_epics_limit = 1;
+    });
+
+    it('displays warning when epics limit is reached', () => {
+      expect(Cookies.get('epics_limit_warning_dismissed')).toBe('false');
+      expect(wrapper.find(GlAlert).exists()).toBe(true);
+      expect(wrapper.find(GlAlert).text()).toContain(
+        'Roadmaps are limited to 1,000 epics. These will display in your selected sort order.',
+      );
+    });
+
+    it('sets epics_limit_warning_dismissed cookie to true when dismissing alert', () => {
+      wrapper.find(GlAlert).vm.$emit('dismiss');
+
+      expect(Cookies.get('epics_limit_warning_dismissed')).toBe('true');
+
+      return wrapper.vm.$nextTick(() => {
+        expect(wrapper.find(GlAlert).exists()).toBe(false);
+      });
+    });
+  });
 });

lib/gitlab/gon_helper.rb

@@ -33,7 +33,6 @@ module Gitlab
       gon.disable_animations     = Gitlab.config.gitlab['disable_animations']
       gon.suggested_label_colors = LabelsHelper.suggested_colors
       gon.first_day_of_week      = current_user&.first_day_of_week || Gitlab::CurrentSettings.first_day_of_week
-      gon.roadmap_epics_limit    = 1000
       gon.ee                     = Gitlab.ee?
 
       if current_user
@@ -84,3 +83,5 @@ module Gitlab
     end
   end
 end
+
+Gitlab::GonHelper.prepend_if_ee('EE::Gitlab::GonHelper')

locale/gitlab.pot

@@ -23357,6 +23357,9 @@ msgstr ""
 msgid "Roadmap"
 msgstr ""
 
+msgid "Roadmaps are limited to 1,000 epics. These will display in your selected sort order."
+msgstr ""
+
 msgid "Role"
 msgstr ""
 
@@ -25248,7 +25251,7 @@ msgstr ""
 msgid "Some of the designs you tried uploading did not change:"
 msgstr ""
 
-msgid "Some of your epics may not be visible. A roadmap is limited to the first 1,000 epics, in your selected sort order."
+msgid "Some of your epics may not be visible"
 msgstr ""
 
 msgid "Someone edited the issue at the same time you did. Please check out %{linkStart}the issue%{linkEnd} and make sure your changes will not unintentionally remove theirs."