aboutsummaryrefslogtreecommitdiffstats
path: root/workflow-designer-ui
diff options
context:
space:
mode:
authorYarin Dekel <yarind@amdocs.com>2018-08-26 12:01:16 +0300
committerYarin Dekel <yarind@amdocs.com>2018-08-26 12:01:24 +0300
commit63cf9d516fc1dd77c339d188fa9852bb6a42f525 (patch)
tree0003d8d62bb9734219c7433485f8e81133932797 /workflow-designer-ui
parentcdf83fb1b37bc1fd2b7794ec01718deba216c0b8 (diff)
debounce search input catalog
Issue-ID: SDC-1671 Change-Id: I5bb97e188bb42be1f51dabd49ae53d8a43f35d22 Signed-off-by: Yarin Dekel <yarind@amdocs.com>
Diffstat (limited to 'workflow-designer-ui')
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/catalog/Catalog.js4
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/catalog/CatalogView.jsx17
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSagas-test.js13
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/catalog/catalogActions.js20
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/catalog/catalogConstants.js4
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSagas.js13
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;