debounce search input catalog

Issue-ID: SDC-1671
Change-Id: I5bb97e188bb42be1f51dabd49ae53d8a43f35d22
Signed-off-by: Yarin Dekel <yarind@amdocs.com>

6 files changed, 45 insertions, 26 deletions

diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/Catalog.js b/workflow-designer-ui/src/main/frontend/src/features/catalog/Catalog.js
index dbbdbb1d..6ac90687 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/catalog/Catalog.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/Catalog.js
@@ -32,8 +32,8 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-    handleFetchWorkflow: (sort, offset) =>
-        dispatch(fetchWorkflow(sort, offset)),
+    handleFetchWorkflow: (sort, offset, searchNameFilter) =>
+        dispatch(fetchWorkflow(sort, offset, searchNameFilter)),
     handleResetWorkflow: () => dispatch(resetWorkflow()),
     clearWorkflow: () => dispatch(clearWorkflowAction),
     showNewWorkflowModal: () =>
diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/CatalogView.jsx b/workflow-designer-ui/src/main/frontend/src/features/catalog/CatalogView.jsx
index 05a79e96..4fdcc786 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/catalog/CatalogView.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/CatalogView.jsx
@@ -50,11 +50,11 @@ class CatalogView extends Component {
             catalog: { sort }
         } = this.props;
 
-        const payload = { ...sort };
-
+        const payload = {
+            ...sort
+        };
         payload[NAME] = payload[NAME] === ASC ? DESC : ASC;
-
-        handleFetchWorkflow(payload);
+        handleFetchWorkflow(payload, undefined, this.state.searchValue);
     };
 
     handleScroll = () => {
@@ -65,8 +65,7 @@ class CatalogView extends Component {
             },
             handleFetchWorkflow
         } = this.props;
-
-        handleFetchWorkflow(sort, offset);
+        handleFetchWorkflow(sort, offset, this.state.searchValue);
     };
 
     goToOverviewPage = id => {
@@ -75,8 +74,12 @@ class CatalogView extends Component {
     };
 
     searchChange = searchValue => {
-        const { searchInputChanged, catalog } = this.props;
         this.setState({ searchValue: searchValue });
+        this.dispatchChange(searchValue);
+    };
+
+    dispatchChange = searchValue => {
+        const { searchInputChanged, catalog } = this.props;
         searchInputChanged({
             ...catalog,
             searchNameFilter: searchValue
diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSagas-test.js b/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSagas-test.js
index b747e97c..99a56508 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSagas-test.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSagas-test.js
@@ -17,18 +17,20 @@
 'use strict';
 
 import { runSaga } from 'redux-saga';
-import { takeLatest, throttle } from 'redux-saga/effects';
+import { takeLatest } from 'redux-saga/effects';
 
 import {
     NAME,
     DESC,
     LIMIT,
-    SEARCH_CHANGED,
-    SEARCH_BUFFER
+    SEARCH_CHANGED
 } from 'features/catalog/catalogConstants';
 import catalogApi from '../catalogApi';
 import { fetchWorkflow, updateWorkflow } from 'features/catalog/catalogActions';
-import catalogSaga, { fetchWorkflowSaga } from 'features/catalog/catalogSagas';
+import catalogSaga, {
+    fetchWorkflowSaga,
+    debounceSearchChanged
+} from 'features/catalog/catalogSagas';
 
 jest.mock('../catalogApi');
 
@@ -39,9 +41,8 @@ describe('Catalog Sagas', () => {
         expect(gen.next().value).toEqual(
             takeLatest(fetchWorkflow, fetchWorkflowSaga)
         );
-
         expect(gen.next().value).toEqual(
-            throttle(SEARCH_BUFFER, SEARCH_CHANGED, fetchWorkflowSaga)
+            takeLatest(SEARCH_CHANGED, debounceSearchChanged)
         );
         expect(gen.next().done).toBe(true);
     });
diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogActions.js b/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogActions.js
index eed8b9cd..6262da0d 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogActions.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogActions.js
@@ -19,23 +19,29 @@ import { createActions, createAction } from 'redux-actions';
 import {
     NAMESPACE,
     LIMIT,
-    SEARCH_CHANGED
+    SEARCH_CHANGED,
+    FETCH_WORKFLOW
 } from 'features/catalog/catalogConstants';
 
 export const {
-    [NAMESPACE]: { fetchWorkflow, updateWorkflow, resetWorkflow }
+    [NAMESPACE]: { updateWorkflow, resetWorkflow }
 } = createActions({
     [NAMESPACE]: {
-        FETCH_WORKFLOW: (sort, offset) => ({
-            sort,
-            limit: LIMIT,
-            offset
-        }),
         UPDATE_WORKFLOW: undefined,
         RESET_WORKFLOW: undefined
     }
 });
 
+export const fetchWorkflow = createAction(
+    FETCH_WORKFLOW,
+    (sort, offset, searchNameFilter) => ({
+        sort,
+        limit: LIMIT,
+        offset,
+        searchNameFilter
+    })
+);
+
 export const searchChangedAction = createAction(
     SEARCH_CHANGED,
     payload => payload
diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogConstants.js b/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogConstants.js
index 1306937a..44bdc6bb 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogConstants.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogConstants.js
@@ -20,7 +20,9 @@ export const NAME = 'name';
 export const ASC = 'asc';
 export const DESC = 'desc';
 
-export const LIMIT = 20;
+//Limit = max tiles in a standard screen
+export const LIMIT = 31;
+
 export const SEARCH_BUFFER = 1000;
 export const SEARCH_CHANGED = `catalog/SEARCH_CHANGED`;
 
diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSagas.js b/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSagas.js
index fc8d349f..f1770560 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSagas.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSagas.js
@@ -14,12 +14,14 @@
 * limitations under the License.
 */
 
-import { call, put, takeLatest, throttle } from 'redux-saga/effects';
+import { call, put, takeLatest } from 'redux-saga/effects';
+import { delay } from 'redux-saga';
 
 import catalogApi from 'features/catalog/catalogApi';
 import { fetchWorkflow, updateWorkflow } from 'features/catalog/catalogActions';
 import {
     SEARCH_CHANGED,
+    LIMIT,
     SEARCH_BUFFER
 } from 'features/catalog/catalogConstants';
 
@@ -31,7 +33,7 @@ export function* fetchWorkflowSaga({ payload }) {
         const data = yield call(
             catalogApi.getWorkflows,
             sort,
-            limit,
+            LIMIT,
             offset === undefined ? 0 : offset + limit,
             searchNameFilter
         );
@@ -41,9 +43,14 @@ export function* fetchWorkflowSaga({ payload }) {
     }
 }
 
+export function* debounceSearchChanged({ payload }) {
+    yield call(delay, SEARCH_BUFFER);
+    yield call(fetchWorkflowSaga, { payload });
+}
+
 function* catalogSaga() {
     yield takeLatest(fetchWorkflow, fetchWorkflowSaga);
-    yield throttle(SEARCH_BUFFER, SEARCH_CHANGED, fetchWorkflowSaga);
+    yield takeLatest(SEARCH_CHANGED, debounceSearchChanged);
 }
 
 export default catalogSaga;