From c3069b96061c87da40d0658a41f573873e06ca6a Mon Sep 17 00:00:00 2001
From: Matt Yoder <mjyoder@psc.edu>
Date: Wed, 21 Aug 2024 14:35:01 -0400
Subject: [PATCH] feat(resource-group-documentation): add list of documentation
 links

---
 .../api/resource-groups/1/documentation.json  | 12 +++++++++
 src/content.css                               |  7 ++++-
 src/donut-chart.css                           |  2 ++
 src/resource-group-detail.jsx                 |  5 ++++
 src/resource-group-documentation.jsx          | 27 +++++++++++++++++++
 5 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 public/api/resource-groups/1/documentation.json
 create mode 100644 src/resource-group-documentation.jsx

diff --git a/public/api/resource-groups/1/documentation.json b/public/api/resource-groups/1/documentation.json
new file mode 100644
index 0000000..72ea911
--- /dev/null
+++ b/public/api/resource-groups/1/documentation.json
@@ -0,0 +1,12 @@
+{
+  "documentation": [
+    {
+      "name": "Bridges-2 Home Page",
+      "documentationUri": "https://www.psc.edu/resources/bridges-2/"
+    },
+    {
+      "name": "Bridges-2 User Guide",
+      "documentationUri": "https://www.psc.edu/resources/bridges-2/user-guide/"
+    }
+  ]
+}
diff --git a/src/content.css b/src/content.css
index f77affa..e2129ca 100644
--- a/src/content.css
+++ b/src/content.css
@@ -30,11 +30,16 @@ a:hover {
   color: var(--teal-600);
   text-decoration: none;
 }
-p {
+ol,
+p,
+ul {
   font-size: 1.125rem;
   line-height: 1.875rem;
   margin: 0 0 1.25rem;
 }
+li {
+  margin-bottom: 0.5rem;
+}
 .btn {
   background-color: var(--teal-700);
   border: 4px solid var(--teal-700);
diff --git a/src/donut-chart.css b/src/donut-chart.css
index ab23e90..d66d779 100644
--- a/src/donut-chart.css
+++ b/src/donut-chart.css
@@ -25,8 +25,10 @@
   padding: 0;
 }
 .donut-chart .top-items li {
+  align-items: center;
   display: flex;
   flex-direction: row;
+  font-size: 1rem;
   margin-bottom: 5px;
 }
 .donut-chart .symbol {
diff --git a/src/resource-group-detail.jsx b/src/resource-group-detail.jsx
index 2a0a19c..62e2c7f 100644
--- a/src/resource-group-detail.jsx
+++ b/src/resource-group-detail.jsx
@@ -1,5 +1,6 @@
 import ResourceGroupAffinityGroup from "./resource-group-affinity-group";
 import ResourceGroupDescription from "./resource-group-description";
+import ResourceGroupDocumentation from "./resource-group-documentation";
 import ResourceGroupEvents from "./resource-group-events";
 import ResourceGroupProjects from "./resource-group-projects";
 import ResourceGroupQueueMetrics from "./resource-group-queue-metrics";
@@ -39,6 +40,10 @@ export default function ResourceGroupDetail({ baseUri, resourceGroupId }) {
         baseUri={baseUri}
         resourceGroupId={resourceGroupId}
       />
+      <ResourceGroupDocumentation
+        baseUri={baseUri}
+        resourceGroupId={resourceGroupId}
+      />
     </div>
   );
 }
diff --git a/src/resource-group-documentation.jsx b/src/resource-group-documentation.jsx
new file mode 100644
index 0000000..9bd5c7f
--- /dev/null
+++ b/src/resource-group-documentation.jsx
@@ -0,0 +1,27 @@
+import { useJSON } from "./utils";
+
+import Section from "./section";
+
+export default function ResourceGroupDocumentation({
+  baseUri,
+  resourceGroupId,
+}) {
+  const data = useJSON(
+    `${baseUri}/api/resource-groups/${resourceGroupId}/documentation.json`,
+    null
+  );
+
+  if (!data || data.error) return;
+
+  return (
+    <Section title="Documentation" icon="book">
+      <ul>
+        {data.documentation.map(({ name, documentationUri }) => (
+          <li>
+            <a href={documentationUri}>{name}</a>
+          </li>
+        ))}
+      </ul>
+    </Section>
+  );
+}