Chore: Accounts/token to TS (#26434)

Co-authored-by: dougfabris <devfabris@gmail.com>

apps/meteor/client/views/account/tokens/AccountTokensPage.js → apps/meteor/client/views/account/tokens/AccountTokensPage.tsx

@@ -1,21 +1,17 @@
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import Page from '../../../components/Page';
-import { useEndpointData } from '../../../hooks/useEndpointData';
 import AccountTokensTable from './AccountTokensTable';
-import AddToken from './AddToken';
 
-const AccountTokensPage = () => {
+const AccountTokensPage = (): ReactElement => {
 	const t = useTranslation();
-	const { value: data, reload } = useEndpointData('/v1/users.getPersonalAccessTokens');
 
 	return (
 		<Page>
 			<Page.Header title={t('Personal_Access_Tokens')} />
 			<Page.Content>
-				<AddToken onDidAddToken={reload} />
-				<AccountTokensTable data={data} reload={reload} />
+				<AccountTokensTable />
 			</Page.Content>
 		</Page>
 	);

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

@@ -0,0 +1,46 @@
+import { IPersonalAccessToken, Serialized } from '@rocket.chat/core-typings';
+import { ButtonGroup, IconButton, TableRow, TableCell } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import React, { useCallback, FC } from 'react';
+
+import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
+
+type AccountTokensRowProps = {
+	isMedium: boolean;
+	onRegenerate: (name: string) => void;
+	onRemove: (name: string) => void;
+} & Serialized<Pick<IPersonalAccessToken, 'name' | 'createdAt' | 'lastTokenPart' | 'bypassTwoFactor'>>;
+
+const AccountTokensRow: FC<AccountTokensRowProps> = ({
+	bypassTwoFactor,
+	createdAt,
+	isMedium,
+	lastTokenPart,
+	name,
+	onRegenerate,
+	onRemove,
+}) => {
+	const t = useTranslation();
+	const formatDateAndTime = useFormatDateAndTime();
+	const handleRegenerate = useCallback(() => onRegenerate(name), [name, onRegenerate]);
+	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'>
+				{name}
+			</TableCell>
+			{isMedium && <TableCell withTruncatedText>{formatDateAndTime(createdAt)}</TableCell>}
+			<TableCell withTruncatedText>...{lastTokenPart}</TableCell>
+			<TableCell withTruncatedText>{bypassTwoFactor ? t('Ignore') : t('Require')}</TableCell>
+			<TableCell 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>
+	);
+};
+
+export default AccountTokensRow;