From 9fa28f5a85412bd26ddc7d304600e7507092a794 Mon Sep 17 00:00:00 2001
From: Carlos Quiroz <carlos.quiroz@noirlab.edu>
Date: Fri, 16 Aug 2024 17:49:21 -0400
Subject: [PATCH] Port GroupEditBody

---
 ...roupEditTile.scala => GroupEditBody.scala} | 24 +++++++++++++++----
 .../scala/explore/tabs/ObsGroupTiles.scala    | 20 +++++++++-------
 2 files changed, 30 insertions(+), 14 deletions(-)
 rename explore/src/main/scala/explore/tabs/{GroupEditTile.scala => GroupEditBody.scala} (93%)

diff --git a/explore/src/main/scala/explore/tabs/GroupEditTile.scala b/explore/src/main/scala/explore/tabs/GroupEditBody.scala
similarity index 93%
rename from explore/src/main/scala/explore/tabs/GroupEditTile.scala
rename to explore/src/main/scala/explore/tabs/GroupEditBody.scala
index 43dd32b4d8..c73288ca7e 100644
--- a/explore/src/main/scala/explore/tabs/GroupEditTile.scala
+++ b/explore/src/main/scala/explore/tabs/GroupEditBody.scala
@@ -44,15 +44,15 @@ import monocle.Lens
 
 import scala.scalajs.js
 
-case class GroupEditTile(
+case class GroupEditBody(
   group:             UndoSetter[GroupTree.Group],
   elementsLength:    Int,
   timeEstimateRange: Pot[Option[ProgramTimeRange]],
   readonly:          Boolean
-) extends ReactFnProps(GroupEditTile.component)
+) extends ReactFnProps(GroupEditBody.component)
 
-object GroupEditTile:
-  private type Props = GroupEditTile
+object GroupEditBody:
+  private type Props = GroupEditBody
 
   private enum GroupEditType(val tag: String) derives Enumerated, Eq:
     case And extends GroupEditType("And")
@@ -232,13 +232,21 @@ object GroupEditTile:
         else <.div(ExploreStyles.GroupForm)(nameForm, minRequiredForm, plannedTime)
 
       React.Fragment(
-        // props.renderInTitle(makeTitle(group, props.timeEstimateRange, props.elementsLength)),
         <.div(ExploreStyles.GroupEditTile)(
           selectGroupForm,
           groupTypeSpecificForms
         )
       )
 
+case class GroupEditTitle(
+  group:             UndoSetter[GroupTree.Group],
+  elementsLength:    Int,
+  timeEstimateRange: Pot[Option[ProgramTimeRange]]
+) extends ReactFnProps(GroupEditTitle.component)
+
+object GroupEditTitle:
+  private type Props = GroupEditTitle
+
   private def makeTitle(
     group:             GroupTree.Group,
     timeEstimateRange: Pot[Option[ProgramTimeRange]],
@@ -256,3 +264,9 @@ object GroupEditTile:
       else s"Choose ${group.minimumRequired.getOrElse(1.refined[NonNegative])} of ${elementsLength}"
 
     <.span("(", andOrStr, timeStr, ")")
+
+  val component = ScalaFnComponent
+    .withHooks[Props]
+    .useContext(AppContext.ctx)
+    .render: (props, _) =>
+      makeTitle(props.group.get, props.timeEstimateRange, props.elementsLength)
diff --git a/explore/src/main/scala/explore/tabs/ObsGroupTiles.scala b/explore/src/main/scala/explore/tabs/ObsGroupTiles.scala
index c9f27e2280..603dcda7ac 100644
--- a/explore/src/main/scala/explore/tabs/ObsGroupTiles.scala
+++ b/explore/src/main/scala/explore/tabs/ObsGroupTiles.scala
@@ -72,15 +72,17 @@ object ObsGroupTiles:
             s"${if group.get.isAnd then "AND" else "OR"} Group",
             props.backButton.some,
             tileTitleClass = ExploreStyles.GroupEditTitle
-          )(_ =>
-            GroupEditTile(
-              group,
-              node.get._1.children.length,
-              props.timeEstimateRange,
-              group.get.system
-            )
-              .withKey(props.groupId.toString)
-              .toUnmounted
+          )(
+            _ =>
+              GroupEditBody(
+                group,
+                node.get._1.children.length,
+                props.timeEstimateRange,
+                group.get.system
+              )
+                .withKey(props.groupId.toString)
+                .toUnmounted,
+            (_, _) => GroupEditTitle(group, node.get._1.children.length, props.timeEstimateRange)
           )
 
           val notesTile = Tile(