plugin: Add dummy settings panel

plugin/src/Components/App.lua

@@ -13,11 +13,12 @@ local Version = require(Plugin.Version)
 local preloadAssets = require(Plugin.preloadAssets)
 local strict = require(Plugin.strict)
 
-local Theme = require(Plugin.Components.Theme)
 local ConnectPanel = require(Plugin.Components.ConnectPanel)
 local ConnectingPanel = require(Plugin.Components.ConnectingPanel)
 local ConnectionActivePanel = require(Plugin.Components.ConnectionActivePanel)
 local ErrorPanel = require(Plugin.Components.ErrorPanel)
+local SettingsPanel = require(Plugin.Components.SettingsPanel)
+local Theme = require(Plugin.Components.Theme)
 
 local e = Roact.createElement
 
@@ -62,6 +63,7 @@ local AppStatus = strict("AppStatus", {
 	Connecting = "Connecting",
 	Connected = "Connected",
 	Error = "Error",
+	Settings = "Settings",
 })
 
 local App = Roact.Component:extend("App")
@@ -155,6 +157,11 @@ function App:render()
 				startSession = function(address, port)
 					self:startSession(address, port)
 				end,
+				openSettings = function()
+					self:setState({
+						appStatus = AppStatus.Settings,
+					})
+				end,
 				cancel = function()
 					Log.trace("Canceling session configuration")
 
@@ -166,7 +173,7 @@ function App:render()
 		}
 	elseif self.state.appStatus == AppStatus.Connecting then
 		children = {
-			ConnectingPanel = Roact.createElement(ConnectingPanel),
+			ConnectingPanel = e(ConnectingPanel),
 		}
 	elseif self.state.appStatus == AppStatus.Connected then
 		children = {
@@ -184,9 +191,19 @@ function App:render()
 				end,
 			}),
 		}
+	elseif self.state.appStatus == AppStatus.Settings then
+		children = {
+			e(SettingsPanel, {
+				back = function()
+					self:setState({
+						appStatus = AppStatus.NotStarted,
+					})
+				end,
+			}),
+		}
 	elseif self.state.appStatus == AppStatus.Error then
 		children = {
-			ErrorPanel = Roact.createElement(ErrorPanel, {
+			ErrorPanel = e(ErrorPanel, {
 				errorMessage = self.state.errorMessage,
 				onDismiss = function()
 					self:setState({
@@ -197,8 +214,8 @@ function App:render()
 		}
 	end
 
-	return Roact.createElement(Theme.StudioProvider, nil, {
+	return e(Theme.StudioProvider, nil, {
-		UI = Roact.createElement(Roact.Portal, {
+		UI = e(Roact.Portal, {
 			target = self.dockWidget,
 		}, children),
 	})

plugin/src/Components/ConnectPanel.lua

@@ -25,6 +25,7 @@ end
 
 function ConnectPanel:render()
 	local startSession = self.props.startSession
+	local openSettings = self.props.openSettings
 
 	return Theme.with(function(theme)
 		return e(Panel, nil, {
@@ -136,6 +137,17 @@ function ConnectPanel:render()
 					PaddingRight = UDim.new(0, 24),
 				},
 			}, {
+				e(FormButton, {
+					layoutOrder = 1,
+					text = "Settings",
+					secondary = true,
+					onClick = function()
+						if openSettings ~= nil then
+							openSettings()
+						end
+					end,
+				}),
+
 				e(FormButton, {
 					layoutOrder = 2,
 					text = "Connect",

plugin/src/Components/SettingsPanel.lua

@@ -0,0 +1,47 @@
+local Roact = require(script:FindFirstAncestor("Rojo").Roact)
+
+local Plugin = script:FindFirstAncestor("Plugin")
+
+local Theme = require(Plugin.Components.Theme)
+local Panel = require(Plugin.Components.Panel)
+local FitText = require(Plugin.Components.FitText)
+local FormButton = require(Plugin.Components.FormButton)
+
+local e = Roact.createElement
+
+local SettingsPanel = Roact.Component:extend("SettingsPanel")
+
+function SettingsPanel:render()
+	local back = self.props.back
+
+	return Theme.with(function(theme)
+		return e(Panel, nil, {
+			Layout = Roact.createElement("UIListLayout", {
+				HorizontalAlignment = Enum.HorizontalAlignment.Center,
+				VerticalAlignment = Enum.VerticalAlignment.Center,
+				SortOrder = Enum.SortOrder.LayoutOrder,
+				Padding = UDim.new(0, 8),
+			}),
+
+			Text = e(FitText, {
+				Padding = Vector2.new(12, 6),
+				Font = theme.ButtonFont,
+				TextSize = 18,
+				Text = "This will be a settings panel.",
+				TextColor3 = theme.Text1,
+				BackgroundTransparency = 1,
+			}),
+
+			DisconnectButton = e(FormButton, {
+				layoutOrder = 2,
+				text = "Okay",
+				secondary = true,
+				onClick = function()
+					back()
+				end,
+			}),
+		})
+	end)
+end
+
+return SettingsPanel