apitech
/
Rocket.Chat
mirror of https://github.com/RocketChat/Rocket.Chat
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: `Table` in favor of `GenericTable` (#29628)

Browse Source
pull/29639/head^2
Douglas Fabris 3 years ago committed by GitHub
parent 67a299b354
commit f7d2e27eec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 390 additions and 348 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 21
      apps/meteor/client/views/account/tokens/AccountTokensTable/AccountTokensRow.tsx
  2. 14
      apps/meteor/client/views/admin/customUserStatus/CustomUserStatusTable/CustomUserStatusRow.tsx
  3. 8
      apps/meteor/client/views/admin/emailInbox/SendTestButton.tsx
  4. 54
      apps/meteor/client/views/admin/import/ImportHistoryPage.tsx
  5. 22
      apps/meteor/client/views/admin/import/ImportOperationSummary.js
  6. 4
      apps/meteor/client/views/admin/import/ImportOperationSummary.stories.tsx
  7. 38
      apps/meteor/client/views/admin/import/ImportOperationSummarySkeleton.js
  8. 34
      apps/meteor/client/views/admin/import/PrepareChannels.tsx
  9. 38
      apps/meteor/client/views/admin/import/PrepareUsers.tsx
  10. 27
      apps/meteor/client/views/admin/moderation/ModerationConsoleTableRow.tsx
  11. 10
      apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionRow.tsx
  12. 7
      apps/meteor/client/views/admin/permissions/PermissionsTable/RoleCell.tsx
  13. 17
      apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx
  14. 7
      apps/meteor/client/views/admin/settings/groups/voip/AssignAgentButton.tsx
  15. 7
      apps/meteor/client/views/admin/settings/groups/voip/RemoveAgentButton.tsx
  16. 30
      apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
  17. 27
      apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTableRow.tsx
  18. 19
      apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTableRow.tsx
  19. 21
      apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx
  20. 24
      apps/meteor/client/views/omnichannel/analytics/AgentOverview.tsx
  21. 23
      apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AgentRow.tsx
  22. 20
      apps/meteor/client/views/omnichannel/directory/calls/CallTableRow.tsx
  23. 7
      apps/meteor/client/views/omnichannel/managers/RemoveManagerButton.tsx
  24. 15
      apps/meteor/client/views/teams/ChannelDesertionTable/ChannelDesertionTableRow.tsx
  25. 7
      apps/meteor/ee/client/omnichannel/RemoveBusinessHourButton.js
  26. 21
      apps/meteor/ee/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountRow.tsx
  27. 25
      apps/meteor/ee/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminRow.tsx
  28. 66
      apps/meteor/ee/client/views/admin/engagementDashboard/channels/ChannelsOverview.tsx
  29. 62
      apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesPerChannelSection.tsx
  30. 23
      apps/meteor/ee/client/views/audit/components/AuditLogEntry.tsx
  31. 40
      yarn.lock

21
apps/meteor/client/views/account/tokens/AccountTokensTable/AccountTokensRow.tsx
Unescape View File

@ -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<AccountTokensRowProps> = ({
const handleRemove = useCallback(() => onRemove(name), [name, onRemove]);
return (
<TableRow key={name} tabIndex={0} role='link' qa-token-name={name}>
<TableCell withTruncatedText color='default' fontScale='p2m'>
<GenericTableRow key={name} tabIndex={0} role='link' qa-token-name={name}>
<GenericTableCell withTruncatedText color='default' fontScale='p2m'>
{name}
</TableCell>
{isMedium && <TableCell withTruncatedText>{formatDateAndTime(createdAt)}</TableCell>}
<TableCell withTruncatedText>...{lastTokenPart}</TableCell>
<TableCell withTruncatedText>{bypassTwoFactor ? t('Ignore') : t('Require')}</TableCell>
<TableCell withTruncatedText>
</GenericTableCell>
{isMedium && <GenericTableCell withTruncatedText>{formatDateAndTime(createdAt)}</GenericTableCell>}
<GenericTableCell withTruncatedText>...{lastTokenPart}</GenericTableCell>
<GenericTableCell withTruncatedText>{bypassTwoFactor ? t('Ignore') : t('Require')}</GenericTableCell>
<GenericTableCell withTruncatedText>
<ButtonGroup>
<IconButton title={t('Refresh')} icon='refresh' small secondary onClick={handleRegenerate} />
<IconButton title={t('Remove')} icon='trash' small secondary onClick={handleRemove} />
</ButtonGroup>
</TableCell>
</TableRow>
</GenericTableCell>
</GenericTableRow>
);
};

14
apps/meteor/client/views/admin/customUserStatus/CustomUserStatusTable/CustomUserStatusRow.tsx
Unescape View File

@ -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 (
<TableRow
<GenericTableRow
key={_id}
onKeyDown={(): void => onClick(_id)}
onClick={(): void => onClick(_id)}
@ -25,13 +25,13 @@ const CustomUserStatusRow = ({ status, onClick }: CustomUserStatusRowProps): Rea
action
qa-user-id={_id}
>
<TableCell fontScale='p2' color='default' style={style}>
<GenericTableCell fontScale='p2' color='default' style={style}>
<MarkdownText content={name} parseEmoji={true} variant='inline' />
</TableCell>
<TableCell fontScale='p2' color='default' style={style}>
</GenericTableCell>
<GenericTableCell fontScale='p2' color='default' style={style}>
{statusType}
</TableCell>
</TableRow>
</GenericTableCell>
</GenericTableRow>
);
};

8
apps/meteor/client/views/admin/emailInbox/SendTestButton.tsx
Unescape View File

@ -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 (
<TableCell withTruncatedText>
<GenericTableCell withTruncatedText>
<Button small onClick={handleOnClick}>
<Box display='flex' alignItems='center'>
<Icon mie='x4' size='x16' name='send' />
{t('Send_Test_Email')}
</Box>
</Button>
</TableCell>
</GenericTableCell>
);
};

54
apps/meteor/client/views/admin/import/ImportHistoryPage.tsx
Unescape View File

