Improve error messages for operations dashboard

Make the message for failure to add project to dashboard explicit
by displaying the specific reason for the failure:
The dashboard is available to projects with Gold subscriptions.

ee/app/assets/javascripts/operations/store/actions.js

@@ -26,13 +26,34 @@ export const filterProjectTokensById = ({ commit, state }, ids) => {
   commit(types.SET_PROJECT_TOKENS, tokens);
 };
 
-export const requestAddProjectsToDashboardSuccess = ({ dispatch }, data) => {
+export const requestAddProjectsToDashboardSuccess = ({ dispatch, state }, data) => {
   const { added, invalid } = data;
 
   dispatch('clearInputValue');
 
   if (invalid.length) {
-    createFlash(s__('OperationsDashboard|Some projects could not be added to dashboard'));
+    const projectNames = state.projectTokens.reduce((accumulator, project) => {
+      if (invalid.includes(project.id)) {
+        accumulator.push(project.name);
+      }
+      return accumulator;
+    }, []);
+    let invalidProjects;
+    if (projectNames.length > 2) {
+      invalidProjects = `${projectNames.slice(0, -1).join(', ')}, and ${projectNames.pop()}`;
+    } else if (projectNames.length > 1) {
+      invalidProjects = projectNames.join(' and ');
+    } else {
+      [invalidProjects] = projectNames;
+    }
+    createFlash(
+      sprintf(
+        s__(
+          'OperationsDashboard|Unable to add %{invalidProjects}. The Operations Dashboard is available for projects with a Gold subscription.',
+        ),
+        { invalidProjects },
+      ),
+    );
     dispatch('filterProjectTokensById', invalid);
   } else {
     dispatch('clearProjectTokens');

ee/changelogs/unreleased/8287-improve-message-returned-when-adding-non-gold-project-to-the-ops-dashboard.yml

+---
+title: Improve error messages for operations dashboard
+merge_request: 8244
+author:
+type: changed

ee/spec/javascripts/operations/mock_data.js

 export const mockText = {
   ADD_PROJECTS: 'Add projects',
   ADD_PROJECTS_ERROR: 'Something went wrong, unable to add projects to dashboard',
-  ADD_PROJECTS_DUPLICATE_ERROR: 'Some projects could not be added to dashboard',
   REMOVE_PROJECT_ERROR: 'Something went wrong, unable to remove project',
   DASHBOARD_TITLE: 'Operations Dashboard',
   EMPTY_TITLE: 'Add a project to the dashboard',

ee/spec/javascripts/operations/store/actions_spec.js

@@ -165,9 +165,7 @@ describe('actions', () => {
       );
     });
 
-    it('displays an error when user tries to add invalid project to dashboard', done => {
-      const spy = spyOnDependency(defaultActions, 'createFlash');
-
+    it('does not remove projectTokens when user adds invalid projects to dashbaord', done => {
       testAction(
         actions.requestAddProjectsToDashboardSuccess,
         {
@@ -188,8 +186,49 @@ describe('actions', () => {
         ],
         done,
       );
+    });
+
+    const errorMessage =
+      'The Operations Dashboard is available for projects with a Gold subscription.';
+    const addTokens = count => {
+      for (let i = 0; i < count; i += 1) {
+        store.dispatch('addProjectToken', {
+          id: i,
+          name: 'mock-name',
+        });
+      }
+    };
+    const addInvalidProjects = invalid =>
+      store.dispatch('requestAddProjectsToDashboardSuccess', {
+        added: [],
+        invalid,
+        duplicate: [],
+      });
+
+    it('displays an error when user tries to add one invalid project to dashboard', () => {
+      const spy = spyOnDependency(defaultActions, 'createFlash');
+      addTokens(1);
+      addInvalidProjects([0]);
+
+      expect(spy).toHaveBeenCalledWith(`Unable to add mock-name. ${errorMessage}`);
+    });
 
-      expect(spy).toHaveBeenCalledWith(mockText.ADD_PROJECTS_DUPLICATE_ERROR);
+    it('displays an error when user tries to add two invalid projects to dashboard', () => {
+      const spy = spyOnDependency(defaultActions, 'createFlash');
+      addTokens(2);
+      addInvalidProjects([0, 1]);
+
+      expect(spy).toHaveBeenCalledWith(`Unable to add mock-name and mock-name. ${errorMessage}`);
+    });
+
+    it('displays an error when user tries to add more than two invalid projects to dashboard', () => {
+      const spy = spyOnDependency(defaultActions, 'createFlash');
+      addTokens(3);
+      addInvalidProjects([0, 1, 2]);
+
+      expect(spy).toHaveBeenCalledWith(
+        `Unable to add mock-name, mock-name, and mock-name. ${errorMessage}`,
+      );
     });
   });
 

locale/gitlab.pot

@@ -5608,10 +5608,10 @@ msgstr ""
 msgid "OperationsDashboard|Add a project to the dashboard"
 msgstr ""
 
-msgid "OperationsDashboard|Some projects could not be added to dashboard"
+msgid "OperationsDashboard|The operations dashboard provides a summary of each project's operational health, including pipeline and alert status."
 msgstr ""
 
-msgid "OperationsDashboard|The operations dashboard provides a summary of each project's operational health, including pipeline and alert status."
+msgid "OperationsDashboard|Unable to add %{invalidProjects}. The Operations Dashboard is available for projects with a Gold subscription."
 msgstr ""
 
 msgid "Optionally, you can %{link_to_customize} how FogBugz email addresses and usernames are imported into GitLab."