diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx index 7fe4688c9735..48ede4678d66 100644 --- a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx +++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx @@ -1,9 +1,6 @@ -import { Pagination } from '@rocket.chat/fuselage'; +import { Pagination, States, StatesAction, StatesActions, StatesIcon, StatesTitle } from '@rocket.chat/fuselage'; import { useMediaQuery, useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks'; -import type { OptionProp } from '@rocket.chat/ui-client'; -import { MultiSelectCustom } from '@rocket.chat/ui-client'; -import { useEndpoint, useRoute, useTranslation } from '@rocket.chat/ui-contexts'; -import { useQuery } from '@tanstack/react-query'; +import { useRouter, useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement, MutableRefObject } from 'react'; import React, { useRef, useMemo, useState, useEffect } from 'react'; @@ -19,7 +16,6 @@ import { import { usePagination } from '../../../../components/GenericTable/hooks/usePagination'; import { useSort } from '../../../../components/GenericTable/hooks/useSort'; import { useFilterActiveUsers } from '../hooks/useFilterActiveUsers'; -import { useFilterUsersByRole } from '../hooks/useFilterUsersByrole'; import { useListUsers } from '../hooks/useListUsers'; import UsersTableRow from './UsersTableRow'; @@ -31,36 +27,10 @@ type UsersTableProps = { // TODO: Missing error state const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => { const t = useTranslation(); - const usersRoute = useRoute('admin-users'); + const router = useRouter(); const mediaQuery = useMediaQuery('(min-width: 1024px)'); - const getRoles = useEndpoint('GET', '/v1/roles.list'); - const { data: roleData, isSuccess: hasRoleData } = useQuery(['roles'], async () => getRoles()); - - const roleFilterStructure = useMemo( - () => - [ - { - id: 'filter_by_role', - text: 'Filter_by_role', - isGroupTitle: true, - }, - { - id: 'all', - text: 'All_roles', - isGroupTitle: false, - }, - ...((hasRoleData && roleData.roles) || []).map((currentRole) => ({ - id: currentRole._id, - text: currentRole.name, - isGroupTitle: false, - })), - ] as OptionProp[], - [hasRoleData, roleData?.roles], - ); const [text, setText] = useState(''); - const [roleFilterOptions, setRoleFilterOptions] = useState([]); - const [roleFilterSelectedOptions, setRoleFilterSelectedOptions] = useState([]); const { current, itemsPerPage, setItemsPerPage, setCurrent, ...paginationProps } = usePagination(); const { sortBy, sortDirection, setSort } = useSort<'name' | 'username' | 'emails.address' | 'status'>('name'); @@ -68,7 +38,7 @@ const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => { const searchTerm = useDebouncedValue(text, 500); const prevSearchTerm = useRef(''); - const { data, isLoading, isSuccess, error, refetch } = useListUsers( + const { data, isLoading, isSuccess, isError, refetch } = useListUsers( searchTerm, prevSearchTerm, setCurrent, @@ -80,25 +50,20 @@ const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => { const useAllUsers = () => (tab === 'all' && isSuccess ? data?.users : []); - const currentTabUsers = [...useAllUsers(), ...useFilterActiveUsers(data?.users, tab)]; - const filteredUsers = useFilterUsersByRole( - currentTabUsers, - roleFilterSelectedOptions.map((currentRole) => currentRole.id), - ); + const filteredUsers = [...useAllUsers(), ...useFilterActiveUsers(data?.users, tab)]; useEffect(() => { reload.current = refetch; prevSearchTerm.current = searchTerm; }, [reload, refetch, searchTerm]); - useEffect(() => { - setRoleFilterOptions(roleFilterStructure); - }, [roleFilterStructure]); - const handleClick = useMutableCallback((id): void => - usersRoute.push({ - context: 'info', - id, + router.navigate({ + name: 'admin-users', + params: { + context: 'info', + id, + }, }), ); @@ -141,22 +106,9 @@ const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => { [mediaQuery, setSort, sortBy, sortDirection, t], ); - if (error) { - return null; - } - return ( <> - setText(text)}> - - + setText(text)} /> {isLoading && ( {headers} @@ -185,6 +137,15 @@ const UsersTable = ({ reload, tab }: UsersTableProps): ReactElement | null => { )} {isSuccess && data?.count === 0 && } + {isError && ( + + + {t('Something_went_wrong')} + + refetch()}>{t('Reload_page')} + + + )} ); }; diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json index 756f74a3acb5..3e730ac8530f 100644 --- a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json +++ b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json @@ -396,6 +396,8 @@ "AutoLinker_UrlsRegExp": "AutoLinker URL Regular Expression", "All_messages": "All messages", "All_Prices": "All prices", + "All_roles": "All roles", + "All_rooms": "All rooms", "All_status": "All status", "All_users": "All users", "All_users_in_the_channel_can_write_new_messages": "All users in the channel can write new messages", @@ -2315,6 +2317,8 @@ "Filter_by_category": "Filter by Category", "Filter_by_Custom_Fields": "Filter by Custom Fields", "Filter_By_Price": "Filter by price", + "Filter_by_role": "Filter by role", + "Filter_by_room": "Filter by room type", "Filter_By_Status": "Filter by status", "Filters": "Filters", "Filters_applied": "Filters applied", @@ -6031,9 +6035,7 @@ "multiple_instance_solutions": "multiple instance solutions", "Uninstall_grandfathered_app": "Uninstall {{appName}}?", "App_will_lose_grandfathered_status": "**This {{context}} app will lose its grandfathered status.** \n \nWorkspaces on Community Edition can have up to {{limit}} {{context}} apps enabled. Grandfathered apps count towards the limit but the limit is not applied to them.", - "All_rooms": "All rooms", "All_visible": "All visible", - "Filter_by_room": "Filter by room type", "Filter_by_visibility": "Filter by visibility", "Registration_status": "Registration status", "Theme_Appearence": "Theme Appearence"