feat: Add a notice to the detail page of tombstoned aggregators (#733)

app/src/aggregators/AggregatorDetail.tsx

@@ -6,14 +6,15 @@ import Breadcrumb from "react-bootstrap/Breadcrumb";
 import React, { Suspense } from "react";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
-import { CloudUpload } from "react-bootstrap-icons";
+import { CloudUpload, Trash3Fill } from "react-bootstrap-icons";
 import Table from "react-bootstrap/Table";
 import D from "../logo/color/svg/small.svg";
 import Placeholder from "react-bootstrap/Placeholder";
 import { ButtonGroup } from "react-bootstrap";
 import RotateBearerTokenButton from "./RotateBearerTokenButton";
 import RenameAggregatorButton from "./RenameAggregatorButton";
 import DeleteAggregatorButton from "./DeleteAggregatorButton";
+import Alert from "react-bootstrap/Alert";
 
 function Breadcrumbs() {
   const { aggregator } = useLoaderData() as {
@@ -35,41 +36,61 @@ function Breadcrumbs() {
   );
 }
 
-export default function AggregatorDetail() {
-  const { aggregator } = useLoaderData() as {
-    aggregator: Promise<Aggregator>;
-  };
+function AggregatorTitle(): React.ReactNode {
+  return (
+    <h1>
+      <WithAggregator
+        fallback={
+          <>
+            <CloudUpload /> <Placeholder animation="glow" xs={6} />
+          </>
+        }
+      >
+        {({ is_first_party, name }) => (
+          <>
+            {is_first_party ? (
+              <img src={D} style={{ height: "1em", marginTop: "-0.2em" }} />
+            ) : (
+              <CloudUpload />
+            )}{" "}
+            {name}
+          </>
+        )}
+      </WithAggregator>
+    </h1>
+  );
+}
+
+function DeletedAggregatorMessage() {
+  return (
+    <WithAggregator>
+      {({ deleted_at }) =>
+        deleted_at ? (
+          <Alert variant="warning">
+            <h3>
+              {" "}
+              <Trash3Fill /> This aggregator has been deleted.
+            </h3>
+            <p>
+              You will continue to be able to view it, but new tasks cannot be
+              provisioned against it.
+            </p>
+          </Alert>
+        ) : (
+          <></>
+        )
+      }
+    </WithAggregator>
+  );
+}
 
+export default function AggregatorDetail() {
   return (
     <>
       <Breadcrumbs />
       <Row>
         <Col>
-          <h1>
-            <Suspense
-              fallback={
-                <>
-                  <CloudUpload /> <Placeholder animation="glow" xs={6} />
-                </>
-              }
-            >
-              <Await resolve={aggregator}>
-                {(aggregator) => (
-                  <>
-                    {aggregator.is_first_party ? (
-                      <img
-                        src={D}
-                        style={{ height: "1em", marginTop: "-0.2em" }}
-                      />
-                    ) : (
-                      <CloudUpload />
-                    )}{" "}
-                    {aggregator.name}
-                  </>
-                )}
-              </Await>
-            </Suspense>
-          </h1>
+          <AggregatorTitle />
         </Col>
       </Row>
 
@@ -91,6 +112,7 @@ export default function AggregatorDetail() {
           </WithAggregator>
         </Col>
       </Row>
+      <DeletedAggregatorMessage />
     </>
   );
 }
@@ -154,15 +176,17 @@ function TableRow({
 
 export function WithAggregator({
   children,
+  fallback,
 }: {
   children: (data: Awaited<Aggregator>) => React.ReactNode;
+  fallback?: React.ReactNode;
 }) {
   const { aggregator } = useLoaderData() as {
     aggregator: Promise<Aggregator>;
   };
 
   return (
-    <Suspense fallback={<Placeholder animation="glow" xs={6} />}>
+    <Suspense fallback={fallback || <Placeholder animation="glow" xs={6} />}>
       <Await resolve={aggregator}>{children}</Await>
     </Suspense>
   );