@ -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() {
</Page.Header>
<Page.ScrollableContentWithShadow>
<Table fixed data-qa-id='ImportTable'>
<Table.Head>
<Table.Row>
<Table.Cell is='th' rowSpan={2} width='x140'>
<TableHead>
<TableRow>
<TableCell is='th' rowSpan={2} width='x140'>
{t('Import_Type')}
</Table.Cell>
<Table.Cell is='th' rowSpan={2}>
</TableCell>
<TableCell is='th' rowSpan={2}>
{t('Last_Updated')}
</Table.Cell>
</TableCell>
{!small && (
<>
<Table.Cell is='th' rowSpan={2}>
<TableCell is='th' rowSpan={2}>
{t('Last_Status')}
</Table.Cell>
<Table.Cell is='th' rowSpan={2}>
</TableCell>
<TableCell is='th' rowSpan={2}>
{t('File')}
</Table.Cell>
<Table.Cell is='th' align='center' colSpan={4} width='x320'>
</TableCell>
<TableCell is='th' align='center' colSpan={4} width='x320'>
{t('Counters')}
</Table.Cell>
</TableCell>
</>
)}
</Table.Row>
</TableRow>
{!small && (
<Table.Row>
<Table.Cell is='th' align='center'>
<TableRow>
<TableCell is='th' align='center'>
{t('Users')}
</Table.Cell>
<Table.Cell is='th' align='center'>
</TableCell>
<TableCell is='th' align='center'>
{t('Channels')}
</Table.Cell>
<Table.Cell is='th' align='center'>
</TableCell>
<TableCell is='th' align='center'>
{t('Messages')}
</Table.Cell>
<Table.Cell is='th' align='center'>
</TableCell>
<TableCell is='th' align='center'>
{t('Total')}
</Table.Cell>
</Table.Row>
</TableCell>
</TableRow>
)}
</Table.Head>
<Table.Body>
</TableHead>
<TableBody>
{isLoading && (
<>
{Array.from({ length: 20 }, (_, i) => (
@ -176,7 +176,7 @@ function ImportHistoryPage() {
))}
</>
)}
</Table.Body>
</TableBody>
</Table>
</Page.ScrollableContentWithShadow>
</Page>

22
apps/meteor/client/views/admin/import/ImportOperationSummary.js
Unescape View File

@ -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 (
<Table.Row {...props}>
<Table.Cell>{type}</Table.Cell>
<Table.Cell>{formatDateAndTime(_updatedAt)}</Table.Cell>
<TableRow {...props}>
<TableCell>{type}</TableCell>
<TableCell>{formatDateAndTime(_updatedAt)}</TableCell>
{!small && (
<>
<Table.Cell>{status && t(status.replace('importer_', 'importer_status_'))}</Table.Cell>
<Table.Cell>{fileName}</Table.Cell>
<Table.Cell align='center'>{users}</Table.Cell>
<Table.Cell align='center'>{channels}</Table.Cell>
<Table.Cell align='center'>{messages}</Table.Cell>
<Table.Cell align='center'>{total}</Table.Cell>
<TableCell>{status && t(status.replace('importer_', 'importer_status_'))}</TableCell>
<TableCell>{fileName}</TableCell>
<TableCell align='center'>{users}</TableCell>
<TableCell align='center'>{channels}</TableCell>
<TableCell align='center'>{messages}</TableCell>
<TableCell align='center'>{total}</TableCell>
</>
)}
</Table.Row>
</TableRow>
);
}

4
apps/meteor/client/views/admin/import/ImportOperationSummary.stories.tsx
Unescape View File

@ -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) => (
<Table>
<Table.Body>{fn()}</Table.Body>
<TableBody>{fn()}</TableBody>
</Table>
),
],

38
apps/meteor/client/views/admin/import/ImportOperationSummarySkeleton.js
Unescape View File

@ -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 (
<Table.Row>
<Table.Cell>
<TableRow>
<TableCell>
<Skeleton />
</Table.Cell>
<Table.Cell>
</TableCell>
<TableCell>
<Skeleton />
</Table.Cell>
</TableCell>
{!small && (
<>
<Table.Cell>
<TableCell>
<Skeleton />
</Table.Cell>
<Table.Cell>
</TableCell>
<TableCell>
<Skeleton />
</Table.Cell>
<Table.Cell>
</TableCell>
<TableCell>
<Skeleton />
</Table.Cell>
<Table.Cell>
</TableCell>
<TableCell>
<Skeleton />
</Table.Cell>
<Table.Cell>
</TableCell>
<TableCell>
<Skeleton />
</Table.Cell>
<Table.Cell>
</TableCell>
<TableCell>
<Skeleton />
</Table.Cell>
</TableCell>
</>
)}
</Table.Row>
</TableRow>
);
}

34
apps/meteor/client/views/admin/import/PrepareChannels.tsx
Unescape View File

