From 86bc9e74630374853d11bc1c8f7ba5ffafbaa868 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Tue, 20 Sep 2022 14:28:40 +0200
Subject: 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.
---
 .../src/components/topologies/RoomTable.js         | 98 +++++++++++-----------
 1 file changed, 51 insertions(+), 47 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js')

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>
     )
 }
 
-- 
cgit v1.2.3