refactor(webui): centralize scheduling selection

webui/src/features/scheduling/SchedulingPage.tsx

@@ -19,6 +19,8 @@ import {
   DataGridRowActions,
   DateTimeField,
   ModuleSubnav,
+  SelectionList,
+  SelectionListItem,
   TableActionGroup,
   ToggleSwitch,
   hasScope,
@@ -810,16 +812,20 @@ function RequestGroup({
   return (
     <Card title={title}>
       <div className="scheduling-list-group">
-        {requests.length ? requests.map((request) => (
-          <button
-            key={request.id}
-            className={`scheduling-list-item ${selectedId === request.id ? "is-selected" : ""}`}
-            type="button"
-            onClick={() => onSelect(request.id)}>
-            <span><strong>{request.title}</strong><small>{formatRelevantDate(request)}</small></span>
-            <small className="scheduling-list-status">{requestStatusLabel(request, actor)}</small>
-          </button>
-        )) : <p className="scheduling-list-empty">{I18N.noRequestsInGroup}</p>}
+        {requests.length ? (
+          <SelectionList label={title} className="scheduling-request-list">
+            {requests.map((request) => (
+              <SelectionListItem
+                key={request.id}
+                selected={selectedId === request.id}
+                className="scheduling-list-item"
+                onClick={() => onSelect(request.id)}>
+                <span><strong>{request.title}</strong><small>{formatRelevantDate(request)}</small></span>
+                <small className="scheduling-list-status">{requestStatusLabel(request, actor)}</small>
+              </SelectionListItem>
+            ))}
+          </SelectionList>
+        ) : <p className="scheduling-list-empty">{I18N.noRequestsInGroup}</p>}
       </div>
     </Card>
   );