Resolve "Add documentation links to Ops Dashboard"

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

@@ -23,6 +23,10 @@ export default {
       type: String,
       required: true,
     },
+    emptyDashboardHelpPath: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     ...mapState(['projects', 'projectTokens', 'isLoadingProjects']),
@@ -95,11 +99,19 @@ export default {
           {{ s__('OperationsDashboard|Add a project to the dashboard') }}
         </h4>
         <div class="col-12 d-flex justify-content-center">
-          <span class="js-sub-title mw-460 text-tertiary">
+          <span class="js-sub-title mw-460 text-tertiary text-left">
             {{ s__(`OperationsDashboard|The operations dashboard provides a summary of each project's
-              operational health, including pipeline and alert status.`) }}
+              operational health, including pipeline and alert statuses.`) }}
           </span>
         </div>
+        <div class="col-12">
+          <a
+            :href="emptyDashboardHelpPath"
+            class="js-documentation-link btn btn-primary prepend-top-default append-bottom-default"
+          >
+            {{ __('View documentation') }}
+          </a>
+        </div>
       </div>
       <gl-loading-icon
         v-else

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

@@ -17,6 +17,7 @@ document.addEventListener(
             listPath: this.$el.dataset.listPath,
             addPath: this.$el.dataset.addPath,
             emptyDashboardSvgPath: this.$el.dataset.emptyDashboardSvgPath,
+            emptyDashboardHelpPath: this.$el.dataset.emptyDashboardHelpPath,
           },
         });
       },

ee/app/helpers/operations_helper.rb

@@ -5,7 +5,8 @@ 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-svg-path' => image_path('illustrations/operations-dashboard_empty.svg'),
+      'empty-dashboard-help-path' => help_page_path('user/operations_dashboard/index.html')
     }
   end
 end

ee/changelogs/unreleased/8326-add-documentation-links-to-ops-dashboard.yml

+---
+title: Add documentation link to ops dashboard
+merge_request: 8296
+author:
+type: changed

ee/spec/helpers/operations_helper_spec.rb

@@ -10,7 +10,8 @@ describe OperationsHelper do
       expect(operations_data).to eq(
         'add-path' => '/-/operations',
         'list-path' => '/-/operations/list',
-        'empty-dashboard-svg-path' => '/images/illustrations/operations-dashboard_empty.svg'
+        'empty-dashboard-svg-path' => '/images/illustrations/operations-dashboard_empty.svg',
+        'empty-dashboard-help-path' => '/help/user/operations_dashboard/index.html'
       )
     end
   end

ee/spec/javascripts/operations/components/dashboard/dashboard_spec.js

@@ -22,6 +22,7 @@ describe('dashboard component', () => {
         addPath: 'mock-addPath',
         listPath: mockListPath,
         emptyDashboardSvgPath: '/assets/illustrations/operations-dashboard_empty.svg',
+        emptyDashboardHelpPath: '/help/user/operations_dashboard/index.html',
       },
     });
   let vm;
@@ -122,6 +123,18 @@ describe('dashboard component', () => {
           mockText.EMPTY_SUBTITLE,
         );
       });
+
+      it('renders link to documentation', () => {
+        const link = vm.$el.querySelector('.js-documentation-link');
+
+        expect(link.innerText.trim()).toBe('View documentation');
+      });
+
+      it('links to documentation', () => {
+        const link = vm.$el.querySelector('.js-documentation-link');
+
+        expect(link.href).toMatch(vm.emptyDashboardHelpPath);
+      });
     });
   });
 });

ee/spec/javascripts/operations/mock_data.js

@@ -5,7 +5,7 @@ export const mockText = {
   DASHBOARD_TITLE: 'Operations Dashboard',
   EMPTY_TITLE: 'Add a project to the dashboard',
   EMPTY_SUBTITLE:
-    "The operations dashboard provides a summary of each project's operational health, including pipeline and alert status.",
+    "The operations dashboard provides a summary of each project's operational health, including pipeline and alert statuses.",
   EMPTY_SVG_SOURCE: '/assets/illustrations/operations-dashboard_empty.svg',
   NO_SEARCH_RESULTS: 'Sorry, no projects matched your search',
   RECEIVE_PROJECTS_ERROR: 'Something went wrong, unable to get operations projects',

locale/gitlab.pot

@@ -5656,7 +5656,7 @@ msgstr ""
 msgid "OperationsDashboard|Add a project to the dashboard"
 msgstr ""
 
-msgid "OperationsDashboard|The operations dashboard provides a summary of each project's operational health, including pipeline and alert status."
+msgid "OperationsDashboard|The operations dashboard provides a summary of each project's operational health, including pipeline and alert statuses."
 msgstr ""
 
 msgid "OperationsDashboard|Unable to add %{invalidProjects}. The Operations Dashboard is available for projects with a Gold subscription."
@@ -8767,6 +8767,9 @@ msgstr ""
 msgid "View app"
 msgstr ""
 
+msgid "View documentation"
+msgstr ""
+
 msgid "View epics list"
 msgstr ""