@ -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<PrepareChannelsProps> = ({ channels, channelsCount, se
return (
<>
<Table>
<Table.Head>
<Table.Row>
<Table.Cell width='x36'>
<TableHead>
<TableRow>
<TableCell width='x36'>
<CheckBox
checked={channelsCount > 0}
indeterminate={channelsCount > 0 && channelsCount !== channels.length}
@ -56,15 +56,15 @@ const PrepareChannels: FC<PrepareChannelsProps> = ({ channels, channelsCount, se
});
}}
/>
</Table.Cell>
<Table.Cell is='th'>{t('Name')}</Table.Cell>
<Table.Cell is='th' align='end'></Table.Cell>
</Table.Row>
</Table.Head>
<Table.Body>
</TableCell>
<TableCell is='th'>{t('Name')}</TableCell>
<TableCell is='th' align='end'></TableCell>
</TableRow>
</TableHead>
<TableBody>
{channels.slice(current, current + itemsPerPage).map((channel) => (
<Table.Row key={channel.channel_id}>
<Table.Cell width='x36'>
<TableRow key={channel.channel_id}>
<TableCell width='x36'>
<CheckBox
checked={channel.do_import}
onChange={(event: ChangeEvent<HTMLInputElement>): void => {
@ -74,12 +74,12 @@ const PrepareChannels: FC<PrepareChannelsProps> = ({ channels, channelsCount, se
);
}}
/>
</Table.Cell>
<Table.Cell>{channel.name}</Table.Cell>
<Table.Cell align='end'>{channel.is_archived && <Tag variant='danger'>{t('Importer_Archived')}</Tag>}</Table.Cell>
</Table.Row>
</TableCell>
<TableCell>{channel.name}</TableCell>
<TableCell align='end'>{channel.is_archived && <Tag variant='danger'>{t('Importer_Archived')}</Tag>}</TableCell>
</TableRow>
))}
</Table.Body>
</TableBody>
</Table>
<Pagination
current={current}

38
apps/meteor/client/views/admin/import/PrepareUsers.tsx
Unescape View File

@ -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';
@ -30,9 +30,9 @@ const PrepareUsers: FC<PrepareUsersProps> = ({ usersCount, users, setUsers }) =>
return (
<>
<Table>
<Table.Head>
<Table.Row>
<Table.Cell width='x36'>
<TableHead>
<TableRow>
<TableCell width='x36'>
<CheckBox
checked={usersCount > 0}
indeterminate={usersCount > 0 && usersCount !== users.length}
@ -53,16 +53,16 @@ const PrepareUsers: FC<PrepareUsersProps> = ({ usersCount, users, setUsers }) =>
});
}}
/>
</Table.Cell>
<Table.Cell is='th'>{t('Username')}</Table.Cell>
<Table.Cell is='th'>{t('Email')}</Table.Cell>
<Table.Cell is='th'></Table.Cell>
</Table.Row>
</Table.Head>
<Table.Body>
</TableCell>
<TableCell is='th'>{t('Username')}</TableCell>
<TableCell is='th'>{t('Email')}</TableCell>
<TableCell is='th'></TableCell>
</TableRow>
</TableHead>
<TableBody>
{users.slice(current, current + itemsPerPage).map((user) => (
<Table.Row key={user.user_id}>
<Table.Cell width='x36'>
<TableRow key={user.user_id}>
<TableCell width='x36'>
<CheckBox
checked={user.do_import}
onChange={(event: ChangeEvent<HTMLInputElement>): void => {
@ -70,13 +70,13 @@ const PrepareUsers: FC<PrepareUsersProps> = ({ usersCount, users, setUsers }) =>
setUsers((users) => users.map((_user) => (_user === user ? { ..._user, do_import: checked } : _user)));
}}
/>
</Table.Cell>
<Table.Cell>{user.username}</Table.Cell>
<Table.Cell>{user.email}</Table.Cell>
<Table.Cell align='end'>{user.is_deleted && <Tag variant='danger'>{t('Deleted')}</Tag>}</Table.Cell>
</Table.Row>
</TableCell>
<TableCell>{user.username}</TableCell>
<TableCell>{user.email}</TableCell>
<TableCell align='end'>{user.is_deleted && <Tag variant='danger'>{t('Deleted')}</Tag>}</TableCell>
</TableRow>
))}
</Table.Body>
</TableBody>
</Table>
<Pagination
current={current}

27
apps/meteor/client/views/admin/moderation/ModerationConsoleTableRow.tsx
Unescape View File

