From af0cefa5b5c80a8b0db74475cc311b72638c2814 Mon Sep 17 00:00:00 2001
From: Matt Yoder <mjyoder@psc.edu>
Date: Tue, 20 Aug 2024 16:44:42 -0400
Subject: [PATCH] refactor(section): use section component in resource group
 children

---
 src/resource-group-events.jsx        | 10 +++------
 src/resource-group-queue-metrics.jsx | 32 +++++++++++++---------------
 src/resource-group-resources.jsx     | 10 +++------
 src/resource-group-software.jsx      | 27 ++++++++++++-----------
 src/section.jsx                      | 23 ++++++++++++++++++++
 5 files changed, 58 insertions(+), 44 deletions(-)
 create mode 100644 src/section.jsx

diff --git a/src/resource-group-events.jsx b/src/resource-group-events.jsx
index 76b16dd..b8c3aa7 100644
--- a/src/resource-group-events.jsx
+++ b/src/resource-group-events.jsx
@@ -1,8 +1,8 @@
 import { useJSON } from "./utils";
 
 import Alert from "./alert";
-import Icon from "./icon";
 import ResourceGroupEvent from "./resource-group-event";
+import Section from "./section";
 
 export default function ResourceGroupEvents({ baseUri, resourceGroupId }) {
   const announcementData = useJSON(
@@ -15,11 +15,7 @@ export default function ResourceGroupEvents({ baseUri, resourceGroupId }) {
   );
   if (!announcementData && !eventData) return;
   return (
-    <>
-      <h2>
-        <Icon name="calendar3" />
-        Announcements and Events
-      </h2>
+    <Section title="Announcements and Events" icon="calendar3">
       {announcementData &&
         announcementData.announcements.map(
           ({ description, announcementUri }) => (
@@ -32,6 +28,6 @@ export default function ResourceGroupEvents({ baseUri, resourceGroupId }) {
           )
         )}
       {eventData && eventData.events.map((event) => ResourceGroupEvent(event))}
-    </>
+    </Section>
   );
 }
diff --git a/src/resource-group-queue-metrics.jsx b/src/resource-group-queue-metrics.jsx
index 3eee503..c9a04c2 100644
--- a/src/resource-group-queue-metrics.jsx
+++ b/src/resource-group-queue-metrics.jsx
@@ -2,8 +2,8 @@ import { useState } from "preact/hooks";
 import { useJSON } from "./utils";
 
 import Grid from "./grid";
-import Icon from "./icon";
 import InfoTip from "./info-tip";
+import Section from "./section";
 
 const formatTime = (value) => {
   const hours = Math.floor(value);
@@ -65,23 +65,21 @@ export default function ResourceGroupQueueMetrics({
     },
   ];
 
+  const headerComponents = [
+    <select value={days} onChange={(e) => setDays(parseInt(e.target.value))}>
+      <option value="30">Last 30 days</option>
+      <option value="90">Last 90 days</option>
+      <option value="365">Last year</option>
+    </select>,
+  ];
+
   return (
-    <>
-      <div class="flex-header">
-        <h2>
-          <Icon name="clock" />
-          Queue Metrics
-        </h2>
-        <select
-          value={days}
-          onChange={(e) => setDays(parseInt(e.target.value))}
-        >
-          <option value="30">Last 30 days</option>
-          <option value="90">Last 90 days</option>
-          <option value="365">Last year</option>
-        </select>
-      </div>
+    <Section
+      title="Queue Metrics"
+      icon="clock"
+      headerComponents={headerComponents}
+    >
       <Grid columns={columns} rows={data.queueMetrics} />
-    </>
+    </Section>
   );
 }
diff --git a/src/resource-group-resources.jsx b/src/resource-group-resources.jsx
index 33c2057..ac50e37 100644
--- a/src/resource-group-resources.jsx
+++ b/src/resource-group-resources.jsx
@@ -3,8 +3,8 @@ import { defaultIcons } from "./icons";
 import { useJSON } from "./utils";
 
 import Accordion from "./accordion";
-import Icon from "./icon";
 import ResourceDetail from "./resource-detail";
+import Section from "./section";
 
 const linkResourceData = ({ resources, resourceTypes }) => {
   const resourceTypesMap = {};
@@ -35,17 +35,13 @@ export default function ResourceGroupResources({ baseUri, resourceGroupId }) {
   return types.resourceTypes.map(({ name, resources }) => {
     if (resources.length)
       return (
-        <>
-          <h2>
-            <Icon name={defaultIcons[name] || "stars"} />
-            {name}
-          </h2>
+        <Section title={name} icon={defaultIcons[name] || "stars"}>
           {resources.map((resource) => (
             <Accordion title={resource.name}>
               <ResourceDetail {...resource} />
             </Accordion>
           ))}
-        </>
+        </Section>
       );
   });
 }
diff --git a/src/resource-group-software.jsx b/src/resource-group-software.jsx
index 660f592..6cee42c 100644
--- a/src/resource-group-software.jsx
+++ b/src/resource-group-software.jsx
@@ -4,8 +4,8 @@ import Fuse from "fuse.js";
 
 import Grid from "./grid";
 import Highlight from "./highlight";
-import Icon from "./icon";
 import Search from "./search";
+import Section from "./section";
 
 export default function ResourceGroupSoftware({ baseUri, resourceGroupId }) {
   const data = useJSON(
@@ -47,19 +47,20 @@ export default function ResourceGroupSoftware({ baseUri, resourceGroupId }) {
     ? fuse.search(searchText).map((result) => result.item)
     : data.software;
 
+  const headerComponents = [
+    <Search
+      placeholder="Search software packages..."
+      setSearchText={setSearchText}
+    />,
+  ];
+
   return (
-    <>
-      <div class="flex-header">
-        <h2>
-          <Icon name="terminal" />
-          Software
-        </h2>
-        <Search
-          placeholder="Search software packages..."
-          setSearchText={setSearchText}
-        />
-      </div>
+    <Section
+      title="Software"
+      icon="terminal"
+      headerComponents={headerComponents}
+    >
       <Grid columns={columns} rows={rows} scrollResetOnUpdate={true} />
-    </>
+    </Section>
   );
 }
diff --git a/src/section.jsx b/src/section.jsx
new file mode 100644
index 0000000..59ee601
--- /dev/null
+++ b/src/section.jsx
@@ -0,0 +1,23 @@
+import Icon from "./icon";
+
+export default function Section({
+  children,
+  headerComponents = null,
+  icon = null,
+  sectionId = null,
+  title,
+}) {
+  const id = sectionId || title.toLowerCase().replace(/[^0-9a-z]+/g, "-");
+  return (
+    <>
+      <div class="flex-header">
+        <h2 id={id}>
+          {icon ? <Icon name={icon} /> : null}
+          {title}
+        </h2>
+        {headerComponents}
+      </div>
+      {children}
+    </>
+  );
+}