diff options
author | 2018-08-22 16:40:17 +0300 | |
---|---|---|
committer | 2018-08-22 16:41:01 +0300 | |
commit | dedbee314f6e25a22df38dc3e161678b1912c9a4 (patch) | |
tree | 9cb330a97371da31d4e821931fc408f4c9b47c1b /workflow-designer-ui/src/main | |
parent | 26103fb6434f652e98cb8943d9124a29a9f7c5d3 (diff) |
connected seatch to wf catalog
Issue-ID: SDC-1671
Change-Id: I61972b9715141cbf7a8a00d4d0d5e1a4b5c40555
Signed-off-by: Yarin Dekel <yarind@amdocs.com>
Diffstat (limited to 'workflow-designer-ui/src/main')
7 files changed, 80 insertions, 29 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 8ff33bd8..dbbdbb1d 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 @@ -17,7 +17,11 @@ import { connect } from 'react-redux'; import CatalogView from 'features/catalog/CatalogView'; -import { fetchWorkflow, resetWorkflow } from 'features/catalog/catalogActions'; +import { + fetchWorkflow, + resetWorkflow, + searchChangedAction +} from 'features/catalog/catalogActions'; import { showCustomModalAction } from 'shared/modal/modalWrapperActions'; import { NEW_WORKFLOW_MODAL } from 'shared/modal/modalWrapperComponents'; @@ -38,7 +42,9 @@ const mapDispatchToProps = dispatch => ({ customComponentName: NEW_WORKFLOW_MODAL, title: 'New Workflow' }) - ) + ), + searchInputChanged: searchValue => + dispatch(searchChangedAction(searchValue)) }); const Catalog = connect(mapStateToProps, mapDispatchToProps)(CatalogView); 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 2d8c8d7d..05a79e96 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 @@ -14,7 +14,7 @@ * limitations under the License. */ -import React from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import InfiniteScroll from 'shared/scroll/InfiniteScroll'; import Workflows from 'features/catalog/views/Workflows'; @@ -22,10 +22,16 @@ import AddWorkflow from 'features/catalog/views/AddWorkflow'; import Header from 'features/catalog/views/Header'; import Main from 'features/catalog/views/Main'; - import { NAME, ASC, DESC } from 'features/catalog/catalogConstants'; -class CatalogView extends React.Component { +class CatalogView extends Component { + constructor(props) { + super(props); + this.state = { + searchValue: '' + }; + } + componentDidMount() { const { clearWorkflow } = this.props; @@ -68,6 +74,15 @@ class CatalogView extends React.Component { history.push('/workflow/' + id + '/overview'); }; + searchChange = searchValue => { + const { searchInputChanged, catalog } = this.props; + this.setState({ searchValue: searchValue }); + searchInputChanged({ + ...catalog, + searchNameFilter: searchValue + }); + }; + render() { const { catalog, showNewWorkflowModal } = this.props; const { @@ -79,7 +94,10 @@ class CatalogView extends React.Component { return ( <div className="wf-catalog"> - <Header /> + <Header + searchChange={this.searchChange} + searchValue={this.state.searchValue} + /> <InfiniteScroll useWindow={false} loadMore={this.handleScroll} @@ -110,7 +128,8 @@ CatalogView.propTypes = { handleResetWorkflow: PropTypes.func, handleFetchWorkflow: PropTypes.func, showNewWorkflowModal: PropTypes.func, - clearWorkflow: PropTypes.func + clearWorkflow: PropTypes.func, + searchInputChanged: PropTypes.func }; CatalogView.defaultProps = { 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 dd89c183..b747e97c 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,9 +17,15 @@ 'use strict'; import { runSaga } from 'redux-saga'; -import { takeLatest } from 'redux-saga/effects'; +import { takeLatest, throttle } from 'redux-saga/effects'; -import { NAME, DESC, LIMIT } from 'features/catalog/catalogConstants'; +import { + NAME, + DESC, + LIMIT, + SEARCH_CHANGED, + SEARCH_BUFFER +} from 'features/catalog/catalogConstants'; import catalogApi from '../catalogApi'; import { fetchWorkflow, updateWorkflow } from 'features/catalog/catalogActions'; import catalogSaga, { fetchWorkflowSaga } from 'features/catalog/catalogSagas'; @@ -34,6 +40,9 @@ describe('Catalog Sagas', () => { takeLatest(fetchWorkflow, fetchWorkflowSaga) ); + expect(gen.next().value).toEqual( + throttle(SEARCH_BUFFER, SEARCH_CHANGED, fetchWorkflowSaga) + ); expect(gen.next().done).toBe(true); }); @@ -42,6 +51,7 @@ describe('Catalog Sagas', () => { [NAME]: DESC }; const offset = 0; + const searchNameFilter = undefined; const data = { paging: { offset, @@ -50,6 +60,7 @@ describe('Catalog Sagas', () => { hasMore: false, total: 2 }, + searchNameFilter: 'w', items: [ { id: 'c5b7ca1a0f7944bfa948b85b32c5f314', @@ -86,7 +97,8 @@ describe('Catalog Sagas', () => { expect(catalogApi.getWorkflows).toBeCalledWith( sort, LIMIT, - offset + LIMIT + offset + LIMIT, + searchNameFilter ); }); }); 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 13e43a07..eed8b9cd 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 @@ -14,9 +14,13 @@ * limitations under the License. */ -import { createActions } from 'redux-actions'; +import { createActions, createAction } from 'redux-actions'; -import { NAMESPACE, LIMIT } from 'features/catalog/catalogConstants'; +import { + NAMESPACE, + LIMIT, + SEARCH_CHANGED +} from 'features/catalog/catalogConstants'; export const { [NAMESPACE]: { fetchWorkflow, updateWorkflow, resetWorkflow } @@ -31,3 +35,8 @@ export const { RESET_WORKFLOW: undefined } }); + +export const searchChangedAction = createAction( + SEARCH_CHANGED, + payload => payload +); diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogApi.js b/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogApi.js index 622c5234..f5c9e218 100644 --- a/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogApi.js +++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogApi.js @@ -25,18 +25,17 @@ function baseUrl() { } const Api = { - getWorkflows: (sort, limit, offset) => { - const queryString = qs.stringify( - { - sort: Object.keys(sort).map(key => `${key}:${sort[key]}`), - limit, - offset - }, - { - indices: false, - addQueryPrefix: true - } - ); + getWorkflows: (sort, limit, offset, searchNameFilter) => { + const queryParams = { + sort: Object.keys(sort).map(key => `${key}:${sort[key]}`), + limit, + offset + }; + if (searchNameFilter) queryParams.searchNameFilter = searchNameFilter; + const queryString = qs.stringify(queryParams, { + indices: false, + addQueryPrefix: true + }); return RestfulAPIUtil.fetch(`${baseUrl()}${queryString}`); } 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 a945b834..1306937a 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 @@ -21,6 +21,8 @@ export const ASC = 'asc'; export const DESC = 'desc'; export const LIMIT = 20; +export const SEARCH_BUFFER = 1000; +export const SEARCH_CHANGED = `catalog/SEARCH_CHANGED`; export const FETCH_WORKFLOW = `${NAMESPACE}/FETCH_WORKFLOW`; export const UPDATE_WORKFLOW = `${NAMESPACE}/UPDATE_WORKFLOW`; 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 bf56c617..fc8d349f 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,24 +14,27 @@ * limitations under the License. */ -import { call, put, takeLatest } from 'redux-saga/effects'; +import { call, put, takeLatest, throttle } from 'redux-saga/effects'; import catalogApi from 'features/catalog/catalogApi'; import { fetchWorkflow, updateWorkflow } from 'features/catalog/catalogActions'; +import { + SEARCH_CHANGED, + SEARCH_BUFFER +} from 'features/catalog/catalogConstants'; const noOp = () => {}; export function* fetchWorkflowSaga({ payload }) { - const { sort, limit, offset } = payload; - + const { sort, limit, offset, searchNameFilter } = payload; try { const data = yield call( catalogApi.getWorkflows, sort, limit, - offset === undefined ? 0 : offset + limit + offset === undefined ? 0 : offset + limit, + searchNameFilter ); - yield put(updateWorkflow({ sort, ...data })); } catch (e) { noOp(); @@ -40,6 +43,7 @@ export function* fetchWorkflowSaga({ payload }) { function* catalogSaga() { yield takeLatest(fetchWorkflow, fetchWorkflowSaga); + yield throttle(SEARCH_BUFFER, SEARCH_CHANGED, fetchWorkflowSaga); } export default catalogSaga; |