@ -1,7 +1,8 @@
import type { IModerationAudit, IUser } from '@rocket.chat/core-typings';
import { TableRow, TableCell, Box } from '@rocket.chat/fuselage';
import { Box } from '@rocket.chat/fuselage';
import React from 'react';
import { GenericTableCell, GenericTableRow } from '../../../components/GenericTable';
import UserAvatar from '../../../components/avatar/UserAvatar';
import { useFormatDateAndTime } from '../../../hooks/useFormatDateAndTime';
import ModerationConsoleActions from './ModerationConsoleActions';
@ -27,8 +28,8 @@ const ModerationConsoleTableRow = ({ report, onClick, isDesktopOrLarger }: Moder
const concatenatedRoomNames = roomNames.join(', ');
return (
<TableRow key={_id} onKeyDown={(): void => onClick(_id)} onClick={(): void => onClick(_id)} tabIndex={0} role='link' action>
<TableCell withTruncatedText>
<GenericTableRow key={_id} onKeyDown={(): void => onClick(_id)} onClick={(): void => onClick(_id)} tabIndex={0} role='link' action>
<GenericTableCell withTruncatedText>
<Box display='flex' alignItems='center'>
{username && (
<Box>
@ -49,22 +50,22 @@ const ModerationConsoleTableRow = ({ report, onClick, isDesktopOrLarger }: Moder
</Box>
</Box>
</Box>
</TableCell>
</GenericTableCell>
{isDesktopOrLarger && (
<TableCell>
<GenericTableCell>
<Box fontScale='p2m' color='hint' withTruncatedText>
{username}
</Box>
</TableCell>
</GenericTableCell>
)}
<TableCell withTruncatedText>{message}</TableCell>
<TableCell withTruncatedText>{concatenatedRoomNames}</TableCell>
<TableCell withTruncatedText>{formatDateAndTime(ts)}</TableCell>
<TableCell withTruncatedText>{count}</TableCell>
<TableCell onClick={(e): void => e.stopPropagation()}>
<GenericTableCell withTruncatedText>{message}</GenericTableCell>
<GenericTableCell withTruncatedText>{concatenatedRoomNames}</GenericTableCell>
<GenericTableCell withTruncatedText>{formatDateAndTime(ts)}</GenericTableCell>
<GenericTableCell withTruncatedText>{count}</GenericTableCell>
<GenericTableCell onClick={(e): void => e.stopPropagation()}>
<ModerationConsoleActions report={report} onClick={onClick} />
</TableCell>
</TableRow>
</GenericTableCell>
</GenericTableRow>
);
};

10
apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionRow.tsx
Unescape View File

@ -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 (
<TableRow key={_id} role='link' action tabIndex={0} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
<TableCell maxWidth='x300' withTruncatedText title={t(`${_id}_description` as TranslationKey)}>
<GenericTableRow key={_id} role='link' action tabIndex={0} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
<GenericTableCell maxWidth='x300' withTruncatedText title={t(`${_id}_description` as TranslationKey)}>
{getName(t, permission)}
</TableCell>
</GenericTableCell>
{roleList.map(({ _id, name, description }) => (
<RoleCell
key={_id}
@ -58,7 +58,7 @@ const PermissionRow = ({ permission, roleList, onGrant, onRemove }: PermissionRo
permissionId={_id}
/>
))}
</TableRow>
</GenericTableRow>
);
};

7
apps/meteor/client/views/admin/permissions/PermissionsTable/RoleCell.tsx
Unescape View File

@ -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 (
<TableCell withTruncatedText>
<GenericTableCell withTruncatedText>
<Margins inline='x2'>
<CheckBox checked={granted} onChange={handleChange} disabled={isDisabled} />
{!loading && (
@ -42,7 +43,7 @@ const RoleCell = ({ _id, name, description, onChange, lineHovered, permissionId,
)}
{loading && <Throbber size='x12' display='inline-block' />}
</Margins>
</TableCell>
</GenericTableCell>
);
};

17
apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx
Unescape View File

@ -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 (
<TableRow key={_id} tabIndex={0} role='link'>
<TableCell withTruncatedText>
<GenericTableRow key={_id} tabIndex={0} role='link'>
<GenericTableCell withTruncatedText>
<Box display='flex' alignItems='center'>
<UserAvatar size='x40' username={username ?? ''} etag={avatarETag} />
<Box display='flex' withTruncatedText mi='x8'>
@ -39,14 +40,14 @@ const UsersInRoleTableRow = ({ user, onRemove }: UsersInRoleTableRowProps): Reac
</Box>
</Box>
</Box>
</TableCell>
<TableCell withTruncatedText>{email}</TableCell>
<TableCell withTruncatedText>
</GenericTableCell>
<GenericTableCell withTruncatedText>{email}</GenericTableCell>
<GenericTableCell withTruncatedText>
<Button small square secondary danger onClick={handleRemove}>
<Icon name='trash' size='x20' />
</Button>
</TableCell>
</TableRow>
</GenericTableCell>
</GenericTableRow>
);
};

7
apps/meteor/client/views/admin/settings/groups/voip/AssignAgentButton.tsx
Unescape View File

@ -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 (
<Table.Cell fontScale='p2' color='hint' withTruncatedText>
<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
<IconButton icon='user-plus' small title={t('Associate_Agent')} onClick={handleAssociation} />
</Table.Cell>
</GenericTableCell>
);
};

7
apps/meteor/client/views/admin/settings/groups/voip/RemoveAgentButton.tsx
Unescape View File

@ -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 (
<Table.Cell fontScale='p2' color='hint' withTruncatedText>
<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
<IconButton icon='trash' small title={t('Remove_Association')} onClick={handleDelete} />
</Table.Cell>
</GenericTableCell>
);
};

30
apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
Unescape View File

@ -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 (
<TableRow onKeyDown={(): void => onClick(_id)} onClick={(): void => onClick(_id)} tabIndex={0} role='link' action qa-user-id={_id}>
<TableCell withTruncatedText>
<GenericTableRow
onKeyDown={(): void => onClick(_id)}
onClick={(): void => onClick(_id)}
tabIndex={0}
role='link'
action
qa-user-id={_id}
>
<GenericTableCell withTruncatedText>
<Box display='flex' alignItems='center'>
{username && <UserAvatar size={mediaQuery ? 'x28' : 'x40'} username={username} etag={avatarETag} />}
<Box display='flex' mi='x8' withTruncatedText>
@ -44,21 +52,21 @@ const UsersTableRow = ({ user, onClick, mediaQuery }: UsersTableRowProps): React
</Box>
</Box>
</Box>
</TableCell>
</GenericTableCell>
{mediaQuery && (
<TableCell>
<GenericTableCell>
<Box fontScale='p2m' color='hint' withTruncatedText>
{username}
</Box>{' '}
<Box mi='x4' />
</TableCell>
</GenericTableCell>
)}
<TableCell withTruncatedText>{emails?.length && emails[0].address}</TableCell>
{mediaQuery && <TableCell withTruncatedText>{roleNames}</TableCell>}
<TableCell fontScale='p2' color='hint' withTruncatedText>
<GenericTableCell withTruncatedText>{emails?.length && emails[0].address}</GenericTableCell>
{mediaQuery && <GenericTableCell withTruncatedText>{roleNames}</GenericTableCell>}
<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
{statusText}
</TableCell>
</TableRow>
</GenericTableCell>
</GenericTableRow>
);
};

27
apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTableRow.tsx
Unescape View File

@ -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 (
<TableRow key={_id} onKeyDown={onClick(name, t)} onClick={onClick(name, t)} tabIndex={0} role='link' action>
<TableCell>
<GenericTableRow key={_id} onKeyDown={onClick(name, t)} onClick={onClick(name, t)} tabIndex={0} role='link' action>
<GenericTableCell>
<Box display='flex'>
<Box flexGrow={0}>{avatarUrl && <Avatar size='x40' title={fname || name} url={avatarUrl} />}</Box>
<Box flexGrow={1} mi='x8' withTruncatedText>
@ -35,26 +36,26 @@ const ChannelsTableRow = ({ onClick, room, mediaQuery }: ChannelsTableRowProps)
{topic && <MarkdownText variant='inlineWithoutBreaks' fontScale='p2' color='hint' withTruncatedText content={topic} />}
</Box>
</Box>
</TableCell>
<TableCell fontScale='p2' color='hint' withTruncatedText>
</GenericTableCell>
<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
{usersCount}
</TableCell>
</GenericTableCell>
{mediaQuery && ts && (
<TableCell fontScale='p2' color='hint' withTruncatedText>
<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
{formatDate(ts)}
</TableCell>
</GenericTableCell>
)}
{mediaQuery && (
<TableCell fontScale='p2' color='hint' withTruncatedText>
<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
{lastMessage && formatDate(lastMessage.ts)}
</TableCell>
</GenericTableCell>
)}
{mediaQuery && (
<TableCell fontScale='p2' color='hint' withTruncatedText>
<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
{belongsTo}
</TableCell>
</GenericTableCell>
)}
</TableRow>
</GenericTableRow>
);
};

19
apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTableRow.tsx
Unescape View File

@ -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 (
<TableRow key={_id} onKeyDown={onClick(name, t)} onClick={onClick(name, t)} tabIndex={0} role='link' action>
<TableCell>
<GenericTableRow key={_id} onKeyDown={onClick(name, t)} onClick={onClick(name, t)} tabIndex={0} role='link' action>
<GenericTableCell>
<Box display='flex'>
<Box flexGrow={0}>{avatarUrl && <Avatar size='x40' title={fname || name} url={avatarUrl} />}</Box>
<Box flexGrow={1} mi='x8' withTruncatedText>
@ -35,16 +36,16 @@ const TeamsTableRow = ({ onClick, team, mediaQuery }: TeamsTableRowProps) => {
{topic && <MarkdownText variant='inlineWithoutBreaks' fontScale='p2' color='hint' withTruncatedText content={topic} />}
</Box>
</Box>
</TableCell>
<TableCell fontScale='p2' color='hint' withTruncatedText>
</GenericTableCell>
<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
{roomsCount}
</TableCell>
</GenericTableCell>
{mediaQuery && ts && (
<TableCell fontScale='p2' color='hint' withTruncatedText>
<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
{formatDate(ts)}
</TableCell>
</GenericTableCell>
)}
</TableRow>
</GenericTableRow>
);
};

