Skip to content

chore: Move GenericTable to ui-client package #37830

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kodiakhq merged 7 commits into from
Dec 16, 2025
Merged

chore: Move GenericTable to ui-client package #37830

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a7d30c4
Move `GenericNoResults` stories to it's own file
gabriellsh Dec 15, 2025
bb6c780
Move `GenericTable` to `ui-client` package
gabriellsh Dec 15, 2025
6ad55c1
Export hooks
gabriellsh Dec 15, 2025
a9b37ed
Change imports
gabriellsh Dec 15, 2025
109eaf4
delete old files
gabriellsh Dec 16, 2025
77c9a0b
undo eslint changes
gabriellsh Dec 16, 2025
dafe537
Merge branch 'develop' into chore/moveGenericTable
gabriellsh Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions apps/meteor/client/components/GenericNoResults/GenericNoResults.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 />
</>
);
2 changes: 1 addition & 1 deletion ...meteor/client/components/deviceManagement/DeviceManagementTable/DeviceManagementTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
2 changes: 1 addition & 1 deletion ...iews/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
4 changes: 1 addition & 3 deletions ...ws/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/account/tokens/AccountTokensTable/AccountTokensRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down
18 changes: 9 additions & 9 deletions apps/meteor/client/views/account/tokens/AccountTokensTable/AccountTokensTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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';

Expand Down
20 changes: 10 additions & 10 deletions apps/meteor/client/views/admin/customEmoji/CustomEmoji.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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>;
Expand Down
3 changes: 1 addition & 2 deletions apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down
18 changes: 9 additions & 9 deletions apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion .../meteor/client/views/admin/customUserStatus/CustomUserStatusTable/CustomUserStatusRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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' };
Expand Down
18 changes: 9 additions & 9 deletions ...eteor/client/views/admin/customUserStatus/CustomUserStatusTable/CustomUserStatusTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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>;
Expand Down
3 changes: 1 addition & 2 deletions ...ient/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
4 changes: 1 addition & 3 deletions ...nt/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
20 changes: 10 additions & 10 deletions apps/meteor/client/views/admin/emailInbox/EmailInboxTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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();
Expand Down
3 changes: 1 addition & 2 deletions apps/meteor/client/views/admin/emailInbox/SendTestButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
3 changes: 1 addition & 2 deletions apps/meteor/client/views/admin/import/PrepareContacts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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[];
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/admin/integrations/IntegrationRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down
18 changes: 9 additions & 9 deletions apps/meteor/client/views/admin/integrations/IntegrationsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down
3 changes: 1 addition & 2 deletions apps/meteor/client/views/admin/integrations/outgoing/history/OutgoingWebhookHistoryPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>) => {
Expand Down
2 changes: 1 addition & 1 deletion apps/meteor/client/views/admin/invites/InviteRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
Loading
Loading