Merge branch 'project-search-bar-blank-flash-message' into 'master'

Fix operations dashboard flash error message

Closes gitlab-ce#60307

See merge request gitlab-org/gitlab-ee!10689

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

@@ -83,11 +83,13 @@ export default {
     onModalShown() {
       this.$refs.projectSelector.focusSearchInput();
     },
-    onModalHidden() {
+    onCancel() {
       this.clearSearchResults();
     },
     onOk() {
-      this.addProjectsToDashboard();
+      this.addProjectsToDashboard()
+        .then(this.clearSearchResults)
+        .catch(this.clearSearchResults);
     },
     searched(query) {
       this.setSearchQuery(query);
@@ -109,7 +111,7 @@ export default {
       :ok-disabled="okDisabled"
       ok-variant="success"
       @shown="onModalShown"
-      @hidden="onModalHidden"
+      @cancel="onCancel"
       @ok="onOk"
     >
       <project-selector

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

@@ -24,14 +24,13 @@ export const forceProjectsRequest = () => {
   if (eTagPoll) eTagPoll.makeRequest();
 };
 
-export const addProjectsToDashboard = ({ state, dispatch }) => {
+export const addProjectsToDashboard = ({ state, dispatch }) =>
   axios
     .post(state.projectEndpoints.add, {
       project_ids: state.selectedProjects.map(p => p.id),
     })
     .then(response => dispatch('receiveAddProjectsToDashboardSuccess', response.data))
     .catch(() => dispatch('receiveAddProjectsToDashboardError'));
-};
 
 export const toggleSelectedProject = ({ commit, state }, project) => {
   if (!_.findWhere(state.selectedProjects, { id: project.id })) {

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

@@ -133,6 +133,78 @@ describe('dashboard component', () => {
       });
     });
 
+    describe('add projects modal', () => {
+      beforeEach(() => {
+        store.state.projectSearchResults = mockProjectData(2);
+        store.state.selectedProjects = mockProjectData(1);
+      });
+
+      it('clears state when adding a valid project', done => {
+        mockAxios.onPost(mockAddEndpoint).replyOnce(200, { added: [1], invalid: [] });
+        wrapper.vm
+          .$nextTick()
+          .then(() => {
+            wrapper.vm.onOk();
+          })
+          .then(timeoutPromise)
+          .then(() => {
+            expect(store.state.projectSearchResults.length).toEqual(0);
+            expect(store.state.selectedProjects.length).toEqual(0);
+            done();
+          })
+          .catch(done.fail);
+      });
+
+      it('clears state when adding an invalid project', done => {
+        mockAxios.onPost(mockAddEndpoint).replyOnce(200, { added: [], invalid: [1] });
+        wrapper.vm
+          .$nextTick()
+          .then(() => {
+            wrapper.vm.onOk();
+          })
+          .then(timeoutPromise)
+          .then(() => {
+            expect(store.state.projectSearchResults.length).toEqual(0);
+            expect(store.state.selectedProjects.length).toEqual(0);
+            done();
+          })
+          .catch(done.fail);
+      });
+
+      it('clears state when canceled', done => {
+        wrapper.vm
+          .$nextTick()
+          .then(() => {
+            wrapper.vm.onCancel();
+          })
+          .then(timeoutPromise)
+          .then(() => {
+            expect(store.state.projectSearchResults.length).toEqual(0);
+            expect(store.state.selectedProjects.length).toEqual(0);
+            done();
+          })
+          .catch(done.fail);
+      });
+
+      it('clears state on error', done => {
+        mockAxios.onPost(mockAddEndpoint).replyOnce(500, {});
+        wrapper.vm
+          .$nextTick()
+          .then(() => {
+            expect(store.state.projectSearchResults.length).not.toEqual(0);
+            expect(store.state.selectedProjects.length).not.toEqual(0);
+            wrapper.vm.onOk();
+          })
+          .then(timeoutPromise)
+          .then(() => {
+            expect(store.state.projectSearchResults.length).toEqual(0);
+            expect(store.state.selectedProjects.length).toEqual(0);
+            done();
+          })
+          .catch(done.fail);
+      });
+    });
+
     describe('empty state', () => {
       beforeEach(() => {
         store.state.projects = [];