From d4d3e37fe15b5fb3b586b9c8198d85415f3ece57 Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Fri, 15 Jan 2021 16:09:02 -0300 Subject: [PATCH 01/30] pagination Signed-off-by: luanecavalcantizup --- ui/src/core/providers/users.ts | 7 +++-- ui/src/modules/Users/Menu/MenuItem.tsx | 40 +++++++++++++++++--------- ui/src/modules/Users/Menu/index.tsx | 31 ++++---------------- ui/src/modules/Users/hooks.ts | 4 +-- ui/src/modules/Users/index.tsx | 36 +++++++++++++++++++---- ui/src/modules/Users/state/actions.ts | 15 ++++++++-- ui/src/modules/Users/styled.ts | 8 +++++- 7 files changed, 89 insertions(+), 52 deletions(-) diff --git a/ui/src/core/providers/users.ts b/ui/src/core/providers/users.ts index 53dd5680e0..8aab47c39c 100644 --- a/ui/src/core/providers/users.ts +++ b/ui/src/core/providers/users.ts @@ -26,10 +26,12 @@ const v1Endpoint = '/moove/users'; export interface UserFilter { name?: string; email?: string; + page?: number; } const initialUserFilter = { - email: '' + email: '', + page: 0 }; export const findAllWorkspaceUsers = ( @@ -48,10 +50,9 @@ export const findAllWorkspaceUsers = ( }; export const findAllUsers = (filter: UserFilter = initialUserFilter) => { - const defaultPage = 0; const params = new URLSearchParams({ size: `${DEFAULT_PAGE_SIZE}`, - page: `${defaultPage}` + page: `${filter.page ?? 0}` }); if (filter?.name) params.append('name', filter?.name); diff --git a/ui/src/modules/Users/Menu/MenuItem.tsx b/ui/src/modules/Users/Menu/MenuItem.tsx index a28b69303e..92cac1c9a1 100644 --- a/ui/src/modules/Users/Menu/MenuItem.tsx +++ b/ui/src/modules/Users/Menu/MenuItem.tsx @@ -17,24 +17,38 @@ import React from 'react'; import Text from 'core/components/Text'; import Styled from './styled'; +import { useHistory } from 'react-router-dom'; +import useQueryStrings from 'core/utils/query'; +import { addParam, delParam } from 'core/utils/path'; +import routes from 'core/constants/routes'; interface Props { id: string; name: string; - isActive: boolean; - onSelect: () => void; + email: string; } -const MenuItem = ({ id, name, isActive, onSelect }: Props) => ( - - - {name} - - -); +const MenuItem = ({ id, name, email }: Props) => { + const history = useHistory(); + const query = useQueryStrings(); + const isActive = (id: string) => query.getAll('user').includes(id); + + const toggleUser = (id: string) => + isActive(id) + ? delParam('user', routes.usersComparation, history, id) + : addParam('user', routes.usersComparation, history, id); + + return ( + toggleUser(email)} + isActive={isActive(email)} + data-testid={`menu-users-${id}`} + > + + {name} + + + ); +}; export default MenuItem; diff --git a/ui/src/modules/Users/Menu/index.tsx b/ui/src/modules/Users/Menu/index.tsx index 92d29d5915..7770e40357 100644 --- a/ui/src/modules/Users/Menu/index.tsx +++ b/ui/src/modules/Users/Menu/index.tsx @@ -14,27 +14,21 @@ * limitations under the License. */ -import React from 'react'; +import React, { ReactNode } from 'react'; import { useHistory } from 'react-router-dom'; -import map from 'lodash/map'; -import isEmpty from 'lodash/isEmpty'; import Text from 'core/components/Text'; import LabeledIcon from 'core/components/LabeledIcon'; import routes from 'core/constants/routes'; -import { UserPaginationItem } from '../interfaces/UserPagination'; -import MenuItem from './MenuItem'; import Styled from './styled'; -import Loader from './Loaders'; import useQueryStrings from 'core/utils/query'; import { addParam, delParam } from 'core/utils/path'; interface Props { - items: UserPaginationItem[]; onSearch: (name: string) => void; - isLoading: boolean; + children: ReactNode; } -const UserMenu = ({ items, onSearch, isLoading }: Props) => { +const UserMenu = ({ onSearch, children }: Props) => { const history = useHistory(); const query = useQueryStrings(); @@ -45,17 +39,6 @@ const UserMenu = ({ items, onSearch, isLoading }: Props) => { ? delParam('user', routes.usersComparation, history, id) : addParam('user', routes.usersComparation, history, id); - const renderUsers = () => - map(items, ({ email, name }: UserPaginationItem) => ( - toggleUser(email)} - /> - )); - return ( <> @@ -65,12 +48,8 @@ const UserMenu = ({ items, onSearch, isLoading }: Props) => { - - - - {isEmpty(items) && isLoading ? : renderUsers()} - - + + {children} ); }; diff --git a/ui/src/modules/Users/hooks.ts b/ui/src/modules/Users/hooks.ts index 7f417cfe5c..280aba6a1e 100644 --- a/ui/src/modules/Users/hooks.ts +++ b/ui/src/modules/Users/hooks.ts @@ -231,8 +231,8 @@ export const useUsers = (): [Function, Function, boolean] => { const { response, error, loading } = usersData; const getAll = useCallback( - (name: string) => { - getUsers({ name }); + (name: string, page: number) => { + getUsers({ name, page }); }, [getUsers] ); diff --git a/ui/src/modules/Users/index.tsx b/ui/src/modules/Users/index.tsx index 662fdb8fc9..db77cb0318 100644 --- a/ui/src/modules/Users/index.tsx +++ b/ui/src/modules/Users/index.tsx @@ -18,13 +18,17 @@ import React, { lazy, useState, useEffect, Suspense } from 'react'; import { Route, Switch } from 'react-router-dom'; import isEmpty from 'lodash/isEmpty'; import Page from 'core/components/Page'; -import { useGlobalState } from 'core/state/hooks'; import routes from 'core/constants/routes'; import { getProfileByKey } from 'core/utils/profile'; import getQueryStrings from 'core/utils/query'; import Menu from './Menu'; import { useUsers } from './hooks'; import Styled from './styled'; +import InfiniteScroll from 'core/components/InfiniteScroll'; +import { useDispatch, useGlobalState } from 'core/state/hooks'; +import { resetContentAction } from './state/actions'; +import map from 'lodash/map'; +import MenuItem from './Menu/MenuItem'; const UsersComparation = lazy(() => import('./Comparation')); @@ -38,13 +42,21 @@ const Users = () => { const { list } = useGlobalState(({ users }) => users); const query = getQueryStrings(); const users = query.getAll('user'); + const dispatch = useDispatch(); useEffect(() => { - getAll(name); + const page = 0; + dispatch(resetContentAction()); + getAll({ name, page }); + if (message === 'Deleted' || message === 'Created') { - getAll(name); + getAll({ name, page }); } - }, [name, getAll, message]); + }, [name, message, getAll, dispatch]); + + const loadMore = (page: number) => { + getAll({ name, page }); + }; const renderPlaceholder = () => ( { /> ); + const renderUsers = () => + map(list?.content, ({ email, name }) => ( + + )); + return ( - + + } + > + {renderUsers()} + + diff --git a/ui/src/modules/Users/state/actions.ts b/ui/src/modules/Users/state/actions.ts index bf285d48f0..2f0d07097f 100644 --- a/ui/src/modules/Users/state/actions.ts +++ b/ui/src/modules/Users/state/actions.ts @@ -19,7 +19,8 @@ import { User } from '../interfaces/User'; export enum ACTION_TYPES { loadedUsers = 'USERS/LOADED_USERS', - loadedUser = 'USERS/LOADED_USER' + loadedUser = 'USERS/LOADED_USER', + resetContent = 'USERS/RESET_CONTENT' } interface LoadedUsersActionType { @@ -43,5 +44,15 @@ export const LoadedUserAction = (payload: User): UsersActionTypes => ({ type: ACTION_TYPES.loadedUser, payload }); +interface ResetContentActionType { + type: typeof ACTION_TYPES.resetContent; +} + +export const resetContentAction = (): ResetContentActionType => ({ + type: ACTION_TYPES.resetContent +}); -export type UsersActionTypes = LoadedUsersActionType | LoadedUserActionType; +export type UsersActionTypes = + | LoadedUsersActionType + | LoadedUserActionType + | ResetContentActionType; diff --git a/ui/src/modules/Users/styled.ts b/ui/src/modules/Users/styled.ts index 44a8796d2e..0d4451a034 100644 --- a/ui/src/modules/Users/styled.ts +++ b/ui/src/modules/Users/styled.ts @@ -16,12 +16,18 @@ import styled from 'styled-components'; import Page from 'core/components/Page'; +import LoaderMenuComponent from './Menu/Loaders'; const ScrollableX = styled(Page.Content)` overflow-y: hidden; overflow-x: auto; `; +const LoaderMenu = styled(LoaderMenuComponent.List)` + margin-left: 16px; +`; + export default { - ScrollableX + ScrollableX, + LoaderMenu }; From 4c039c2be1b69f8903f0acbaf05a2858d09c1d52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=B4nica=20Ribeiro?= Date: Thu, 21 Jan 2021 13:02:20 -0300 Subject: [PATCH 02/30] Adding max pag length at users endpoint. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Mônica Ribeiro --- .../io/charlescd/moove/api/controller/V2UserController.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/moove/api/src/main/kotlin/io/charlescd/moove/api/controller/V2UserController.kt b/moove/api/src/main/kotlin/io/charlescd/moove/api/controller/V2UserController.kt index 0e8275dc6b..7d38ac00bc 100644 --- a/moove/api/src/main/kotlin/io/charlescd/moove/api/controller/V2UserController.kt +++ b/moove/api/src/main/kotlin/io/charlescd/moove/api/controller/V2UserController.kt @@ -58,7 +58,7 @@ class V2UserController( @RequestHeader(value = "Authorization") authorization: String, @RequestParam("name", required = false) name: String?, @RequestParam("email", required = false) email: String?, - pageable: PageRequest + @Valid pageable: PageRequest ): ResourcePageResponse { return this.findAllUsersInteractor.execute(name, email, authorization, pageable) } From aa356c90ee3576dae4c3066c1fa842769bfe436b Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Tue, 26 Jan 2021 13:53:25 -0300 Subject: [PATCH 03/30] adjust space between icon and text in list item Signed-off-by: luanecavalcantizup --- ui/src/core/components/LabeledIcon/index.tsx | 2 +- ui/src/modules/Account/Menu/MenuItem.tsx | 2 +- ui/src/modules/Groups/Menu/MenuItem.tsx | 2 +- ui/src/modules/Hypotheses/Menu/MenuItem.tsx | 6 +----- ui/src/modules/Metrics/Menu/MenuItem.tsx | 2 +- ui/src/modules/Modules/Menu/MenuItem.tsx | 6 +----- ui/src/modules/Settings/Menu/MenuItem.tsx | 2 +- ui/src/modules/Workspaces/Menu/MenuItem.tsx | 2 +- 8 files changed, 8 insertions(+), 16 deletions(-) diff --git a/ui/src/core/components/LabeledIcon/index.tsx b/ui/src/core/components/LabeledIcon/index.tsx index 919969f00b..7d895859f2 100644 --- a/ui/src/core/components/LabeledIcon/index.tsx +++ b/ui/src/core/components/LabeledIcon/index.tsx @@ -34,7 +34,7 @@ const LabeledIcon = ({ className, size = '15px', isActive, - marginContent = '5px', + marginContent = '8px', onClick }: Props) => { return ( diff --git a/ui/src/modules/Account/Menu/MenuItem.tsx b/ui/src/modules/Account/Menu/MenuItem.tsx index 8aa27fdcb5..8e18b69622 100644 --- a/ui/src/modules/Account/Menu/MenuItem.tsx +++ b/ui/src/modules/Account/Menu/MenuItem.tsx @@ -39,7 +39,7 @@ const MenuItem = ({ id, icon, name, path }: Props) => { isActive={isActive(id)} data-testid={`menu-${name}`} > - + {name} diff --git a/ui/src/modules/Groups/Menu/MenuItem.tsx b/ui/src/modules/Groups/Menu/MenuItem.tsx index c143e8f5de..a4e6244d5e 100644 --- a/ui/src/modules/Groups/Menu/MenuItem.tsx +++ b/ui/src/modules/Groups/Menu/MenuItem.tsx @@ -27,7 +27,7 @@ interface Props { const MenuItem = ({ id, name, onSelect, isActive }: Props) => ( onSelect(id)} isActive={isActive}> - + {name} diff --git a/ui/src/modules/Hypotheses/Menu/MenuItem.tsx b/ui/src/modules/Hypotheses/Menu/MenuItem.tsx index e794ca3533..6a982fda15 100644 --- a/ui/src/modules/Hypotheses/Menu/MenuItem.tsx +++ b/ui/src/modules/Hypotheses/Menu/MenuItem.tsx @@ -36,11 +36,7 @@ const MenuItem = ({ id, name, onClick }: Props) => { return ( onClick()} isActive={isActive}> - + {name} diff --git a/ui/src/modules/Metrics/Menu/MenuItem.tsx b/ui/src/modules/Metrics/Menu/MenuItem.tsx index 5b35a05f09..eb8b18ed2c 100644 --- a/ui/src/modules/Metrics/Menu/MenuItem.tsx +++ b/ui/src/modules/Metrics/Menu/MenuItem.tsx @@ -33,7 +33,7 @@ const MenuItem = ({ route, id, name }: Props) => { return ( history.push(route)} isActive={isActive}> - + {name} diff --git a/ui/src/modules/Modules/Menu/MenuItem.tsx b/ui/src/modules/Modules/Menu/MenuItem.tsx index 0d4adc92e0..a5f0c2cf08 100644 --- a/ui/src/modules/Modules/Menu/MenuItem.tsx +++ b/ui/src/modules/Modules/Menu/MenuItem.tsx @@ -46,11 +46,7 @@ const MenuItem = ({ id, name }: Props) => { return ( onMenuClick()} isActive={isActive()}> - + {moduleFormatterName(name)} diff --git a/ui/src/modules/Settings/Menu/MenuItem.tsx b/ui/src/modules/Settings/Menu/MenuItem.tsx index d871fbbc3c..e874fe3ef5 100644 --- a/ui/src/modules/Settings/Menu/MenuItem.tsx +++ b/ui/src/modules/Settings/Menu/MenuItem.tsx @@ -39,7 +39,7 @@ const MenuItem = ({ id, icon, name, path }: Props) => { isActive={isActive(id)} data-testid={`menu-item-link-${name}`} > - + {name} diff --git a/ui/src/modules/Workspaces/Menu/MenuItem.tsx b/ui/src/modules/Workspaces/Menu/MenuItem.tsx index 6192baf255..edc1f0024b 100644 --- a/ui/src/modules/Workspaces/Menu/MenuItem.tsx +++ b/ui/src/modules/Workspaces/Menu/MenuItem.tsx @@ -57,7 +57,7 @@ const MenuItem = ({ id, name, status, selectedWorkspace }: Props) => { return ( - + {name} From 01f1584612ede901f8e4e28efb1ec45e88733a05 Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Tue, 26 Jan 2021 14:10:18 -0300 Subject: [PATCH 04/30] adjust spacing Signed-off-by: luanecavalcantizup --- ui/src/modules/Users/Menu/index.tsx | 4 ++-- ui/src/modules/Users/Menu/styled.ts | 24 ++++++++++++++++++++++++ 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/ui/src/modules/Users/Menu/index.tsx b/ui/src/modules/Users/Menu/index.tsx index 7770e40357..13c91c4dee 100644 --- a/ui/src/modules/Users/Menu/index.tsx +++ b/ui/src/modules/Users/Menu/index.tsx @@ -42,11 +42,11 @@ const UserMenu = ({ onSearch, children }: Props) => { return ( <> - toggleUser('create')} isActive={false}> + toggleUser('create')}> Create user - + {children} diff --git a/ui/src/modules/Users/Menu/styled.ts b/ui/src/modules/Users/Menu/styled.ts index f796ffb49c..f3bf9b510b 100644 --- a/ui/src/modules/Users/Menu/styled.ts +++ b/ui/src/modules/Users/Menu/styled.ts @@ -18,7 +18,9 @@ import styled from 'styled-components'; import LabeledIcon from 'core/components/LabeledIcon'; import SearchInputComponent from 'core/components/Form/SearchInput'; import IconComponent from 'core/components/Icon'; +import ButtonComponent from 'core/components/Button'; import { COLOR_BLACK_MARLIN } from 'core/assets/colors'; +import Text from 'core/components/Text'; const SearchInput = styled(SearchInputComponent)` margin: 15px 0; @@ -44,6 +46,7 @@ const Content = styled.div` overflow-y: auto; `; +// TODO remove? const List = styled.ul` display: flex; flex-direction: column; @@ -62,11 +65,22 @@ const ListItem = styled(LabeledIcon)` display: flex; `; +const Item = styled(Text.h4)` + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + width: 230px; +`; + +// TODO remove isactive? interface LinkProps { isActive: boolean; } const Link = styled('button')` + width: 100%; + display: block; + padding: 0 16px; background: none; border: none; text-decoration: none; @@ -78,13 +92,23 @@ const A = styled.a` text-decoration: none; `; +const Button = styled(ButtonComponent.Default)` + border: none; + background-color: transparent; + padding: 0; + margin: 0; + height: auto; +`; + export default { A, Actions, + Button, Content, Icon, Link, List, ListItem, + Item, SearchInput }; From 0c0fddbdb8f4ada0c8f93b8c174553d566a34686 Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Tue, 26 Jan 2021 14:47:01 -0300 Subject: [PATCH 05/30] adjust loader margin Signed-off-by: luanecavalcantizup --- ui/src/modules/Users/Menu/Loaders/index.tsx | 4 ++-- ui/src/modules/Users/Menu/Loaders/list.tsx | 9 +++++++-- ui/src/modules/Users/Menu/styled.ts | 1 - 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/ui/src/modules/Users/Menu/Loaders/index.tsx b/ui/src/modules/Users/Menu/Loaders/index.tsx index 7a814eedbb..b5a4965ee1 100644 --- a/ui/src/modules/Users/Menu/Loaders/index.tsx +++ b/ui/src/modules/Users/Menu/Loaders/index.tsx @@ -15,10 +15,10 @@ */ import React from 'react'; -import { Loader as LoaderList } from './list'; +import { Loader as LoaderList, Props as ListProps } from './list'; const Loader = { - List: () => + List: ({ className }: ListProps) => }; export default Loader; diff --git a/ui/src/modules/Users/Menu/Loaders/list.tsx b/ui/src/modules/Users/Menu/Loaders/list.tsx index 56e304eb00..7003b83c2c 100644 --- a/ui/src/modules/Users/Menu/Loaders/list.tsx +++ b/ui/src/modules/Users/Menu/Loaders/list.tsx @@ -14,10 +14,14 @@ * limitations under the License. */ -import React, { FunctionComponent } from 'react'; +import React from 'react'; import ContentLoader from 'react-content-loader'; -export const Loader: FunctionComponent = () => ( +export type Props = { + className?: string; +}; + +export const Loader = ({ className }: Props) => ( ( viewBox="0 0 200 200" backgroundColor="#3a393c" foregroundColor="#2c2b2e" + className={className} > diff --git a/ui/src/modules/Users/Menu/styled.ts b/ui/src/modules/Users/Menu/styled.ts index f3bf9b510b..d00a7408a9 100644 --- a/ui/src/modules/Users/Menu/styled.ts +++ b/ui/src/modules/Users/Menu/styled.ts @@ -80,7 +80,6 @@ interface LinkProps { const Link = styled('button')` width: 100%; display: block; - padding: 0 16px; background: none; border: none; text-decoration: none; From ed6c1d9bd87f2bacb532fd8ecc6359b3f3e4905a Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Tue, 26 Jan 2021 17:00:12 -0300 Subject: [PATCH 06/30] adjust alignment Signed-off-by: luanecavalcantizup --- ui/src/modules/Users/Menu/styled.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/src/modules/Users/Menu/styled.ts b/ui/src/modules/Users/Menu/styled.ts index d00a7408a9..a8c520ce77 100644 --- a/ui/src/modules/Users/Menu/styled.ts +++ b/ui/src/modules/Users/Menu/styled.ts @@ -42,7 +42,7 @@ const Icon = styled(IconComponent)` `; const Content = styled.div` - height: calc(100vh - 200px); + height: calc(-200px + 100vh); overflow-y: auto; `; @@ -80,6 +80,7 @@ interface LinkProps { const Link = styled('button')` width: 100%; display: block; + padding: 0 16px; background: none; border: none; text-decoration: none; From 32836b83a64b7e21add021e8a0377f48704c7f2b Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Tue, 26 Jan 2021 17:04:59 -0300 Subject: [PATCH 07/30] add infinite scroll Signed-off-by: luanecavalcantizup --- ui/src/core/providers/users.ts | 3 ++- ui/src/modules/Users/Menu/MenuItem.tsx | 13 +++++++------ ui/src/modules/Users/hooks.ts | 4 ++-- ui/src/modules/Users/index.tsx | 10 +++++----- ui/src/modules/Users/state/reducer.ts | 14 +++++++++++++- 5 files changed, 29 insertions(+), 15 deletions(-) diff --git a/ui/src/core/providers/users.ts b/ui/src/core/providers/users.ts index 8aab47c39c..1e3f48041b 100644 --- a/ui/src/core/providers/users.ts +++ b/ui/src/core/providers/users.ts @@ -24,13 +24,14 @@ const endpointWorkspaces = '/moove/v2/workspaces/users'; const v1Endpoint = '/moove/users'; export interface UserFilter { + id?: string; name?: string; email?: string; page?: number; } const initialUserFilter = { - email: '', + name: '', page: 0 }; diff --git a/ui/src/modules/Users/Menu/MenuItem.tsx b/ui/src/modules/Users/Menu/MenuItem.tsx index 92cac1c9a1..aca67a6af7 100644 --- a/ui/src/modules/Users/Menu/MenuItem.tsx +++ b/ui/src/modules/Users/Menu/MenuItem.tsx @@ -32,20 +32,21 @@ const MenuItem = ({ id, name, email }: Props) => { const history = useHistory(); const query = useQueryStrings(); - const isActive = (id: string) => query.getAll('user').includes(id); + const isActive = () => query.getAll('user').includes(id); - const toggleUser = (id: string) => - isActive(id) + const toggleUser = () => + isActive() ? delParam('user', routes.usersComparation, history, id) : addParam('user', routes.usersComparation, history, id); + // TODO remove isActive? return ( toggleUser(email)} - isActive={isActive(email)} + onClick={() => toggleUser()} + isActive={isActive()} data-testid={`menu-users-${id}`} > - + {name} diff --git a/ui/src/modules/Users/hooks.ts b/ui/src/modules/Users/hooks.ts index 280aba6a1e..929c6a09c8 100644 --- a/ui/src/modules/Users/hooks.ts +++ b/ui/src/modules/Users/hooks.ts @@ -230,7 +230,7 @@ export const useUsers = (): [Function, Function, boolean] => { const [usersData, getUsers] = useFetch(findAllUsers); const { response, error, loading } = usersData; - const getAll = useCallback( + const filterUsers = useCallback( (name: string, page: number) => { getUsers({ name, page }); }, @@ -245,7 +245,7 @@ export const useUsers = (): [Function, Function, boolean] => { } }, [dispatch, response, error]); - return [getAll, getUsers, loading]; + return [filterUsers, getUsers, loading]; }; export default useUsers; diff --git a/ui/src/modules/Users/index.tsx b/ui/src/modules/Users/index.tsx index db77cb0318..dee7f38e53 100644 --- a/ui/src/modules/Users/index.tsx +++ b/ui/src/modules/Users/index.tsx @@ -36,7 +36,7 @@ const CreateUser = lazy(() => import('./Create')); const Users = () => { const profileName = getProfileByKey('name'); - const [getAll, , loading] = useUsers(); + const [filterUsers, , loading] = useUsers(); const [name, setName] = useState(''); const [message, setMessage] = useState(''); const { list } = useGlobalState(({ users }) => users); @@ -47,15 +47,15 @@ const Users = () => { useEffect(() => { const page = 0; dispatch(resetContentAction()); - getAll({ name, page }); + filterUsers(name, page); if (message === 'Deleted' || message === 'Created') { - getAll({ name, page }); + filterUsers(name, page); } - }, [name, message, getAll, dispatch]); + }, [name, message, filterUsers, dispatch]); const loadMore = (page: number) => { - getAll({ name, page }); + filterUsers(name, page); }; const renderPlaceholder = () => ( diff --git a/ui/src/modules/Users/state/reducer.ts b/ui/src/modules/Users/state/reducer.ts index cd7379fc19..c9f22ae3e2 100644 --- a/ui/src/modules/Users/state/reducer.ts +++ b/ui/src/modules/Users/state/reducer.ts @@ -39,7 +39,10 @@ export const userReducer = ( case ACTION_TYPES.loadedUsers: { return { ...state, - list: action.payload + list: { + ...action.payload, + content: [...state.list.content, ...(action?.payload?.content ?? [])] + } }; } case ACTION_TYPES.loadedUser: { @@ -48,6 +51,15 @@ export const userReducer = ( item: action.payload }; } + case ACTION_TYPES.resetContent: { + return { + ...state, + list: { + ...state.list, + content: [] + } + }; + } default: { return state; } From fa73bb25a71bbb3d11353a26a9fa7e822a8a871d Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Wed, 27 Jan 2021 16:40:24 -0300 Subject: [PATCH 08/30] fix call to filterUsers Signed-off-by: luanecavalcantizup --- ui/src/modules/Users/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/ui/src/modules/Users/index.tsx b/ui/src/modules/Users/index.tsx index dee7f38e53..1905d7f527 100644 --- a/ui/src/modules/Users/index.tsx +++ b/ui/src/modules/Users/index.tsx @@ -47,9 +47,7 @@ const Users = () => { useEffect(() => { const page = 0; dispatch(resetContentAction()); - filterUsers(name, page); - - if (message === 'Deleted' || message === 'Created') { + if (message === '') { filterUsers(name, page); } }, [name, message, filterUsers, dispatch]); From 5e263d5fb6d566808056311cc57d40a1f23b5ee9 Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Wed, 27 Jan 2021 17:11:34 -0300 Subject: [PATCH 09/30] load users when some user is deleted Signed-off-by: luanecavalcantizup --- ui/src/modules/Users/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/modules/Users/index.tsx b/ui/src/modules/Users/index.tsx index 1905d7f527..1f011e0a42 100644 --- a/ui/src/modules/Users/index.tsx +++ b/ui/src/modules/Users/index.tsx @@ -47,7 +47,7 @@ const Users = () => { useEffect(() => { const page = 0; dispatch(resetContentAction()); - if (message === '') { + if (message === '' || message === 'Deleted') { filterUsers(name, page); } }, [name, message, filterUsers, dispatch]); From 0fe7f105c42add2c1a87d7b109a83806c54f63db Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Wed, 27 Jan 2021 17:42:38 -0300 Subject: [PATCH 10/30] adjust test Signed-off-by: luanecavalcantizup --- .../core/components/LabeledIcon/__tests__/LabeledIcon.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/core/components/LabeledIcon/__tests__/LabeledIcon.spec.tsx b/ui/src/core/components/LabeledIcon/__tests__/LabeledIcon.spec.tsx index 05b6a325c4..5bd3d07539 100644 --- a/ui/src/core/components/LabeledIcon/__tests__/LabeledIcon.spec.tsx +++ b/ui/src/core/components/LabeledIcon/__tests__/LabeledIcon.spec.tsx @@ -33,7 +33,7 @@ test('renders LabeledIcon component with default properties', () => { expect(textElement).toBeInTheDocument(); expect(labelElement).toBeInTheDocument(); - expect(labelElement).toHaveStyle('margin-left: 5px;'); + expect(labelElement).toHaveStyle('margin-left:8px;'); expect(iconElement).toBeInTheDocument(); }); From ad87234914769535c45de34dfef3a987815db54d Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Wed, 27 Jan 2021 18:10:03 -0300 Subject: [PATCH 11/30] create a folder for test file Signed-off-by: luanecavalcantizup --- .../modules/Circles/Menu/{Loaders => __tests__}/MenuItem.spec.tsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename ui/src/modules/Circles/Menu/{Loaders => __tests__}/MenuItem.spec.tsx (100%) diff --git a/ui/src/modules/Circles/Menu/Loaders/MenuItem.spec.tsx b/ui/src/modules/Circles/Menu/__tests__/MenuItem.spec.tsx similarity index 100% rename from ui/src/modules/Circles/Menu/Loaders/MenuItem.spec.tsx rename to ui/src/modules/Circles/Menu/__tests__/MenuItem.spec.tsx From fcf556104e479d5bdf4f44afa7447ba9ae1a0e8b Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Thu, 28 Jan 2021 10:21:48 -0300 Subject: [PATCH 12/30] edit data-testid Signed-off-by: luanecavalcantizup --- ui/src/modules/Users/Menu/MenuItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/modules/Users/Menu/MenuItem.tsx b/ui/src/modules/Users/Menu/MenuItem.tsx index aca67a6af7..88a2456b9a 100644 --- a/ui/src/modules/Users/Menu/MenuItem.tsx +++ b/ui/src/modules/Users/Menu/MenuItem.tsx @@ -44,7 +44,7 @@ const MenuItem = ({ id, name, email }: Props) => { toggleUser()} isActive={isActive()} - data-testid={`menu-users-${id}`} + data-testid={`menu-users-${email}`} > {name} From 4c871033961e2ed63b11171579247ae982ebdfa4 Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Thu, 28 Jan 2021 10:22:17 -0300 Subject: [PATCH 13/30] add test file Signed-off-by: luanecavalcantizup --- .../Users/Menu/__tests__/MenuItem.spec.tsx | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 ui/src/modules/Users/Menu/__tests__/MenuItem.spec.tsx diff --git a/ui/src/modules/Users/Menu/__tests__/MenuItem.spec.tsx b/ui/src/modules/Users/Menu/__tests__/MenuItem.spec.tsx new file mode 100644 index 0000000000..26a0f47174 --- /dev/null +++ b/ui/src/modules/Users/Menu/__tests__/MenuItem.spec.tsx @@ -0,0 +1,40 @@ +/* + * Copyright 2020 ZUP IT SERVICOS EM TECNOLOGIA E INOVACAO SA + * + * 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 React from 'react'; +import { render, screen } from 'unit-test/testUtils'; +import userEvent from '@testing-library/user-event'; +import * as pathUtils from 'core/utils/path'; +import routes from 'core/constants/routes'; +import MenuItem from '../MenuItem'; + +test('should render MenuItem', async () => { + const addParamSpy = jest.spyOn(pathUtils, 'addParam'); + + render(); + + userEvent.click(screen.getByTestId('menu-users-charlesadmin@admin')); + + expect(screen.getByTestId('icon-user')).toBeInTheDocument(); + expect(screen.getByText('charlesadmin')).toBeInTheDocument(); + + expect(addParamSpy).toHaveBeenCalledWith( + 'user', + routes.usersComparation, + expect.anything(), + '1' + ); +}); From 78570c7c7266146827f1f5d40194498c101e8680 Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Thu, 28 Jan 2021 10:57:51 -0300 Subject: [PATCH 14/30] fix test Signed-off-by: luanecavalcantizup --- .../Users/Menu/__tests__/Menu.spec.tsx | 35 ++++++------------- 1 file changed, 11 insertions(+), 24 deletions(-) diff --git a/ui/src/modules/Users/Menu/__tests__/Menu.spec.tsx b/ui/src/modules/Users/Menu/__tests__/Menu.spec.tsx index 3f1e9d13ff..3632c12bcc 100644 --- a/ui/src/modules/Users/Menu/__tests__/Menu.spec.tsx +++ b/ui/src/modules/Users/Menu/__tests__/Menu.spec.tsx @@ -15,31 +15,18 @@ */ import React from 'react'; -import { render } from 'unit-test/testUtils'; -import Menu from '..'; - -const props = { - isLoading: false, - items: [ - { - id: '123', - name: 'name', - email: 'charles@zup.com.br', - applications: [{ - id: '456', - name: '', - menbersCount: 10 - }], - createdAt: '01/01/2020 00:01' - } - ], - onSearch: jest.fn() -} +import { render, screen } from 'unit-test/testUtils'; +import Menu from '../'; test('render Menu default', async () => { - const { getByTestId } = render( - - ); + const onSearch = jest.fn(); + const props = { + children: 'button' + }; + + render(); - expect(getByTestId('menu-users-charles@zup.com.br')).toBeInTheDocument(); + expect(screen.getByTestId('icon-plus-circle')).toBeInTheDocument(); + expect(screen.getByText('Create user')).toBeInTheDocument(); + expect(screen.getByTestId('input-text-search')).toBeInTheDocument(); }); From 9d8720d3612fbc816af152d9def1600bcf8e62f5 Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Thu, 28 Jan 2021 11:06:16 -0300 Subject: [PATCH 15/30] remove a style Signed-off-by: luanecavalcantizup --- ui/src/modules/Users/Menu/styled.ts | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/ui/src/modules/Users/Menu/styled.ts b/ui/src/modules/Users/Menu/styled.ts index a8c520ce77..2ad521e405 100644 --- a/ui/src/modules/Users/Menu/styled.ts +++ b/ui/src/modules/Users/Menu/styled.ts @@ -46,19 +46,6 @@ const Content = styled.div` overflow-y: auto; `; -// TODO remove? -const List = styled.ul` - display: flex; - flex-direction: column; - margin: 0; - padding: 0; - list-style-type: none; - - > * { - padding: 0 16px; - } -`; - const ListItem = styled(LabeledIcon)` padding: 15px 0px; cursor: pointer; From 283b159d9aa47e7833499098357ce9d81420fc1f Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Thu, 28 Jan 2021 11:14:50 -0300 Subject: [PATCH 16/30] remove log Signed-off-by: luanecavalcantizup --- ui/src/modules/Users/Menu/styled.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/ui/src/modules/Users/Menu/styled.ts b/ui/src/modules/Users/Menu/styled.ts index 2ad521e405..7c625c8ccf 100644 --- a/ui/src/modules/Users/Menu/styled.ts +++ b/ui/src/modules/Users/Menu/styled.ts @@ -58,8 +58,6 @@ const Item = styled(Text.h4)` text-overflow: ellipsis; width: 230px; `; - -// TODO remove isactive? interface LinkProps { isActive: boolean; } @@ -94,7 +92,6 @@ export default { Content, Icon, Link, - List, ListItem, Item, SearchInput From 200f7f40a64e7924bceae1b4add50c3ea4328cd7 Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Thu, 28 Jan 2021 11:15:28 -0300 Subject: [PATCH 17/30] remove log Signed-off-by: luanecavalcantizup --- ui/src/modules/Users/Menu/MenuItem.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/src/modules/Users/Menu/MenuItem.tsx b/ui/src/modules/Users/Menu/MenuItem.tsx index 88a2456b9a..b144091e7f 100644 --- a/ui/src/modules/Users/Menu/MenuItem.tsx +++ b/ui/src/modules/Users/Menu/MenuItem.tsx @@ -39,7 +39,6 @@ const MenuItem = ({ id, name, email }: Props) => { ? delParam('user', routes.usersComparation, history, id) : addParam('user', routes.usersComparation, history, id); - // TODO remove isActive? return ( toggleUser()} From 48bfe32557ce2e0272f05ab168c6efc4c124f5c0 Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Thu, 28 Jan 2021 15:07:26 -0300 Subject: [PATCH 18/30] fix infinite scroll when screen zoom is above 80% Signed-off-by: luanecavalcantizup --- ui/src/core/components/InfiniteScroll/index.tsx | 6 ++++-- ui/src/core/hooks/useInfiniteScroll.ts | 9 ++++++--- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/ui/src/core/components/InfiniteScroll/index.tsx b/ui/src/core/components/InfiniteScroll/index.tsx index 3553cd7d06..97b69eb9e4 100644 --- a/ui/src/core/components/InfiniteScroll/index.tsx +++ b/ui/src/core/components/InfiniteScroll/index.tsx @@ -24,6 +24,7 @@ type Props = { hasMore: boolean; isLoading: boolean; loadMore: (page: number) => void; + rootMargin?: string; }; const InfiniteScroll = ({ @@ -31,7 +32,8 @@ const InfiniteScroll = ({ loader, isLoading, hasMore, - loadMore + loadMore, + rootMargin = '1px' }: Props) => { const childrenLength = Children.count(children); const showSentinelLoader = !isLoading && childrenLength && hasMore; @@ -39,7 +41,7 @@ const InfiniteScroll = ({ const [loaderRef, scrollerRef, resetPage] = useInfiniteScroll< HTMLDivElement, HTMLDivElement - >({ hasMore, loadMore }); + >({ hasMore, loadMore, rootMargin }); useEffect(() => { if (childrenLength === 0) { diff --git a/ui/src/core/hooks/useInfiniteScroll.ts b/ui/src/core/hooks/useInfiniteScroll.ts index 200f38b546..f6179caa82 100644 --- a/ui/src/core/hooks/useInfiniteScroll.ts +++ b/ui/src/core/hooks/useInfiniteScroll.ts @@ -20,6 +20,7 @@ type InfiniteScrollArgs = { hasMore: boolean; loadMore: (page: number) => void; distance?: number; + rootMargin: string; }; export default function useInfiniteScroll< @@ -27,7 +28,8 @@ export default function useInfiniteScroll< LoaderElementType extends HTMLElement >({ hasMore, - loadMore + loadMore, + rootMargin }: InfiniteScrollArgs): [ RefObject, RefObject, @@ -51,7 +53,8 @@ export default function useInfiniteScroll< } const options: IntersectionObserverInit = { - root: scrollContainerNode + root: scrollContainerNode, + rootMargin: rootMargin }; const listener: IntersectionObserverCallback = entries => { @@ -76,7 +79,7 @@ export default function useInfiniteScroll< observer.observe(loaderNode); return () => observer.disconnect(); - }, [hasMore, loadMore]); + }, [hasMore, loadMore, rootMargin]); return [loaderRef, scrollContainerRef, resetPage]; } From 97dd8e87f88539b66b7e03b12e2ac16aa5236b7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=B4nica=20Ribeiro?= Date: Thu, 28 Jan 2021 15:37:21 -0300 Subject: [PATCH 19/30] Fixing test. --- .../io/charlescd/moove/api/controller/V2UserController.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/moove/api/src/main/kotlin/io/charlescd/moove/api/controller/V2UserController.kt b/moove/api/src/main/kotlin/io/charlescd/moove/api/controller/V2UserController.kt index de825cf4b6..74a7db7524 100644 --- a/moove/api/src/main/kotlin/io/charlescd/moove/api/controller/V2UserController.kt +++ b/moove/api/src/main/kotlin/io/charlescd/moove/api/controller/V2UserController.kt @@ -72,7 +72,7 @@ class V2UserController( @RequestParam("name", required = false) name: String?, @RequestParam("email", required = false) email: String?, @Valid pageable: PageRequest - ): ResourcePageResponse { + ): ResourcePageResponse { return this.findAllUsersInteractor.execute(name, email, authorization, pageable) } From 25d1b1afc3979abfe8c51958ad0f22fb6249887b Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Fri, 29 Jan 2021 10:59:53 -0300 Subject: [PATCH 20/30] replace deprecated function and remove unused code in test of Groups Signed-off-by: luanecavalcantizup --- .../modules/Groups/__tests__/hooks.spec.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/ui/src/modules/Groups/__tests__/hooks.spec.tsx b/ui/src/modules/Groups/__tests__/hooks.spec.tsx index cd9246b8f3..42cca9b2c2 100644 --- a/ui/src/modules/Groups/__tests__/hooks.spec.tsx +++ b/ui/src/modules/Groups/__tests__/hooks.spec.tsx @@ -15,7 +15,7 @@ */ import { renderHook, act } from '@testing-library/react-hooks'; -import { screen, wait } from 'unit-test/testUtils'; +import { waitFor } from 'unit-test/testUtils'; import { FetchMock } from 'jest-fetch-mock'; import { useCreateUserGroup, useDeleteUserGroup, useFindAllUserGroup, useFindUserGroupByID, useListUser, useManagerMemberInUserGroup, useUpdateUserGroup } from '../hooks'; import { UserGroup } from '../interfaces/UserGroups'; @@ -41,7 +41,7 @@ test('create a new user group', async () => { await result.current.createUserGroup(newUserGroup.name); }); - await wait(() => expect(result.current.response).toMatchObject(newUserGroup)); + await waitFor(() => expect(result.current.response).toMatchObject(newUserGroup)); }); test('error create a new user group', async () => { @@ -60,8 +60,8 @@ test('error create a new user group', async () => { response = await result.current.createUserGroup(newUserGroup.name); }); - await wait(() => expect(response).toBeUndefined()); - await wait(() => expect(result.current.response).toBeUndefined()); + await waitFor(() => expect(response).toBeUndefined()); + await waitFor(() => expect(result.current.response).toBeUndefined()); }); test('to find all user groups', async () => { @@ -91,7 +91,7 @@ test('to find all user groups', async () => { await result.current[0]('group 1'); }); - await wait(() => expect(result.current[2]).toMatchObject(userGroupPagination)); + await waitFor(() => expect(result.current[2]).toMatchObject(userGroupPagination)); }); test('to find user group by id', async () => { @@ -122,7 +122,7 @@ test('to find user group by id', async () => { await result.current[0]('123'); }); - await wait(() => expect(result.current[1]).toMatchObject(userGroup)); + await waitFor(() => expect(result.current[1]).toMatchObject(userGroup)); }); test('to list users', async () => { @@ -153,7 +153,7 @@ test('to list users', async () => { await result.current[0]('charlescd@zup.com.br'); }); - await wait(() => expect(result.current[1]).toMatchObject(users)); + await waitFor(() => expect(result.current[1]).toMatchObject(users)); }); test('to update user group', async () => { @@ -184,7 +184,7 @@ test('to update user group', async () => { await result.current[0]('123', 'Charles'); }); - await wait(() => expect(result.current[1]).toMatchObject(userGroup)); + await waitFor(() => expect(result.current[1]).toMatchObject(userGroup)); }); test('to delete user group', async () => { @@ -196,7 +196,7 @@ test('to delete user group', async () => { await result.current[0]('123'); }); - await wait(() => expect(result.current[1]).toMatchObject({})); + await waitFor(() => expect(result.current[1]).toMatchObject({})); }); test('to manager members in user group', async () => { @@ -208,5 +208,5 @@ test('to manager members in user group', async () => { await result.current[0](false, '123', '456'); }); - await wait(() => expect(result.current[1]).toBe('resolved')); + await waitFor(() => expect(result.current[1]).toBe('resolved')); }); \ No newline at end of file From 85561248f4bd658040ed416237bdc783a58d9a19 Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Fri, 29 Jan 2021 14:32:39 -0300 Subject: [PATCH 21/30] add tests and adjust hook Signed-off-by: luanecavalcantizup --- ui/src/modules/Users/__tests__/fixtures.ts | 15 ++++++++ .../{hooks.spec.tsx => hooks.spec.ts} | 35 ++++++++++++++++++- ui/src/modules/Users/hooks.ts | 4 +-- 3 files changed, 51 insertions(+), 3 deletions(-) create mode 100644 ui/src/modules/Users/__tests__/fixtures.ts rename ui/src/modules/Users/__tests__/{hooks.spec.tsx => hooks.spec.ts} (83%) diff --git a/ui/src/modules/Users/__tests__/fixtures.ts b/ui/src/modules/Users/__tests__/fixtures.ts new file mode 100644 index 0000000000..a3470bcd18 --- /dev/null +++ b/ui/src/modules/Users/__tests__/fixtures.ts @@ -0,0 +1,15 @@ +export const userPagination = { + content: [ + { + id: '123', + name: 'charlesadmin', + email: 'charlesadmin@admin', + applications: [''], + createdAt: '01/29/2021' + } + ], + page: 0, + size: 0, + totalPages: 0, + last: true +}; \ No newline at end of file diff --git a/ui/src/modules/Users/__tests__/hooks.spec.tsx b/ui/src/modules/Users/__tests__/hooks.spec.ts similarity index 83% rename from ui/src/modules/Users/__tests__/hooks.spec.tsx rename to ui/src/modules/Users/__tests__/hooks.spec.ts index 03e963db52..2756041f6c 100644 --- a/ui/src/modules/Users/__tests__/hooks.spec.tsx +++ b/ui/src/modules/Users/__tests__/hooks.spec.ts @@ -17,8 +17,9 @@ import { renderHook, act } from '@testing-library/react-hooks'; import { waitFor } from 'unit-test/testUtils'; import { FetchMock } from 'jest-fetch-mock'; -import { useCreateUser, useUpdateName, useUser, useWorkspacesByUser } from '../hooks'; +import { useCreateUser, useUpdateName, useUser, useWorkspacesByUser, useUsers } from '../hooks'; import { NewUser, User } from '../interfaces/User'; +import {userPagination} from './fixtures'; beforeEach(() => { (fetch as FetchMock).resetMocks(); @@ -173,4 +174,36 @@ test('should throw an error in userWorkspacesByUser', async () => { }); expect(response).toBeUndefined(); +}); + +// TODO hooks.spec.tsx to .ts +// TODO no test usergroup, colocar data em fixture file +test('should find all users', async () => { + (fetch as FetchMock).mockResponse(JSON.stringify(userPagination)); + + const { result } = renderHook(() => useUsers()); + + const name = ''; + const page = 0; + + await act(async () => { + await result.current[0](name, page); + }); + + await waitFor(() => expect(result.current[1]).toMatchObject(userPagination)); +}); + +test('should get an error when finding all users', async () => { + (fetch as FetchMock).mockRejectedValue(new Response(JSON.stringify({}))); + + const { result } = renderHook(() => useUsers()); + + const name = ''; + const page = 0; + + await act(async () => { + await result.current[0](name, page); + }); + + await waitFor(() => expect(result.current[1]).toBeUndefined()); }); \ No newline at end of file diff --git a/ui/src/modules/Users/hooks.ts b/ui/src/modules/Users/hooks.ts index 46c626b394..4e7947e04a 100644 --- a/ui/src/modules/Users/hooks.ts +++ b/ui/src/modules/Users/hooks.ts @@ -267,7 +267,7 @@ export const useResetPassword = (): { return { resetPassword, response, status }; }; -export const useUsers = (): [Function, Function, boolean] => { +export const useUsers = (): [Function, UserPagination, boolean] => { const dispatch = useDispatch(); const [usersData, getUsers] = useFetch(findAllUsers); const { response, error, loading } = usersData; @@ -287,7 +287,7 @@ export const useUsers = (): [Function, Function, boolean] => { } }, [dispatch, response, error]); - return [filterUsers, getUsers, loading]; + return [filterUsers, response, loading]; }; export default useUsers; From 37403973a11dfd2dcef5b22d97c97d993b3c6d6e Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Fri, 29 Jan 2021 14:39:17 -0300 Subject: [PATCH 22/30] create fixtures Signed-off-by: luanecavalcantizup --- ui/src/modules/Groups/__tests__/fixtures.ts | 55 ++++++++++++++ .../{hooks.spec.tsx => hooks.spec.ts} | 76 +------------------ 2 files changed, 56 insertions(+), 75 deletions(-) create mode 100644 ui/src/modules/Groups/__tests__/fixtures.ts rename ui/src/modules/Groups/__tests__/{hooks.spec.tsx => hooks.spec.ts} (72%) diff --git a/ui/src/modules/Groups/__tests__/fixtures.ts b/ui/src/modules/Groups/__tests__/fixtures.ts new file mode 100644 index 0000000000..976a83803a --- /dev/null +++ b/ui/src/modules/Groups/__tests__/fixtures.ts @@ -0,0 +1,55 @@ +export const userGroupPagination = { + content: [{ + id: '123', + name: 'group 1', + users: [{ + id: '123', + name: 'Charles', + email: 'charlescd@zup.com.br', + photoUrl: 'https://charlescd.io', + createdAt: '2020-01-01 12:00' + }] + }], + page: 0, + size: 0, + totalPages: 0, + last: true +}; + +export const userGroup = { + id: '123', + name: 'group 1', + author: { + id: '456', + name: 'Charles', + email: 'charlescd@zup.com.br', + createdAt: '2020-01-01 12:00', + }, + createdAt: '2020-01-01 12:00', + users: [{ + id: '123', + name: 'Charles', + email: 'charlescd@zup.com.br', + photoUrl: 'https://charlescd.io', + createdAt: '2020-01-01 12:00' + }] +}; + +export const users = { + content: [{ + id: '123', + name: 'Charles', + email: 'charlescd@zup.com.br', + photoUrl: 'https://charlescd.io', + applications: [{ + id: '123', + name: 'Application 1', + menbersCount: 1 + }], + createdAt: '2020-01-01 12:00' + }], + page: 0, + size: 0, + totalPages: 0, + last: true +}; \ No newline at end of file diff --git a/ui/src/modules/Groups/__tests__/hooks.spec.tsx b/ui/src/modules/Groups/__tests__/hooks.spec.ts similarity index 72% rename from ui/src/modules/Groups/__tests__/hooks.spec.tsx rename to ui/src/modules/Groups/__tests__/hooks.spec.ts index 42cca9b2c2..d7e905e36e 100644 --- a/ui/src/modules/Groups/__tests__/hooks.spec.tsx +++ b/ui/src/modules/Groups/__tests__/hooks.spec.ts @@ -19,6 +19,7 @@ import { waitFor } from 'unit-test/testUtils'; import { FetchMock } from 'jest-fetch-mock'; import { useCreateUserGroup, useDeleteUserGroup, useFindAllUserGroup, useFindUserGroupByID, useListUser, useManagerMemberInUserGroup, useUpdateUserGroup } from '../hooks'; import { UserGroup } from '../interfaces/UserGroups'; +import {userGroupPagination, userGroup, users} from './fixtures'; beforeEach(() => { (fetch as FetchMock).resetMocks(); @@ -65,24 +66,6 @@ test('error create a new user group', async () => { }); test('to find all user groups', async () => { - const userGroupPagination = { - content: [{ - id: '123', - name: 'group 1', - users: [{ - id: '123', - name: 'Charles', - email: 'charlescd@zup.com.br', - photoUrl: 'https://charlescd.io', - createdAt: '2020-01-01 12:00' - }] - }], - page: 0, - size: 0, - totalPages: 0, - last: true - }; - (fetch as FetchMock).mockResponseOnce(JSON.stringify(userGroupPagination)); const { result } = renderHook(() => useFindAllUserGroup()); @@ -95,25 +78,6 @@ test('to find all user groups', async () => { }); test('to find user group by id', async () => { - const userGroup = { - id: '123', - name: 'group 1', - author: { - id: '456', - name: 'Charles', - email: 'charlescd@zup.com.br', - createdAt: '2020-01-01 12:00', - }, - createdAt: '2020-01-01 12:00', - users: [{ - id: '123', - name: 'Charles', - email: 'charlescd@zup.com.br', - photoUrl: 'https://charlescd.io', - createdAt: '2020-01-01 12:00' - }] - }; - (fetch as FetchMock).mockResponseOnce(JSON.stringify(userGroup)); const { result } = renderHook(() => useFindUserGroupByID()); @@ -126,25 +90,6 @@ test('to find user group by id', async () => { }); test('to list users', async () => { - const users = { - content: [{ - id: '123', - name: 'Charles', - email: 'charlescd@zup.com.br', - photoUrl: 'https://charlescd.io', - applications: [{ - id: '123', - name: 'Application 1', - menbersCount: 1 - }], - createdAt: '2020-01-01 12:00' - }], - page: 0, - size: 0, - totalPages: 0, - last: true - }; - (fetch as FetchMock).mockResponseOnce(JSON.stringify(users)); const { result } = renderHook(() => useListUser()); @@ -157,25 +102,6 @@ test('to list users', async () => { }); test('to update user group', async () => { - const userGroup = { - id: '123', - name: 'group 1', - author: { - id: '456', - name: 'Charles', - email: 'charlescd@zup.com.br', - createdAt: '2020-01-01 12:00', - }, - createdAt: '2020-01-01 12:00', - users: [{ - id: '123', - name: 'Charles', - email: 'charlescd@zup.com.br', - photoUrl: 'https://charlescd.io', - createdAt: '2020-01-01 12:00' - }] - }; - (fetch as FetchMock).mockResponseOnce(JSON.stringify(userGroup)); const { result } = renderHook(() => useUpdateUserGroup()); From d08ddd3a9263a1a66a213589fd1044be7ba79961 Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Fri, 29 Jan 2021 15:09:04 -0300 Subject: [PATCH 23/30] remove code after resolving conflicts Signed-off-by: luanecavalcantizup --- ui/src/modules/Users/Menu/index.tsx | 19 ++----------------- 1 file changed, 2 insertions(+), 17 deletions(-) diff --git a/ui/src/modules/Users/Menu/index.tsx b/ui/src/modules/Users/Menu/index.tsx index e1470a453c..13c91c4dee 100644 --- a/ui/src/modules/Users/Menu/index.tsx +++ b/ui/src/modules/Users/Menu/index.tsx @@ -39,23 +39,6 @@ const UserMenu = ({ onSearch, children }: Props) => { ? delParam('user', routes.usersComparation, history, id) : addParam('user', routes.usersComparation, history, id); - const renderUsers = () => - isEmpty(items) ? ( - - No User was found - - ) : ( - map(items, ({ email, name }: UserPaginationItem) => ( - toggleUser(email)} - /> - )) - ); - return ( <> @@ -65,6 +48,8 @@ const UserMenu = ({ onSearch, children }: Props) => { + + {children} ); }; From f12578686421e89b15e18067d527aa6d2a427e4c Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Fri, 29 Jan 2021 15:29:39 -0300 Subject: [PATCH 24/30] temporary: remove test Signed-off-by: luanecavalcantizup --- ui/src/modules/Users/Menu/__tests__/Menu.spec.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/ui/src/modules/Users/Menu/__tests__/Menu.spec.tsx b/ui/src/modules/Users/Menu/__tests__/Menu.spec.tsx index 3513a15a7e..d90436e385 100644 --- a/ui/src/modules/Users/Menu/__tests__/Menu.spec.tsx +++ b/ui/src/modules/Users/Menu/__tests__/Menu.spec.tsx @@ -54,15 +54,3 @@ test('render Menu default', async () => { expect(screen.getByText('Create user')).toBeInTheDocument(); expect(screen.getByTestId('input-text-search')).toBeInTheDocument(); }); - -test('render Menu default and do a empty search', async () => { - render( - - ); - - const inputSearch = screen.getByTestId('input-text-search'); - - userEvent.type(inputSearch, 'unknown'); - - await waitFor(() => expect(screen.getByTestId('empty-result-user')).toBeInTheDocument()); -}); From 17f6b174093dd411223cc4440ecd9d0f52ecc20a Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Fri, 29 Jan 2021 16:05:21 -0300 Subject: [PATCH 25/30] add test Signed-off-by: luanecavalcantizup --- ui/src/modules/Users/__tests__/Users.spec.tsx | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 ui/src/modules/Users/__tests__/Users.spec.tsx diff --git a/ui/src/modules/Users/__tests__/Users.spec.tsx b/ui/src/modules/Users/__tests__/Users.spec.tsx new file mode 100644 index 0000000000..75c6d6b491 --- /dev/null +++ b/ui/src/modules/Users/__tests__/Users.spec.tsx @@ -0,0 +1,26 @@ +/* + * Copyright 2020 ZUP IT SERVICOS EM TECNOLOGIA E INOVACAO SA + * + * 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 React from 'react'; +import { render, screen } from 'unit-test/testUtils'; +import Users from '..'; + +test('should render Users', () => { + render(); + + expect(screen.getByTestId('input-text-search')).toBeInTheDocument(); + expect(screen.getByText('Create user')).toBeInTheDocument(); +}); \ No newline at end of file From 0830fe9aeb4b22197b8ec3282c05e78f85f151df Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Fri, 29 Jan 2021 16:14:45 -0300 Subject: [PATCH 26/30] add test Signed-off-by: luanecavalcantizup --- .../{hooks.spec.tsx => hooks.spec.ts} | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) rename ui/src/core/state/__tests__/{hooks.spec.tsx => hooks.spec.ts} (70%) diff --git a/ui/src/core/state/__tests__/hooks.spec.tsx b/ui/src/core/state/__tests__/hooks.spec.ts similarity index 70% rename from ui/src/core/state/__tests__/hooks.spec.tsx rename to ui/src/core/state/__tests__/hooks.spec.ts index 3797f36d3d..25c322c75e 100644 --- a/ui/src/core/state/__tests__/hooks.spec.tsx +++ b/ui/src/core/state/__tests__/hooks.spec.ts @@ -14,13 +14,13 @@ * limitations under the License. */ -import React from 'react'; import { renderHook } from '@testing-library/react-hooks'; import { useGlobalState, useDispatch } from '../hooks'; import { AllTheProviders as wrapper } from 'unit-test/testUtils'; import { circlesInitialState } from 'modules/Circles/state/reducer'; +import { userInitialState } from 'modules/Users/state/reducer'; -test('useGlobalState', () => { +test('circle: useGlobalState', () => { const { result } = renderHook(() => useGlobalState(state => state.circles), { wrapper }); @@ -28,7 +28,21 @@ test('useGlobalState', () => { expect(result.current).toEqual(circlesInitialState); }); -test('useDispatch', () => { +test('circle: useDispatch', () => { + const { result } = renderHook(() => useDispatch(), { wrapper }); + + expect(result.current).toEqual(expect.any(Function)); +}); + +test('users: useGlobalState', () => { + const { result } = renderHook(() => useGlobalState(state => state.users), { + wrapper + }); + + expect(result.current).toEqual(userInitialState); +}); + +test('users: useDispatch', () => { const { result } = renderHook(() => useDispatch(), { wrapper }); expect(result.current).toEqual(expect.any(Function)); From 0c8765faf16ef03e3d11555c0bde33e448d3ac39 Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Mon, 1 Feb 2021 09:45:56 -0300 Subject: [PATCH 27/30] remove unnecessary code Signed-off-by: luanecavalcantizup --- ui/src/modules/Users/Menu/MenuItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/modules/Users/Menu/MenuItem.tsx b/ui/src/modules/Users/Menu/MenuItem.tsx index b144091e7f..aa3ac5a656 100644 --- a/ui/src/modules/Users/Menu/MenuItem.tsx +++ b/ui/src/modules/Users/Menu/MenuItem.tsx @@ -45,7 +45,7 @@ const MenuItem = ({ id, name, email }: Props) => { isActive={isActive()} data-testid={`menu-users-${email}`} > - + {name} From c0e0f34787ed9540fa01c72fa2c1bdc3e5ea10c8 Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Mon, 1 Feb 2021 13:57:26 -0300 Subject: [PATCH 28/30] add assertions to test Signed-off-by: luanecavalcantizup --- ui/src/modules/Users/__tests__/Users.spec.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/ui/src/modules/Users/__tests__/Users.spec.tsx b/ui/src/modules/Users/__tests__/Users.spec.tsx index 75c6d6b491..495732bd23 100644 --- a/ui/src/modules/Users/__tests__/Users.spec.tsx +++ b/ui/src/modules/Users/__tests__/Users.spec.tsx @@ -18,9 +18,11 @@ import React from 'react'; import { render, screen } from 'unit-test/testUtils'; import Users from '..'; -test('should render Users', () => { +test('should render Users', async () => { render(); + expect(screen.getByTestId('page')).toBeInTheDocument(); + expect(screen.getByTestId('page-menu')).toBeInTheDocument(); expect(screen.getByTestId('input-text-search')).toBeInTheDocument(); expect(screen.getByText('Create user')).toBeInTheDocument(); }); \ No newline at end of file From f38362b06fce4e4a970665181862be80cb4b2a8b Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Mon, 1 Feb 2021 15:31:11 -0300 Subject: [PATCH 29/30] remove unused code Signed-off-by: luanecavalcantizup --- ui/src/modules/Users/Menu/__tests__/Menu.spec.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/ui/src/modules/Users/Menu/__tests__/Menu.spec.tsx b/ui/src/modules/Users/Menu/__tests__/Menu.spec.tsx index d90436e385..69a4351b3b 100644 --- a/ui/src/modules/Users/Menu/__tests__/Menu.spec.tsx +++ b/ui/src/modules/Users/Menu/__tests__/Menu.spec.tsx @@ -15,9 +15,8 @@ */ import React from 'react'; -import { render, screen, waitFor } from 'unit-test/testUtils'; +import { render, screen } from 'unit-test/testUtils'; import { FetchMock } from 'jest-fetch-mock/types'; -import userEvent from '@testing-library/user-event'; import Menu from '..'; const props = { From 77390c1631a20834edac57f47858f98a8f3a4ea4 Mon Sep 17 00:00:00 2001 From: luanecavalcantizup Date: Tue, 9 Feb 2021 17:34:52 -0300 Subject: [PATCH 30/30] undo changes Signed-off-by: luanecavalcantizup --- ui/src/modules/Groups/__tests__/hooks.spec.ts | 20 +++++++++---------- ui/tsconfig.json | 11 +++++++--- 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/ui/src/modules/Groups/__tests__/hooks.spec.ts b/ui/src/modules/Groups/__tests__/hooks.spec.ts index d7e905e36e..108522b781 100644 --- a/ui/src/modules/Groups/__tests__/hooks.spec.ts +++ b/ui/src/modules/Groups/__tests__/hooks.spec.ts @@ -15,7 +15,7 @@ */ import { renderHook, act } from '@testing-library/react-hooks'; -import { waitFor } from 'unit-test/testUtils'; +import { screen, wait } from 'unit-test/testUtils'; import { FetchMock } from 'jest-fetch-mock'; import { useCreateUserGroup, useDeleteUserGroup, useFindAllUserGroup, useFindUserGroupByID, useListUser, useManagerMemberInUserGroup, useUpdateUserGroup } from '../hooks'; import { UserGroup } from '../interfaces/UserGroups'; @@ -42,7 +42,7 @@ test('create a new user group', async () => { await result.current.createUserGroup(newUserGroup.name); }); - await waitFor(() => expect(result.current.response).toMatchObject(newUserGroup)); + await wait(() => expect(result.current.response).toMatchObject(newUserGroup)); }); test('error create a new user group', async () => { @@ -61,8 +61,8 @@ test('error create a new user group', async () => { response = await result.current.createUserGroup(newUserGroup.name); }); - await waitFor(() => expect(response).toBeUndefined()); - await waitFor(() => expect(result.current.response).toBeUndefined()); + await wait(() => expect(response).toBeUndefined()); + await wait(() => expect(result.current.response).toBeUndefined()); }); test('to find all user groups', async () => { @@ -74,7 +74,7 @@ test('to find all user groups', async () => { await result.current[0]('group 1'); }); - await waitFor(() => expect(result.current[2]).toMatchObject(userGroupPagination)); + await wait(() => expect(result.current[2]).toMatchObject(userGroupPagination)); }); test('to find user group by id', async () => { @@ -86,7 +86,7 @@ test('to find user group by id', async () => { await result.current[0]('123'); }); - await waitFor(() => expect(result.current[1]).toMatchObject(userGroup)); + await wait(() => expect(result.current[1]).toMatchObject(userGroup)); }); test('to list users', async () => { @@ -98,7 +98,7 @@ test('to list users', async () => { await result.current[0]('charlescd@zup.com.br'); }); - await waitFor(() => expect(result.current[1]).toMatchObject(users)); + await wait(() => expect(result.current[1]).toMatchObject(users)); }); test('to update user group', async () => { @@ -110,7 +110,7 @@ test('to update user group', async () => { await result.current[0]('123', 'Charles'); }); - await waitFor(() => expect(result.current[1]).toMatchObject(userGroup)); + await wait(() => expect(result.current[1]).toMatchObject(userGroup)); }); test('to delete user group', async () => { @@ -122,7 +122,7 @@ test('to delete user group', async () => { await result.current[0]('123'); }); - await waitFor(() => expect(result.current[1]).toMatchObject({})); + await wait(() => expect(result.current[1]).toMatchObject({})); }); test('to manager members in user group', async () => { @@ -134,5 +134,5 @@ test('to manager members in user group', async () => { await result.current[0](false, '123', '456'); }); - await waitFor(() => expect(result.current[1]).toBe('resolved')); + await wait(() => expect(result.current[1]).toBe('resolved')); }); \ No newline at end of file diff --git a/ui/tsconfig.json b/ui/tsconfig.json index a004651c19..90226075ac 100644 --- a/ui/tsconfig.json +++ b/ui/tsconfig.json @@ -20,13 +20,18 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "react" + "jsx": "react-jsx", + "noFallthroughCasesInSwitch": true }, "include": [ "src" ], "paths": { - "core/*": ["core/*"], - "unit-test/*": ["unit-test/*"] + "core/*": [ + "core/*" + ], + "unit-test/*": [ + "unit-test/*" + ] } }