Add limit message to Environments Dashboard

This commit adds a message about the maximum number of projects that
will be shown on the Environments Dashboard page.

changelogs/unreleased/nfriend-add-environments-dashboard-message.yml

+---
+title: Add informational message about page limits to environments dashboard
+merge_request: 22489
+author:
+type: added

ee/app/assets/javascripts/environments_dashboard/components/dashboard/dashboard.vue

 <script>
 import _ from 'underscore';
 import { mapState, mapActions } from 'vuex';
-import { GlModal, GlModalDirective, GlButton, GlDashboardSkeleton } from '@gitlab/ui';
+import {
+  GlModal,
+  GlModalDirective,
+  GlButton,
+  GlDashboardSkeleton,
+  GlSprintf,
+  GlLink,
+} from '@gitlab/ui';
 import { s__ } from '~/locale';
 import ProjectSelector from '~/vue_shared/components/project_selector/project_selector.vue';
 import ProjectHeader from './project_header.vue';
@@ -27,6 +34,8 @@ export default {
     GlModal,
     GlDashboardSkeleton,
     GlButton,
+    GlSprintf,
+    GlLink,
     ProjectSelector,
     Environment,
     ProjectHeader,
@@ -52,6 +61,10 @@ export default {
       type: String,
       required: true,
     },
+    environmentsDashboardHelpPath: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     ...mapState([
@@ -144,6 +157,21 @@ export default {
         {{ $options.addProjectsButton }}
       </gl-button>
     </div>
+    <p class="mt-2 mb-4 js-page-limits-message">
+      <gl-sprintf
+        :message="
+          s__(
+            'EnvironmentsDashboard|This dashboard displays a maximum of 7 projects and 3 environments per project. %{readMoreLink}',
+          )
+        "
+      >
+        <template #readMoreLink>
+          <gl-link :href="environmentsDashboardHelpPath" target="_blank" rel="noopener noreferrer">
+            {{ s__('EnvironmentsDashboard|Read more.') }}
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
     <div class="prepend-top-default">
       <div v-if="projects.length" class="dashboard-cards">
         <div v-for="project in projects" :key="project.id" class="column prepend-top-default">

ee/app/assets/javascripts/pages/operations/environments/index.js

@@ -13,12 +13,7 @@ document.addEventListener(
       },
       render(createElement) {
         return createElement(EnvironmentDashboardComponent, {
-          props: {
-            listPath: this.$el.dataset.listPath,
-            addPath: this.$el.dataset.addPath,
-            emptyDashboardSvgPath: this.$el.dataset.emptyDashboardSvgPath,
-            emptyDashboardHelpPath: this.$el.dataset.emptyDashboardHelpPath,
-          },
+          props: this.$el.dataset,
         });
       },
     }),

ee/app/helpers/operations_helper.rb

@@ -6,7 +6,7 @@ module OperationsHelper
       'add-path' => add_operations_project_path,
       'list-path' => operations_list_path,
       'empty-dashboard-svg-path' => image_path('illustrations/operations-dashboard_empty.svg'),
-      'empty-dashboard-help-path' => help_page_path('user/operations_dashboard/index.html')
+      'empty-dashboard-help-path' => help_page_path('user/operations_dashboard/index.md')
     }
   end
 
@@ -15,7 +15,8 @@ module OperationsHelper
       'add-path' => add_operations_project_path,
       'list-path' => operations_environments_list_path,
       'empty-dashboard-svg-path' => image_path('illustrations/operations-dashboard_empty.svg'),
-      'empty-dashboard-help-path' => help_page_path('ci/environments/environments_dashboard.html')
+      'empty-dashboard-help-path' => help_page_path('ci/environments/environments_dashboard.md'),
+      'environments-dashboard-help-path' => help_page_path('ci/environments/environments_dashboard.md')
     }
   end
 end

ee/spec/frontend/environments_dashboard/components/__snapshots__/dashboard_spec.js.snap

