Skip to content

Commit e4c5a86

Browse files
ibolton336ibolton336
committed
👻 Refactor remaining deprecated tables to composable
Signed-off-by: Ian Bolton <[email protected]>
1 parent 8715dbe commit e4c5a86

File tree

13 files changed

+549
-832
lines changed

13 files changed

+549
-832
lines changed

‎client/public/locales/en/translation.json

+1
Original file line numberDiff line numberDiff line change
@@ -450,6 +450,7 @@
450450
"teamMember": "team member",
451451
"ticket": "Ticket",
452452
"trivialButMigratable": "Trivial but migratable",
453+
"type": "Type",
453454
"unassessedOrUnknown": "Unassessed or unknown",
454455
"unassessed": "Unassessed",
455456
"unassigned": "Not yet assigned",

‎client/src/app/components/AppTableWithControls.tsx

-81
This file was deleted.

‎client/src/app/pages/applications/manage-imports-details/manage-imports-details.tsx

+135-91
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,41 @@ import { saveAs } from "file-saver";
66
import {
77
Button,
88
ButtonVariant,
9+
EmptyState,
10+
EmptyStateBody,
11+
EmptyStateIcon,
912
PageSection,
13+
Title,
14+
Toolbar,
15+
ToolbarContent,
1016
ToolbarGroup,
1117
ToolbarItem,
1218
} from "@patternfly/react-core";
13-
import { cellWidth, ICell, IRow, truncate } from "@patternfly/react-table";
19+
import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
1420

1521
import { ImportSummaryRoute, Paths } from "@app/Paths";
1622
import { getApplicationSummaryCSV } from "@app/api/rest";
17-
import { ApplicationImport } from "@app/api/models";
1823
import { getAxiosErrorMessage } from "@app/utils/utils";
19-
import { useLegacyPaginationState } from "@app/hooks/useLegacyPaginationState";
2024
import {
2125
useFetchImports,
2226
useFetchImportSummaryById,
2327
} from "@app/queries/imports";
2428
import {
25-
FilterCategory,
29+
FilterToolbar,
2630
FilterType,
2731
} from "@app/components/FilterToolbar/FilterToolbar";
28-
import { useLegacyFilterState } from "@app/hooks/useLegacyFilterState";
29-
import { useLegacySortState } from "@app/hooks/useLegacySortState";
3032
import { NotificationsContext } from "@app/components/NotificationsContext";
3133
import { PageHeader } from "@app/components/PageHeader";
32-
import { AppTableWithControls } from "@app/components/AppTableWithControls";
3334
import { AppPlaceholder } from "@app/components/AppPlaceholder";
3435
import { ConditionalRender } from "@app/components/ConditionalRender";
35-
36-
const ENTITY_FIELD = "entity";
36+
import { SimplePagination } from "@app/components/SimplePagination";
37+
import {
38+
TableHeaderContentWithControls,
39+
ConditionalTableBody,
40+
TableRowContentWithControls,
41+
} from "@app/components/TableControls";
42+
import { useLocalTableControls } from "@app/hooks/table-controls";
43+
import { CubesIcon } from "@patternfly/react-icons";
3744

