Fix pagination in UI

Issue-ID: SDC-1585
Change-Id: I95e69beabc1a7d8845c96763543ae3bea3395a63
Signed-off-by: Malek <malek.zoabi@amdocs.com>

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;