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, 51 insertions, 47 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
index 49e5f095..7f7b4171 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
@@ -1,63 +1,67 @@
-import { Button } from '@patternfly/react-core'
+import { Button, Bullseye } from '@patternfly/react-core'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { useDispatch } from 'react-redux'
 import { useTopology } from '../../data/topology'
-import { Table, TableBody, TableHeader } from '@patternfly/react-table'
+import { Tr, Th, Thead, TableComposable, Td, ActionsColumn, Tbody } from '@patternfly/react-table'
 import { deleteRoom } from '../../redux/actions/topology/room'
 import TableEmptyState from '../util/TableEmptyState'
 
 function RoomTable({ projectId, topologyId, onSelect }) {
     const dispatch = useDispatch()
     const { status, data: topology } = useTopology(projectId, topologyId)
-
     const onDelete = (room) => dispatch(deleteRoom(room.id))
-
-    const columns = ['Name', 'Tiles', 'Racks']
-    const rows =
-        topology?.rooms.length > 0
-            ? topology.rooms.map((room) => {
-                  const tileCount = room.tiles.length
-                  const rackCount = room.tiles.filter((tile) => tile.rack).length
-                  return [
-                      {
-                          title: (
-                              <Button variant="link" isInline onClick={() => onSelect(room)}>
-                                  {room.name}
-                              </Button>
-                          ),
-                      },
-                      tileCount === 1 ? '1 tile' : `${tileCount} tiles`,
-                      rackCount === 1 ? '1 rack' : `${rackCount} racks`,
-                  ]
-              })
-            : [
-                  {
-                      heightAuto: true,
-                      cells: [
-                          {
-                              props: { colSpan: 3 },
-                              title: <TableEmptyState status={status} loadingTitle="Loading Rooms" />,
-                          },
-                      ],
-                  },
-              ]
-
-    const actions =
-        topology?.rooms.length > 0
-            ? [
-                  {
-                      title: 'Delete room',
-                      onClick: (_, rowId) => onDelete(topology.rooms[rowId]),
-                  },
-              ]
-            : []
+    const actions = (room) => [
+        {
+            title: 'Delete room',
+            onClick: () => onDelete(room),
+        },
+    ]
 
     return (
-        <Table aria-label="Room list" variant="compact" cells={columns} rows={rows} actions={actions}>
-            <TableHeader />
-            <TableBody />
-        </Table>
+        <TableComposable aria-label="Room list" variant="compact">
+            <Thead>
+                <Tr>
+                    <Th>Name</Th>
+                    <Th>Tiles</Th>
+                    <Th>Racks</Th>
+                </Tr>
+            </Thead>
+            <Tbody>
+                {topology?.rooms.map((room) => {
+                    const tileCount = room.tiles.length
+                    const rackCount = room.tiles.filter((tile) => tile.rack).length
+                    return (
+                        <Tr key={room.id}>
+                            <Td dataLabel="Name">
+                                <Button variant="link" isInline onClick={() => onSelect(room)}>
+                                    {room.name}
+                                </Button>
+                            </Td>
+                            <Td dataLabel="Tiles">{tileCount === 1 ? '1 tile' : `${tileCount} tiles`}</Td>
+                            <Td dataLabel="Racks">{rackCount === 1 ? '1 rack' : `${rackCount} racks`}</Td>
+                            <Td isActionCell>
+                                <ActionsColumn items={actions(room)} />
+                            </Td>
+                        </Tr>
+                    )
+                })}
+                {topology?.rooms.length === 0 && (
+                    <Tr>
+                        <Td colSpan={4}>
+                            <Bullseye>
+                                <TableEmptyState
+                                    status={status}
+                                    loadingTitle="Loading Rooms"
+                                    emptyTitle="No rooms"
+                                    emptyText="There are currently no rooms in this topology. Open the Floor Plan to create a room"
+                                />
+                            </Bullseye>
+                        </Td>
+                    </Tr>
+                )}
+            </Tbody>
+        </TableComposable>
     )
 }