chore: Table in favor of GenericTable (#29628)

RocketChat · Jun 24, 2023 · f7d2e27 · f7d2e27
1 parent 67a299b
commit f7d2e27
Show file tree

Hide file tree

Showing 31 changed files with 390 additions and 348 deletions.
diff --git 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<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>
 	);
 };
 

diff --git a/.../meteor/client/views/admin/customUserStatus/CustomUserStatusTable/CustomUserStatusRow.tsx b/.../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 (
-		<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>
 	);
 };
 

diff --git 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 (
-		<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>
 	);
 };
 

diff --git 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() {
 			</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>

diff --git 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 (
-		<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>
 	);
 }
 

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

diff --git 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 (
-		<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>
 	);
 }
 

diff --git 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<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}