chore: Move GenericTable to ui-client package

apps/meteor/.eslintrc.json

@@ -23,6 +23,8 @@
 		]
 	},
 	"ignorePatterns": [
+		"**/server/**",
+		"/dist/**",
 		"app/emoji-emojione/generateEmojiIndex.js",
 		"public",
 		"private/moment-locales",

apps/meteor/client/components/GenericNoResults/GenericNoResults.stories.tsx

@@ -0,0 +1,30 @@
+import { TextInput, Box, Icon } from '@rocket.chat/fuselage';
+import type { Meta, StoryFn } from '@storybook/react';
+
+import GenericNoResults from './GenericNoResults';
+
+export default {
+	component: GenericNoResults,
+	parameters: {
+		layout: 'padded',
+		actions: { argTypesRegex: '^on.*' },
+	},
+	decorators: [
+		(fn) => <div style={{ height: '100vh', maxHeight: 300, display: 'flex', flexDirection: 'column', marginInline: 24 }}>{fn()}</div>,
+	],
+} satisfies Meta<typeof GenericNoResults>;
+
+const filter = (
+	<>
+		<Box mb={16} is='form' display='flex' flexDirection='column'>
+			<TextInput flexShrink={0} placeholder='Search...' addon={<Icon name='magnifier' size='x20' />} />
+		</Box>
+	</>
+);
+
+export const NoResults: StoryFn<typeof GenericNoResults> = () => (
+	<>
+		{filter}
+		<GenericNoResults />
+	</>
+);

apps/meteor/client/components/deviceManagement/DeviceManagementTable/DeviceManagementTable.tsx

@@ -1,12 +1,12 @@
 import type { DeviceManagementSession, DeviceManagementPopulatedSession, Serialized } from '@rocket.chat/core-typings';
 import { Box, Pagination, States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage';
 import type { PaginatedResult } from '@rocket.chat/rest-typings';
+import { GenericTable, GenericTableHeader, GenericTableBody, GenericTableLoadingTable } from '@rocket.chat/ui-client';
 import type { UseQueryResult } from '@tanstack/react-query';
 import type { ComponentProps, ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import GenericNoResults from '../../GenericNoResults/GenericNoResults';
-import { GenericTable, GenericTableHeader, GenericTableBody, GenericTableLoadingTable } from '../../GenericTable';
 
 // FIXME: this tight coupling with the query result is not ideal; it indicates visual components should not be tightly
 // coupled with data fetching logic.

apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountRow.tsx

@@ -1,9 +1,9 @@
 import { Box, Button } from '@rocket.chat/fuselage';
 import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import { GenericTableCell, GenericTableRow } from '@rocket.chat/ui-client';
 import type { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { GenericTableCell, GenericTableRow } from '../../../../components/GenericTable';
 import DeviceIcon from '../../../../components/deviceManagement/DeviceIcon';
 import { useDeviceLogout } from '../../../../hooks/useDeviceLogout';
 import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';

apps/meteor/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountTable.tsx

@@ -1,14 +1,12 @@
 import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import { GenericTableHeaderCell, usePagination, useSort } from '@rocket.chat/ui-client';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import DeviceManagementAccountRow from './DeviceManagementAccountRow';
-import { GenericTableHeaderCell } from '../../../../components/GenericTable';
-import { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
-import { useSort } from '../../../../components/GenericTable/hooks/useSort';
 import DeviceManagementTable from '../../../../components/deviceManagement/DeviceManagementTable';
 import { deviceManagementQueryKeys } from '../../../../lib/queryKeys';
 

apps/meteor/client/views/account/tokens/AccountTokensTable/AccountTokensRow.tsx

@@ -1,9 +1,9 @@
 import type { IPersonalAccessToken, Serialized } from '@rocket.chat/core-typings';
 import { ButtonGroup, IconButton } from '@rocket.chat/fuselage';
+import { GenericTableRow, GenericTableCell } from '@rocket.chat/ui-client';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { GenericTableRow, GenericTableCell } from '../../../../components/GenericTable';
 import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
 
 type AccountTokensRowProps = {

apps/meteor/client/views/account/tokens/AccountTokensTable/AccountTokensTable.tsx

@@ -1,5 +1,13 @@
 import { Box, Pagination, States, StatesAction, StatesActions, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage';
-import { GenericModal } from '@rocket.chat/ui-client';
+import {
+	GenericModal,
+	GenericTable,
+	GenericTableHeader,
+	GenericTableBody,
+	GenericTableLoadingTable,
+	GenericTableHeaderCell,
+	usePagination,
+} from '@rocket.chat/ui-client';
 import { useSetModal, useToastMessageDispatch, useUserId, useMethod, useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import DOMPurify from 'dompurify';
@@ -10,14 +18,6 @@ import { useTranslation } from 'react-i18next';
 import AccountTokensRow from './AccountTokensRow';
 import AddToken from './AddToken';
 import GenericNoResults from '../../../../components/GenericNoResults';
-import {
-	GenericTable,
-	GenericTableHeader,
-	GenericTableBody,
-	GenericTableLoadingTable,
-	GenericTableHeaderCell,
-} from '../../../../components/GenericTable';
-import { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
 import { useResizeInlineBreakpoint } from '../../../../hooks/useResizeInlineBreakpoint';
 import { miscQueryKeys } from '../../../../lib/queryKeys';
 

apps/meteor/client/views/admin/customEmoji/CustomEmoji.tsx

@@ -1,12 +1,5 @@
 import { Box, Pagination, States, StatesActions, StatesAction, StatesIcon, StatesTitle } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
-import { useQuery } from '@tanstack/react-query';
-import type { MutableRefObject } from 'react';
-import { useEffect, useMemo, useState } from 'react';
-
-import FilterByText from '../../../components/FilterByText';
-import GenericNoResults from '../../../components/GenericNoResults';
 import {
 	GenericTable,
 	GenericTableBody,
@@ -15,9 +8,16 @@ import {
 	GenericTableHeaderCell,
 	GenericTableLoadingTable,
 	GenericTableRow,
-} from '../../../components/GenericTable';
-import { usePagination } from '../../../components/GenericTable/hooks/usePagination';
-import { useSort } from '../../../components/GenericTable/hooks/useSort';
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
+import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import type { MutableRefObject } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+
+import FilterByText from '../../../components/FilterByText';
+import GenericNoResults from '../../../components/GenericNoResults';
 
 type CustomEmojiProps = {
 	reload: MutableRefObject<() => void>;

apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundRow.tsx

@@ -1,12 +1,11 @@
 import type { ICustomSound } from '@rocket.chat/core-typings';
 import { Box, IconButton } from '@rocket.chat/fuselage';
+import { GenericTableCell, GenericTableRow } from '@rocket.chat/ui-client';
 import { useCustomSound } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { GenericTableCell, GenericTableRow } from '../../../../components/GenericTable';
-
 type CustomSoundRowProps = {
 	onClick: (soundId: ICustomSound['_id']) => () => void;
 	sound: {

apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.tsx

@@ -1,5 +1,14 @@
 import { Pagination, States, StatesIcon, StatesActions, StatesAction, StatesTitle } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import {
+	GenericTable,
+	GenericTableBody,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableLoadingTable,
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
 import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { MutableRefObject } from 'react';
@@ -8,15 +17,6 @@ import { useState, useMemo, useEffect } from 'react';
 import CustomSoundRow from './CustomSoundRow';
 import FilterByText from '../../../../components/FilterByText';
 import GenericNoResults from '../../../../components/GenericNoResults';
-import {
-	GenericTable,
-	GenericTableBody,
-	GenericTableHeader,
-	GenericTableHeaderCell,
-	GenericTableLoadingTable,
-} from '../../../../components/GenericTable';
-import { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
-import { useSort } from '../../../../components/GenericTable/hooks/useSort';
 
 type CustomSoundsTableProps = {
 	onClick: (soundId: string) => () => void;

apps/meteor/client/views/admin/customUserStatus/CustomUserStatusTable/CustomUserStatusRow.tsx

@@ -1,8 +1,8 @@
 import type { IUserStatus } from '@rocket.chat/core-typings';
+import { GenericTableRow, GenericTableCell } from '@rocket.chat/ui-client';
 import type { CSSProperties, ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { GenericTableRow, GenericTableCell } from '../../../../components/GenericTable';
 import MarkdownText from '../../../../components/MarkdownText';
 
 const style: CSSProperties = { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' };

apps/meteor/client/views/admin/customUserStatus/CustomUserStatusTable/CustomUserStatusTable.tsx

@@ -1,6 +1,15 @@
 import { Pagination } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { escapeRegExp } from '@rocket.chat/string-helpers';
+import {
+	GenericTable,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableBody,
+	GenericTableLoadingTable,
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import type { ReactElement, MutableRefObject } from 'react';
@@ -10,15 +19,6 @@ import { useTranslation } from 'react-i18next';
 import CustomUserStatusRow from './CustomUserStatusRow';
 import FilterByText from '../../../../components/FilterByText';
 import GenericNoResult from '../../../../components/GenericNoResults';
-import {
-	GenericTable,
-	GenericTableHeader,
-	GenericTableHeaderCell,
-	GenericTableBody,
-	GenericTableLoadingTable,
-} from '../../../../components/GenericTable';
-import { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
-import { useSort } from '../../../../components/GenericTable/hooks/useSort';
 
 type CustomUserStatusProps = {
 	reload: MutableRefObject<() => void>;

apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminRow.tsx

@@ -1,13 +1,12 @@
 import { Box } from '@rocket.chat/fuselage';
 import { useMediaQuery, useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
-import { GenericMenu } from '@rocket.chat/ui-client';
+import { GenericMenu, GenericTableRow, GenericTableCell } from '@rocket.chat/ui-client';
 import { useRoute } from '@rocket.chat/ui-contexts';
 import type { KeyboardEvent } from 'react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { GenericTableRow, GenericTableCell } from '../../../../components/GenericTable';
 import DeviceIcon from '../../../../components/deviceManagement/DeviceIcon';
 import { useDeviceLogout } from '../../../../hooks/useDeviceLogout';
 import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';

apps/meteor/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminTable.tsx

@@ -1,15 +1,13 @@
 import type { DeviceManagementPopulatedSession, DeviceManagementSession, Serialized } from '@rocket.chat/core-typings';
 import { useDebouncedValue, useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import { GenericTableHeaderCell, usePagination, useSort } from '@rocket.chat/ui-client';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import DeviceManagementAdminRow from './DeviceManagementAdminRow';
 import FilterByText from '../../../../components/FilterByText';
-import { GenericTableHeaderCell } from '../../../../components/GenericTable';
-import { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
-import { useSort } from '../../../../components/GenericTable/hooks/useSort';
 import DeviceManagementTable from '../../../../components/deviceManagement/DeviceManagementTable';
 import { deviceManagementQueryKeys } from '../../../../lib/queryKeys';
 

apps/meteor/client/views/admin/emailInbox/EmailInboxTable.tsx

@@ -1,11 +1,4 @@
 import { Pagination, States, StatesAction, StatesActions, StatesIcon, StatesTitle } from '@rocket.chat/fuselage';
-import { useRoute, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
-import { useQuery } from '@tanstack/react-query';
-import type { ReactElement } from 'react';
-import { useMemo, useCallback } from 'react';
-
-import SendTestButton from './SendTestButton';
-import GenericNoResults from '../../../components/GenericNoResults';
 import {
 	GenericTable,
 	GenericTableBody,
@@ -14,9 +7,16 @@ import {
 	GenericTableHeaderCell,
 	GenericTableLoadingTable,
 	GenericTableRow,
-} from '../../../components/GenericTable';
-import { usePagination } from '../../../components/GenericTable/hooks/usePagination';
-import { useSort } from '../../../components/GenericTable/hooks/useSort';
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
+import { useRoute, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import type { ReactElement } from 'react';
+import { useMemo, useCallback } from 'react';
+
+import SendTestButton from './SendTestButton';
+import GenericNoResults from '../../../components/GenericNoResults';
 
 const EmailInboxTable = (): ReactElement => {
 	const t = useTranslation();

apps/meteor/client/views/admin/emailInbox/SendTestButton.tsx

@@ -1,11 +1,10 @@
 import type { IEmailInboxPayload } from '@rocket.chat/core-typings';
 import { Button } from '@rocket.chat/fuselage';
+import { GenericTableCell } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
 import type { MouseEvent, ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { GenericTableCell } from '../../../components/GenericTable';
-
 const SendTestButton = ({ id }: { id: IEmailInboxPayload['_id'] }): ReactElement => {
 	const { t } = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();

apps/meteor/client/views/admin/import/PrepareContacts.tsx

@@ -1,10 +1,9 @@
 import type { IImporterSelectionContact } from '@rocket.chat/core-typings';
 import { CheckBox, Table, Pagination, TableHead, TableRow, TableCell, TableBody } from '@rocket.chat/fuselage';
+import { usePagination } from '@rocket.chat/ui-client';
 import type { Dispatch, SetStateAction, ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { usePagination } from '../../../components/GenericTable/hooks/usePagination';
-
 type PrepareContactsProps = {
 	contactsCount: number;
 	contacts: IImporterSelectionContact[];

apps/meteor/client/views/admin/integrations/IntegrationRow.tsx

@@ -1,7 +1,7 @@
 import type { IIntegration, Serialized } from '@rocket.chat/core-typings';
 import { Box } from '@rocket.chat/fuselage';
+import { GenericTableCell, GenericTableRow } from '@rocket.chat/ui-client';
 
-import { GenericTableCell, GenericTableRow } from '../../../components/GenericTable';
 import { useFormatDateAndTime } from '../../../hooks/useFormatDateAndTime';
 
 type IntegrationRowProps = {

apps/meteor/client/views/admin/integrations/IntegrationsTable.tsx

@@ -1,22 +1,22 @@
 import { Pagination, States, StatesActions, StatesAction, StatesIcon, StatesTitle } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { escapeRegExp } from '@rocket.chat/string-helpers';
+import {
+	GenericTable,
+	GenericTableBody,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableLoadingTable,
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
 import { useEndpoint, useRoute, useTranslation, useLayout } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import { useMemo, useCallback, useState } from 'react';
 
 import IntegrationRow from './IntegrationRow';
 import FilterByText from '../../../components/FilterByText';
 import GenericNoResults from '../../../components/GenericNoResults';
-import {
-	GenericTable,
-	GenericTableBody,
-	GenericTableHeader,
-	GenericTableHeaderCell,
-	GenericTableLoadingTable,
-} from '../../../components/GenericTable';
-import { usePagination } from '../../../components/GenericTable/hooks/usePagination';
-import { useSort } from '../../../components/GenericTable/hooks/useSort';
 
 const IntegrationsTable = ({ type }: { type?: string }) => {
 	const t = useTranslation();

apps/meteor/client/views/admin/integrations/outgoing/history/OutgoingWebhookHistoryPage.tsx

@@ -1,13 +1,12 @@
 import { Button, ButtonGroup, Pagination } from '@rocket.chat/fuselage';
-import { CustomScrollbars } from '@rocket.chat/ui-client';
+import { CustomScrollbars, usePagination } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch, useRouteParameter, useMethod, useTranslation, useEndpoint, useRouter } from '@rocket.chat/ui-contexts';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import type { ComponentProps } from 'react';
 import { useMemo, useState, useEffect } from 'react';
 
 import HistoryContent from './HistoryContent';
 import { sdk } from '../../../../../../app/utils/client/lib/SDKClient';
-import { usePagination } from '../../../../../components/GenericTable/hooks/usePagination';
 import { Page, PageHeader, PageContent } from '../../../../../components/Page';
 
 const OutgoingWebhookHistoryPage = (props: ComponentProps<typeof Page>) => {

apps/meteor/client/views/admin/invites/InviteRow.tsx

@@ -1,11 +1,11 @@
 import type { IInvite } from '@rocket.chat/core-typings';
 import { Box, IconButton } from '@rocket.chat/fuselage';
 import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import { GenericTableCell, GenericTableRow } from '@rocket.chat/ui-client';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import type { ReactElement, MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { GenericTableCell, GenericTableRow } from '../../../components/GenericTable';
 import { useFormatDateAndTime } from '../../../hooks/useFormatDateAndTime';
 import { useTimeFromNow } from '../../../hooks/useTimeFromNow';