aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMalek <malek.zoabi@amdocs.com>2018-08-01 13:45:39 +0300
committerMalek <malek.zoabi@amdocs.com>2018-08-01 13:46:43 +0300
commit656f1610046c3aa1f53aaa240f25ad51f60bfc9b (patch)
tree288825a81dad3d555b154255f221c11494e2b969
parentc8f5d42556b0d8adae945571cbedba72051eadb2 (diff)
Fix pagination in UI
Issue-ID: SDC-1585 Change-Id: I95e69beabc1a7d8845c96763543ae3bea3395a63 Signed-off-by: Malek <malek.zoabi@amdocs.com>
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/catalog/Catalog.js3
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/catalog/CatalogView.jsx15
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogActions-test.js22
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogReducer-test.js90
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSagas-test.js41
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/catalog/catalogActions.js8
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/catalog/catalogApi.js8
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/catalog/catalogConstants.js2
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/catalog/catalogReducer.js20
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSagas.js8
-rw-r--r--workflow-designer-ui/src/main/frontend/src/features/catalog/views/Workflows.jsx8
11 files changed, 133 insertions, 92 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 5eeaaa23..8ff33bd8 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
@@ -28,7 +28,8 @@ const mapStateToProps = state => ({
});
const mapDispatchToProps = dispatch => ({
- handleFetchWorkflow: (sort, page) => dispatch(fetchWorkflow(sort, page)),
+ handleFetchWorkflow: (sort, offset) =>
+ dispatch(fetchWorkflow(sort, offset)),
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 99cee755..78824341 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
@@ -53,11 +53,14 @@ class CatalogView extends React.Component {
handleScroll = () => {
const {
- catalog: { page, sort },
+ catalog: {
+ paging: { offset },
+ sort
+ },
handleFetchWorkflow
} = this.props;
- handleFetchWorkflow(sort, page);
+ handleFetchWorkflow(sort, offset);
};
goToOverviewPage = id => {
@@ -67,7 +70,11 @@ class CatalogView extends React.Component {
render() {
const { catalog, showNewWorkflowModal } = this.props;
- const { sort, hasMore, total, results } = catalog;
+ const {
+ sort,
+ paging: { hasMore, total },
+ items
+ } = catalog;
const alphabeticalOrder = sort[NAME];
return (
@@ -85,7 +92,7 @@ class CatalogView extends React.Component {
<div className="main__content">
<AddWorkflow onClick={showNewWorkflowModal} />
<Workflows
- results={results}
+ items={items}
onWorkflowClick={this.goToOverviewPage}
/>
</div>
diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogActions-test.js b/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogActions-test.js
index f49c2fdc..43c38e0b 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogActions-test.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogActions-test.js
@@ -20,7 +20,7 @@ import {
FETCH_WORKFLOW,
UPDATE_WORKFLOW,
RESET_WORKFLOW,
- PAGE_SIZE,
+ LIMIT,
NAME,
ASC
} from 'features/catalog/catalogConstants';
@@ -33,24 +33,28 @@ import {
describe('Catalog Actions', () => {
it('should have `fetchWorkflow` action', () => {
const sort = { [NAME]: ASC };
- const page = 0;
+ const offset = 0;
- expect(fetchWorkflow(sort, page)).toEqual({
+ expect(fetchWorkflow(sort, offset)).toEqual({
type: FETCH_WORKFLOW,
payload: {
sort,
- size: PAGE_SIZE,
- page
+ limit: LIMIT,
+ offset
}
});
});
it('should have `updateWorkflow` action', () => {
const payload = {
- results: [],
- total: 0,
- page: 0,
- size: 0,
+ paging: {
+ offset: 1,
+ limit: 1,
+ count: 1,
+ hasMore: false,
+ total: 2
+ },
+ items: [],
sort: {
name: 'asc'
}
diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogReducer-test.js b/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogReducer-test.js
index c4f34e7f..5444bf94 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogReducer-test.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogReducer-test.js
@@ -22,43 +22,62 @@ import { updateWorkflow, resetWorkflow } from 'features/catalog/catalogActions';
describe('Catalog Reducer', () => {
const state = {
- hasMore: true,
- results: [
+ paging: {
+ offset: 1,
+ limit: 1,
+ count: 1,
+ hasMore: false,
+ total: 2
+ },
+ sort: {
+ [NAME]: ASC
+ },
+ items: [
{
- id: '755eab7752374a2380544065b59b082d',
- name: 'Workflow 1',
- description: 'description description 1'
+ id: 'c5b7ca1a0f7944bfa948b85b32c5f314',
+ name: 'Workflow_2',
+ description: null,
+ versionStates: ['DRAFT'],
+ versions: null
},
{
- id: 'ef8159204dac4c10a85b29ec30b4bd56',
- name: 'Workflow 2',
- description: 'description description 2'
+ id: '221336ef3f1645c686bc81899368ac27',
+ name: 'Workflow_1',
+ description: null,
+ versionStates: ['DRAFT'],
+ versions: null
}
- ],
- total: 0,
- sort: {
- [NAME]: ASC
- }
+ ]
};
+
const sort = {
[NAME]: DESC
};
- const page = 0;
- const data = {
- total: 20,
- size: 100,
- page,
- sort,
- results: [
+
+ const offset = 0;
+
+ const dataPayload = {
+ paging: {
+ offset,
+ limit: 10,
+ count: 2,
+ hasMore: false,
+ total: 2
+ },
+ items: [
{
- id: '755eab7752374a2380544065b59b082d',
- name: 'Workflow 11',
- description: 'description description 11'
+ id: 'c5b7ca1a0f7944bfa948b85b32c5f314',
+ name: 'Workflow_2',
+ description: null,
+ versionStates: ['DRAFT'],
+ versions: null
},
{
- id: 'ef8159204dac4c10a85b29ec30b4bd56',
- name: 'Workflow 22',
- description: 'description description 22'
+ id: '221336ef3f1645c686bc81899368ac27',
+ name: 'Workflow_1',
+ description: null,
+ versionStates: ['DRAFT'],
+ versions: null
}
]
};
@@ -68,19 +87,24 @@ describe('Catalog Reducer', () => {
});
it('should replace results when page is first', () => {
- expect(catalogReducer(state, updateWorkflow({ ...data }))).toEqual({
+ expect(
+ catalogReducer(state, updateWorkflow({ sort, ...dataPayload }))
+ ).toEqual({
...initialState,
- ...data,
- hasMore: data.results.length < data.total,
- page,
- sort
+ sort,
+ ...dataPayload
});
});
it('should add results when page is not first', () => {
expect(
- catalogReducer(state, updateWorkflow({ ...data, page: 1 })).results
- ).toEqual(expect.arrayContaining([...data.results, ...state.results]));
+ catalogReducer(
+ state,
+ updateWorkflow({ sort, ...{ ...dataPayload, offset: 2 } })
+ ).items
+ ).toEqual(
+ expect.arrayContaining([...dataPayload.items, ...state.items])
+ );
});
it('should reset state', () => {
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 cdea344c..dd89c183 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
@@ -19,7 +19,7 @@
import { runSaga } from 'redux-saga';
import { takeLatest } from 'redux-saga/effects';
-import { NAME, DESC, PAGE_SIZE } from 'features/catalog/catalogConstants';
+import { NAME, DESC, LIMIT } from 'features/catalog/catalogConstants';
import catalogApi from '../catalogApi';
import { fetchWorkflow, updateWorkflow } from 'features/catalog/catalogActions';
import catalogSaga, { fetchWorkflowSaga } from 'features/catalog/catalogSagas';
@@ -41,21 +41,29 @@ describe('Catalog Sagas', () => {
const sort = {
[NAME]: DESC
};
- const page = 0;
+ const offset = 0;
const data = {
- total: 2,
- size: 100,
- page,
- results: [
+ paging: {
+ offset,
+ limit: 10,
+ count: 2,
+ hasMore: false,
+ total: 2
+ },
+ items: [
{
- id: '755eab7752374a2380544065b59b082d',
- name: 'Workflow 11',
- description: 'description description 11'
+ id: 'c5b7ca1a0f7944bfa948b85b32c5f314',
+ name: 'Workflow_2',
+ description: null,
+ versionStates: ['DRAFT'],
+ versions: null
},
{
- id: 'ef8159204dac4c10a85b29ec30b4bd56',
- name: 'Workflow 22',
- description: 'description description 22'
+ id: '221336ef3f1645c686bc81899368ac27',
+ name: 'Workflow_1',
+ description: null,
+ versionStates: ['DRAFT'],
+ versions: null
}
]
};
@@ -68,16 +76,17 @@ describe('Catalog Sagas', () => {
dispatch: action => dispatched.push(action)
},
fetchWorkflowSaga,
- fetchWorkflow(sort, page)
+ fetchWorkflow(sort, offset)
).done;
expect(dispatched).toEqual(
- expect.arrayContaining([updateWorkflow({ ...data, sort })])
+ expect.arrayContaining([updateWorkflow({ sort, ...data })])
);
+
expect(catalogApi.getWorkflows).toBeCalledWith(
sort,
- PAGE_SIZE,
- page + 1
+ LIMIT,
+ offset + LIMIT
);
});
});
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 89f53e4c..13e43a07 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
@@ -16,16 +16,16 @@
import { createActions } from 'redux-actions';
-import { NAMESPACE, PAGE_SIZE } from 'features/catalog/catalogConstants';
+import { NAMESPACE, LIMIT } from 'features/catalog/catalogConstants';
export const {
[NAMESPACE]: { fetchWorkflow, updateWorkflow, resetWorkflow }
} = createActions({
[NAMESPACE]: {
- FETCH_WORKFLOW: (sort, page) => ({
+ FETCH_WORKFLOW: (sort, offset) => ({
sort,
- size: PAGE_SIZE,
- page
+ limit: LIMIT,
+ offset
}),
UPDATE_WORKFLOW: undefined,
RESET_WORKFLOW: undefined
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 79b271ce..622c5234 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,12 +25,12 @@ function baseUrl() {
}
const Api = {
- getWorkflows: (sort, size, page) => {
+ getWorkflows: (sort, limit, offset) => {
const queryString = qs.stringify(
{
- sort: Object.keys(sort).map(key => `${key},${sort[key]}`),
- size,
- page
+ sort: Object.keys(sort).map(key => `${key}:${sort[key]}`),
+ limit,
+ offset
},
{
indices: false,
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 3120ad73..8c2fe2ae 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,7 @@ export const NAME = 'name';
export const ASC = 'asc';
export const DESC = 'desc';
-export const PAGE_SIZE = 1000;
+export const LIMIT = 100;
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/catalogReducer.js b/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogReducer.js
index cbd7ab70..78d8e529 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogReducer.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogReducer.js
@@ -22,9 +22,10 @@ import {
} from 'features/catalog/catalogConstants';
export const initialState = {
- hasMore: true,
- results: [],
- total: 0,
+ paging: {
+ hasMore: true,
+ total: 0
+ },
sort: {
[NAME]: ASC
}
@@ -33,23 +34,18 @@ export const initialState = {
const catalogReducer = (state = initialState, action) => {
const { type, payload } = action;
- let results;
-
switch (type) {
case RESET_WORKFLOW:
return { ...initialState, sort: state.sort };
case UPDATE_WORKFLOW:
- results =
- payload.page === 0
- ? [...payload.results]
- : [...state.results, ...payload.results];
-
return {
...state,
...payload,
- results,
- hasMore: results.length < payload.total
+ items:
+ payload.paging.offset === 0
+ ? [...payload.items]
+ : [...state.items, ...payload.items]
};
default:
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 8dcfc610..bf56c617 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
@@ -22,17 +22,17 @@ import { fetchWorkflow, updateWorkflow } from 'features/catalog/catalogActions';
const noOp = () => {};
export function* fetchWorkflowSaga({ payload }) {
- const { sort, size, page } = payload;
+ const { sort, limit, offset } = payload;
try {
const data = yield call(
catalogApi.getWorkflows,
sort,
- size,
- page === undefined ? 0 : page + 1
+ limit,
+ offset === undefined ? 0 : offset + limit
);
- yield put(updateWorkflow({ ...data, sort }));
+ yield put(updateWorkflow({ sort, ...data }));
} catch (e) {
noOp();
}
diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Workflows.jsx b/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Workflows.jsx
index 83c226ff..a94e4541 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Workflows.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Workflows.jsx
@@ -19,8 +19,8 @@ import PropTypes from 'prop-types';
import { Tile, TileInfo, TileInfoLine } from 'sdc-ui/lib/react';
-const Workflows = ({ results, onWorkflowClick }) =>
- results.map((workflow, index) => (
+const Workflows = ({ items, onWorkflowClick }) =>
+ items.map((workflow, index) => (
<Tile
key={`workflow.${index}`}
dataTestId="wf-catalog-workflow-item"
@@ -36,12 +36,12 @@ const Workflows = ({ results, onWorkflowClick }) =>
));
Workflows.propTypes = {
- results: PropTypes.array,
+ items: PropTypes.array,
onWorkflowClick: PropTypes.func
};
Workflows.defaultProps = {
- results: []
+ items: []
};
export default Workflows;