3845
export const ManageImportsDetails: React.FC = () => {
3946
// i18
@@ -44,44 +51,13 @@ export const ManageImportsDetails: React.FC = () => {
4451

4552
const { pushNotification } = React.useContext(NotificationsContext);
4653

47-
// Table
48-
const columns: ICell[] = [
49-
{
50-
title: t("terms.application"),
51-
transforms: [cellWidth(30)],
52-
cellTransforms: [truncate],
53-
},
54-
{
55-
title: t("terms.message"),
56-
transforms: [cellWidth(70)],
57-
cellTransforms: [truncate],
58-
},
59-
];
60-
6154
const { imports, isFetching, fetchError } = useFetchImports(
6255
parseInt(importId),
6356
false
6457
);
6558

6659
const { importSummary } = useFetchImportSummaryById(importId);
6760

68-
const rows: IRow[] = [];
69-
imports?.forEach((item) => {
70-
rows.push({
71-
[ENTITY_FIELD]: item,
72-
cells: [
73-
{
74-
title: item["Application Name"],
75-
},
76-
{
77-
title: item.errorMessage,
78-
},
79-
],
80-
});
81-
});
82-
83-
//
84-
8561
const exportCSV = () => {
8662
getApplicationSummaryCSV(importId)
8763
.then((response) => {
@@ -95,42 +71,52 @@ export const ManageImportsDetails: React.FC = () => {
9571
});
9672
});
9773
};
98-
99-
const filterCategories: FilterCategory<
100-
ApplicationImport,
101-
"Application Name"
102-
>[] = [
103-
{
104-
categoryKey: "Application Name",
105-
title: "Application Name",
106-
type: FilterType.search,
107-
placeholderText: "Filter by application name...",
108-
getItemValue: (item) => {
109-
return item["Application Name"] || "";
110-
},
74+
const tableControls = useLocalTableControls({
75+
tableName: "manage-imports-details",
76+
idProperty: "Application Name",
77+
items: imports || [],
78+
columnNames: {
79+
name: t("terms.name"),
80+
message: t("terms.message"),
11181
},
112-
];
113-
114-
const { filterValues, setFilterValues, filteredItems } = useLegacyFilterState(
115-
imports || [],
116-
filterCategories
117-
);
118-
const handleOnClearAllFilters = () => {
119-
setFilterValues({});
120-
};
121-
122-
const getSortValues = (item: ApplicationImport) => [
123-
item?.["Application Name"] || "",
124-
"", // Action column
125-
];
126-
127-
const { sortBy, onSort, sortedItems } = useLegacySortState(
128-
filteredItems,
129-
getSortValues
130-
);
82+
isFilterEnabled: true,
83+
isSortEnabled: true,
84+
isPaginationEnabled: true,
85+
hasActionsColumn: true,
86+
filterCategories: [
87+
{
88+
categoryKey: "name",
89+
title: "Application Name",
90+
type: FilterType.search,
91+
placeholderText: "Filter by application name...",
92+
getItemValue: (item) => {
93+
return item["Application Name"] || "";
94+
},
95+
},
96+
],
97+
initialItemsPerPage: 10,
98+
sortableColumns: ["name", "message"],
99+
initialSort: { columnKey: "name", direction: "asc" },
100+
getSortValues: (item) => ({
101+
name: item["Application Name"],
102+
message: item.errorMessage,
103+
}),
104+
isLoading: isFetching,
105+
});
131106

132-
const { currentPageItems, setPageNumber, paginationProps } =
133-
useLegacyPaginationState(sortedItems, 10);
107+
const {
108+
currentPageItems,
109+
numRenderedColumns,
110+
propHelpers: {
111+
toolbarProps,
112+
filterToolbarProps,
113+
paginationProps,
114+
tableProps,
115+
getThProps,
116+
getTrProps,
117+
getTdProps,
118+
},
119+
} = tableControls;
134120

135121
return (
136122
<>
@@ -158,20 +144,14 @@ export const ManageImportsDetails: React.FC = () => {
158144
when={isFetching && !(imports || fetchError)}
159145
then={<AppPlaceholder />}
160146
>
161-
<AppTableWithControls
162-
count={imports ? imports.length : 0}
163-
paginationProps={paginationProps}
164-
paginationIdPrefix="manage-imports-details"
165-
sortBy={sortBy}
166-
onSort={onSort}
167-
filtersApplied={false}
168-
cells={columns}
169-
rows={rows}
170-
isLoading={isFetching}
171-
loadingVariant="skeleton"
172-
fetchError={fetchError}
173-
toolbarActions={
174-
<>
147+
<div
148+
style={{
149+
backgroundColor: "var(--pf-v5-global--BackgroundColor--100)",
150+
}}
151+
>
152+
<Toolbar {...toolbarProps}>
153+
<ToolbarContent>
154+
<FilterToolbar {...filterToolbarProps} />
175155
<ToolbarGroup variant="button-group">
176156
<ToolbarItem>
177157
<Button
@@ -185,9 +165,73 @@ export const ManageImportsDetails: React.FC = () => {
185165
</Button>
186166
</ToolbarItem>
187167
</ToolbarGroup>
188-
</>
189-
}
190-
/>
168+
</ToolbarContent>
169+
</Toolbar>
170+
<Table {...tableProps} aria-label="Business service table">
171+
<Thead>
172+
<Tr>
173+
<TableHeaderContentWithControls {...tableControls}>
174+
<Th {...getThProps({ columnKey: "name" })} />
175+
<Th {...getThProps({ columnKey: "message" })} />
176+
</TableHeaderContentWithControls>
177+
</Tr>
178+
</Thead>
179+
<ConditionalTableBody
180+
isLoading={isFetching}
181+
isError={!!fetchError}
182+
isNoData={currentPageItems.length === 0}
183+
noDataEmptyState={
184+
<EmptyState variant="sm">
185+
<EmptyStateIcon icon={CubesIcon} />
186+
<Title headingLevel="h2" size="lg">
187+
{t("composed.noDataStateTitle", {
188+
what: t("terms.imports").toLowerCase(),
189+
})}
190+
</Title>
191+
<EmptyStateBody>
192+
{t("composed.noDataStateBody", {
193+
how: t("terms.create"),
194+
what: t("terms.imports").toLowerCase(),
195+
})}
196+
</EmptyStateBody>
197+
</EmptyState>
198+
}
199+
numRenderedColumns={numRenderedColumns}
200+
>
201+
<Tbody>
202+
{currentPageItems?.map((appImport, rowIndex) => {
203+
return (
204+
<Tr
205+
key={appImport["Application Name"]}
206+
{...getTrProps({ item: appImport })}
207+
>
208+
<TableRowContentWithControls
209+
{...tableControls}
210+
item={appImport}
211+
rowIndex={rowIndex}
212+
>
213+
<Td width={25} {...getTdProps({ columnKey: "name" })}>
214+
{appImport["Application Name"]}
215+
</Td>
216+
<Td
217+
width={10}
218+
{...getTdProps({ columnKey: "message" })}
219+
>
220+
{appImport.errorMessage}
221+
</Td>
222+
</TableRowContentWithControls>
223+
</Tr>
224+
);
225+
})}
226+
</Tbody>
227+
</ConditionalTableBody>
228+
</Table>
229+
<SimplePagination
230+
idPrefix="business-service-table"
231+
isTop={false}
232+
paginationProps={paginationProps}
233+
/>
234+
</div>
191235
</ConditionalRender>
192236
</PageSection>
193237
</>

0 commit comments

Comments
 (0)