21
apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx
Unescape View File

@ -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 (
<TableRow key={_id} onKeyDown={onClick(username)} onClick={onClick(username)} tabIndex={0} role='link' action>
<TableCell>
<GenericTableRow key={_id} onKeyDown={onClick(username)} onClick={onClick(username)} tabIndex={0} role='link' action>
<GenericTableCell>
<Flex.Container>
<Box>
<Flex.Item>{username && <UserAvatar size='x40' title={username} username={username} etag={avatarETag} />}</Flex.Item>
@ -44,15 +45,17 @@ const UsersTableRow = ({
</Box>
</Box>
</Flex.Container>
</TableCell>
{mediaQuery && canViewFullOtherUserInfo && <TableCell withTruncatedText>{emails?.length && emails[0].address}</TableCell>}
{federation && <TableCell withTruncatedText>{domain}</TableCell>}
</GenericTableCell>
{mediaQuery && canViewFullOtherUserInfo && (
<GenericTableCell withTruncatedText>{emails?.length && emails[0].address}</GenericTableCell>
)}
{federation && <GenericTableCell withTruncatedText>{domain}</GenericTableCell>}
{mediaQuery && (
<TableCell fontScale='p2' color='hint' withTruncatedText>
<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
{formatDate(createdAt)}
</TableCell>
</GenericTableCell>
)}
</TableRow>
</GenericTableRow>
);
};

24
apps/meteor/client/views/omnichannel/analytics/AgentOverview.tsx
Unescape View File

@ -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 (
<Table style={style} fixed>
<Table.Head>
<Table.Row>
<TableHead>
<TableRow>
{displayData.head?.map(({ name }, i) => (
<Table.Cell key={i}>{t(name)}</Table.Cell>
<TableCell key={i}>{t(name)}</TableCell>
))}
</Table.Row>
</Table.Head>
<Table.Body>
</TableRow>
</TableHead>
<TableBody>
{displayData.data?.map(({ name, value }, i) => (
<Table.Row key={i}>
<Table.Cell>{name}</Table.Cell>
<Table.Cell>{value}</Table.Cell>
</Table.Row>
<TableRow key={i}>
<TableCell>{name}</TableCell>
<TableCell>{value}</TableCell>
</TableRow>
))}
</Table.Body>
</TableBody>
</Table>
);
};

23
apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AgentRow.tsx
Unescape View File

@ -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 (
<TableRow key={agent.agentId} tabIndex={0} role='link' action qa-user-id={agent.agentId}>
<TableCell withTruncatedText>
<GenericTableRow key={agent.agentId} tabIndex={0} role='link' action qa-user-id={agent.agentId}>
<GenericTableCell withTruncatedText>
<AgentAvatar name={agent.name || ''} username={agent.username || ''} />
</TableCell>
<TableCell fontScale='p2' color='hint' withTruncatedText>
</GenericTableCell>
<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
<NumberInput title={t('Count')} maxWidth='100%' {...register(`agentList.${index}.count`, { valueAsNumber: true })} />
</TableCell>
<TableCell fontScale='p2' color='hint' withTruncatedText>
</GenericTableCell>
<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
<NumberInput title={t('Order')} maxWidth='100%' {...register(`agentList.${index}.order`, { valueAsNumber: true })} />
</TableCell>
<TableCell fontScale='p2' color='hint'>
</GenericTableCell>
<GenericTableCell fontScale='p2' color='hint'>
<RemoveAgentButton agentId={agent.agentId} onRemove={onRemove} />
</TableCell>
</TableRow>
</GenericTableCell>
</GenericTableRow>
);
};
export default memo(AgentRow);

20
apps/meteor/client/views/omnichannel/directory/calls/CallTableRow.tsx
Unescape View File

@ -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 (
<Table.Row
<GenericTableRow
key={_id}
rcx-show-call-button-on-hover
tabIndex={0}
@ -44,13 +44,13 @@ export const CallTableRow = ({ room, onRowClick }: CallTableRowProps): ReactElem
qa-user-id={_id}
height='40px'
>
<Table.Cell withTruncatedText>{parseOutboundPhoneNumber(fname)}</Table.Cell>
<Table.Cell withTruncatedText>{parseOutboundPhoneNumber(phoneNumber)}</Table.Cell>
<Table.Cell withTruncatedText>{queue}</Table.Cell>
<Table.Cell withTruncatedText>{moment(callStarted).format('L LTS')}</Table.Cell>
<Table.Cell withTruncatedText>{duration.isValid() && duration.humanize()}</Table.Cell>
<Table.Cell withTruncatedText>{resolveDirectionLabel(direction)}</Table.Cell>
<Table.Cell>{isCallReady && <CallDialpadButton phoneNumber={phoneNumber} />}</Table.Cell>
</Table.Row>
<GenericTableCell withTruncatedText>{parseOutboundPhoneNumber(fname)}</GenericTableCell>
<GenericTableCell withTruncatedText>{parseOutboundPhoneNumber(phoneNumber)}</GenericTableCell>
<GenericTableCell withTruncatedText>{queue}</GenericTableCell>
<GenericTableCell withTruncatedText>{moment(callStarted).format('L LTS')}</GenericTableCell>
<GenericTableCell withTruncatedText>{duration.isValid() && duration.humanize()}</GenericTableCell>
<GenericTableCell withTruncatedText>{resolveDirectionLabel(direction)}</GenericTableCell>
<GenericTableCell>{isCallReady && <CallDialpadButton phoneNumber={phoneNumber} />}</GenericTableCell>
</GenericTableRow>
);
};

7
apps/meteor/client/views/omnichannel/managers/RemoveManagerButton.tsx
Unescape View File

@ -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 (
<Table.Cell fontScale='p2' color='hint' withTruncatedText>
<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
<IconButton small icon='trash' title={t('Remove')} onClick={handleDelete} />
</Table.Cell>
</GenericTableCell>
);
};

