Rework patch visualizer with many fixes and improvements (#726)

- Reconciler now has precommit and postcommit hooks for patch applying
  - This is used to compute a patch tree snapshot precommit and update the
tree metadata postcommit
- PatchVisualizer can now display Removes that happened during sync
  - It was previously missing because the removed objects no longer
existed so it couldn't get any info on them (This is resolved because
the info is gotten in precommit, before the instance was removed)
- PatchVisualizer now shows Old and New values instead of just Incoming
during sync
  - (Still displays Current and Incoming during confirmation)
  - This is much more useful, since you now see what the changes were and
not just which things were changed
- PatchVisualizer displays clarifying message when initial sync has no
changes instead of just showing a blank box
- Objects in the tree UI no longer get stuck expanded when the next
patch has the same instance but different info on it
- Objects in the tree UI correctly become selectable after their
instance is added and unclickable when removed during sync

CHANGELOG.md

@@ -15,6 +15,7 @@
 * Add buttons for navigation on the Connected page ([#722])
 * Improve tooltip behavior ([#723])
 * Better settings controls ([#725])
+* Rework patch visualizer with many fixes and improvements ([#726])
 
 [#668]: https://github.com/rojo-rbx/rojo/pull/668
 [#674]: https://github.com/rojo-rbx/rojo/pull/674
@@ -30,6 +31,7 @@
 [#722]: https://github.com/rojo-rbx/rojo/pull/722
 [#723]: https://github.com/rojo-rbx/rojo/pull/723
 [#725]: https://github.com/rojo-rbx/rojo/pull/725
+[#726]: https://github.com/rojo-rbx/rojo/pull/726
 
 ## [7.3.0] - April 22, 2023
 * Added `$attributes` to project format. ([#574])

plugin/src/App/Components/PatchVisualizer/ChangeList.lua

@@ -8,6 +8,8 @@ local Theme = require(Plugin.App.Theme)
 local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
 local DisplayValue = require(script.Parent.DisplayValue)
 
+local EMPTY_TABLE = {}
+
 local e = Roact.createElement
 
 local ChangeList = Roact.Component:extend("ChangeList")
@@ -20,7 +22,6 @@ function ChangeList:render()
 	return Theme.with(function(theme)
 		local props = self.props
 		local changes = props.changes
-		local columnVisibility = props.columnVisibility
 
 		-- Color alternating rows for readability
 		local rowTransparency = props.transparency:map(function(t)
@@ -47,7 +48,6 @@ function ChangeList:render()
 				VerticalAlignment = Enum.VerticalAlignment.Center,
 			}),
 			A = e("TextLabel", {
-				Visible = columnVisibility[1],
 				Text = tostring(changes[1][1]),
 				BackgroundTransparency = 1,
 				Font = Enum.Font.GothamBold,
@@ -60,7 +60,6 @@ function ChangeList:render()
 				LayoutOrder = 1,
 			}),
 			B = e("TextLabel", {
-				Visible = columnVisibility[2],
 				Text = tostring(changes[1][2]),
 				BackgroundTransparency = 1,
 				Font = Enum.Font.GothamBold,
@@ -73,7 +72,6 @@ function ChangeList:render()
 				LayoutOrder = 2,
 			}),
 			C = e("TextLabel", {
-				Visible = columnVisibility[3],
 				Text = tostring(changes[1][3]),
 				BackgroundTransparency = 1,
 				Font = Enum.Font.GothamBold,
@@ -92,7 +90,7 @@ function ChangeList:render()
 				continue -- Skip headers, already handled above
 			end
 
-			local metadata = values[4]
+			local metadata = values[4] or EMPTY_TABLE
 			local isWarning = metadata.isWarning
 
 			rows[row] = e("Frame", {
@@ -110,7 +108,6 @@ function ChangeList:render()
 					VerticalAlignment = Enum.VerticalAlignment.Center,
 				}),
 				A = e("TextLabel", {
-					Visible = columnVisibility[1],
 					Text = (if isWarning then "⚠ " else "") .. tostring(values[1]),
 					BackgroundTransparency = 1,
 					Font = Enum.Font.GothamMedium,
@@ -125,7 +122,6 @@ function ChangeList:render()
 				B = e(
 					"Frame",
 					{
-						Visible = columnVisibility[2],
 						BackgroundTransparency = 1,
 						Size = UDim2.new(0.35, 0, 1, 0),
 						LayoutOrder = 2,
@@ -139,7 +135,6 @@ function ChangeList:render()
 				C = e(
 					"Frame",
 					{
-						Visible = columnVisibility[3],
 						BackgroundTransparency = 1,
 						Size = UDim2.new(0.35, 0, 1, 0),
 						LayoutOrder = 3,

plugin/src/App/Components/PatchVisualizer/DomLabel.lua

@@ -34,7 +34,6 @@ function Expansion:render()
 		ChangeList = e(ChangeList, {
 			changes = props.changeList,
 			transparency = props.transparency,
-			columnVisibility = props.columnVisibility,
 		}),
 	})
 end
@@ -71,6 +70,22 @@ function DomLabel:init()
 	end)
 end
 
+function DomLabel:didUpdate(prevProps)
+	if
+		prevProps.instance ~= self.props.instance
+		or prevProps.patchType ~= self.props.patchType
+		or prevProps.name ~= self.props.name
+		or prevProps.changeList ~= self.props.changeList
+	then
+		-- Close the expansion when the domlabel is changed to a different thing
+		self.expanded = false
+		self.motor:setGoal(Flipper.Spring.new(30, {
+			frequency = 5,
+			dampingRatio = 1,
+		}))
+	end
+end
+
 function DomLabel:render()
 	local props = self.props
 
@@ -130,7 +145,7 @@ function DomLabel:render()
 						if props.changeList then
 							self.expanded = not self.expanded
 							local goalHeight = 30
-								+ (if self.expanded then math.clamp(#self.props.changeList * 30, 30, 30 * 6) else 0)
+								+ (if self.expanded then math.clamp(#props.changeList * 30, 30, 30 * 6) else 0)
 							self.motor:setGoal(Flipper.Spring.new(goalHeight, {
 								frequency = 5,
 								dampingRatio = 1,
@@ -155,7 +170,6 @@ function DomLabel:render()
 					indent = indent,
 					transparency = props.transparency,
 					changeList = props.changeList,
-					columnVisibility = props.columnVisibility,
 				})
 				else nil,
 			DiffIcon = if props.patchType