Migrate DevSettings to PluginSettings for much better config flow (#572)

* Add the devsetting config options into settings

* Create dropdown component and add setting controls

* Static dropdwon width and spin arrow

* Improve dropdown option contrast and border

* Forgot to make the settings page respect the static spacing, oops

* Smaller arrow

* Vert padding

* Reset option for settings

* Hide reset button when on default

* Respect the logLevel setting

* Portal settings out to external typechecking module

* Implement new configs using the new singleton Settings

* Remove DevSettings

* Update test runner to use new settings

* More helpful test failure output

* Support non-plugin environment

* Migrate dropdown to new packages system

* Clean up components a tad

plugin/src/App/StatusPages/Settings/Setting.lua

@@ -7,9 +7,12 @@ local Packages = Rojo.Packages
 local Roact = require(Packages.Roact)
 
 local Settings = require(Plugin.Settings)
+local Assets = require(Plugin.Assets)
 local Theme = require(Plugin.App.Theme)
 
 local Checkbox = require(Plugin.App.Components.Checkbox)
+local Dropdown = require(Plugin.App.Components.Dropdown)
+local IconButton = require(Plugin.App.Components.IconButton)
 
 local e = Roact.createElement
 
@@ -54,22 +57,48 @@ function Setting:render()
 				return UDim2.new(1, 0, 0, 20 + value.Y + 20)
 			end),
 			LayoutOrder = self.props.layoutOrder,
+			ZIndex = -self.props.layoutOrder,
 			BackgroundTransparency = 1,
 
 			[Roact.Change.AbsoluteSize] = function(object)
 				self.setContainerSize(object.AbsoluteSize)
 			end,
 		}, {
-			Checkbox = e(Checkbox, {
-				active = self.state.setting,
+			Input = if self.props.options ~= nil then
+				e(Dropdown, {
+					options = self.props.options,
+					active = self.state.setting,
+					transparency = self.props.transparency,
+					position = UDim2.new(1, 0, 0.5, 0),
+					anchorPoint = Vector2.new(1, 0.5),
+					onClick = function(option)
+						Settings:set(self.props.id, option)
+					end,
+				})
+			else
+				e(Checkbox, {
+					active = self.state.setting,
+					transparency = self.props.transparency,
+					position = UDim2.new(1, 0, 0.5, 0),
+					anchorPoint = Vector2.new(1, 0.5),
+					onClick = function()
+						local currentValue = Settings:get(self.props.id)
+						Settings:set(self.props.id, not currentValue)
+					end,
+				}),
+
+			Reset = if self.props.onReset then e(IconButton, {
+				icon = Assets.Images.Icons.Reset,
+				iconSize = 24,
+				color = theme.BackButtonColor,
 				transparency = self.props.transparency,
-				position = UDim2.new(1, 0, 0.5, 0),
-				anchorPoint = Vector2.new(1, 0.5),
-				onClick = function()
-					local currentValue = Settings:get(self.props.id)
-					Settings:set(self.props.id, not currentValue)
-				end,
-			}),
+				visible = self.props.showReset,
+
+				position = UDim2.new(1, -32 - (self.props.options ~= nil and 120 or 40), 0.5, 0),
+				anchorPoint = Vector2.new(0, 0.5),
+
+				onClick = self.props.onReset,
+			}) else nil,
 
 			Text = e("Frame", {
 				Size = UDim2.new(1, 0, 1, 0),
@@ -100,11 +129,12 @@ function Setting:render()
 					TextWrapped = true,
 
 					Size = self.containerSize:map(function(value)
+						local offset = (self.props.onReset and 34 or 0) + (self.props.options ~= nil and 120 or 40)
 						local textBounds = getTextBounds(
 							self.props.description, 14, Enum.Font.Gotham, 1.2,
-							Vector2.new(value.X - 50, math.huge)
+							Vector2.new(value.X - offset, math.huge)
 						)
-						return UDim2.new(1, -50, 0, textBounds.Y)
+						return UDim2.new(1, -offset, 0, textBounds.Y)
 					end),
 
 					LayoutOrder = 2,

plugin/src/App/StatusPages/Settings/init.lua

@@ -3,8 +3,10 @@ local Plugin = Rojo.Plugin
 local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
+local Log = require(Packages.Log)
 
 local Assets = require(Plugin.Assets)
+local Settings = require(Plugin.Settings)
 local Theme = require(Plugin.App.Theme)
 
 local IconButton = require(Plugin.App.Components.IconButton)
@@ -13,6 +15,16 @@ local Setting = require(script.Setting)
 
 local e = Roact.createElement
 
+local function invertTbl(tbl)
+	local new = {}
+	for key, value in tbl do
+		new[value] = key
+	end
+	return new
+end
+
+local invertedLevels = invertTbl(Log.Level)
+
 local function Navbar(props)
 	return Theme.with(function(theme)
 		theme = theme.Settings.Navbar
@@ -102,6 +114,30 @@ function SettingsPage:render()
 				layoutOrder = 4,
 			}),
 
+			LogLevel = e(Setting, {
+				id = "logLevel",
+				name = "Log Level",
+				description = "Plugin output verbosity level",
+				transparency = self.props.transparency,
+				layoutOrder = 5,
+
+				options = invertedLevels,
+				showReset = Settings:getBinding("logLevel"):map(function(value)
+					return value ~= "Info"
+				end),
+				onReset = function()
+					Settings:set("logLevel", "Info")
+				end,
+			}),
+
+			TypecheckingEnabled = e(Setting, {
+				id = "typecheckingEnabled",
+				name = "Typechecking",
+				description = "Toggle typechecking on the API surface",
+				transparency = self.props.transparency,
+				layoutOrder = 6,
+			}),
+
 			Layout = e("UIListLayout", {
 				FillDirection = Enum.FillDirection.Vertical,
 				SortOrder = Enum.SortOrder.LayoutOrder,