Show failed to apply in visualizer (#717)

Objects with failed changes will highlight, and the specific failed
changes in their list will highlight as well.

CHANGELOG.md

@@ -11,6 +11,7 @@
 * Fix Rojo breaking when users undo/redo in Studio ([#708])
 * Improved sync info text on Connected page. ([#692])
 * Fix patch visualizer breaking when instances are removed during sync ([#713])
+* Patch visualizer now indicates what changes failed to apply. ([#717])
 
 [#668]: https://github.com/rojo-rbx/rojo/pull/668
 [#674]: https://github.com/rojo-rbx/rojo/pull/674
@@ -22,6 +23,7 @@
 [#708]: https://github.com/rojo-rbx/rojo/pull/708
 [#692]: https://github.com/rojo-rbx/rojo/pull/692
 [#713]: https://github.com/rojo-rbx/rojo/pull/713
+[#717]: https://github.com/rojo-rbx/rojo/pull/717
 
 
 ## [7.3.0] - April 22, 2023

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

@@ -20,14 +20,13 @@ 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)
 			return 0.93 + (0.07 * t)
 		end)
 
-		local columnVisibility = props.columnVisibility
-
 		local rows = {}
 		local pad = {
 			PaddingLeft = UDim.new(0, 5),
@@ -93,6 +92,9 @@ function ChangeList:render()
 				continue -- Skip headers, already handled above
 			end
 
+			local metadata = values[4]
+			local isWarning = metadata.isWarning
+
 			rows[row] = e("Frame", {
 				Size = UDim2.new(1, 0, 0, 30),
 				BackgroundTransparency = row % 2 ~= 0 and rowTransparency or 1,
@@ -109,11 +111,11 @@ function ChangeList:render()
 				}),
 				A = e("TextLabel", {
 					Visible = columnVisibility[1],
-					Text = tostring(values[1]),
+					Text = (if isWarning then "⚠ " else "") .. tostring(values[1]),
 					BackgroundTransparency = 1,
 					Font = Enum.Font.GothamMedium,
 					TextSize = 14,
-					TextColor3 = theme.Settings.Setting.DescriptionColor,
+					TextColor3 = if isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = props.transparency,
 					TextTruncate = Enum.TextTruncate.AtEnd,
@@ -131,6 +133,7 @@ function ChangeList:render()
 					e(DisplayValue, {
 						value = values[2],
 						transparency = props.transparency,
+						textColor = if isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
 					})
 				),
 				C = e(
@@ -144,6 +147,7 @@ function ChangeList:render()
 					e(DisplayValue, {
 						value = values[3],
 						transparency = props.transparency,
+						textColor = if isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
 					})
 				),
 			})

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

@@ -34,7 +34,7 @@ local function DisplayValue(props)
 					BackgroundTransparency = 1,
 					Font = Enum.Font.GothamMedium,
 					TextSize = 14,
-					TextColor3 = theme.Settings.Setting.DescriptionColor,
+					TextColor3 = props.textColor,
 					TextXAlignment = Enum.TextXAlignment.Left,
 					TextTransparency = props.transparency,
 					TextTruncate = Enum.TextTruncate.AtEnd,
@@ -78,7 +78,7 @@ local function DisplayValue(props)
 				BackgroundTransparency = 1,
 				Font = Enum.Font.GothamMedium,
 				TextSize = 14,
-				TextColor3 = theme.Settings.Setting.DescriptionColor,
+				TextColor3 = props.textColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
 				TextTruncate = Enum.TextTruncate.AtEnd,
@@ -95,7 +95,7 @@ local function DisplayValue(props)
 			BackgroundTransparency = 1,
 			Font = Enum.Font.GothamMedium,
 			TextSize = 14,
-			TextColor3 = theme.Settings.Setting.DescriptionColor,
+			TextColor3 = props.textColor,
 			TextXAlignment = Enum.TextXAlignment.Left,
 			TextTransparency = props.transparency,
 			TextTruncate = Enum.TextTruncate.AtEnd,

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

@@ -180,7 +180,7 @@ function DomLabel:render()
 				AnchorPoint = Vector2.new(0, 0.5),
 			}),
 			InstanceName = e("TextLabel", {
-				Text = props.name .. (props.hint and string.format(
+				Text = (if props.isWarning then "⚠ " else "") .. props.name .. (props.hint and string.format(
 					'  <font color="#%s">%s</font>',
 					theme.AddressEntry.PlaceholderColor:ToHex(),
 					props.hint
@@ -189,7 +189,7 @@ function DomLabel:render()
 				BackgroundTransparency = 1,
 				Font = Enum.Font.GothamMedium,
 				TextSize = 14,
-				TextColor3 = theme.Settings.Setting.DescriptionColor,
+				TextColor3 = if props.isWarning then theme.Diff.Warning else theme.Settings.Setting.DescriptionColor,
 				TextXAlignment = Enum.TextXAlignment.Left,
 				TextTransparency = props.transparency,
 				TextTruncate = Enum.TextTruncate.AtEnd,

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

@@ -140,6 +140,15 @@ local function Tree()
 	return tree
 end
 
+local function findUnappliedPropsForId(unappliedPatch, id)
+	for _, change in unappliedPatch.updated do
+		if change.id == id then
+			return change.changedProperties or {}
+		end
+	end
+	return {}
+end
+
 local DomLabel = require(script.DomLabel)
 
 local PatchVisualizer = Roact.Component:extend("PatchVisualizer")
@@ -160,7 +169,7 @@ function PatchVisualizer:shouldUpdate(nextProps)
 	return not PatchSet.isEqual(currentPatch, nextPatch)
 end
 
-function PatchVisualizer:buildTree(patch, instanceMap)
+function PatchVisualizer:buildTree(patch, unappliedPatch, instanceMap)
 	local tree = Tree()
 
 	for _, change in patch.updated do
@@ -184,13 +193,15 @@ function PatchVisualizer:buildTree(patch, instanceMap)
 		-- Gather detail text
 		local changeList, hint = nil, nil
 		if next(change.changedProperties) or change.changedName then
+			local unappliedChanges = findUnappliedPropsForId(unappliedPatch, change.id)
+
 			changeList = {}
 
 			local hintBuffer, i = {}, 0
-			local function addProp(prop: string, current: any?, incoming: any?)
+			local function addProp(prop: string, current: any?, incoming: any?, metadata: any?)
 				i += 1
 				hintBuffer[i] = prop
-				changeList[i] = { prop, current, incoming }
+				changeList[i] = { prop, current, incoming, metadata }
 			end
 
 			-- Gather the changes
@@ -206,7 +217,10 @@ function PatchVisualizer:buildTree(patch, instanceMap)
 				addProp(
 					prop,
 					if currentSuccess then currentValue else "[Error]",
-					if incomingSuccess then incomingValue else next(incoming)
+					if incomingSuccess then incomingValue else next(incoming),
+					{
+						isWarning = unappliedChanges[prop] ~= nil
+					}
 				)
 			end
 
@@ -303,6 +317,8 @@ function PatchVisualizer:buildTree(patch, instanceMap)
 		-- Gather detail text
 		local changeList, hint = nil, nil
 		if next(change.Properties) then
+			local unappliedChanges = findUnappliedPropsForId(unappliedPatch, change.Id)
+
 			changeList = {}
 
 			local hintBuffer, i = {}, 0
@@ -312,9 +328,13 @@ function PatchVisualizer:buildTree(patch, instanceMap)
 
 				local success, incomingValue = decodeValue(incoming, instanceMap)
 				if success then
-					table.insert(changeList, { prop, "N/A", incomingValue })
+					table.insert(changeList, { prop, "N/A", incomingValue, {
+						isWarning = unappliedChanges[prop] ~= nil
+					} })
 				else
-					table.insert(changeList, { prop, "N/A", next(incoming) })
+					table.insert(changeList, { prop, "N/A", next(incoming), {
+						isWarning = unappliedChanges[prop] ~= nil
+					} })
 				end
 			end
 
@@ -355,10 +375,11 @@ function PatchVisualizer:buildTree(patch, instanceMap)
 end
 
 function PatchVisualizer:render()
-	local patch = self.props.patch
+	local patch = self.props.patch or PatchSet.newEmpty()
+	local unappliedPatch = self.props.unappliedPatch or PatchSet.newEmpty()
 	local instanceMap = self.props.instanceMap
 
-	local tree = self:buildTree(patch, instanceMap)
+	local tree = self:buildTree(patch, unappliedPatch, instanceMap)
 
 	-- Recusively draw tree
 	local scrollElements, elementHeights = {}, {}
@@ -374,6 +395,7 @@ function PatchVisualizer:render()
 				setElementHeight = setElementHeight,
 				patchType = node.patchType,
 				className = node.className,
+				isWarning = next(findUnappliedPropsForId(unappliedPatch, node.id)) ~= nil,
 				instance = node.instance,
 				name = node.name,
 				hint = node.hint,

plugin/src/App/StatusPages/Connected.lua

@@ -84,6 +84,7 @@ function ChangesDrawer:render()
 
 				columnVisibility = { true, false, true },
 				patch = self.props.patch,
+				unappliedPatch = self.props.unappliedPatch,
 				instanceMap = self.serveSession.__instanceMap,
 			}),
 		})
@@ -342,6 +343,7 @@ function ConnectedPage:render()
 				rendered = self.state.renderChanges,
 				transparency = self.props.transparency,
 				patch = self.props.patchData.patch,
+				unappliedPatch = self.props.patchData.unapplied,
 				serveSession = self.props.serveSession,
 				height = self.changeDrawerHeight,
 				layoutOrder = 4,

plugin/src/App/Theme.lua

@@ -100,6 +100,7 @@ local lightTheme = strict("LightTheme", {
 		Remove = hexColor(0xffbdba),
 		Edit = hexColor(0xbacdff),
 		Row = hexColor(0x000000),
+		Warning = hexColor(0xFF8E3C),
 	},
 	ConnectionDetails = {
 		ProjectNameColor = hexColor(0x00000),
@@ -195,6 +196,7 @@ local darkTheme = strict("DarkTheme", {
 		Remove = hexColor(0x3F2D32),
 		Edit = hexColor(0x193345),
 		Row = hexColor(0xFFFFFF),
+		Warning = hexColor(0xFF8E3C),
 	},
 	ConnectionDetails = {
 		ProjectNameColor = hexColor(0xFFFFFF),