Merge branch '32628-operations-dashboard-fix-message-after-clearing-project-search' into 'master'

Operations Dashboard: fix minimum query message

Closes #32628

See merge request gitlab-org/gitlab!17574

ee/app/assets/javascripts/vue_shared/dashboards/store/actions.js

@@ -151,14 +151,13 @@ export const receiveRemoveProjectError = () => {
 export const setSearchQuery = ({ commit }, query) => commit(types.SET_SEARCH_QUERY, query);
 
 export const fetchSearchResults = ({ state, dispatch }) => {
+  const { searchQuery } = state;
   dispatch('requestSearchResults');
 
-  if (!state.searchQuery) {
-    dispatch('receiveSearchResultsError');
-  } else if (state.searchQuery.lengh < API_MINIMUM_QUERY_LENGTH) {
-    dispatch('receiveSearchResultsError', 'minimumQuery');
+  if (!searchQuery || searchQuery.length < API_MINIMUM_QUERY_LENGTH) {
+    dispatch('minimumQueryMessage');
   } else {
-    Api.projects(state.searchQuery, {})
+    Api.projects(searchQuery, {})
       .then(results => dispatch('receiveSearchResultsSuccess', results))
       .catch(() => dispatch('receiveSearchResultsError'));
   }
@@ -179,5 +178,9 @@ export const setProjectEndpoints = ({ commit }, endpoints) => {
   commit(types.SET_PROJECT_ENDPOINT_ADD, endpoints.add);
 };
 
+export const minimumQueryMessage = ({ commit }) => {
+  commit(types.MINIMUM_QUERY_MESSAGE);
+};
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

ee/app/assets/javascripts/vue_shared/dashboards/store/mutation_types.js

@@ -18,3 +18,5 @@ export const CLEAR_SEARCH_RESULTS = 'CLEAR_SEARCH_RESULTS';
 export const REQUEST_SEARCH_RESULTS = 'REQUEST_SEARCH_RESULTS';
 export const RECEIVE_SEARCH_RESULTS_SUCCESS = 'RECEIVE_SEARCH_RESULTS_SUCCESS';
 export const RECEIVE_SEARCH_RESULTS_ERROR = 'RECEIVE_SEARCH_RESULTS_ERROR';
+
+export const MINIMUM_QUERY_MESSAGE = 'MINIMUM_QUERY_MESSAGE';

ee/app/assets/javascripts/vue_shared/dashboards/store/mutations.js

@@ -49,7 +49,7 @@ export default {
   [types.REQUEST_SEARCH_RESULTS](state) {
     // Flipping this property separately to allows the UI
     // to hide the "minimum query" message
-    // before the seach results arrive from the API
+    // before the search results arrive from the API
     Vue.set(state.messages, 'minimumQuery', false);
 
     state.searchCount += 1;
@@ -59,13 +59,23 @@ export default {
     Vue.set(state.messages, 'noResults', state.projectSearchResults.length === 0);
     Vue.set(state.messages, 'searchError', false);
     Vue.set(state.messages, 'minimumQuery', false);
-    state.searchCount -= 1;
+
+    state.searchCount = Math.max(0, state.searchCount - 1);
   },
   [types.RECEIVE_SEARCH_RESULTS_ERROR](state, message) {
     state.projectSearchResults = [];
     Vue.set(state.messages, 'noResults', false);
     Vue.set(state.messages, 'searchError', true);
     Vue.set(state.messages, 'minimumQuery', message === 'minimumQuery');
-    state.searchCount -= 1;
+
+    state.searchCount = Math.max(0, state.searchCount - 1);
+  },
+  [types.MINIMUM_QUERY_MESSAGE](state) {
+    state.projectSearchResults = [];
+    Vue.set(state.messages, 'noResults', false);
+    Vue.set(state.messages, 'minimumQuery', true);
+    Vue.set(state.messages, 'searchError', false);
+
+    state.searchCount = Math.max(0, state.searchCount - 1);
   },
 };

ee/changelogs/unreleased/32628-operations-dashboard-fix-message-after-clearing-project-search.yml

+---
+title: 'Operations Dashboard: fix minimum query message'
+merge_request: 17574
+author:
+type: fixed

ee/spec/javascripts/vue_shared/dashboards/store/actions_spec.js

@@ -328,7 +328,34 @@ describe('actions', () => {
   });
 
   describe('fetchSearchResults', () => {
-    it('dispatches an error if the search query was empty', done => {
+    it('dispatches minimumQueryMessage if the search query is falsy', done => {
+      const searchQueries = [null, undefined, false, NaN];
+
+      Promise.all(
+        searchQueries.map(searchQuery => {
+          store.state.searchQuery = searchQuery;
+
+          return testAction(
+            actions.fetchSearchResults,
+            null,
+            store.state,
+            [],
+            [
+              {
+                type: 'requestSearchResults',
+              },
+              {
+                type: 'minimumQueryMessage',
+              },
+            ],
+          );
+        }),
+      )
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('dispatches minimumQueryMessage if the search query was empty', done => {
       store.state.searchQuery = '';
 
       testAction(
@@ -341,14 +368,14 @@ describe('actions', () => {
             type: 'requestSearchResults',
           },
           {
-            type: 'receiveSearchResultsError',
+            type: 'minimumQueryMessage',
           },
         ],
         done,
       );
     });
 
-    it(`dispatches an error if the search query wasn't long enough`, done => {
+    it(`dispatches minimumQueryMessage if the search query wasn't long enough`, done => {
       store.state.searchQuery = 'a';
 
       testAction(
@@ -361,7 +388,7 @@ describe('actions', () => {
             type: 'requestSearchResults',
           },
           {
-            type: 'receiveSearchResultsError',
+            type: 'minimumQueryMessage',
           },
         ],
         done,

ee/spec/javascripts/vue_shared/dashboards/store/mutations_spec.js

@@ -168,6 +168,22 @@ describe('mutations', () => {
 
       expect(localState.messages.minimumQuery).toBe(false);
     });
+
+    it('decrements the search count by one', () => {
+      localState.searchCount = 1;
+
+      mutations[types.RECEIVE_SEARCH_RESULTS_SUCCESS](localState, []);
+
+      expect(localState.searchCount).toBe(0);
+    });
+
+    it('does not decrement the search count to be negative', () => {
+      localState.searchCount = 0;
+
+      mutations[types.RECEIVE_SEARCH_RESULTS_SUCCESS](localState, []);
+
+      expect(localState.searchCount).toBe(0);
+    });
   });
 
   describe('RECEIVE_SEARCH_RESULTS_ERROR', () => {
@@ -182,6 +198,22 @@ describe('mutations', () => {
 
       expect(localState.messages.minimumQuery).toBe(false);
     });
+
+    it('decrements the search count by one', () => {
+      localState.searchCount = 1;
+
+      mutations[types.RECEIVE_SEARCH_RESULTS_ERROR](localState);
+
+      expect(localState.searchCount).toBe(0);
+    });
+
+    it('does not decrement the search count to be negative', () => {
+      localState.searchCount = 0;
+
+      mutations[types.RECEIVE_SEARCH_RESULTS_ERROR](localState);
+
+      expect(localState.searchCount).toBe(0);
+    });
   });
 
   describe('REQUEST_PROJECTS', () => {
@@ -191,4 +223,41 @@ describe('mutations', () => {
       expect(localState.isLoadingProjects).toEqual(true);
     });
   });
+
+  describe('MINIMUM_QUERY_MESSAGE', () => {
+    beforeEach(() => {
+      localState.projectSearchResults = ['result'];
+      localState.messages.noResults = true;
+      localState.messages.searchError = true;
+      localState.messages.minimumQuery = false;
+      localState.searchCount = 1;
+
+      mutations[types.MINIMUM_QUERY_MESSAGE](localState);
+    });
+
+    it('clears the search results', () => {
+      expect(localState.projectSearchResults).toEqual([]);
+      expect(localState.messages.noResults).toBe(false);
+    });
+
+    it('turns off the search error message', () => {
+      expect(localState.messages.searchError).toBe(false);
+    });
+
+    it('turns on the minimum length message', () => {
+      expect(localState.messages.minimumQuery).toBe(true);
+    });
+
+    it('decrements the search count by one', () => {
+      expect(localState.searchCount).toBe(0);
+    });
+
+    it('does not decrement the search count to be negative', () => {
+      localState.searchCount = 0;
+
+      mutations[types.MINIMUM_QUERY_MESSAGE](localState);
+
+      expect(localState.searchCount).toBe(0);
+    });
+  });
 });