Merge "Refactor UI catalog page, Fix pagination"

14 files changed, 258 insertions, 236 deletions

diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/Catalog.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/Catalog.js
index 503423f5..5eeaaa23 100644
--- a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/Catalog.js
+++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/Catalog.js
@@ -17,21 +17,19 @@
 import { connect } from 'react-redux';
 
 import CatalogView from 'features/catalog/CatalogView';
-import { sort, scroll } from 'features/catalog/catalogActions';
-import { getSort, getWorkflows } from 'features/catalog/catalogSelectors';
+import { fetchWorkflow, resetWorkflow } from 'features/catalog/catalogActions';
 
 import { showCustomModalAction } from 'shared/modal/modalWrapperActions';
 import { NEW_WORKFLOW_MODAL } from 'shared/modal/modalWrapperComponents';
 import { clearWorkflowAction } from 'features/workflow/workflowConstants';
 
 const mapStateToProps = state => ({
-    sort: getSort(state),
-    workflows: getWorkflows(state)
+    catalog: state.catalog
 });
 
 const mapDispatchToProps = dispatch => ({
-    handleSort: payload => dispatch(sort(payload)),
-    handleScroll: (page, sort) => dispatch(scroll(page, sort)),
+    handleFetchWorkflow: (sort, page) => dispatch(fetchWorkflow(sort, page)),
+    handleResetWorkflow: () => dispatch(resetWorkflow()),
     clearWorkflow: () => dispatch(clearWorkflowAction),
     showNewWorkflowModal: () =>
         dispatch(
diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/CatalogView.jsx b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/CatalogView.jsx
index 0af791df..99cee755 100644
--- a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/CatalogView.jsx
+++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/CatalogView.jsx
@@ -32,23 +32,32 @@ class CatalogView extends React.Component {
         clearWorkflow();
     }
 
+    componentWillUnmount() {
+        this.props.handleResetWorkflow();
+    }
+
     handleAlphabeticalOrderByClick = e => {
         e.preventDefault();
 
-        const { handleSort, sort } = this.props;
+        const {
+            handleFetchWorkflow,
+            catalog: { sort }
+        } = this.props;
 
         const payload = { ...sort };
 
         payload[NAME] = payload[NAME] === ASC ? DESC : ASC;
 
-        handleSort(payload);
+        handleFetchWorkflow(payload);
     };
 
     handleScroll = () => {
-        const { workflows, sort, handleScroll } = this.props;
-        const { page } = workflows;
+        const {
+            catalog: { page, sort },
+            handleFetchWorkflow
+        } = this.props;
 
-        handleScroll(page, sort);
+        handleFetchWorkflow(sort, page);
     };
 
     goToOverviewPage = id => {
@@ -57,14 +66,9 @@ class CatalogView extends React.Component {
     };
 
     render() {
-        const { workflows, sort, showNewWorkflowModal } = this.props;
-
+        const { catalog, showNewWorkflowModal } = this.props;
+        const { sort, hasMore, total, results } = catalog;
         const alphabeticalOrder = sort[NAME];
-        // TODO remove offset, fix hasMore, use size
-        const { total, results = [], /*size,*/ page, offset } = workflows;
-
-        // const hasMore = total === 0 || size * (page + 1) < total;
-        const hasMore = offset !== undefined ? offset < 0 : page < 0;
 
         return (
             <div className="wf-catalog">
@@ -81,7 +85,7 @@ class CatalogView extends React.Component {
                         <div className="main__content">
                             <AddWorkflow onClick={showNewWorkflowModal} />
                             <Workflows
-                                workflows={results}
+                                results={results}
                                 onWorkflowClick={this.goToOverviewPage}
                             />
                         </div>
@@ -94,18 +98,14 @@ class CatalogView extends React.Component {
 
 CatalogView.propTypes = {
     history: PropTypes.object,
-    workflows: PropTypes.object,
-    sort: PropTypes.object,
-    handleScroll: PropTypes.func,
-    handleSort: PropTypes.func,
+    catalog: PropTypes.object,
+    handleResetWorkflow: PropTypes.func,
+    handleFetchWorkflow: PropTypes.func,
     showNewWorkflowModal: PropTypes.func,
     clearWorkflow: PropTypes.func
 };
 
 CatalogView.defaultProps = {
-    workflows: {},
-    sort: {},
-    handleScroll: () => {},
     showNewWorkflowModal: () => {},
     clearWorkflow: () => {}
 };
diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogActions-test.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogActions-test.js
index 15a9c8c5..f49c2fdc 100644
--- a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogActions-test.js
+++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogActions-test.js
@@ -14,51 +14,57 @@
 * limitations under the License.
 */
 
+'use strict';
+
 import {
-    UPDATE,
-    SCROLL,
-    SORT,
-    LIMIT,
+    FETCH_WORKFLOW,
+    UPDATE_WORKFLOW,
+    RESET_WORKFLOW,
+    PAGE_SIZE,
     NAME,
     ASC
 } from 'features/catalog/catalogConstants';
-import { update, scroll, sort } from 'features/catalog/catalogActions';
+import {
+    fetchWorkflow,
+    updateWorkflow,
+    resetWorkflow
+} from 'features/catalog/catalogActions';
 
 describe('Catalog Actions', () => {
-    it('show have `update` action', () => {
-        expect(update()).toEqual({
-            type: UPDATE
-        });
-    });
+    it('should have `fetchWorkflow` action', () => {
+        const sort = { [NAME]: ASC };
+        const page = 0;
 
-    it('show have `scroll` action', () => {
-        const page = 1;
-        const sort = {};
-
-        const expected = {
-            type: SCROLL,
+        expect(fetchWorkflow(sort, page)).toEqual({
+            type: FETCH_WORKFLOW,
             payload: {
-                page,
                 sort,
-                size: LIMIT
+                size: PAGE_SIZE,
+                page
             }
-        };
-
-        expect(scroll(page, sort)).toEqual(expected);
+        });
     });
 
-    it('show have `sort` action', () => {
-        const sortPayload = {
-            [NAME]: ASC
-        };
-
-        const expected = {
-            type: SORT,
-            payload: {
-                sort: sortPayload
+    it('should have `updateWorkflow` action', () => {
+        const payload = {
+            results: [],
+            total: 0,
+            page: 0,
+            size: 0,
+            sort: {
+                name: 'asc'
             }
         };
 
-        expect(sort(sortPayload)).toEqual(expected);
+        expect(updateWorkflow(payload)).toEqual({
+            type: UPDATE_WORKFLOW,
+            payload
+        });
+    });
+
+    it('should have `resetWorkflow` action', () => {
+        expect(resetWorkflow()).toEqual({
+            type: RESET_WORKFLOW
+        });
     });
 });
diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogReducer-test.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogReducer-test.js
index cebddb35..c4f34e7f 100644
--- a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogReducer-test.js
+++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogReducer-test.js
@@ -16,37 +16,77 @@
 
 'use strict';
 
+import { NAME, ASC, DESC } from 'features/catalog/catalogConstants';
 import catalogReducer, { initialState } from 'features/catalog/catalogReducer';
-import { update } from 'features/catalog/catalogActions';
+import { updateWorkflow, resetWorkflow } from 'features/catalog/catalogActions';
 
 describe('Catalog Reducer', () => {
+    const state = {
+        hasMore: true,
+        results: [
+            {
+                id: '755eab7752374a2380544065b59b082d',
+                name: 'Workflow 1',
+                description: 'description description 1'
+            },
+            {
+                id: 'ef8159204dac4c10a85b29ec30b4bd56',
+                name: 'Workflow 2',
+                description: 'description description 2'
+            }
+        ],
+        total: 0,
+        sort: {
+            [NAME]: ASC
+        }
+    };
+    const sort = {
+        [NAME]: DESC
+    };
+    const page = 0;
+    const data = {
+        total: 20,
+        size: 100,
+        page,
+        sort,
+        results: [
+            {
+                id: '755eab7752374a2380544065b59b082d',
+                name: 'Workflow 11',
+                description: 'description description 11'
+            },
+            {
+                id: 'ef8159204dac4c10a85b29ec30b4bd56',
+                name: 'Workflow 22',
+                description: 'description description 22'
+            }
+        ]
+    };
+
     it('returns the initial state', () => {
         expect(catalogReducer(undefined, {})).toEqual(initialState);
     });
 
-    it('returns correct state for workflows update action', () => {
-        const payload = {
-            total: 2,
-            size: 100,
-            page: 0,
-            results: [
-                {
-                    id: '755eab7752374a2380544065b59b082d',
-                    name: 'Alfa',
-                    description: 'description description 1',
-                    category: null
-                },
-                {
-                    id: 'ef8159204dac4c10a85b29ec30b4bd56',
-                    name: 'Bravo',
-                    description: 'description description 2',
-                    category: null
-                }
-            ]
-        };
+    it('should replace results when page is first', () => {
+        expect(catalogReducer(state, updateWorkflow({ ...data }))).toEqual({
+            ...initialState,
+            ...data,
+            hasMore: data.results.length < data.total,
+            page,
+            sort
+        });
+    });
 
-        const action = update(payload);
+    it('should add results when page is not first', () => {
+        expect(
+            catalogReducer(state, updateWorkflow({ ...data, page: 1 })).results
+        ).toEqual(expect.arrayContaining([...data.results, ...state.results]));
+    });
 
-        expect(catalogReducer(initialState, action).workflows).toEqual(payload);
+    it('should reset state', () => {
+        expect(catalogReducer({ ...state, sort }, resetWorkflow())).toEqual({
+            ...initialState,
+            sort
+        });
     });
 });
diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSagas-test.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSagas-test.js
index f06d240f..cdea344c 100644
--- a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSagas-test.js
+++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSagas-test.js
@@ -16,6 +16,68 @@
 
 'use strict';
 
+import { runSaga } from 'redux-saga';
+import { takeLatest } from 'redux-saga/effects';
+
+import { NAME, DESC, PAGE_SIZE } from 'features/catalog/catalogConstants';
+import catalogApi from '../catalogApi';
+import { fetchWorkflow, updateWorkflow } from 'features/catalog/catalogActions';
+import catalogSaga, { fetchWorkflowSaga } from 'features/catalog/catalogSagas';
+
+jest.mock('../catalogApi');
+
 describe('Catalog Sagas', () => {
-    it('Write test', () => {});
+    it('should watch for `fetchWorkflow` action', () => {
+        const gen = catalogSaga();
+
+        expect(gen.next().value).toEqual(
+            takeLatest(fetchWorkflow, fetchWorkflowSaga)
+        );
+
+        expect(gen.next().done).toBe(true);
+    });
+
+    it('should get workflows and put `updateWorkflow` action', async () => {
+        const sort = {
+            [NAME]: DESC
+        };
+        const page = 0;
+        const data = {
+            total: 2,
+            size: 100,
+            page,
+            results: [
+                {
+                    id: '755eab7752374a2380544065b59b082d',
+                    name: 'Workflow 11',
+                    description: 'description description 11'
+                },
+                {
+                    id: 'ef8159204dac4c10a85b29ec30b4bd56',
+                    name: 'Workflow 22',
+                    description: 'description description 22'
+                }
+            ]
+        };
+        const dispatched = [];
+
+        catalogApi.getWorkflows.mockReturnValue(data);
+
+        await runSaga(
+            {
+                dispatch: action => dispatched.push(action)
+            },
+            fetchWorkflowSaga,
+            fetchWorkflow(sort, page)
+        ).done;
+
+        expect(dispatched).toEqual(
+            expect.arrayContaining([updateWorkflow({ ...data, sort })])
+        );
+        expect(catalogApi.getWorkflows).toBeCalledWith(
+            sort,
+            PAGE_SIZE,
+            page + 1
+        );
+    });
 });
diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSelectors-test.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSelectors-test.js
deleted file mode 100644
index 0aa73ce4..00000000
--- a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/__tests__/catalogSelectors-test.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
-* Copyright © 2018 European Support Limited
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*      http: //www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-
-'use strict';
-
-import {
-    getCatalog,
-    getWorkflows,
-    getSort,
-    getQueryString
-} from 'features/catalog/catalogSelectors';
-
-describe('Catalog Selectors', () => {
-    const catalog = {
-        page: -1,
-        workflows: {
-            total: 2,
-            limit: 0,
-            offset: 0,
-            results: [
-                {
-                    id: '755eab7752374a2380544065b59b082d',
-                    name: 'Alfa',
-                    description: 'description description 1',
-                    category: null
-                },
-                {
-                    id: 'ef8159204dac4c10a85b29ec30b4bd56',
-                    name: 'Bravo',
-                    description: 'description description 2',
-                    category: null
-                }
-            ]
-        },
-        sort: {
-            name: 'ASC',
-            date: 'DESC'
-        }
-    };
-
-    it('returns catalog', () => {
-        const state = { catalog };
-
-        expect(getCatalog(state)).toEqual(catalog);
-    });
-
-    it('returns catalog workflows', () => {
-        const state = { catalog };
-
-        expect(getWorkflows(state)).toEqual(catalog.workflows);
-    });
-
-    it('returns catalog sort', () => {
-        const state = { catalog };
-
-        expect(getSort(state)).toEqual(catalog.sort);
-    });
-});
diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogActions.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogActions.js
index 5be27887..89f53e4c 100644
--- a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogActions.js
+++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogActions.js
@@ -16,20 +16,18 @@
 
 import { createActions } from 'redux-actions';
 
-import { NAMESPACE, LIMIT } from 'features/catalog/catalogConstants';
+import { NAMESPACE, PAGE_SIZE } from 'features/catalog/catalogConstants';
 
 export const {
-    [NAMESPACE]: { update, sort, scroll }
+    [NAMESPACE]: { fetchWorkflow, updateWorkflow, resetWorkflow }
 } = createActions({
     [NAMESPACE]: {
-        UPDATE: undefined,
-        SORT: sort => ({
-            sort
+        FETCH_WORKFLOW: (sort, page) => ({
+            sort,
+            size: PAGE_SIZE,
+            page
         }),
-        SCROLL: (page, sort) => ({
-            page,
-            size: LIMIT,
-            sort
-        })
+        UPDATE_WORKFLOW: undefined,
+        RESET_WORKFLOW: undefined
     }
 });
diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogApi.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogApi.js
index 7273d215..79b271ce 100644
--- a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogApi.js
+++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogApi.js
@@ -14,6 +14,8 @@
 * limitations under the License.
 */
 
+import qs from 'qs';
+
 import RestfulAPIUtil from 'services/restAPIUtil';
 import Configuration from 'config/Configuration.js';
 
@@ -23,7 +25,19 @@ function baseUrl() {
 }
 
 const Api = {
-    getWorkflows: queryString => {
+    getWorkflows: (sort, size, page) => {
+        const queryString = qs.stringify(
+            {
+                sort: Object.keys(sort).map(key => `${key},${sort[key]}`),
+                size,
+                page
+            },
+            {
+                indices: false,
+                addQueryPrefix: true
+            }
+        );
+
         return RestfulAPIUtil.fetch(`${baseUrl()}${queryString}`);
     }
 };
diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogConstants.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogConstants.js
index 39f90dd0..3120ad73 100644
--- a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogConstants.js
+++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogConstants.js
@@ -15,11 +15,13 @@
 */
 
 export const NAMESPACE = 'catalog';
+
+export const NAME = 'name';
 export const ASC = 'asc';
 export const DESC = 'desc';
-export const NAME = 'name';
-export const LIMIT = 50;
 
-export const UPDATE = `${NAMESPACE}/UPDATE`;
-export const SORT = `${NAMESPACE}/SORT`;
-export const SCROLL = `${NAMESPACE}/SCROLL`;
+export const PAGE_SIZE = 1000;
+
+export const FETCH_WORKFLOW = `${NAMESPACE}/FETCH_WORKFLOW`;
+export const UPDATE_WORKFLOW = `${NAMESPACE}/UPDATE_WORKFLOW`;
+export const RESET_WORKFLOW = `${NAMESPACE}/RESET_WORKFLOW`;
diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogReducer.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogReducer.js
index 9816a96f..cbd7ab70 100644
--- a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogReducer.js
+++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogReducer.js
@@ -15,20 +15,16 @@
 */
 
 import {
-    LIMIT,
     NAME,
     ASC,
-    UPDATE,
-    SORT
+    UPDATE_WORKFLOW,
+    RESET_WORKFLOW
 } from 'features/catalog/catalogConstants';
 
 export const initialState = {
-    workflows: {
-        size: LIMIT,
-        page: -1,
-        results: [],
-        total: 0
-    },
+    hasMore: true,
+    results: [],
+    total: 0,
     sort: {
         [NAME]: ASC
     }
@@ -37,21 +33,23 @@ export const initialState = {
 const catalogReducer = (state = initialState, action) => {
     const { type, payload } = action;
 
+    let results;
+
     switch (type) {
-        case UPDATE:
-            return {
-                ...state,
-                workflows: {
-                    ...state.workflows,
-                    ...payload,
-                    results: [...state.workflows.results, ...payload.results]
-                }
-            };
+        case RESET_WORKFLOW:
+            return { ...initialState, sort: state.sort };
+
+        case UPDATE_WORKFLOW:
+            results =
+                payload.page === 0
+                    ? [...payload.results]
+                    : [...state.results, ...payload.results];
 
-        case SORT:
             return {
-                ...initialState,
-                sort: { ...payload.sort }
+                ...state,
+                ...payload,
+                results,
+                hasMore: results.length < payload.total
             };
 
         default:
diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSagas.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSagas.js
index ffc6d18d..8dcfc610 100644
--- a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSagas.js
+++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSagas.js
@@ -14,39 +14,32 @@
 * limitations under the License.
 */
 
-import qs from 'qs';
 import { call, put, takeLatest } from 'redux-saga/effects';
 
 import catalogApi from 'features/catalog/catalogApi';
-import { update, scroll } from 'features/catalog/catalogActions';
+import { fetchWorkflow, updateWorkflow } from 'features/catalog/catalogActions';
 
 const noOp = () => {};
 
-export function* fetchWorkflows({ payload }) {
-    const { page, size, sort } = payload;
+export function* fetchWorkflowSaga({ payload }) {
+    const { sort, size, page } = payload;
 
-    const queryString = qs.stringify(
-        {
-            sort: Object.keys(sort).map(key => `${key},${sort[key]}`),
+    try {
+        const data = yield call(
+            catalogApi.getWorkflows,
+            sort,
             size,
-            page: page + 1
-        },
-        {
-            indices: false,
-            addQueryPrefix: true
-        }
-    );
+            page === undefined ? 0 : page + 1
+        );
 
-    try {
-        const data = yield call(catalogApi.getWorkflows, queryString);
-        yield put(update(data));
+        yield put(updateWorkflow({ ...data, sort }));
     } catch (e) {
         noOp();
     }
 }
 
 function* catalogSaga() {
-    yield takeLatest(scroll, fetchWorkflows);
+    yield takeLatest(fetchWorkflow, fetchWorkflowSaga);
 }
 
 export default catalogSaga;
diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSelectors.js b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSelectors.js
deleted file mode 100644
index f4fe18e3..00000000
--- a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/catalogSelectors.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
-* Copyright © 2018 European Support Limited
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*      http: //www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-
-import { createSelector } from 'reselect';
-
-export const getCatalog = state => state.catalog;
-
-export const getWorkflows = createSelector(
-    getCatalog,
-    catalog => catalog.workflows
-);
-
-export const getSort = createSelector(getCatalog, catalog => catalog.sort);
diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Main.jsx b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Main.jsx
index abf58be2..5f60ebda 100644
--- a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Main.jsx
+++ b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Main.jsx
@@ -71,4 +71,8 @@ Main.propTypes = {
     children: PropTypes.node
 };
 
+Main.defaultProps = {
+    total: 0
+};
+
 export default Main;
diff --git a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Workflows.jsx b/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Workflows.jsx
index 42bd57c2..b120929a 100644
--- a/workflow/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Workflows.jsx
+++ b/workflow/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 = ({ workflows, onWorkflowClick }) =>
-    workflows.map((workflow, index) => (
+const Workflows = ({ results, onWorkflowClick }) =>
+    results.map((workflow, index) => (
         <Tile
             key={`workflow.${index}`}
             headerText="WF"
@@ -35,8 +35,12 @@ const Workflows = ({ workflows, onWorkflowClick }) =>
     ));
 
 Workflows.propTypes = {
-    workflows: PropTypes.array,
+    results: PropTypes.array,
     onWorkflowClick: PropTypes.func
 };
 
+Workflows.defaultProps = {
+    results: []
+};
+
 export default Workflows;