bug(web): Inform user when deleted topology is still used

This change fixes #135 which showed that trying to delete a topology
used by a scenario would result in nothing happening in the UI and a 500
error being returned by the server. We check whether a scenario still
references the topology and show an error to the user if that happens.

Fixes #135

1 files changed, 64 insertions, 40 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 62deace0..1c2c4f04 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/TopologyTable.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/TopologyTable.js
@@ -20,18 +20,22 @@
  * SOFTWARE.
  */
 
-import { Bullseye } from '@patternfly/react-core'
+import { Bullseye, AlertGroup, Alert, AlertVariant, AlertActionCloseButton } from '@patternfly/react-core'
 import PropTypes from 'prop-types'
 import Link from 'next/link'
 import { Tr, Th, Thead, Td, ActionsColumn, Tbody, TableComposable } from '@patternfly/react-table'
-import React from 'react'
+import React, { useState } from 'react'
 import TableEmptyState from '../util/TableEmptyState'
 import { parseAndFormatDateTime } from '../../util/date-time'
 import { useTopologies, useDeleteTopology } from '../../data/topology'
 
 function TopologyTable({ projectId }) {
+    const [error, setError] = useState('')
+
     const { status, data: topologies = [] } = useTopologies(projectId)
-    const { mutate: deleteTopology } = useDeleteTopology()
+    const { mutate: deleteTopology } = useDeleteTopology({
+        onError: (error) => setError(error),
+    })
 
     const actions = ({ number }) => [
         {
@@ -42,45 +46,65 @@ function TopologyTable({ projectId }) {
     ]
 
     return (
-        <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 && (
+        <>
+            <AlertGroup isToast>
+                {error && (
+                    <Alert
+                        isLiveRegion
+                        variant={AlertVariant.danger}
+                        title={error}
+                        actionClose={
+                            <AlertActionCloseButton
+                                title={error}
+                                variantLabel="danger alert"
+                                onClose={() => setError(null)}
+                            />
+                        }
+                    />
+                )}
+            </AlertGroup>
+            <TableComposable aria-label="Topology List" variant="compact">
+                <Thead>
                     <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>
+                        <Th>Name</Th>
+                        <Th>Rooms</Th>
+                        <Th>Last Edited</Th>
                     </Tr>
-                )}
-            </Tbody>
-        </TableComposable>
+                </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>
+        </>
     )
 }