Merge branch...

Merge branch '271401-ensure-we-don-t-show-warning-when-there-are-1000-epics-on-a-roadmap' into 'master'

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

See merge request gitlab-org/gitlab!47884

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 { __, s__ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 import EpicsListEmpty from './epics_list_empty.vue';
@@ -8,11 +10,23 @@ 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,
+  EPICS_LIMIT_DISMISSED_COOKIE_TIMEOUT,
+} from '../constants';
 
 export default {
+  i18n: {
+    warningTitle: s__('GroupRoadmap|Some of your epics might not be visible'),
+    warningBody: s__(
+      'GroupRoadmap|Roadmaps can display up to 1,000 epics. These appear in your selected sort order.',
+    ),
+    warningButtonLabel: __('Learn more'),
+  },
   components: {
     EpicsListEmpty,
+    GlAlert,
     GlLoadingIcon,
     RoadmapFilters,
     RoadmapShell,
@@ -32,6 +46,11 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      isWarningDismissed: Cookies.get(EPICS_LIMIT_DISMISSED_COOKIE_NAME) === 'true',
+    };
+  },
   computed: {
     ...mapState([
       'currentGroupId',
@@ -63,6 +82,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 +147,12 @@ export default {
           .catch(() => {});
       });
     },
+    dismissTooManyEpicsWarning() {
+      Cookies.set(EPICS_LIMIT_DISMISSED_COOKIE_NAME, 'true', {
+        expires: EPICS_LIMIT_DISMISSED_COOKIE_TIMEOUT,
+      });
+      this.isWarningDismissed = true;
+    },
   },
 };
 </script>
@@ -132,6 +160,17 @@ export default {
 <template>
   <div class="roadmap-app-container gl-h-full">
     <roadmap-filters v-if="showFilteredSearchbar" />
+    <gl-alert
+      v-if="isWarningVisible"
+      variant="warning"
+      :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"
+    >
+      {{ $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" />
       <epics-list-empty

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

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

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/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

@@ -156,36 +156,36 @@ RSpec.describe 'group epic roadmap', :js do
     end
   end
 
-  context 'when over 1000 epics exist for the group' do
+  context 'when over 1000 epics match roadmap filters' 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 might not be visible Roadmaps can display up to 1,000 epics. These appear 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

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,29 @@ describe('RoadmapApp', () => {
       });
     });
   });
+
+  describe('roadmap epics limit warning', () => {
+    beforeEach(() => {
+      wrapper = createComponent();
+      store.commit(types.RECEIVE_EPICS_SUCCESS, [mockFormattedEpic, mockFormattedChildEpic2]);
+      window.gon.roadmap_epics_limit = 1;
+    });
+
+    it('displays warning when epics limit is reached', () => {
+      expect(wrapper.find(GlAlert).exists()).toBe(true);
+      expect(wrapper.find(GlAlert).text()).toContain(
+        'Roadmaps can display up to 1,000 epics. These appear 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);
+      });
+    });
+  });
 });

ee/spec/lib/ee/gitlab/gon_helper_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe EE::Gitlab::GonHelper do
+  let(:helper) do
+    Class.new do
+      include Gitlab::GonHelper
+
+      def current_user
+        nil
+      end
+    end.new
+  end
+
+  describe '#add_gon_variables' do
+    let(:gon) { instance_double('gon').as_null_object }
+
+    before do
+      allow(helper).to receive(:gon).and_return(gon)
+    end
+
+    it 'includes ee exclusive settings' do
+      expect(gon).to receive(:roadmap_epics_limit=).with(1000)
+
+      helper.add_gon_variables
+    end
+  end
+end

lib/gitlab/gon_helper.rb

@@ -83,3 +83,5 @@ module Gitlab
     end
   end
 end
+
+Gitlab::GonHelper.prepend_if_ee('EE::Gitlab::GonHelper')

locale/gitlab.pot

@@ -13351,6 +13351,12 @@ msgstr ""
 msgid "GroupRoadmap|No start date – %{dateWord}"
 msgstr ""
 
+msgid "GroupRoadmap|Roadmaps can display up to 1,000 epics. These appear in your selected sort order."
+msgstr ""
+
+msgid "GroupRoadmap|Some of your epics might not be visible"
+msgstr ""
+
 msgid "GroupRoadmap|Something went wrong while fetching epics"
 msgstr ""
 
@@ -25368,9 +25374,6 @@ 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."
-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 ""