@@ -41,6 +41,21 @@ exports[`dashboard should match the snapshot 1`] = `
     </gl-button-stub>
   </div>
    
+  <p
+    class="mt-2 mb-4 js-page-limits-message"
+  >
+    This dashboard displays a maximum of 7 projects and 3 environments per project. 
+    <gl-link-stub
+      href="/help/user/operations_dashboard/index.html"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      
+          Read more.
+        
+    </gl-link-stub>
+  </p>
+   
   <div
     class="prepend-top-default"
   >

ee/spec/frontend/environments_dashboard/components/dashboard_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlButton, GlModal } from '@gitlab/ui';
+import { GlButton, GlModal, GlSprintf, GlLink } from '@gitlab/ui';
 import createStore from 'ee/vue_shared/dashboards/store/index';
 import state from 'ee/vue_shared/dashboards/store/state';
 import component from 'ee/environments_dashboard/components/dashboard/dashboard.vue';
 import ProjectHeader from 'ee/environments_dashboard/components/dashboard/project_header.vue';
 import Environment from 'ee/environments_dashboard/components/dashboard/environment.vue';
 import ProjectSelector from '~/vue_shared/components/project_selector/project_selector.vue';
+import { trimText } from 'helpers/text_helper';
 
 import environment from './mock_environment.json';
 
@@ -35,6 +36,7 @@ describe('dashboard', () => {
       listPath: 'mock-listPath',
       emptyDashboardSvgPath: '/assets/illustrations/operations-dashboard_empty.svg',
       emptyDashboardHelpPath: '/help/user/operations_dashboard/index.html',
+      environmentsDashboardHelpPath: '/help/user/operations_dashboard/index.html',
     };
 
     wrapper = shallowMount(component, {
@@ -44,6 +46,7 @@ describe('dashboard', () => {
       methods: {
         ...actionSpies,
       },
+      stubs: { GlSprintf },
     });
   });
 
@@ -60,6 +63,28 @@ describe('dashboard', () => {
     expect(wrapper.find('.js-dashboard-title').text()).toBe('Environments Dashboard');
   });
 
+  describe('page limits information message', () => {
+    let message;
+
+    beforeEach(() => {
+      message = wrapper.find('.js-page-limits-message');
+    });
+
+    it('renders the message', () => {
+      expect(trimText(message.text())).toBe(
+        'This dashboard displays a maximum of 7 projects and 3 environments per project. Read more.',
+      );
+    });
+
+    it('includes the correct documentation link in the message', () => {
+      const helpLink = message.find(GlLink);
+
+      expect(helpLink.text()).toBe('Read more.');
+      expect(helpLink.attributes('href')).toBe(propsData.environmentsDashboardHelpPath);
+      expect(helpLink.attributes('rel')).toBe('noopener noreferrer');
+    });
+  });
+
   describe('add projects button', () => {
     let button;
 

ee/spec/views/operations/environments.html.haml_spec.rb

@@ -9,6 +9,7 @@ describe 'operations/environments.html.haml' do
     expect(rendered).to match %r{data-add-path="/-/operations"}
     expect(rendered).to match %r{data-list-path="/-/operations/environments_list"}
     expect(rendered).to match %r{data-empty-dashboard-svg-path="/assets/illustrations/operations-dashboard_empty.*\.svg"}
-    expect(rendered).to match %r{data-empty-dashboard-help-path="/help/ci/environments/environments_dashboard.html"}
+    expect(rendered).to match %r{data-empty-dashboard-help-path="/help/ci/environments/environments_dashboard.md"}
+    expect(rendered).to match %r{data-environments-dashboard-help-path="/help/ci/environments/environments_dashboard.md"}
   end
 end

ee/spec/views/operations/index.html.haml_spec.rb

@@ -9,6 +9,6 @@ describe 'operations/index.html.haml' do
     expect(rendered).to match %r{data-add-path="/-/operations"}
     expect(rendered).to match %r{data-list-path="/-/operations/list"}
     expect(rendered).to match %{data-empty-dashboard-svg-path="/assets/illustrations/operations-dashboard_empty.*\.svg"}
-    expect(rendered).to match %r{data-empty-dashboard-help-path="/help/user/operations_dashboard/index.html"}
+    expect(rendered).to match %r{data-empty-dashboard-help-path="/help/user/operations_dashboard/index.md"}
   end
 end

locale/gitlab.pot

@@ -6882,12 +6882,18 @@ msgstr ""
 msgid "EnvironmentsDashboard|More actions"
 msgstr ""
 
+msgid "EnvironmentsDashboard|Read more."
+msgstr ""
+
 msgid "EnvironmentsDashboard|Remove"
 msgstr ""
 
 msgid "EnvironmentsDashboard|The environments dashboard provides a summary of each project's environments' status, including pipeline and alert statuses."
 msgstr ""
 
+msgid "EnvironmentsDashboard|This dashboard displays a maximum of 7 projects and 3 environments per project. %{readMoreLink}"
+msgstr ""
+
 msgid "Environments|An error occurred while canceling the auto stop, please try again"
 msgstr ""