Skip to content

Commit 605395e

Browse files
abhinandan13janabhinandan13jan
committed
chore(trust-pages): refactor trust pages and add role column
1 parent a3a4217 commit 605395e

File tree

10 files changed

+891
-302
lines changed

10 files changed

+891
-302
lines changed

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

Lines changed: 47 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,21 @@ import { Fragment, useRef, useState } from "react";
33
import {
44
Content,
55
DataList,
6-
DataListAction,
7-
DataListCell,
8-
DataListItem,
9-
DataListItemCells,
10-
DataListItemRow,
116
Drawer,
127
DrawerActions,
138
DrawerCloseButton,
149
DrawerContent,
1510
DrawerContentBody,
1611
DrawerHead,
1712
DrawerPanelContent,
18-
Dropdown,
19-
DropdownItem,
20-
DropdownList,
21-
Flex,
22-
FlexItem,
23-
Icon,
24-
MenuToggle,
25-
type MenuToggleElement,
26-
} from "@patternfly/react-core";
13+
} from '@patternfly/react-core';
2714
// import { rows } from '../TrustRoots.data';
2815

29-
import CheckCircleIcon from "@patternfly/react-icons/dist/esm/icons/check-circle-icon";
30-
import CodeBranchIcon from "@patternfly/react-icons/dist/esm/icons/code-branch-icon";
31-
import CubeIcon from "@patternfly/react-icons/dist/esm/icons/cube-icon";
32-
import TimesCircleIcon from "@patternfly/react-icons/dist/esm/icons/times-circle-icon";
33-
import { MinusIcon, CalendarAltIcon, FileAltIcon, EllipsisVIcon } from "@patternfly/react-icons";
3416
// import { useQuery } from '@tanstack/react-query';
3517

36-
import { TrustRootsDrawerContent } from "./TrustRootsDrawerContent";
37-
import { exampleTrustRoot } from "../TrustRoots.data";
18+
import { TrustRootsDrawerContent } from './TrustRootsDrawerContent';
19+
import { exampleTrustRoots } from '../data/TrustRoots.data';
20+
import TrustRootRow, { LastStatus, TrustRootRowProps } from './TrustRootRow';
3821