15
apps/meteor/client/views/teams/ChannelDesertionTable/ChannelDesertionTableRow.tsx
Unescape View File

@ -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 (
<TableRow action>
<TableCell maxWidth='x300' withTruncatedText>
<GenericTableRow action>
<GenericTableCell maxWidth='x300' withTruncatedText>
<CheckBox checked={selected} onChange={handleChange} disabled={room.isLastOwner} />
<Margins inline='x8'>
<Icon name={room.t === 'p' ? 'hashtag-lock' : 'hashtag'} />
{fname ?? name}
{isLastOwner && <Icon size='x16' name='info-circled' color='status-font-on-danger' title={lastOwnerWarning} />}
</Margins>
</TableCell>
<TableCell align='end' withTruncatedText>
</GenericTableCell>
<GenericTableCell align='end' withTruncatedText>
{formatDate(ts)}
</TableCell>
</TableRow>
</GenericTableCell>
</GenericTableRow>
);
};

7
apps/meteor/ee/client/omnichannel/RemoveBusinessHourButton.js
Unescape View File

@ -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 (
<Table.Cell fontScale='p2' color='hint' onClick={handleDelete} withTruncatedText>
<GenericTableCell fontScale='p2' color='hint' onClick={handleDelete} withTruncatedText>
<IconButton icon='trash' mini title={t('Remove')} onClick={handleDelete} />
</Table.Cell>
</GenericTableCell>
);
}

21
apps/meteor/ee/client/views/account/deviceManagement/DeviceManagementAccountTable/DeviceManagementAccountRow.tsx
Unescape View File

@ -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 (
<TableRow key={_id}>
<TableCell>
<GenericTableRow key={_id}>
<GenericTableCell>
<Box display='flex' alignItems='center'>
<DeviceIcon deviceType={deviceType} />
{deviceName && <Box withTruncatedText>{deviceName}</Box>}
</Box>
</TableCell>
<TableCell>{deviceOSName || ''}</TableCell>
<TableCell>{formatDateAndTime(loginAt)}</TableCell>
{mediaQuery && <TableCell>{_id}</TableCell>}
<TableCell align='end'>
</GenericTableCell>
<GenericTableCell>{deviceOSName || ''}</GenericTableCell>
<GenericTableCell>{formatDateAndTime(loginAt)}</GenericTableCell>
{mediaQuery && <GenericTableCell>{_id}</GenericTableCell>}
<GenericTableCell align='end'>
<Button onClick={(): void => handleDeviceLogout(onReload)}>{t('Logout')}</Button>
</TableCell>
</TableRow>
</GenericTableCell>
</GenericTableRow>
);
};

25
apps/meteor/ee/client/views/admin/deviceManagement/DeviceManagementAdminTable/DeviceManagementAdminRow.tsx
Unescape View File

@ -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 (
<TableRow key={_id} onKeyDown={handleKeyDown} onClick={handleClick} tabIndex={0} action>
<TableCell>
<GenericTableRow key={_id} onKeyDown={handleKeyDown} onClick={handleClick} tabIndex={0} action>
<GenericTableCell>
<Box display='flex' alignItems='center'>
<DeviceIcon deviceType={deviceType} />
{deviceName && <Box withTruncatedText>{deviceName}</Box>}
</Box>
</TableCell>
<TableCell>{deviceOSName}</TableCell>
<TableCell withTruncatedText>{username}</TableCell>
{mediaQuery && <TableCell>{formatDateAndTime(loginAt)}</TableCell>}
{mediaQuery && <TableCell withTruncatedText>{_id}</TableCell>}
{mediaQuery && <TableCell withTruncatedText>{ip}</TableCell>}
<TableCell onClick={(e): void => e.stopPropagation()}>
</GenericTableCell>
<GenericTableCell>{deviceOSName}</GenericTableCell>
<GenericTableCell withTruncatedText>{username}</GenericTableCell>
{mediaQuery && <GenericTableCell>{formatDateAndTime(loginAt)}</GenericTableCell>}
{mediaQuery && <GenericTableCell withTruncatedText>{_id}</GenericTableCell>}
{mediaQuery && <GenericTableCell withTruncatedText>{ip}</GenericTableCell>}
<GenericTableCell onClick={(e): void => e.stopPropagation()}>
<Menu
title={t('Options')}
options={menuOptions}
renderItem={({ label: { label, icon }, ...props }): ReactElement => <Option label={label} icon={icon} {...props} />}
/>
</TableCell>
</TableRow>
</GenericTableCell>
</GenericTableRow>
);
};

66
apps/meteor/ee/client/views/admin/engagementDashboard/channels/ChannelsOverview.tsx
Unescape View File

@ -1,4 +1,4 @@
import { Box, Icon, Margins, Pagination, Skeleton, Table, Tile } from '@rocket.chat/fuselage';
import { Box, Icon, Margins, Pagination, Skeleton, Table, TableBody, TableCell, TableHead, TableRow, Tile } from '@rocket.chat/fuselage';
import { useTranslation } from '@rocket.chat/ui-contexts';
import moment from 'moment';
import type { ReactElement } from 'react';
@ -67,53 +67,53 @@ const ChannelsOverview = (): ReactElement => {
)}
{(!channels || channels.length) && (
<Table>
<Table.Head>
<Table.Row>
<Table.Cell>{'#'}</Table.Cell>
<Table.Cell>{t('Channel')}</Table.Cell>
<Table.Cell>{t('Created')}</Table.Cell>
<Table.Cell>{t('Last_active')}</Table.Cell>
<Table.Cell>{t('Messages_sent')}</Table.Cell>
</Table.Row>
</Table.Head>
<Table.Body>
<TableHead>
<TableRow>
<TableCell>{'#'}</TableCell>
<TableCell>{t('Channel')}</TableCell>
<TableCell>{t('Created')}</TableCell>
<TableCell>{t('Last_active')}</TableCell>
<TableCell>{t('Messages_sent')}</TableCell>
</TableRow>
</TableHead>
<TableBody>
{channels?.map(({ t, name, createdAt, updatedAt, messagesCount, messagesVariation }, i) => (
<Table.Row key={i}>
<Table.Cell>{i + 1}.</Table.Cell>
<Table.Cell>
<TableRow key={i}>
<TableCell>{i + 1}.</TableCell>
<TableCell>
<Margins inlineEnd='x4'>
{(t === 'd' && <Icon name='at' />) || (t === 'p' && <Icon name='lock' />) || (t === 'c' && <Icon name='hashtag' />)}
</Margins>
{name}
</Table.Cell>
<Table.Cell>{moment(createdAt).format('L')}</Table.Cell>
<Table.Cell>{moment(updatedAt).format('L')}</Table.Cell>
<Table.Cell>
</TableCell>
<TableCell>{moment(createdAt).format('L')}</TableCell>
<TableCell>{moment(updatedAt).format('L')}</TableCell>
<TableCell>
{messagesCount} <Growth>{messagesVariation}</Growth>
</Table.Cell>
</Table.Row>
</TableCell>
</TableRow>
))}
{!channels &&
Array.from({ length: 5 }, (_, i) => (
<Table.Row key={i}>
<Table.Cell>
<TableRow key={i}>
<TableCell>
<Skeleton width='100%' />
</Table.Cell>
<Table.Cell>
</TableCell>
<TableCell>
<Skeleton width='100%' />
</Table.Cell>
<Table.Cell>
</TableCell>
<TableCell>
<Skeleton width='100%' />
</Table.Cell>
<Table.Cell>
</TableCell>
<TableCell>
<Skeleton width='100%' />
</Table.Cell>
<Table.Cell>
</TableCell>
<TableCell>
<Skeleton width='100%' />
</Table.Cell>
</Table.Row>
</TableCell>
</TableRow>
))}
</Table.Body>
</TableBody>
</Table>
)}
<Pagination

