Notify user when over 1000 epics in roadmap

changelogs/unreleased/33338-notify-user-if-they-have-over-1000-epics-in-roadmap.yml

+---
+title: Notify user when over 1000 epics in roadmap
+merge_request: 19419
+author:
+type: added

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

 import initFilteredSearch from '~/pages/search/init_filtered_search';
+import UserCallout from '~/user_callout';
 import FilteredSearchTokenKeysEpics from 'ee/filtered_search/filtered_search_token_keys_epics';
 import initEpicCreateApp from 'ee/epic/epic_bundle';
 import initRoadmap from 'ee/roadmap/roadmap_bundle';
@@ -13,4 +14,7 @@ document.addEventListener('DOMContentLoaded', () => {
   });
   initEpicCreateApp(true);
   initRoadmap();
+
+  // eslint-disable-next-line no-new
+  new UserCallout({ className: 'js-epics-limit-callout' });
 });

ee/app/controllers/groups/roadmap_controller.rb

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

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

@@ -3,12 +3,23 @@
 - @content_wrapper_class = "group-epics-roadmap-wrapper"
 - @content_class = "group-epics-roadmap"
 - breadcrumb_title _("Epics Roadmap")
+- epics_limit_feature = 'epics_limit_warning_dismissed'
 
 - has_filters_applied = params[:label_name].present? || params[:author_username].present? || params[:search].present?
 
 - if @epics_count != 0
   = 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, empty_state_illustration: image_path('illustrations/epics/roadmap.svg'), has_filters_applied: "#{has_filters_applied}", new_epic_endpoint: group_epics_path(@group), preset_type: roadmap_layout, epics_state: @epics_state, sorted_by: @sort } }
+
 - else
   = render 'shared/empty_states/roadmap'

ee/spec/features/groups/group_roadmap_spec.rb

@@ -165,4 +165,48 @@ describe 'group epic roadmap', :js do
       end
     end
   end
+
+  context 'when over 1000 epics exist for the group' do
+    6.times do |i|
+      let!("epic_#{i}") { create(:epic, group: group, start_date: 10.days.ago, end_date: 1.day.ago) }
+    end
+
+    before do
+      stub_const('Groups::RoadmapController::EPICS_ROADMAP_LIMIT', 5)
+      visit group_roadmap_path(group)
+      wait_for_requests
+    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.'
+        end
+      end
+
+      it 'is removed after dismissal' do
+        find('.js-epics-limit-callout .js-close-callout').click
+
+        expect(page).not_to have_selector('.js-epics-limit-callout')
+      end
+
+      it 'does not appear on page after dismissal and reload' do
+        find('.js-epics-limit-callout .js-close-callout').click
+        visit group_roadmap_path(group)
+        wait_for_requests
+
+        expect(page).not_to have_selector('.js-epics-limit-callout')
+      end
+
+      it 'links to roadmap documentation' do
+        page.within('.js-epics-limit-callout') do
+          find('#js-learn-more').click
+          wait_for_requests
+          expect(URI.parse(current_url).host).to eq("docs.gitlab.com")
+          expect(URI.parse(current_url).path).to eq("/ee/user/group/roadmap/")
+        end
+      end
+    end
+  end
 end

locale/gitlab.pot

@@ -15989,6 +15989,9 @@ msgstr ""
 msgid "Some email servers do not support overriding the email sender name. Enable this option to include the name of the author of the issue, merge request or comment in the email body instead."
 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."
+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."
 msgstr ""