From f7d2e27eec6aef11a72bc479ec86cde3a0565306 Mon Sep 17 00:00:00 2001 From: Douglas Fabris Date: Fri, 23 Jun 2023 23:44:15 -0300 Subject: [PATCH] chore: `Table` in favor of `GenericTable` (#29628) --- .../AccountTokensTable/AccountTokensRow.tsx | 21 +++--- .../CustomUserStatusRow.tsx | 14 ++-- .../views/admin/emailInbox/SendTestButton.tsx | 8 ++- .../views/admin/import/ImportHistoryPage.tsx | 54 +++++++-------- .../admin/import/ImportOperationSummary.js | 22 +++---- .../import/ImportOperationSummary.stories.tsx | 4 +- .../import/ImportOperationSummarySkeleton.js | 38 +++++------ .../views/admin/import/PrepareChannels.tsx | 34 +++++----- .../views/admin/import/PrepareUsers.tsx | 38 +++++------ .../moderation/ModerationConsoleTableRow.tsx | 27 ++++---- .../PermissionsTable/PermissionRow.tsx | 10 +-- .../permissions/PermissionsTable/RoleCell.tsx | 7 +- .../UsersInRoleTable/UsersInRoleTableRow.tsx | 17 ++--- .../groups/voip/AssignAgentButton.tsx | 7 +- .../groups/voip/RemoveAgentButton.tsx | 7 +- .../admin/users/UsersTable/UsersTableRow.tsx | 30 +++++---- .../ChannelsTable/ChannelsTableRow.tsx | 27 ++++---- .../tabs/teams/TeamsTable/TeamsTableRow.tsx | 19 +++--- .../tabs/users/UsersTable/UsersTableRow.tsx | 21 +++--- .../omnichannel/analytics/AgentOverview.tsx | 24 +++---- .../DepartmentAgentsTable/AgentRow.tsx | 23 +++---- .../directory/calls/CallTableRow.tsx | 20 +++--- .../managers/RemoveManagerButton.tsx | 7 +- .../ChannelDesertionTableRow.tsx | 15 +++-- .../omnichannel/RemoveBusinessHourButton.js | 7 +- .../DeviceManagementAccountRow.tsx | 21 +++--- .../DeviceManagementAdminRow.tsx | 25 +++---- .../channels/ChannelsOverview.tsx | 66 +++++++++---------- .../messages/MessagesPerChannelSection.tsx | 62 ++++++++++------- .../views/audit/components/AuditLogEntry.tsx | 23 +++---- yarn.lock | 40 +++++------ 31 files changed, 390 insertions(+), 348 deletions(-) diff --git a/apps/meteor/client/views/account/tokens/AccountTokensTable/AccountTokensRow.tsx b/apps/meteor/client/views/account/tokens/AccountTokensTable/AccountTokensRow.tsx index 33a5b3855b5e..39c8c6f1cc28 100644 --- a/apps/meteor/client/views/account/tokens/AccountTokensTable/AccountTokensRow.tsx +++ b/apps/meteor/client/views/account/tokens/AccountTokensTable/AccountTokensRow.tsx @@ -1,9 +1,10 @@ import type { IPersonalAccessToken, Serialized } from '@rocket.chat/core-typings'; -import { ButtonGroup, IconButton, TableRow, TableCell } from '@rocket.chat/fuselage'; +import { ButtonGroup, IconButton } from '@rocket.chat/fuselage'; import { useTranslation } from '@rocket.chat/ui-contexts'; import type { FC } from 'react'; import React, { useCallback } from 'react'; +import { GenericTableRow, GenericTableCell } from '../../../../components/GenericTable'; import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime'; type AccountTokensRowProps = { @@ -27,20 +28,20 @@ const AccountTokensRow: FC = ({ const handleRemove = useCallback(() => onRemove(name), [name, onRemove]); return ( - - + + {name} - - {isMedium && {formatDateAndTime(createdAt)}} - ...{lastTokenPart} - {bypassTwoFactor ? t('Ignore') : t('Require')} - + + {isMedium && {formatDateAndTime(createdAt)}} + ...{lastTokenPart} + {bypassTwoFactor ? t('Ignore') : t('Require')} + - - + + ); }; diff --git a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusTable/CustomUserStatusRow.tsx b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusTable/CustomUserStatusRow.tsx index 179071c7bff3..fb85f20eca29 100644 --- a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusTable/CustomUserStatusRow.tsx +++ b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusTable/CustomUserStatusRow.tsx @@ -1,8 +1,8 @@ import type { IUserStatus } from '@rocket.chat/core-typings'; -import { TableRow, TableCell } from '@rocket.chat/fuselage'; import type { CSSProperties, ReactElement } from 'react'; import React from 'react'; +import { GenericTableRow, GenericTableCell } from '../../../../components/GenericTable'; import MarkdownText from '../../../../components/MarkdownText'; const style: CSSProperties = { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }; @@ -16,7 +16,7 @@ const CustomUserStatusRow = ({ status, onClick }: CustomUserStatusRowProps): Rea const { _id, name, statusType } = status; return ( - onClick(_id)} onClick={(): void => onClick(_id)} @@ -25,13 +25,13 @@ const CustomUserStatusRow = ({ status, onClick }: CustomUserStatusRowProps): Rea action qa-user-id={_id} > - + - - + + {statusType} - - + + ); }; diff --git a/apps/meteor/client/views/admin/emailInbox/SendTestButton.tsx b/apps/meteor/client/views/admin/emailInbox/SendTestButton.tsx index 4f4fa8215901..ed44621137bf 100644 --- a/apps/meteor/client/views/admin/emailInbox/SendTestButton.tsx +++ b/apps/meteor/client/views/admin/emailInbox/SendTestButton.tsx @@ -1,9 +1,11 @@ import type { IEmailInboxPayload } from '@rocket.chat/core-typings'; -import { Box, Button, TableCell, Icon } from '@rocket.chat/fuselage'; +import { Box, Button, Icon } from '@rocket.chat/fuselage'; import { useToastMessageDispatch, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { GenericTableCell } from '../../../components/GenericTable'; + const SendTestButton = ({ id }: { id: IEmailInboxPayload['_id'] }): ReactElement => { const t = useTranslation(); const dispatchToastMessage = useToastMessageDispatch(); @@ -28,14 +30,14 @@ const SendTestButton = ({ id }: { id: IEmailInboxPayload['_id'] }): ReactElement }; return ( - + - + ); }; diff --git a/apps/meteor/client/views/admin/import/ImportHistoryPage.tsx b/apps/meteor/client/views/admin/import/ImportHistoryPage.tsx index 2c924e3b580f..b1d514a076c7 100644 --- a/apps/meteor/client/views/admin/import/ImportHistoryPage.tsx +++ b/apps/meteor/client/views/admin/import/ImportHistoryPage.tsx @@ -1,4 +1,4 @@ -import { Button, ButtonGroup, Table } from '@rocket.chat/fuselage'; +import { Button, ButtonGroup, Table, TableHead, TableCell, TableRow, TableBody } from '@rocket.chat/fuselage'; import { useMediaQuery } from '@rocket.chat/fuselage-hooks'; import { useToastMessageDispatch, useRoute, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; @@ -115,46 +115,46 @@ function ImportHistoryPage() { - - - + + + {t('Import_Type')} - - + + {t('Last_Updated')} - + {!small && ( <> - + {t('Last_Status')} - - + + {t('File')} - - + + {t('Counters')} - + )} - + {!small && ( - - + + {t('Users')} - - + + {t('Channels')} - - + + {t('Messages')} - - + + {t('Total')} - - + + )} - - + + {isLoading && ( <> {Array.from({ length: 20 }, (_, i) => ( @@ -176,7 +176,7 @@ function ImportHistoryPage() { ))} )} - +
diff --git a/apps/meteor/client/views/admin/import/ImportOperationSummary.js b/apps/meteor/client/views/admin/import/ImportOperationSummary.js index a95e03d75c14..79e88ddbe358 100644 --- a/apps/meteor/client/views/admin/import/ImportOperationSummary.js +++ b/apps/meteor/client/views/admin/import/ImportOperationSummary.js @@ -1,4 +1,4 @@ -import { Table } from '@rocket.chat/fuselage'; +import { TableRow, TableCell } from '@rocket.chat/fuselage'; import { useRoute, useTranslation } from '@rocket.chat/ui-contexts'; import React, { useMemo } from 'react'; @@ -81,20 +81,20 @@ function ImportOperationSummary({ : {}; return ( - - {type} - {formatDateAndTime(_updatedAt)} + + {type} + {formatDateAndTime(_updatedAt)} {!small && ( <> - {status && t(status.replace('importer_', 'importer_status_'))} - {fileName} - {users} - {channels} - {messages} - {total} + {status && t(status.replace('importer_', 'importer_status_'))} + {fileName} + {users} + {channels} + {messages} + {total} )} - + ); } diff --git a/apps/meteor/client/views/admin/import/ImportOperationSummary.stories.tsx b/apps/meteor/client/views/admin/import/ImportOperationSummary.stories.tsx index 0e41058b5f90..39972c78fa2d 100644 --- a/apps/meteor/client/views/admin/import/ImportOperationSummary.stories.tsx +++ b/apps/meteor/client/views/admin/import/ImportOperationSummary.stories.tsx @@ -1,4 +1,4 @@ -import { Table } from '@rocket.chat/fuselage'; +import { Table, TableBody } from '@rocket.chat/fuselage'; import type { ComponentMeta, ComponentStory } from '@storybook/react'; import React from 'react'; @@ -16,7 +16,7 @@ export default { decorators: [ (fn) => ( - {fn()} + {fn()}
), ], diff --git a/apps/meteor/client/views/admin/import/ImportOperationSummarySkeleton.js b/apps/meteor/client/views/admin/import/ImportOperationSummarySkeleton.js index 401f30aed3f5..81509516d234 100644 --- a/apps/meteor/client/views/admin/import/ImportOperationSummarySkeleton.js +++ b/apps/meteor/client/views/admin/import/ImportOperationSummarySkeleton.js @@ -1,38 +1,38 @@ -import { Skeleton, Table } from '@rocket.chat/fuselage'; +import { Skeleton, TableRow, TableCell } from '@rocket.chat/fuselage'; import React from 'react'; function ImportOperationSummarySkeleton({ small }) { return ( - - + + - - + + - + {!small && ( <> - + - - + + - - + + - - + + - - + + - - + + - + )} - + ); } diff --git a/apps/meteor/client/views/admin/import/PrepareChannels.tsx b/apps/meteor/client/views/admin/import/PrepareChannels.tsx index c07e76b2dd81..e7b5f4a6a6a3 100644 --- a/apps/meteor/client/views/admin/import/PrepareChannels.tsx +++ b/apps/meteor/client/views/admin/import/PrepareChannels.tsx @@ -1,4 +1,4 @@ -import { CheckBox, Table, Tag, Pagination } from '@rocket.chat/fuselage'; +import { CheckBox, Table, Tag, Pagination, TableHead, TableRow, TableCell, TableBody } from '@rocket.chat/fuselage'; import { useTranslation } from '@rocket.chat/ui-contexts'; import type { FC, Dispatch, SetStateAction, ChangeEvent } from 'react'; import React, { useState, useCallback } from 'react'; @@ -33,9 +33,9 @@ const PrepareChannels: FC = ({ channels, channelsCount, se return ( <> - - - + + + 0} indeterminate={channelsCount > 0 && channelsCount !== channels.length} @@ -56,15 +56,15 @@ const PrepareChannels: FC = ({ channels, channelsCount, se }); }} /> - - {t('Name')} - - - - + + {t('Name')} + + + + {channels.slice(current, current + itemsPerPage).map((channel) => ( - - + + ): void => { @@ -74,12 +74,12 @@ const PrepareChannels: FC = ({ channels, channelsCount, se ); }} /> - - {channel.name} - {channel.is_archived && {t('Importer_Archived')}} - + + {channel.name} + {channel.is_archived && {t('Importer_Archived')}} + ))} - +
= ({ usersCount, users, setUsers }) => return ( <> - - - + + + 0} indeterminate={usersCount > 0 && usersCount !== users.length} @@ -53,16 +53,16 @@ const PrepareUsers: FC = ({ usersCount, users, setUsers }) => }); }} /> - - {t('Username')} - {t('Email')} - - - - + + {t('Username')} + {t('Email')} + + + + {users.slice(current, current + itemsPerPage).map((user) => ( - - + + ): void => { @@ -70,13 +70,13 @@ const PrepareUsers: FC = ({ usersCount, users, setUsers }) => setUsers((users) => users.map((_user) => (_user === user ? { ..._user, do_import: checked } : _user))); }} /> - - {user.username} - {user.email} - {user.is_deleted && {t('Deleted')}} - + + {user.username} + {user.email} + {user.is_deleted && {t('Deleted')}} + ))} - +
onClick(_id)} onClick={(): void => onClick(_id)} tabIndex={0} role='link' action> - + onClick(_id)} onClick={(): void => onClick(_id)} tabIndex={0} role='link' action> + {username && ( @@ -49,22 +50,22 @@ const ModerationConsoleTableRow = ({ report, onClick, isDesktopOrLarger }: Moder - + {isDesktopOrLarger && ( - + {username} - + )} - {message} - {concatenatedRoomNames} - {formatDateAndTime(ts)} - {count} - e.stopPropagation()}> + {message} + {concatenatedRoomNames} + {formatDateAndTime(ts)} + {count} + e.stopPropagation()}> - - + + ); }; diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionRow.tsx b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionRow.tsx index 36d337a024c4..300d80f4f51c 100644 --- a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionRow.tsx +++ b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionRow.tsx @@ -1,5 +1,4 @@ import type { IRole, IPermission } from '@rocket.chat/core-typings'; -import { TableRow, TableCell } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; import { useTranslation } from '@rocket.chat/ui-contexts'; @@ -7,6 +6,7 @@ import type { ReactElement } from 'react'; import React, { useState, memo } from 'react'; import { CONSTANTS } from '../../../../../app/authorization/lib'; +import { GenericTableRow, GenericTableCell } from '../../../../components/GenericTable'; import { useChangeRole } from '../hooks/useChangeRole'; import RoleCell from './RoleCell'; @@ -42,10 +42,10 @@ const PermissionRow = ({ permission, roleList, onGrant, onRemove }: PermissionRo const onMouseLeave = useMutableCallback(() => setHovered(false)); return ( - - + + {getName(t, permission)} - + {roleList.map(({ _id, name, description }) => ( ))} - + ); }; diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/RoleCell.tsx b/apps/meteor/client/views/admin/permissions/PermissionsTable/RoleCell.tsx index f2ca908d9517..cb686584b2c0 100644 --- a/apps/meteor/client/views/admin/permissions/PermissionsTable/RoleCell.tsx +++ b/apps/meteor/client/views/admin/permissions/PermissionsTable/RoleCell.tsx @@ -1,10 +1,11 @@ import type { IRole } from '@rocket.chat/core-typings'; -import { TableCell, Margins, Box, CheckBox, Throbber } from '@rocket.chat/fuselage'; +import { Margins, Box, CheckBox, Throbber } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; import type { ReactElement } from 'react'; import React, { useState, memo } from 'react'; import { AuthorizationUtils } from '../../../../../app/authorization/lib'; +import { GenericTableCell } from '../../../../components/GenericTable'; type RoleCellProps = { _id: IRole['_id']; @@ -32,7 +33,7 @@ const RoleCell = ({ _id, name, description, onChange, lineHovered, permissionId, const isDisabled = !!loading || !!isRestrictedForRole; return ( - + {!loading && ( @@ -42,7 +43,7 @@ const RoleCell = ({ _id, name, description, onChange, lineHovered, permissionId, )} {loading && } - + ); }; diff --git a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx index d12818a31447..b4a9dcebb882 100644 --- a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx +++ b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx @@ -1,10 +1,11 @@ import type { IUserInRole } from '@rocket.chat/core-typings'; -import { Box, TableRow, TableCell, Button, Icon } from '@rocket.chat/fuselage'; +import { Box, Button, Icon } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; import type { ReactElement } from 'react'; import React, { memo } from 'react'; import { getUserEmailAddress } from '../../../../../../lib/getUserEmailAddress'; +import { GenericTableRow, GenericTableCell } from '../../../../../components/GenericTable'; import UserAvatar from '../../../../../components/avatar/UserAvatar'; type UsersInRoleTableRowProps = { @@ -21,8 +22,8 @@ const UsersInRoleTableRow = ({ user, onRemove }: UsersInRoleTableRowProps): Reac }); return ( - - + + @@ -39,14 +40,14 @@ const UsersInRoleTableRow = ({ user, onRemove }: UsersInRoleTableRowProps): Reac - - {email} - + + {email} + - - + + ); }; diff --git a/apps/meteor/client/views/admin/settings/groups/voip/AssignAgentButton.tsx b/apps/meteor/client/views/admin/settings/groups/voip/AssignAgentButton.tsx index 681c4aab54b4..86e7013f6f3a 100644 --- a/apps/meteor/client/views/admin/settings/groups/voip/AssignAgentButton.tsx +++ b/apps/meteor/client/views/admin/settings/groups/voip/AssignAgentButton.tsx @@ -1,9 +1,10 @@ -import { Table, IconButton } from '@rocket.chat/fuselage'; +import { IconButton } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; import { useSetModal, useTranslation } from '@rocket.chat/ui-contexts'; import type { FC } from 'react'; import React from 'react'; +import { GenericTableCell } from '../../../../../components/GenericTable'; import AssignAgentModal from './AssignAgentModal'; const AssignAgentButton: FC<{ extension: string; reload: () => void }> = ({ extension, reload }) => { @@ -16,9 +17,9 @@ const AssignAgentButton: FC<{ extension: string; reload: () => void }> = ({ exte }); return ( - + - + ); }; diff --git a/apps/meteor/client/views/admin/settings/groups/voip/RemoveAgentButton.tsx b/apps/meteor/client/views/admin/settings/groups/voip/RemoveAgentButton.tsx index f1026086ba61..7ef6e0c3b798 100644 --- a/apps/meteor/client/views/admin/settings/groups/voip/RemoveAgentButton.tsx +++ b/apps/meteor/client/views/admin/settings/groups/voip/RemoveAgentButton.tsx @@ -1,10 +1,11 @@ -import { Table, IconButton } from '@rocket.chat/fuselage'; +import { IconButton } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; import { useSetModal, useToastMessageDispatch, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts'; import type { FC } from 'react'; import React from 'react'; import GenericModal from '../../../../../components/GenericModal'; +import { GenericTableCell } from '../../../../../components/GenericTable'; const RemoveAgentButton: FC<{ username: string; reload: () => void }> = ({ username, reload }) => { const removeAgent = useEndpoint('DELETE', '/v1/omnichannel/agent/extension/:username', { username }); @@ -45,9 +46,9 @@ const RemoveAgentButton: FC<{ username: string; reload: () => void }> = ({ usern }); return ( - + - + ); }; diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx index 2f63539a3585..e8df21e35b6a 100644 --- a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx +++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx @@ -1,5 +1,5 @@ import type { IRole, IUser } from '@rocket.chat/core-typings'; -import { Box, TableRow, TableCell } from '@rocket.chat/fuselage'; +import { Box } from '@rocket.chat/fuselage'; import { capitalize } from '@rocket.chat/string-helpers'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; import { useTranslation } from '@rocket.chat/ui-contexts'; @@ -7,6 +7,7 @@ import type { ReactElement } from 'react'; import React from 'react'; import { Roles } from '../../../../../app/models/client'; +import { GenericTableRow, GenericTableCell } from '../../../../components/GenericTable'; import UserAvatar from '../../../../components/avatar/UserAvatar'; type UsersTableRowProps = { @@ -26,8 +27,15 @@ const UsersTableRow = ({ user, onClick, mediaQuery }: UsersTableRowProps): React .join(', '); return ( - onClick(_id)} onClick={(): void => onClick(_id)} tabIndex={0} role='link' action qa-user-id={_id}> - + onClick(_id)} + onClick={(): void => onClick(_id)} + tabIndex={0} + role='link' + action + qa-user-id={_id} + > + {username && } @@ -44,21 +52,21 @@ const UsersTableRow = ({ user, onClick, mediaQuery }: UsersTableRowProps): React - + {mediaQuery && ( - + {username} {' '} - + )} - {emails?.length && emails[0].address} - {mediaQuery && {roleNames}} - + {emails?.length && emails[0].address} + {mediaQuery && {roleNames}} + {statusText} - - + + ); }; diff --git a/apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTableRow.tsx b/apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTableRow.tsx index df70a8040133..0ab051ee5d20 100644 --- a/apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTableRow.tsx +++ b/apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTableRow.tsx @@ -1,7 +1,8 @@ import type { IRoom, ITeam } from '@rocket.chat/core-typings'; -import { Box, TableRow, TableCell, Avatar } from '@rocket.chat/fuselage'; +import { Box, Avatar } from '@rocket.chat/fuselage'; import React from 'react'; +import { GenericTableRow, GenericTableCell } from '../../../../../components/GenericTable'; import MarkdownText from '../../../../../components/MarkdownText'; import { RoomIcon } from '../../../../../components/RoomIcon'; import { useFormatDate } from '../../../../../hooks/useFormatDate'; @@ -20,8 +21,8 @@ const ChannelsTableRow = ({ onClick, room, mediaQuery }: ChannelsTableRowProps) const avatarUrl = roomCoordinator.getRoomDirectives(t).getAvatarPath(room); return ( - - + + {avatarUrl && } @@ -35,26 +36,26 @@ const ChannelsTableRow = ({ onClick, room, mediaQuery }: ChannelsTableRowProps) {topic && } - - + + {usersCount} - + {mediaQuery && ts && ( - + {formatDate(ts)} - + )} {mediaQuery && ( - + {lastMessage && formatDate(lastMessage.ts)} - + )} {mediaQuery && ( - + {belongsTo} - + )} - + ); }; diff --git a/apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTableRow.tsx b/apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTableRow.tsx index 9c1abb18e69b..672309e351a2 100644 --- a/apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTableRow.tsx +++ b/apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTableRow.tsx @@ -1,7 +1,8 @@ import type { IRoom } from '@rocket.chat/core-typings'; -import { Box, TableRow, TableCell, Avatar } from '@rocket.chat/fuselage'; +import { Box, Avatar } from '@rocket.chat/fuselage'; import React from 'react'; +import { GenericTableRow, GenericTableCell } from '../../../../../components/GenericTable'; import MarkdownText from '../../../../../components/MarkdownText'; import { RoomIcon } from '../../../../../components/RoomIcon'; import { useFormatDate } from '../../../../../hooks/useFormatDate'; @@ -20,8 +21,8 @@ const TeamsTableRow = ({ onClick, team, mediaQuery }: TeamsTableRowProps) => { const avatarUrl = roomCoordinator.getRoomDirectives(t).getAvatarPath(team); return ( - - + + {avatarUrl && } @@ -35,16 +36,16 @@ const TeamsTableRow = ({ onClick, team, mediaQuery }: TeamsTableRowProps) => { {topic && } - - + + {roomsCount} - + {mediaQuery && ts && ( - + {formatDate(ts)} - + )} - + ); }; diff --git a/apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx b/apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx index 7d1e1b73229b..b950a694192f 100644 --- a/apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx +++ b/apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx @@ -1,7 +1,8 @@ import type { IUser, Serialized } from '@rocket.chat/core-typings'; -import { Box, Flex, TableRow, TableCell } from '@rocket.chat/fuselage'; +import { Box, Flex } from '@rocket.chat/fuselage'; import React from 'react'; +import { GenericTableRow, GenericTableCell } from '../../../../../components/GenericTable'; import MarkdownText from '../../../../../components/MarkdownText'; import UserAvatar from '../../../../../components/avatar/UserAvatar'; import { useFormatDate } from '../../../../../hooks/useFormatDate'; @@ -24,8 +25,8 @@ const UsersTableRow = ({ const formatDate = useFormatDate(); return ( - - + + {username && } @@ -44,15 +45,17 @@ const UsersTableRow = ({ - - {mediaQuery && canViewFullOtherUserInfo && {emails?.length && emails[0].address}} - {federation && {domain}} + + {mediaQuery && canViewFullOtherUserInfo && ( + {emails?.length && emails[0].address} + )} + {federation && {domain}} {mediaQuery && ( - + {formatDate(createdAt)} - + )} - + ); }; diff --git a/apps/meteor/client/views/omnichannel/analytics/AgentOverview.tsx b/apps/meteor/client/views/omnichannel/analytics/AgentOverview.tsx index 46ce28c9be19..a34b9af8bb72 100644 --- a/apps/meteor/client/views/omnichannel/analytics/AgentOverview.tsx +++ b/apps/meteor/client/views/omnichannel/analytics/AgentOverview.tsx @@ -1,4 +1,4 @@ -import { Table } from '@rocket.chat/fuselage'; +import { Table, TableBody, TableCell, TableHead, TableRow } from '@rocket.chat/fuselage'; import type { TranslationKey } from '@rocket.chat/ui-contexts'; import { useMethod, useTranslation } from '@rocket.chat/ui-contexts'; import React, { useMemo, useEffect, useState } from 'react'; @@ -46,21 +46,21 @@ const AgentOverview = ({ return ( - - + + {displayData.head?.map(({ name }, i) => ( - {t(name)} + {t(name)} ))} - - - + + + {displayData.data?.map(({ name, value }, i) => ( - - {name} - {value} - + + {name} + {value} + ))} - +
); }; diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AgentRow.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AgentRow.tsx index dfa14374dc01..27312b9e9fac 100644 --- a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AgentRow.tsx +++ b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AgentRow.tsx @@ -1,8 +1,9 @@ -import { NumberInput, TableCell, TableRow } from '@rocket.chat/fuselage'; +import { NumberInput } from '@rocket.chat/fuselage'; import { useTranslation } from '@rocket.chat/ui-contexts'; import React, { memo } from 'react'; import type { UseFormRegister } from 'react-hook-form'; +import { GenericTableRow, GenericTableCell } from '../../../../components/GenericTable'; import type { FormValues, IDepartmentAgent } from '../EditDepartment'; import AgentAvatar from './AgentAvatar'; import RemoveAgentButton from './RemoveAgentButton'; @@ -18,20 +19,20 @@ const AgentRow = ({ index, agent, register, onRemove }: AgentRowProps) => { const t = useTranslation(); return ( - - + + - - + + - - + + - - + + - - + + ); }; export default memo(AgentRow); diff --git a/apps/meteor/client/views/omnichannel/directory/calls/CallTableRow.tsx b/apps/meteor/client/views/omnichannel/directory/calls/CallTableRow.tsx index 8ead7e104cc7..403f4312772f 100644 --- a/apps/meteor/client/views/omnichannel/directory/calls/CallTableRow.tsx +++ b/apps/meteor/client/views/omnichannel/directory/calls/CallTableRow.tsx @@ -1,11 +1,11 @@ import type { IVoipRoom, Serialized } from '@rocket.chat/core-typings'; -import { Table } from '@rocket.chat/fuselage'; import { useTranslation } from '@rocket.chat/ui-contexts'; import moment from 'moment'; import type { ReactElement } from 'react'; import React, { useCallback } from 'react'; import { parseOutboundPhoneNumber } from '../../../../../ee/client/lib/voip/parseOutboundPhoneNumber'; +import { GenericTableRow, GenericTableCell } from '../../../../components/GenericTable'; import { useIsCallReady } from '../../../../contexts/CallContext'; import { CallDialpadButton } from '../components/CallDialpadButton'; @@ -34,7 +34,7 @@ export const CallTableRow = ({ room, onRowClick }: CallTableRowProps): ReactElem ); return ( - - {parseOutboundPhoneNumber(fname)} - {parseOutboundPhoneNumber(phoneNumber)} - {queue} - {moment(callStarted).format('L LTS')} - {duration.isValid() && duration.humanize()} - {resolveDirectionLabel(direction)} - {isCallReady && } - + {parseOutboundPhoneNumber(fname)} + {parseOutboundPhoneNumber(phoneNumber)} + {queue} + {moment(callStarted).format('L LTS')} + {duration.isValid() && duration.humanize()} + {resolveDirectionLabel(direction)} + {isCallReady && } + ); }; diff --git a/apps/meteor/client/views/omnichannel/managers/RemoveManagerButton.tsx b/apps/meteor/client/views/omnichannel/managers/RemoveManagerButton.tsx index 7b591446eb80..8ce973b7b69f 100644 --- a/apps/meteor/client/views/omnichannel/managers/RemoveManagerButton.tsx +++ b/apps/meteor/client/views/omnichannel/managers/RemoveManagerButton.tsx @@ -1,10 +1,11 @@ -import { Table, IconButton } from '@rocket.chat/fuselage'; +import { IconButton } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; import { useSetModal, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; import GenericModal from '../../../components/GenericModal'; +import { GenericTableCell } from '../../../components/GenericTable'; import { useEndpointAction } from '../../../hooks/useEndpointAction'; const RemoveManagerButton = ({ _id, reload }: { _id: string; reload: () => void }): ReactElement => { @@ -41,9 +42,9 @@ const RemoveManagerButton = ({ _id, reload }: { _id: string; reload: () => void }); return ( - + - + ); }; diff --git a/apps/meteor/client/views/teams/ChannelDesertionTable/ChannelDesertionTableRow.tsx b/apps/meteor/client/views/teams/ChannelDesertionTable/ChannelDesertionTableRow.tsx index f14f549c3bd0..864ea50d0ab0 100644 --- a/apps/meteor/client/views/teams/ChannelDesertionTable/ChannelDesertionTableRow.tsx +++ b/apps/meteor/client/views/teams/ChannelDesertionTable/ChannelDesertionTableRow.tsx @@ -1,9 +1,10 @@ import type { IRoom, Serialized } from '@rocket.chat/core-typings'; -import { CheckBox, TableRow, TableCell, Icon, Margins } from '@rocket.chat/fuselage'; +import { CheckBox, Icon, Margins } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; import type { ReactElement } from 'react'; import React from 'react'; +import { GenericTableRow, GenericTableCell } from '../../../components/GenericTable'; import { useFormatDateAndTime } from '../../../hooks/useFormatDateAndTime'; type ChannelDesertionTableRowProps = { @@ -19,19 +20,19 @@ const ChannelDesertionTableRow = ({ room, onChange, selected, lastOwnerWarning } const handleChange = useMutableCallback(() => onChange(room)); return ( - - + + {fname ?? name} {isLastOwner && } - - + + {formatDate(ts)} - - + + ); }; diff --git a/apps/meteor/ee/client/omnichannel/RemoveBusinessHourButton.js b/apps/meteor/ee/client/omnichannel/RemoveBusinessHourButton.js index 48706148ccb1..4e7143b55de7 100644 --- a/apps/meteor/ee/client/omnichannel/RemoveBusinessHourButton.js +++ b/apps/meteor/ee/client/omnichannel/RemoveBusinessHourButton.js @@ -1,9 +1,10 @@ -import { Table, IconButton } from '@rocket.chat/fuselage'; +import { IconButton } from '@rocket.chat/fuselage'; import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; import { useSetModal, useToastMessageDispatch, useMethod, useTranslation } from '@rocket.chat/ui-contexts'; import React from 'react'; import GenericModal from '../../../client/components/GenericModal'; +import { GenericTableCell } from '../../../client/components/GenericTable'; function RemoveBusinessHourButton({ _id, type, reload }) { const removeBusinessHour = useMethod('livechat:removeBusinessHour'); @@ -36,9 +37,9 @@ function RemoveBusinessHourButton({ _id, type, reload }) { }); return ( - + - + ); } diff --git a/apps/meteor/ee/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountRow.tsx b/apps/meteor/ee/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountRow.tsx index a581658f68cb..7fc197ef06c2 100644 --- a/apps/meteor/ee/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountRow.tsx +++ b/apps/meteor/ee/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountRow.tsx @@ -1,9 +1,10 @@ -import { Box, Button, TableRow, TableCell } from '@rocket.chat/fuselage'; +import { Box, Button } from '@rocket.chat/fuselage'; import { useMediaQuery } from '@rocket.chat/fuselage-hooks'; import { useTranslation } from '@rocket.chat/ui-contexts'; import type { ReactElement } from 'react'; import React from 'react'; +import { GenericTableCell, GenericTableRow } from '../../../../../../client/components/GenericTable'; import { useFormatDateAndTime } from '../../../../../../client/hooks/useFormatDateAndTime'; import DeviceIcon from '../../../../deviceManagement/components/DeviceIcon'; import { useDeviceLogout } from '../../../../hooks/useDeviceLogout'; @@ -32,20 +33,20 @@ const DeviceManagementAccountRow = ({ const handleDeviceLogout = useDeviceLogout(_id, '/v1/sessions/logout.me'); return ( - - + + {deviceName && {deviceName}} - - {deviceOSName || ''} - {formatDateAndTime(loginAt)} - {mediaQuery && {_id}} - + + {deviceOSName || ''} + {formatDateAndTime(loginAt)} + {mediaQuery && {_id}} + - - + + ); }; diff --git a/apps/meteor/ee/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminRow.tsx b/apps/meteor/ee/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminRow.tsx index d68cf21315a9..cb7aae0ba80a 100644 --- a/apps/meteor/ee/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminRow.tsx +++ b/apps/meteor/ee/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminRow.tsx @@ -1,9 +1,10 @@ -import { Box, TableRow, TableCell, Menu, Option } from '@rocket.chat/fuselage'; +import { Box, Menu, Option } from '@rocket.chat/fuselage'; import { useMediaQuery, useMutableCallback } from '@rocket.chat/fuselage-hooks'; import { useRoute, useTranslation } from '@rocket.chat/ui-contexts'; import type { KeyboardEvent, ReactElement } from 'react'; import React, { useCallback } from 'react'; +import { GenericTableRow, GenericTableCell } from '../../../../../../client/components/GenericTable'; import { useFormatDateAndTime } from '../../../../../../client/hooks/useFormatDateAndTime'; import DeviceIcon from '../../../../deviceManagement/components/DeviceIcon'; import { useDeviceLogout } from '../../../../hooks/useDeviceLogout'; @@ -61,26 +62,26 @@ const DeviceManagementAdminRow = ({ }; return ( - - + + {deviceName && {deviceName}} - - {deviceOSName} - {username} - {mediaQuery && {formatDateAndTime(loginAt)}} - {mediaQuery && {_id}} - {mediaQuery && {ip}} - e.stopPropagation()}> + + {deviceOSName} + {username} + {mediaQuery && {formatDateAndTime(loginAt)}} + {mediaQuery && {_id}} + {mediaQuery && {ip}} + e.stopPropagation()}>