PluginActions for connecting/disconnecting a session (#537)

* Create plugin action component

* Add plugin action for session start/end

* Add output for connection status change

* Move host & port refs to App level so keybind can access them

* Use passed function directly

* Improve the action text clarity

* Add actions for single action

* Add to changelog

* Explicitly return nil

Co-authored-by: Lucien Greathouse <me@lpghatguy.com>

* Change log level to info

* Refactor startSession to contain the logic

* Formatting

Co-authored-by: Lucien Greathouse <me@lpghatguy.com>

plugin/src/App/init.lua

@@ -16,6 +16,7 @@ local Theme = require(script.Theme)
 local PluginSettings = require(script.PluginSettings)
 
 local Page = require(script.Page)
+local StudioPluginAction = require(script.Components.Studio.StudioPluginAction)
 local StudioToolbar = require(script.Components.Studio.StudioToolbar)
 local StudioToggleButton = require(script.Components.Studio.StudioToggleButton)
 local StudioPluginGui = require(script.Components.Studio.StudioPluginGui)
@@ -37,6 +38,9 @@ local App = Roact.Component:extend("App")
 function App:init()
 	preloadAssets()
 
+	self.hostRef = Roact.createRef()
+	self.portRef = Roact.createRef()
+
 	self:setState({
 		appStatus = AppStatus.NotConnected,
 		guiEnabled = false,
@@ -44,7 +48,17 @@ function App:init()
 	})
 end
 
-function App:startSession(host, port, sessionOptions)
+function App:startSession()
+	local hostText = self.hostRef.current.Text
+	local portText = self.portRef.current.Text
+
+	local host = if #hostText > 0 then hostText else Config.defaultHost
+	local port = if #portText > 0 then portText else Config.defaultPort
+	local sessionOptions = {
+		openScriptsExternally = self.props.settings:get("openScriptsExternally"),
+		twoWaySync = self.props.settings:get("twoWaySync"),
+	}
+
 	local baseUrl = ("http://%s:%s"):format(host, port)
 	local apiContext = ApiContext.new(baseUrl)
 
@@ -68,6 +82,8 @@ function App:startSession(host, port, sessionOptions)
 				address = address,
 				toolbarIcon = Assets.Images.PluginButtonConnected,
 			})
+
+			Log.info("Connected to session '{}' at {}", details, address)
 		elseif status == ServeSession.Status.Disconnected then
 			self.serveSession = nil
 
@@ -86,6 +102,8 @@ function App:startSession(host, port, sessionOptions)
 					appStatus = AppStatus.NotConnected,
 					toolbarIcon = Assets.Images.PluginButton,
 				})
+
+				Log.info("Disconnected session")
 			end
 		end
 	end)
@@ -95,6 +113,22 @@ function App:startSession(host, port, sessionOptions)
 	self.serveSession = serveSession
 end
 
+function App:endSession()
+	if self.serveSession == nil then
+		return
+	end
+
+	Log.trace("Disconnecting session")
+
+	self.serveSession:stop()
+	self.serveSession = nil
+	self:setState({
+		appStatus = AppStatus.NotConnected,
+	})
+
+	Log.trace("Session terminated by user")
+end
+
 function App:render()
 	local pluginName = "Rojo " .. Version.display(Config.version)
 
@@ -141,22 +175,20 @@ function App:render()
 						})
 					end,
 				}, {
-					NotConnectedPage = PluginSettings.with(function(settings)
-						return createPageElement(AppStatus.NotConnected, {
-							onConnect = function(host, port)
-								self:startSession(host, port, {
-									openScriptsExternally = settings:get("openScriptsExternally"),
-									twoWaySync = settings:get("twoWaySync"),
-								})
-							end,
+					NotConnectedPage = createPageElement(AppStatus.NotConnected, {
+						hostRef = self.hostRef,
+						portRef = self.portRef,
 
-							onNavigateSettings = function()
-								self:setState({
-									appStatus = AppStatus.Settings,
-								})
-							end,
-						})
-					end),
+						onConnect = function()
+							self:startSession()
+						end,
+
+						onNavigateSettings = function()
+							self:setState({
+								appStatus = AppStatus.Settings,
+							})
+						end,
+					}),
 
 					Connecting = createPageElement(AppStatus.Connecting),
 
@@ -165,15 +197,7 @@ function App:render()
 						address = self.state.address,
 
 						onDisconnect = function()
-							Log.trace("Disconnecting session")
-
-							self.serveSession:stop()
-							self.serveSession = nil
-							self:setState({
-								appStatus = AppStatus.NotConnected,
-							})
-
-							Log.trace("Session terminated by user")
+							self:endSession()
 						end,
 					}),
 
@@ -206,6 +230,51 @@ function App:render()
 					end),
 				}),
 
+				toggleAction = e(StudioPluginAction, {
+					name = "RojoConnection",
+					title = "Rojo: Connect/Disconnect",
+					description = "Toggles the server for a Rojo sync session",
+					icon = Assets.Images.PluginButton,
+					bindable = true,
+					onTriggered = function()
+						if self.serveSession then
+							self:endSession()
+						else
+							self:startSession()
+						end
+					end,
+				}),
+
+				connectAction = e(StudioPluginAction, {
+					name = "RojoConnect",
+					title = "Rojo: Connect",
+					description = "Connects the server for a Rojo sync session",
+					icon = Assets.Images.PluginButton,
+					bindable = true,
+					onTriggered = function()
+						if self.serveSession then
+							return
+						end
+
+						self:startSession()
+					end,
+				}),
+
+				disconnectAction = e(StudioPluginAction, {
+					name = "RojoDisconnect",
+					title = "Rojo: Disconnect",
+					description = "Disconnects the server for a Rojo sync session",
+					icon = Assets.Images.PluginButton,
+					bindable = true,
+					onTriggered = function()
+						if not self.serveSession then
+							return
+						end
+
+						self:endSession()
+					end,
+				}),
+
 				toolbar = e(StudioToolbar, {
 					name = pluginName,
 				}, {
@@ -229,4 +298,15 @@ function App:render()
 	})
 end
 
-return App
+return function(props)
+	return e(PluginSettings.StudioProvider, {
+		plugin = props.plugin,
+	}, {
+		App = PluginSettings.with(function(settings)
+			local settingsProps = Dictionary.merge(props, {
+				settings = settings,
+			})
+			return e(App, settingsProps)
+		end),
+	})
+end