Skip to content

Commit 3c24bf4

Browse files
fix-typo
1 parent 605395e commit 3c24bf4

File tree

6 files changed

+139
-65
lines changed

6 files changed

+139
-65
lines changed

client/src/app/pages/TrustRoots/components/TrustRootsDataList.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,7 @@ const TrustRootsDataList = () => {
9292
<DrawerHead>
9393
{/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment */}
9494
<div tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef as any}>
95-
<Content component="small">Name</Content>
96-
<Content component="p">
95+
<Content component="h3">
9796
{exampleTrustRoots.find((tr) => tr.id === selectedRow)?.name ?? selectedRow}
9897
</Content>
9998
</div>

client/src/app/pages/TrustRoots/components/TrustRootsDrawerContent.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Fragment } from 'react';
22
import { Tab, Tabs, TabTitleText } from '@patternfly/react-core';
33
import { exampleTrustRoots } from '../data/TrustRoots.data';
4-
import TrustRootMetadataTab from './DraweContents/TrustRootMetadataTab';
5-
import TrustRootCertificateTab from './DraweContents/TrustRootCertificateTab';
6-
import TrustRootInfoTab from './DraweContents/TrustRootInfoTab';
4+
import TrustRootMetadataTab from './DrawerContents/TrustRootMetadataTab';
5+
import TrustRootCertificateTab from './DrawerContents/TrustRootCertificateTab';
6+
import TrustRootInfoTab from './DrawerContents/TrustRootInfoTab';
77

88
type TrustRootDrawerContentProps = {
99
trustRootId: string;

src/app/Trust/TrustRoots/components/DraweContents/TrustRootMetadataTab.tsx

Lines changed: 0 additions & 60 deletions
This file was deleted.
Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import * as React from 'react';
2+
import { Button, Card, CardBody, CardFooter, CardTitle, Content, Flex, FlexItem, Icon } from '@patternfly/react-core';
3+
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
4+
import { capitalizeFirstLetter, formatDate } from '@app/utils/utils';
5+
import { ExclamationTriangleIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
6+
import { TrustRootKind } from '../../data/TrustRoots.data';
7+
import TrustRootNotFound from '../TrustRootNotFound';
8+
9+
export type TrustRootMetadataTabProps = {
10+
trustRoot?: TrustRootKind;
11+
};
12+
13+
const TrustRootMetadataTab: React.FC<TrustRootMetadataTabProps> = ({ trustRoot }) => {
14+
if (!trustRoot) {
15+
return <TrustRootNotFound />;
16+
}
17+
const latestTUF = trustRoot?.tufMetadata[0];
18+
19+
return (
20+
<Card id="certificate-health" isPlain isFullHeight key="card-1">
21+
<CardTitle>
22+
<Content component="h3">TUF metadata</Content>
23+
</CardTitle>
24+
<CardBody>
25+
<Flex grow={{ default: 'grow' }} spaceItems={{ default: 'spaceItemsXl' }}>
26+
<Flex flex={{ default: 'flex_1' }}>
27+
<Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsLg' }}>
28+
<FlexItem>
29+
<Flex direction={{ default: 'column' }}>
30+
<FlexItem>
31+
<Content component="h4">Status</Content>
32+
</FlexItem>
33+
<FlexItem>
34+
{latestTUF.status === 'valid' ? (
35+
<Icon status="success">
36+
<CheckCircleIcon />
37+
</Icon>
38+
) : (
39+
<Icon status="warning">
40+
<ExclamationTriangleIcon />
41+
</Icon>
42+
)}{' '}
43+
{capitalizeFirstLetter(latestTUF.status)}
44+
</FlexItem>
45+
</Flex>
46+
</FlexItem>
47+
48+
<FlexItem>
49+
<Flex direction={{ default: 'column' }}>
50+
<FlexItem>
51+
<Content component="h4">Version</Content>
52+
</FlexItem>
53+
<FlexItem>{latestTUF.version}</FlexItem>
54+
</Flex>
55+
</FlexItem>
56+
</Flex>
57+
</Flex>
58+
<Flex flex={{ default: 'flex_1' }} align={{ default: 'alignRight' }}>
59+
<Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsLg' }}>
60+
<FlexItem>
61+
<FlexItem>
62+
<Flex direction={{ default: 'column' }}>
63+
<FlexItem>
64+
<Content component="h4">Role</Content>
65+
</FlexItem>
66+
<FlexItem>{latestTUF.role}</FlexItem>
67+
</Flex>
68+
</FlexItem>
69+
</FlexItem>
70+
<Flex>
71+
<FlexItem align={{ default: 'alignRight' }}>
72+
<FlexItem>
73+
<Flex direction={{ default: 'column' }}>
74+
<FlexItem>
75+
<Content component="h4">Expires</Content>
76+
</FlexItem>
77+
<FlexItem>{formatDate(latestTUF.expires)}</FlexItem>
78+
</Flex>
79+
</FlexItem>
80+
</FlexItem>
81+
</Flex>
82+
</Flex>
83+
</Flex>
84+
</Flex>
85+
</CardBody>
86+
<CardFooter>
87+
<Button variant="link" isInline icon={<ExternalLinkAltIcon />}>
88+
See the trust root definition on store
89+
</Button>
90+
</CardFooter>
91+
</Card>
92+
);
93+
};
94+
95+
export default TrustRootMetadataTab;
96+
97+
// const table = <>
98+
// <Pagination itemCount={trustRoot.tufMetadata.length} perPage={10} page={1} variant="top" />
99+
// <Table variant="compact">
100+
// <Thead>
101+
// <Tr>
102+
// <Th>Version</Th>
103+
// <Th>Expires</Th>
104+
// <Th>Role</Th>
105+
// <Th>Status</Th>
106+
// </Tr>
107+
// </Thead>
108+
// <Tbody>
109+
// {trustRoot.tufMetadata.map((metadata, idx) => (
110+
// <Tr key={idx}>
111+
// <Td>{metadata.version}</Td>
112+
// <Td>{formatDate(metadata.expires)}</Td>
113+
// <Td>{metadata.role}</Td>
114+
// <Td>
115+
// <Flex spaceItems={{ default: 'spaceItemsSm' }}>
116+
// <FlexItem>
117+
// {metadata.status === 'valid' ? (
118+
// <Icon status="success">
119+
// <CheckCircleIcon />
120+
// </Icon>
121+
// ) : (
122+
// <Icon status="warning">
123+
// <ExclamationTriangleIcon />
124+
// </Icon>
125+
// )}{' '}
126+
// {capitalizeFirstLetter(metadata.status)}
127+
// </FlexItem>
128+
// </Flex>
129+
// </Td>
130+
// </Tr>
131+
// ))}
132+
// </Tbody>
133+
// </Table>
134+
// <Pagination itemCount={trustRoot.tufMetadata.length} perPage={10} page={1} variant="bottom" />
135+
// </>

0 commit comments

Comments
 (0)