62
apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesPerChannelSection.tsx
Unescape View File

@ -1,5 +1,19 @@
import { ResponsivePie } from '@nivo/pie';
import { Box, Flex, Icon, Margins, Skeleton, Table, Tile, Palette, Tooltip } from '@rocket.chat/fuselage';
import {
Box,
Flex,
Icon,
Margins,
Skeleton,
Table,
Tile,
Palette,
Tooltip,
TableHead,
TableRow,
TableBody,
TableCell,
} from '@rocket.chat/fuselage';
import { useTranslation } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';
import React, { useMemo } from 'react';
@ -166,43 +180,43 @@ const MessagesPerChannelSection = (): ReactElement => {
)}
{(!table || !!table.length) && (
<Table>
<Table.Head>
<Table.Row>
<Table.Cell>{'#'}</Table.Cell>
<Table.Cell>{t('Channel')}</Table.Cell>
<Table.Cell align='end'>{t('Number_of_messages')}</Table.Cell>
</Table.Row>
</Table.Head>
<Table.Body>
<TableHead>
<TableRow>
<TableCell>{'#'}</TableCell>
<TableCell>{t('Channel')}</TableCell>
<TableCell align='end'>{t('Number_of_messages')}</TableCell>
</TableRow>
</TableHead>
<TableBody>
{table?.map(({ i, t, name, messages }) => (
<Table.Row key={i}>
<Table.Cell>{i + 1}.</Table.Cell>
<Table.Cell>
<TableRow key={i}>
<TableCell>{i + 1}.</TableCell>
<TableCell>
<Margins inlineEnd='x4'>
{(t === 'd' && <Icon name='at' />) ||
(t === 'p' && <Icon name='lock' />) ||
(t === 'c' && <Icon name='hashtag' />)}
</Margins>
{name}
</Table.Cell>
<Table.Cell align='end'>{messages}</Table.Cell>
</Table.Row>
</TableCell>
<TableCell align='end'>{messages}</TableCell>
</TableRow>
))}
{!table &&
Array.from({ length: 5 }, (_, i) => (
<Table.Row key={i}>
<Table.Cell>
<TableRow key={i}>
<TableCell>
<Skeleton width='100%' />
</Table.Cell>
<Table.Cell>
</TableCell>
<TableCell>
<Skeleton width='100%' />
</Table.Cell>
<Table.Cell align='end'>
</TableCell>
<TableCell align='end'>
<Skeleton width='100%' />
</Table.Cell>
</Table.Row>
</TableCell>
</TableRow>
))}
</Table.Body>
</TableBody>
</Table>
)}
</Box>

23
apps/meteor/ee/client/views/audit/components/AuditLogEntry.tsx
Unescape View File

