refactor(web/ui): Migrate to composable table

This change updates the web interface to use the composable table API
offered by PatternFly 4. This has replaced the legacy table API which
will be removed in the next major version of PatternFly.

1 files changed, 45 insertions, 44 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/projects/TopologyTable.js b/opendc-web/opendc-web-ui/src/components/projects/TopologyTable.js
index ced5304a..62deace0 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/TopologyTable.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/TopologyTable.js
@@ -20,66 +20,67 @@
  * SOFTWARE.
  */
 
+import { Bullseye } from '@patternfly/react-core'
 import PropTypes from 'prop-types'
 import Link from 'next/link'
-import { Table, TableBody, TableHeader } from '@patternfly/react-table'
+import { Tr, Th, Thead, Td, ActionsColumn, Tbody, TableComposable } from '@patternfly/react-table'
 import React from 'react'
 import TableEmptyState from '../util/TableEmptyState'
 import { parseAndFormatDateTime } from '../../util/date-time'
 import { useTopologies, useDeleteTopology } from '../../data/topology'
 
-const TopologyTable = ({ projectId }) => {
+function TopologyTable({ projectId }) {
     const { status, data: topologies = [] } = useTopologies(projectId)
     const { mutate: deleteTopology } = useDeleteTopology()
 
-    const columns = ['Name', 'Rooms', 'Last Edited']
-    const rows =
-        topologies.length > 0
-            ? topologies.map((topology) => [
-                  {
-                      title: <Link href={`/projects/${projectId}/topologies/${topology.number}`}>{topology.name}</Link>,
-                  },
-                  topology.rooms.length === 1 ? '1 room' : `${topology.rooms.length} rooms`,
-                  parseAndFormatDateTime(topology.updatedAt),
-              ])
-            : [
-                  {
-                      heightAuto: true,
-                      cells: [
-                          {
-                              props: { colSpan: 3 },
-                              title: (
-                                  <TableEmptyState
-                                      status={status}
-                                      loadingTitle="Loading topologies"
-                                      emptyTitle="No topologies"
-                                      emptyText="You have not created any topology for this project yet. Click the New Topology button to create one."
-                                  />
-                              ),
-                          },
-                      ],
-                  },
-              ]
-
-    const actionResolver = (_, { rowIndex }) => [
+    const actions = ({ number }) => [
         {
             title: 'Delete Topology',
-            onClick: (_, rowId) => deleteTopology({ projectId, number: topologies[rowId].number }),
-            isDisabled: rowIndex === 0,
+            onClick: () => deleteTopology({ projectId, number }),
+            isDisabled: number === 0,
         },
     ]
 
     return (
-        <Table
-            aria-label="Topology List"
-            variant="compact"
-            cells={columns}
-            rows={rows}
-            actionResolver={topologies.length > 0 ? actionResolver : () => []}
-        >
-            <TableHeader />
-            <TableBody />
-        </Table>
+        <TableComposable aria-label="Topology List" variant="compact">
+            <Thead>
+                <Tr>
+                    <Th>Name</Th>
+                    <Th>Rooms</Th>
+                    <Th>Last Edited</Th>
+                </Tr>
+            </Thead>
+            <Tbody>
+                {topologies.map((topology) => (
+                    <Tr key={topology.id}>
+                        <Td dataLabel="Name">
+                            <Link href={`/projects/${projectId}/topologies/${topology.number}`}>{topology.name}</Link>
+                        </Td>
+                        <Td dataLabel="Rooms">
+                            {topology.rooms.length === 1 ? '1 room' : `${topology.rooms.length} rooms`}
+                        </Td>
+                        <Td dataLabel="Last Edited">{parseAndFormatDateTime(topology.updatedAt)}</Td>
+                        <Td isActionCell>
+                            <ActionsColumn items={actions(topology)} />
+                        </Td>
+                    </Tr>
+                ))}
+                {topologies.length === 0 && (
+                    <Tr>
+                        <Td colSpan={3}>
+                            <Bullseye>
+                                <TableEmptyState
+                                    status={status}
+                                    loadingTitle="Loading topologies"
+                                    emptyTitle="No topologies"
+                                    emptyText="You have not created any topology for this project yet. Click the New Topology button to create one."
+                                />
+                            </Bullseye>
+                        </Td>
+                    </Tr>
+                )}
+            </Tbody>
+        </TableComposable>
     )
 }