From 1481d86eb4e3c8b4a8a9bef4f31f20227dea8137 Mon Sep 17 00:00:00 2001 From: Dan Nguyen Date: Wed, 26 Feb 2020 13:18:17 +0700 Subject: [PATCH] fix: #178 fix ui and bug admin portal --- .../src/components/Pagination/index.tsx | 1 - .../src/actions/__tests__/admin-apps.ts | 2 +- .../marketplace/src/actions/admin-apps.ts | 9 +- .../__snapshots__/admin-apps.tsx.snap | 474 +++++++++--------- .../admin-dev-management.tsx.snap | 25 +- .../src/components/pages/admin-apps.tsx | 96 ++-- .../components/pages/admin-dev-management.tsx | 32 +- .../admin-dev-management-filter-form.tsx.snap | 85 ++-- .../ui/admin-dev-management-filter-form.tsx | 51 +- .../src/sagas/__tests__/admin-apps.ts | 10 +- packages/marketplace/src/sagas/admin-apps.ts | 6 +- .../src/styles/pages/admin-apps.scss | 8 +- .../styles/pages/admin-dev-management.scss | 13 +- .../src/tests/badges/badge-branches.svg | 2 +- .../src/tests/badges/badge-functions.svg | 2 +- .../src/tests/badges/badge-lines.svg | 2 +- .../src/tests/badges/badge-statements.svg | 2 +- .../marketplace/src/utils/route-dispatcher.ts | 2 +- 18 files changed, 430 insertions(+), 392 deletions(-) diff --git a/packages/elements/src/components/Pagination/index.tsx b/packages/elements/src/components/Pagination/index.tsx index cf25e05d8e..e31cdbc3a9 100644 --- a/packages/elements/src/components/Pagination/index.tsx +++ b/packages/elements/src/components/Pagination/index.tsx @@ -30,7 +30,6 @@ export const generatePagination = (currentPage: number, pageCount: number) => { export const Pagination = ({ onChange, pageNumber = 1, pageSize = 1, totalCount = 1 }: PaginationProps) => { const maxPage = Math.ceil(totalCount / pageSize) - if (maxPage < 2) { return null } diff --git a/packages/marketplace/src/actions/__tests__/admin-apps.ts b/packages/marketplace/src/actions/__tests__/admin-apps.ts index 178a9a89da..e2795facd7 100644 --- a/packages/marketplace/src/actions/__tests__/admin-apps.ts +++ b/packages/marketplace/src/actions/__tests__/admin-apps.ts @@ -10,7 +10,7 @@ describe('adminApps actions', () => { it('should create a adminAppsRequestData action', () => { expect(adminAppsRequestData.type).toEqual(ActionTypes.ADMIN_APPS_REQUEST_DATA) - expect(adminAppsRequestData().data).toEqual(undefined) + expect(adminAppsRequestData({ pageNumber: 1 }).data).toEqual({ pageNumber: 1 }) }) it('should create a adminAppsRequestFailure action', () => { diff --git a/packages/marketplace/src/actions/admin-apps.ts b/packages/marketplace/src/actions/admin-apps.ts index 677b2a9888..8ab1e59021 100644 --- a/packages/marketplace/src/actions/admin-apps.ts +++ b/packages/marketplace/src/actions/admin-apps.ts @@ -8,7 +8,14 @@ export type AdminAppsFeaturedParams = { isFeatured: boolean } -export const adminAppsRequestData = actionCreator(ActionTypes.ADMIN_APPS_REQUEST_DATA) +export type AdminAppsParams = { + pageNumber?: number + appName?: string + developerName?: string + companyName?: string +} + +export const adminAppsRequestData = actionCreator(ActionTypes.ADMIN_APPS_REQUEST_DATA) export const adminAppsReceiveData = actionCreator(ActionTypes.ADMIN_APPS_RECEIVE_DATA) export const adminAppsRequestFailure = actionCreator(ActionTypes.ADMIN_APPS_REQUEST_FAILURE) export const adminAppsRequestFeatured = actionCreator(ActionTypes.ADMIN_APPS_REQUEST_FEATURED) diff --git a/packages/marketplace/src/components/pages/__tests__/__snapshots__/admin-apps.tsx.snap b/packages/marketplace/src/components/pages/__tests__/__snapshots__/admin-apps.tsx.snap index b3906d0ee2..82a0e9c973 100644 --- a/packages/marketplace/src/components/pages/__tests__/__snapshots__/admin-apps.tsx.snap +++ b/packages/marketplace/src/components/pages/__tests__/__snapshots__/admin-apps.tsx.snap @@ -3,51 +3,53 @@ exports[`AdminApps renderForm should return correctly 1`] = `
- - Admin Apps Filter Form - - - Filter the result by App, Developer and Company - - + Admin Apps Filter Form - + Filter the result by App, Developer and Company - - - - - Search + + + + + - - Refresh + + + + + + Search + + + Refresh + @@ -60,12 +62,14 @@ exports[`AdminApps should match a snapshot when LOADING false 1`] = `
- Admin Apps + App Management
-
- +
+
+ +
- Admin Apps + App Management
-
- +
+
+ +
- + + + App Management + - + filterValues={Object {}} + onSearch={[MockFunction]} + /> + - + () => { const FeaturedCell = ({ row, cell }) => { @@ -99,8 +101,8 @@ export const generateColumns = ({ onChangeFeatured, setDeleteModal, deleteModal } export const refreshForm = (onSubmit, resetForm) => () => { - onSubmit({ appName: '', companyName: '', developerName: '' }) resetForm() + onSubmit({ appName: '', companyName: '', developerName: '' }) } export const renderForm = onSubmit => ({ values, resetForm }) => { @@ -108,27 +110,29 @@ export const renderForm = onSubmit => ({ values, resetForm }) => { return ( - Admin Apps Filter Form - Filter the result by App, Developer and Company - - - - - - - - - - - - - - - + + Admin Apps Filter Form + Filter the result by App, Developer and Company + + + + + + + + + + + + + + + + ) @@ -145,10 +149,21 @@ export type FormValues = { } export const handleOnSubmit = (history, pageNumber: number) => (formValues: FormValues) => { - const queryString = qs.stringify({ ...formValues, pageNumber }) + const submitValues = Object.keys(formValues).reduce((newObj, key) => { + const value = formValues[key] + if (value) { + newObj[key] = value + } + return newObj + }, {}) + const queryString = qs.stringify({ ...submitValues, pageNumber }) history.push(`apps?${queryString}`) } +export const handleChangePageNumber = history => (pageNumber: number) => { + history.push(addQuery({ pageNumber })) +} + export type AdminAppsProps = DispatchProps & StateProps export const AdminApps: React.FunctionComponent = ({ @@ -157,11 +172,11 @@ export const AdminApps: React.FunctionComponent = ({ history, location, }) => { + const queryParams = qs.parse(location.search) as any + const pageNumber = parseInt(queryParams.pageNumber, 10) || 1 const unfetched = !adminAppsState.adminAppsData const { loading } = adminAppsState const { data = [], totalCount, pageSize } = adminAppsState.adminAppsData || {} - const queryParams = qs.parse(location.search) as any - const [pageNumber, setPageNumber] = React.useState(queryParams.pageNumber || 1) const [deleteModal, setDeleteModal] = React.useState({ visible: false, appId: '', appName: '', developerName: '' }) const columns = React.useMemo(generateColumns({ onChangeFeatured, setDeleteModal, deleteModal }), [data]) @@ -171,27 +186,34 @@ export const AdminApps: React.FunctionComponent = ({ return ( - + {loading && (
)}
-

Admin Apps

+

App Management

{renderForm(handleOnSubmit(history, pageNumber))}
- {!loading && !data.length ? ( - - ) : ( -
- - - )} - - +
+ {!loading && !data.length ? ( + + ) : ( +
+
+ + )} + + + void @@ -110,7 +111,7 @@ export const AdminDevManagement: React.FC = ({ Unfortunately, there are no results that match your search criteria, please try again - + @@ -121,18 +122,19 @@ export const AdminDevManagement: React.FC = ({ return ( - -
- + +

App Management

+ +
- - - + + + - - -
+ + + Developer Management Filter Form + + + Filter the result by Name and Company + + - Developer Management Filter Form - - - Filter the result by Name and Company + - - - - - - + - - - + - -
-
- + + + + `; diff --git a/packages/marketplace/src/components/ui/admin-dev-management-filter-form.tsx b/packages/marketplace/src/components/ui/admin-dev-management-filter-form.tsx index f4dd1b1271..c0cdd9573c 100644 --- a/packages/marketplace/src/components/ui/admin-dev-management-filter-form.tsx +++ b/packages/marketplace/src/components/ui/admin-dev-management-filter-form.tsx @@ -4,16 +4,14 @@ import { Button, Grid, GridItem, - FlexContainerBasic, FormSection, FormHeading, FormSubHeading, - LevelRight, - FlexContainerResponsive, Formik, Form, + Content, } from '@reapit/elements' -import styles from '@/styles/pages/admin-dev-management.scss?mod' +import styles from '@/styles/pages/admin-apps.scss?mod' export interface AdminDevManagementFilterFormValues { name: string @@ -29,34 +27,29 @@ export const AdminDevManagementFilterForm: React.FC ( - - - onSearch(formValues)}> -
- - Developer Management Filter Form - Filter the result by Name and Company - - - - - - - - - - - - + onSearch(formValues)}> + + + + Developer Management Filter Form + Filter the result by Name and Company + + + + + + + + - - - -
-
-
+ + + + + + ) export default AdminDevManagementFilterForm diff --git a/packages/marketplace/src/sagas/__tests__/admin-apps.ts b/packages/marketplace/src/sagas/__tests__/admin-apps.ts index 22669ea5a6..630f9ff6d8 100644 --- a/packages/marketplace/src/sagas/__tests__/admin-apps.ts +++ b/packages/marketplace/src/sagas/__tests__/admin-apps.ts @@ -19,11 +19,17 @@ import api from '../api' jest.mock('@reapit/elements') +const params = { + data: { + pageNumber: 1, + }, +} + describe('adminAppsFetch', () => { - const gen = cloneableGenerator(adminAppsFetch)() + const gen = cloneableGenerator(adminAppsFetch)(params) expect(gen.next().value).toEqual( call(api.fetchAdminApps, { - params: {}, + params: params.data, }), ) diff --git a/packages/marketplace/src/sagas/admin-apps.ts b/packages/marketplace/src/sagas/admin-apps.ts index 91e1079c69..bba023b06b 100644 --- a/packages/marketplace/src/sagas/admin-apps.ts +++ b/packages/marketplace/src/sagas/admin-apps.ts @@ -1,5 +1,4 @@ import { put, fork, takeLatest, all, call, select } from '@redux-saga/core/effects' -import qs from 'query-string' import ActionTypes from '../constants/action-types' import { errorThrownServer } from '../actions/error' import errorMessages from '../constants/error-messages' @@ -17,10 +16,9 @@ import { AppDetailModel } from '@reapit/foundations-ts-definitions' import api from './api' import { logger } from 'logger' -export const adminAppsFetch = function*() { +export const adminAppsFetch = function*({ data }) { try { - const queryParams = qs.parse(window.location.search) - const response = yield call(api.fetchAdminApps, { params: queryParams }) + const response = yield call(api.fetchAdminApps, { params: data }) yield put(adminAppsReceiveData(response)) } catch (err) { logger(err) diff --git a/packages/marketplace/src/styles/pages/admin-apps.scss b/packages/marketplace/src/styles/pages/admin-apps.scss index d11913c405..7f0d71e7e7 100644 --- a/packages/marketplace/src/styles/pages/admin-apps.scss +++ b/packages/marketplace/src/styles/pages/admin-apps.scss @@ -3,6 +3,10 @@ margin-top: 1rem; } -.filterBlock { - min-width: 300px; +.contentBlock { + margin: 0 auto; + width: 100%; + @media screen and (min-width: 1025px) { + width: 70%; + } } diff --git a/packages/marketplace/src/styles/pages/admin-dev-management.scss b/packages/marketplace/src/styles/pages/admin-dev-management.scss index 4ddcf7b0db..d98a2db54b 100644 --- a/packages/marketplace/src/styles/pages/admin-dev-management.scss +++ b/packages/marketplace/src/styles/pages/admin-dev-management.scss @@ -1,8 +1,7 @@ -.mx0 { - margin-left: 0; - margin-right: 0; -} - -.textCenter { - text-align: center; +.contentBlock { + margin: 0 auto; + max-width: 100%; + @media screen and (min-width: 1025px) { + max-width: 70%; + } } diff --git a/packages/marketplace/src/tests/badges/badge-branches.svg b/packages/marketplace/src/tests/badges/badge-branches.svg index 3b6e3389d0..d85cc97d9f 100644 --- a/packages/marketplace/src/tests/badges/badge-branches.svg +++ b/packages/marketplace/src/tests/badges/badge-branches.svg @@ -1 +1 @@ - Coverage:branchesCoverage:branches71.27%71.27% \ No newline at end of file + Coverage:branchesCoverage:branches71.27%71.27% diff --git a/packages/marketplace/src/tests/badges/badge-functions.svg b/packages/marketplace/src/tests/badges/badge-functions.svg index 8d4fa62df5..7a92607434 100644 --- a/packages/marketplace/src/tests/badges/badge-functions.svg +++ b/packages/marketplace/src/tests/badges/badge-functions.svg @@ -1 +1 @@ - Coverage:functionsCoverage:functions73.91%73.91% \ No newline at end of file + Coverage:functionsCoverage:functions73.91%73.91% diff --git a/packages/marketplace/src/tests/badges/badge-lines.svg b/packages/marketplace/src/tests/badges/badge-lines.svg index 6d5e3f10f5..e97de4fbc1 100644 --- a/packages/marketplace/src/tests/badges/badge-lines.svg +++ b/packages/marketplace/src/tests/badges/badge-lines.svg @@ -1 +1 @@ - Coverage:linesCoverage:lines90.4%90.4% \ No newline at end of file + Coverage:linesCoverage:lines90.4%90.4% diff --git a/packages/marketplace/src/tests/badges/badge-statements.svg b/packages/marketplace/src/tests/badges/badge-statements.svg index 290fb53ec2..a306a63a89 100644 --- a/packages/marketplace/src/tests/badges/badge-statements.svg +++ b/packages/marketplace/src/tests/badges/badge-statements.svg @@ -1 +1 @@ - Coverage:statementsCoverage:statements89.59%89.59% \ No newline at end of file + Coverage:statementsCoverage:statements89.59%89.59% diff --git a/packages/marketplace/src/utils/route-dispatcher.ts b/packages/marketplace/src/utils/route-dispatcher.ts index bdd792f9d0..84b77c11ba 100644 --- a/packages/marketplace/src/utils/route-dispatcher.ts +++ b/packages/marketplace/src/utils/route-dispatcher.ts @@ -87,7 +87,7 @@ const routeDispatcher = async (route: RouteValue, params?: StringMap, search?: s store.dispatch(submitAppRequestData()) break case Routes.ADMIN_APPS: - store.dispatch(adminAppsRequestData()) + store.dispatch(adminAppsRequestData(getParamsFromPath(search || ''))) break case Routes.SETTINGS: store.dispatch(requestDeveloperData())