3922
const TrustRootsDataList = () => {
4023
const [selectedRow, setSelectedRow] = useState("");
@@ -54,125 +37,45 @@ const TrustRootsDataList = () => {
5437
// console.table(data);
5538
// }
5639

57-
const getRow = (id: string, lastStatus: "success" | "error" | null, isRunning: boolean) => {
58-
let mainIcon;
59-
let lastStatusComponent;
60-
61-
if (lastStatus === "success") {
62-
mainIcon = (
63-
<Icon size="xl" status="success">
64-
<CheckCircleIcon />
65-
</Icon>
66-
);
67-
} else if (lastStatus === "error") {
68-
mainIcon = (
69-
<Icon size="xl" status="danger">
70-
<TimesCircleIcon />
71-
</Icon>
72-
);
73-
} else {
74-
mainIcon = (
75-
<Icon size="xl">
76-
<MinusIcon />
77-
</Icon>
78-
);
79-
}
80-
81-
if (lastStatus === "success" || lastStatus === "error" || isRunning) {
82-
lastStatusComponent = (
83-
<Flex direction={{ default: "column" }}>
84-
<FlexItem>
85-
<Flex spaceItems={{ default: "spaceItemsSm" }}>
86-
<FlexItem>
87-
<CalendarAltIcon /> 7 hours ago
88-
</FlexItem>
89-
</Flex>
90-
</FlexItem>
91-
<FlexItem>
92-
<Flex spaceItems={{ default: "spaceItemsSm" }}>
93-
<FlexItem>
94-
<FileAltIcon /> {exampleTrustRoot.certificates.length} certificates
95-
</FlexItem>
96-
</Flex>
97-
</FlexItem>
98-
</Flex>
99-
);
100-
}
40+
const getStatus = (id: string): LastStatus => {
41+
const dummyStatuses: { id: string; lastStatus: LastStatus }[] = [
42+
{ id: exampleTrustRoots[0].id, lastStatus: null },
43+
{ id: exampleTrustRoots[1].id, lastStatus: null },
44+
{ id: exampleTrustRoots[2].id, lastStatus: 'success' },
45+
{ id: exampleTrustRoots[3].id, lastStatus: 'error' },
46+
{ id: exampleTrustRoots[4].id, lastStatus: null },
47+
];
48+
// to be updated
49+
return dummyStatuses.find((status) => status.id === id)?.lastStatus ?? null;
50+
};
10151

102-
return (
103-
<DataListItem id={id} aria-labelledby="Demo-item1">
104-
<DataListItemRow>
105-
<DataListItemCells
106-
dataListCells={[
107-
<DataListCell key="icon" isFilled={false}>
108-
{mainIcon}
109-
</DataListCell>,
110-
<DataListCell key="info" isFilled={false}>
111-
<Flex direction={{ default: "column" }}>
112-
<FlexItem>
113-
<Content component="p">{exampleTrustRoot.name}</Content>
114-
</FlexItem>
115-
<FlexItem>
116-
<Content component="dd">
117-
<Flex spaceItems={{ default: "spaceItemsSm" }}>
118-
<FlexItem>
119-
{/* <CodeBranchIcon /> https://github.com/organization/repository.git */}
120-
<CodeBranchIcon /> {exampleTrustRoot.source}
121-
</FlexItem>
122-
</Flex>
123-
</Content>
124-
</FlexItem>
125-
<FlexItem>
126-
<Flex spaceItems={{ default: "spaceItemsSm" }}>
127-
<FlexItem>
128-
<CubeIcon /> Type: {exampleTrustRoot.type}
129-
</FlexItem>
130-
</Flex>
131-
</FlexItem>
132-
</Flex>
133-
</DataListCell>,
134-
<DataListCell key="description">
135-
<Flex direction={{ default: "column" }}>
136-
<FlexItem>
137-
<Content component="p">This is the description of the Root</Content>
138-
</FlexItem>
139-
</Flex>
140-
</DataListCell>,
141-
<DataListCell key="status" alignRight>
142-
{lastStatusComponent}
143-
</DataListCell>,
144-
]}
145-
/>
146-
{action}
147-
</DataListItemRow>
148-
</DataListItem>
149-
);
52+
const getIsRunning = (id: string): boolean => {
53+
const dummyRuns = [
54+
{ id: exampleTrustRoots[0].id, running: false },
55+
{ id: exampleTrustRoots[1].id, running: true },
56+
{ id: exampleTrustRoots[2].id, running: false },
57+
{ id: exampleTrustRoots[3].id, running: true },
58+
{ id: exampleTrustRoots[4].id, running: false },
59+
];
60+
return dummyRuns.find((run) => run.id === id)?.running ?? false;
15061
};
15162

152-
const action = (
153-
<DataListAction id="actions" aria-label="Actions" aria-labelledby="actions">
154-
<Dropdown
155-
popperProps={{ position: "right" }}
156-
onSelect={() => {}}
157-
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
158-
<MenuToggle
159-
ref={toggleRef}
160-
isExpanded={false}
161-
onClick={() => {}}
162-
variant="plain"
163-
aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 2"
164-
icon={<EllipsisVIcon />}
165-
/>
166-
)}
167-
isOpen={false}
168-
onOpenChange={() => {}}
169-
>
170-
<DropdownList>
171-
<DropdownItem>Refresh</DropdownItem>
172-
</DropdownList>
173-
</Dropdown>
174-
</DataListAction>
175-
);
63+
const rowData: TrustRootRowProps[] = exampleTrustRoots.map((trustRoot) => {
64+
return {
65+
id: trustRoot.id,
66+
lastStatus: getStatus(trustRoot.id),
67+
isRunning: getIsRunning(trustRoot.id),
68+
trustRoot,
69+
};
70+
});
71+
72+
// const rowData: TrustRootRowProps[] = [
73+
// { id: 'row-1', lastStatus: null, isRunning: false },
74+
// { id: 'row-2', lastStatus: null, isRunning: true },
75+
// { id: 'row-3', lastStatus: 'success', isRunning: false },
76+
// { id: 'row-4', lastStatus: 'error', isRunning: false },
77+
// { id: 'row-5', lastStatus: null, isRunning: false },
78+
// ];
17679

17780
return (
17881
<Fragment>
@@ -190,7 +93,9 @@ const TrustRootsDataList = () => {
19093
{/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment */}
19194
<div tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef as any}>
19295
<Content component="small">Name</Content>
193-
<Content component="p">{exampleTrustRoot.name}</Content>
96+
<Content component="p">
97+
{exampleTrustRoots.find((tr) => tr.id === selectedRow)?.name ?? selectedRow}
98+
</Content>
19499
</div>
195100
<DrawerActions>
196101
<DrawerCloseButton
@@ -201,7 +106,7 @@ const TrustRootsDataList = () => {
201106
/>
202107
</DrawerActions>
203108
</DrawerHead>
204-
<TrustRootsDrawerContent />
109+
<TrustRootsDrawerContent trustRootId={selectedRow} />
205110
</DrawerPanelContent>
206111
}
207112
>
@@ -218,11 +123,9 @@ const TrustRootsDataList = () => {
218123
setIsDrawerExpanded(true);
219124
}}
220125
>
221-
{getRow("row-1", null, false)}
222-
{getRow("row-2", null, true)}
223-
{getRow("row-3", "success", false)}
224-
{getRow("row-4", "error", false)}
225-
{getRow("row-5", null, false)}
126+
{rowData.map((row) => (
127+
<TrustRootRow key={row.id} {...row} />
128+
))}
226129
</DataList>
227130
</DrawerContentBody>
228131
</DrawerContent>

0 commit comments

Comments
 (0)