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

Update warning using gl-alert

ee/app/assets/javascripts/pages/groups/roadmap/show/index.js

@@ -2,7 +2,6 @@ import FilteredSearchTokenKeysEpics from 'ee/filtered_search/filtered_search_tok
 import initEpicCreateApp from 'ee/epic/epic_bundle';
 import initRoadmap from 'ee/roadmap/roadmap_bundle';
 import initFilteredSearch from '~/pages/search/init_filtered_search';
-import UserCallout from '~/user_callout';
 
 initFilteredSearch({
   page: 'epics',
@@ -14,6 +13,3 @@ initFilteredSearch({
 });
 initEpicCreateApp(true);
 initRoadmap();
-
-// eslint-disable-next-line no-new
-new UserCallout({ className: 'js-epics-limit-callout' });

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

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import Cookies from 'js-cookie';
+import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
@@ -8,11 +9,12 @@ import RoadmapFilters from './roadmap_filters.vue';
 import RoadmapShell from './roadmap_shell.vue';
 
 import eventHub from '../event_hub';
-import { EXTEND_AS } from '../constants';
+import { EXTEND_AS, EPICS_LIMIT_DISMISSED_COOKIE_NAME } from '../constants';
 
 export default {
   components: {
     EpicsListEmpty,
+    GlAlert,
     GlLoadingIcon,
     RoadmapFilters,
     RoadmapShell,
@@ -32,6 +34,11 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      isWarningDismissed: Cookies.get(EPICS_LIMIT_DISMISSED_COOKIE_NAME) === 'true',
+    };
+  },
   computed: {
     ...mapState([
       'currentGroupId',
@@ -63,6 +70,9 @@ export default {
       const last = this.timeframe.length - 1;
       return this.timeframe[last];
     },
+    isWarningVisible() {
+      return !this.isWarningDismissed && this.epics.length > gon?.roadmap_epics_limit;
+    },
   },
   mounted() {
     this.fetchEpics();
@@ -125,6 +135,10 @@ export default {
           .catch(() => {});
       });
     },
+    dismissTooManyEpicsWarning() {
+      Cookies.set(EPICS_LIMIT_DISMISSED_COOKIE_NAME, 'true', { expires: 365 });
+      this.isWarningDismissed = true;
+    },
   },
 };
 </script>
@@ -132,6 +146,20 @@ export default {
 <template>
   <div class="roadmap-app-container gl-h-full">
     <roadmap-filters v-if="showFilteredSearchbar" />
+    <gl-alert
+      v-if="isWarningVisible"
+      variant="warning"
+      :secondary-button-text="__('Learn more')"
+      secondary-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.',
+        )
+      }}
+    </gl-alert>
     <div :class="{ 'overflow-reset': epicsFetchResultEmpty }" class="roadmap-container">
       <gl-loading-icon v-if="epicsFetchInProgress" class="gl-mt-5" size="md" />
       <epics-list-empty

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

@@ -63,3 +63,5 @@ export const EPIC_LEVEL_MARGIN = {
   3: 'ml-8',
   4: 'ml-10',
 };
+
+export const EPICS_LIMIT_DISMISSED_COOKIE_NAME = 'epics_limit_warning_dismissed';

ee/app/controllers/groups/roadmap_controller.rb

@@ -5,8 +5,6 @@ module Groups
     include IssuableCollections
     include EpicsActions
 
-    EPICS_ROADMAP_LIMIT = 1000
-
     before_action :check_epics_available!
     before_action :persist_roadmap_layout, only: [:show]
     before_action do

ee/app/views/groups/roadmap/show.html.haml

@@ -5,7 +5,6 @@
 - @content_wrapper_class = "group-epics-roadmap-wrapper"
 - @content_class = "group-epics-roadmap"
 - breadcrumb_title _("Epics Roadmap")
-- epics_limit_feature = 'epics_limit_warning_dismissed'
 - sub_epics_feature_available = @group.feature_available?(:subepics)
 - allow_sub_epics = sub_epics_feature_available ? 'true' : 'false'
 - page_title _("Epics Roadmap")
@@ -17,15 +16,6 @@
   - if !Feature.enabled?(:async_filtering, @group)
     = render 'shared/epic/search_bar', type: :epics, show_roadmap_presets: true, hide_extra_sort_options: true
 
-  - if @epics_count > Groups::RoadmapController::EPICS_ROADMAP_LIMIT && show_callout?(epics_limit_feature)
-    .warning_message.mb-0.js-epics-limit-callout{ role: 'alert', data: { uid: epics_limit_feature } }
-      %button.js-close-callout.close{ type: "button", target: ".js-epics-limit-callout", "aria-hidden": true, "aria-label": _("Close") }
-        = sprite_icon("close")
-      %p
-        = s_("Some of your epics may not be visible. A roadmap is limited to the first 1,000 epics, in your selected sort order.")
-      %a.btn.btn-outline-warning#js-learn-more{ "href" => "https://docs.gitlab.com/ee/user/group/roadmap/" }
-        = _("Learn more")
-
   #js-roadmap{ data: { epics_path: group_epics_path(@group, format: :json),
     group_id: @group.id,
     full_path: @group.full_path,

ee/changelogs/unreleased/271401-ensure-we-don-t-show-warning-when-there-are-1000-epics-on-a-roa.yml

+---
+title: Ensure we don't show warning when there are <1000 epics on a roadmap
+merge_request: 47884
+author:
+type: fixed

ee/spec/features/groups/group_roadmap_spec.rb

@@ -158,34 +158,34 @@ RSpec.describe 'group epic roadmap', :js do
 
   context 'when over 1000 epics exist for the group' do
     before do
-      stub_const('Groups::RoadmapController::EPICS_ROADMAP_LIMIT', 1)
       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 ;")
     end
 
     describe 'roadmap page' do
       it 'renders warning callout banner' do
         page.within('.content-wrapper .content') do
-          expect(page).to have_selector('.js-epics-limit-callout', count: 1)
-          expect(find('.js-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(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.'
         end
 
-        page.within('.js-epics-limit-callout') do
+        page.within('[data-testid="epics_limit_callout"]') do
           expect(find_link('Learn more')[:href]).to eq("https://docs.gitlab.com/ee/user/group/roadmap/")
         end
       end
 
       it 'is removed after dismissal and even after reload' do
-        page.within('.js-epics-limit-callout') do
-          find('.js-close-callout').click
+        page.within('[data-testid="epics_limit_callout"]') do
+          find('.gl-alert-dismiss').click
         end
 
-        expect(page).not_to have_selector('.js-epics-limit-callout')
+        expect(page).not_to have_selector('[data-testid="epics_limit_callout"]')
 
         refresh
 
-        expect(page).not_to have_selector('.js-epics-limit-callout')
+        expect(page).not_to have_selector('[data-testid="epics_limit_callout"]')
       end
     end
   end

lib/gitlab/gon_helper.rb

@@ -33,6 +33,7 @@ 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