diff --git a/frontend/src/component/admin/enterprise-edge/EnterpriseEdgeInstances/EnterpriseEdgeInstance/EnterpriseEdgeApiKeyRevisionData.tsx b/frontend/src/component/admin/enterprise-edge/EnterpriseEdgeInstances/EnterpriseEdgeInstance/EnterpriseEdgeApiKeyRevisionData.tsx index 48ad086608..22f60870bc 100644 --- a/frontend/src/component/admin/enterprise-edge/EnterpriseEdgeInstances/EnterpriseEdgeInstance/EnterpriseEdgeApiKeyRevisionData.tsx +++ b/frontend/src/component/admin/enterprise-edge/EnterpriseEdgeInstances/EnterpriseEdgeInstance/EnterpriseEdgeApiKeyRevisionData.tsx @@ -1,6 +1,9 @@ import type { EdgeApiKeyRevisionId } from '../../../../../interfaces/connectedEdge.ts'; -import { formatDateYMDHMS } from '../../../../../utils/formatDate.ts'; import { styled } from '@mui/material'; +import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; +import { formatDateYMDHMS } from '../../../../../utils/formatDate.ts'; +import { useLocationSettings } from '../../../../../hooks/useLocationSettings.ts'; +import { Truncator } from '../../../../common/Truncator/Truncator.tsx'; interface IEnterpriseEdgeApiKeyRevisionProps { apiKeys?: EdgeApiKeyRevisionId[]; @@ -18,19 +21,33 @@ const StyledTable = styled('table')(({ theme }) => ({ '& > th:first-of-type, td:first-of-type': { textAlign: 'left', }, + paddingTop: theme.spacing(1), + }, +})); + +const StyledTableCell = styled('td')(({ theme }) => ({ + paddingTop: theme.spacing(1), + maxWidth: '80px', + '& > div': { + display: 'flex', + alignItems: 'center', + justifyContent: 'end', }, })); export const EnterpriseEdgeApiKeyRevisionData = ({ apiKeys, }: IEnterpriseEdgeApiKeyRevisionProps) => { - return apiKeys && apiKeys.length > 0 ? ( + const { locationSettings } = useLocationSettings(); + if (!apiKeys || apiKeys.length === 0) { + return null; + } + return ( - Key - Revision ID - Last updated + Token + Revision @@ -39,21 +56,34 @@ export const EnterpriseEdgeApiKeyRevisionData = ({ - {`${apiToken(apiKey)}`} - {apiKey.revisionId} - {formatDateYMDHMS(apiKey.lastUpdated)} + + + {apiToken(apiKey)} + + + + + {apiKey.revisionId} + + + ); })} - ) : null; + ); }; -function getProjectLabel(projects: string[]): string { - return projects.length === 1 ? projects[0] : '[]'; +function projectKey(projects: string[]): string { + return projects.length === 1 ? projects[0] : `[]`; } function apiToken(revInfo: EdgeApiKeyRevisionId): string { - return `${getProjectLabel(revInfo.projects)}:${revInfo.environment}.`; + return `${projectKey(revInfo.projects)}:${revInfo.environment}.***`; }