@ -1,9 +1,10 @@
import type { IAuditLog } from '@rocket.chat/core-typings';
import { Box, TableCell, TableRow } from '@rocket.chat/fuselage';
import { Box } from '@rocket.chat/fuselage';
import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
import type { ReactElement } from 'react';
import React, { memo, useMemo } from 'react';
import { GenericTableRow, GenericTableCell } from '../../../../../client/components/GenericTable';
import UserAvatar from '../../../../../client/components/avatar/UserAvatar';
import { useFormatDateAndTime } from '../../../../../client/hooks/useFormatDateAndTime';
import AuditFiltersDisplay from './AuditFiltersDisplay';
@ -22,8 +23,8 @@ const AuditLogEntry = ({ value: { u, results, ts, _id, fields } }: AuditLogEntry
const mediaQuery = useMediaQuery('(min-width: 1024px)');
return (
<TableRow key={_id} tabIndex={0} role='link'>
<TableCell withTruncatedText>
<GenericTableRow key={_id} tabIndex={0} role='link'>
<GenericTableCell withTruncatedText>
<Box display='flex' alignItems='center'>
{username && <UserAvatar size={mediaQuery ? 'x28' : 'x40'} title={username} username={username} etag={avatarETag} />}
<Box display='flex' withTruncatedText marginInline={8}>
@ -40,16 +41,16 @@ const AuditLogEntry = ({ value: { u, results, ts, _id, fields } }: AuditLogEntry
</Box>
</Box>
</Box>
</TableCell>
<TableCell fontScale='p2m' color='hint' withTruncatedText>
</GenericTableCell>
<GenericTableCell fontScale='p2m' color='hint' withTruncatedText>
{msg}
</TableCell>
<TableCell withTruncatedText>{when}</TableCell>
<TableCell withTruncatedText>{results}</TableCell>
<TableCell fontScale='p2' color='hint' withTruncatedText>
</GenericTableCell>
<GenericTableCell withTruncatedText>{when}</GenericTableCell>
<GenericTableCell withTruncatedText>{results}</GenericTableCell>
<GenericTableCell fontScale='p2' color='hint' withTruncatedText>
<AuditFiltersDisplay users={users} room={room} startDate={startDate} endDate={endDate} />
</TableCell>
</TableRow>
</GenericTableCell>
</GenericTableRow>
);
};

40
yarn.lock
Unescape View File

@ -9493,7 +9493,7 @@ __metadata:
languageName: unknown
linkType: soft
"@rocket.chat/css-in-js@npm:^0.31.12, @rocket.chat/css-in-js@npm:^0.31.23, @rocket.chat/css-in-js@npm:~0.31.23-dev.103, @rocket.chat/css-in-js@npm:~0.31.23-dev.138":
"@rocket.chat/css-in-js@npm:^0.31.12, @rocket.chat/css-in-js@npm:^0.31.23, @rocket.chat/css-in-js@npm:~0.31.23-dev.103, @rocket.chat/css-in-js@npm:~0.31.23-dev.143":
version: 0.31.23
resolution: "@rocket.chat/css-in-js@npm:0.31.23"
dependencies:
@ -9519,7 +9519,7 @@ __metadata:
languageName: node
linkType: hard
"@rocket.chat/css-supports@npm:^0.31.23, @rocket.chat/css-supports@npm:~0.31.23-dev.103, @rocket.chat/css-supports@npm:~0.31.23-dev.138":
"@rocket.chat/css-supports@npm:^0.31.23, @rocket.chat/css-supports@npm:~0.31.23-dev.103, @rocket.chat/css-supports@npm:~0.31.23-dev.143":
version: 0.31.23
resolution: "@rocket.chat/css-supports@npm:0.31.23"
dependencies:
@ -9748,10 +9748,10 @@ __metadata:
languageName: node
linkType: hard
"@rocket.chat/fuselage-tokens@npm:~0.32.0-dev.314":
version: 0.32.0-dev.314
resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.314"
checksum: 7f9afe1e3f3a63e30ad963a8448e4003e66e3bf6f5d78f84116e472dc7dc1dee1955c11cebbc292e8bbe29999a89b674576b72e470e4577092af9a1c06a7fb2d
"@rocket.chat/fuselage-tokens@npm:~0.32.0-dev.319":
version: 0.32.0-dev.319
resolution: "@rocket.chat/fuselage-tokens@npm:0.32.0-dev.319"
checksum: 2bc25081e2efd632130d3ae0aecb21744e354fa7299bf283a41aa8fd564e2238508f4aac0958ad33de810c4df328b77aa10755ad2c05692cdcb6c70f417146be
languageName: node
linkType: hard
@ -9811,14 +9811,14 @@ __metadata:
linkType: soft
"@rocket.chat/fuselage@npm:next":
version: 0.32.0-dev.364
resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.364"
dependencies:
"@rocket.chat/css-in-js": ~0.31.23-dev.138
"@rocket.chat/css-supports": ~0.31.23-dev.138
"@rocket.chat/fuselage-tokens": ~0.32.0-dev.314
"@rocket.chat/memo": ~0.31.23-dev.138
"@rocket.chat/styled": ~0.31.23-dev.138
version: 0.32.0-dev.369
resolution: "@rocket.chat/fuselage@npm:0.32.0-dev.369"
dependencies:
"@rocket.chat/css-in-js": ~0.31.23-dev.143
"@rocket.chat/css-supports": ~0.31.23-dev.143
"@rocket.chat/fuselage-tokens": ~0.32.0-dev.319
"@rocket.chat/memo": ~0.31.23-dev.143
"@rocket.chat/styled": ~0.31.23-dev.143
invariant: ^2.2.4
react-aria: ~3.23.1
react-keyed-flatten-children: ^1.3.0
@ -9830,7 +9830,7 @@ __metadata:
react: ^17.0.2
react-dom: ^17.0.2
react-virtuoso: 1.2.4
checksum: fb1c3a4db589156dbe7eaa226fd0c3a99d45f3f602f1eee23bae0d6facaecbe57f48c89cf904f6379b3fdbc805ad94ca774e62348a9ae591839777354118a6ab
checksum: 109d05662debb9dbe38b218d8585953ed4c88b02f3ef7b9c529813e978a93c4af345602078ce237a03d8666d6ce09f91e7b72d2cea1cd4fc5101125b809e5a81
languageName: node
linkType: hard
@ -9918,9 +9918,9 @@ __metadata:
linkType: soft
"@rocket.chat/icons@npm:next":
version: 0.32.0-dev.311
resolution: "@rocket.chat/icons@npm:0.32.0-dev.311"
checksum: b967b3f788546e62906f87be5e5460a45d9cd2cf0bdc5df093b1e110f93908a8a596018aba2a170e4d37bb636b99b408f053980e20359dd2c1768a6b16d018c4
version: 0.32.0-dev.349
resolution: "@rocket.chat/icons@npm:0.32.0-dev.349"
checksum: 45553695c95ef0aa908b133e7347aff9b3845fe03486e145ed2e717efa1b2fc5044f8d7bd390031cc3e401ecfb89723ef4c158a136f164bf73b4a9653775963d
languageName: node
linkType: hard
@ -10062,7 +10062,7 @@ __metadata:
languageName: node
linkType: hard
"@rocket.chat/memo@npm:^0.31.23, @rocket.chat/memo@npm:~0.31.23-dev.103, @rocket.chat/memo@npm:~0.31.23-dev.138":
"@rocket.chat/memo@npm:^0.31.23, @rocket.chat/memo@npm:~0.31.23-dev.103, @rocket.chat/memo@npm:~0.31.23-dev.143":
version: 0.31.23
resolution: "@rocket.chat/memo@npm:0.31.23"
checksum: 070debb940749a2e4463cf767dd65c6967cea664a5bd67c22a812d611f6c3c46d6fe4bb0bf329e43dcd927493413add37c45ae3b05ec08f0b24e9d7385caebdd
@ -10867,7 +10867,7 @@ __metadata:
languageName: node
linkType: hard
"@rocket.chat/styled@npm:~0.31.23-dev.103, @rocket.chat/styled@npm:~0.31.23-dev.138":
"@rocket.chat/styled@npm:~0.31.23-dev.103, @rocket.chat/styled@npm:~0.31.23-dev.143":
version: 0.31.23
resolution: "@rocket.chat/styled@npm:0.31.23"
dependencies:

Write Preview
Loading…
Cancel
Save