Add api permissions

plugin/src/App/Components/ScrollingFrame.lua

@@ -25,6 +25,7 @@ local function ScrollingFrame(props)
 			ElasticBehavior = Enum.ElasticBehavior.Always,
 			ScrollingDirection = Enum.ScrollingDirection.Y,
 
+			LayoutOrder = props.layoutOrder,
 			Size = props.size,
 			Position = props.position,
 			AnchorPoint = props.anchorPoint,

plugin/src/App/Components/Toggle.lua

@@ -0,0 +1,134 @@
+local TextService = game:GetService("TextService")
+
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local Theme = require(Plugin.App.Theme)
+
+local Checkbox = require(Plugin.App.Components.Checkbox)
+
+local e = Roact.createElement
+
+local DIVIDER_FADE_SIZE = 0.1
+
+local function getTextBounds(text, textSize, font, lineHeight, bounds)
+	local textBounds = TextService:GetTextSize(text, textSize, font, bounds)
+
+	local lineCount = textBounds.Y / textSize
+	local lineHeightAbsolute = textSize * lineHeight
+
+	return Vector2.new(textBounds.X, lineHeightAbsolute * lineCount - (lineHeightAbsolute - textSize))
+end
+
+local Toggle = Roact.Component:extend("Toggle")
+
+function Toggle:init()
+	self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0))
+	self.containerSize, self.setContainerSize = Roact.createBinding(Vector2.new(0, 0))
+end
+
+function Toggle:render()
+	return Theme.with(function(theme)
+		theme = theme.Settings
+
+		return e("Frame", {
+			Size = self.contentSize:map(function(value)
+				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,
+		}, {
+			Input = e(Checkbox, {
+				active = self.props.active,
+				transparency = self.props.transparency,
+				position = UDim2.new(1, 0, 0.5, 0),
+				anchorPoint = Vector2.new(1, 0.5),
+				onClick = self.props.onClick,
+			}),
+
+			Text = e("Frame", {
+				Size = UDim2.new(1, 0, 1, 0),
+				BackgroundTransparency = 1,
+			}, {
+				Name = e("TextLabel", {
+					Text = self.props.name,
+					Font = Enum.Font.GothamBold,
+					TextSize = 17,
+					TextColor3 = theme.Setting.NameColor,
+					TextXAlignment = Enum.TextXAlignment.Left,
+					TextTransparency = self.props.transparency,
+
+					Size = UDim2.new(1, 0, 0, 17),
+
+					LayoutOrder = 1,
+					BackgroundTransparency = 1,
+				}),
+
+				Description = e("TextLabel", {
+					Text = self.props.description,
+					Font = Enum.Font.Gotham,
+					LineHeight = 1.2,
+					TextSize = 14,
+					TextColor3 = theme.Setting.DescriptionColor,
+					TextXAlignment = Enum.TextXAlignment.Left,
+					TextTransparency = self.props.transparency,
+					TextWrapped = true,
+
+					Size = self.containerSize:map(function(value)
+						local offset = self.props.options ~= nil and 120 or 40
+						local textBounds = getTextBounds(
+							self.props.description, 14, Enum.Font.Gotham, 1.2,
+							Vector2.new(value.X - offset, math.huge)
+						)
+						return UDim2.new(1, -offset, 0, textBounds.Y)
+					end),
+
+					LayoutOrder = 2,
+					BackgroundTransparency = 1,
+				}),
+
+				Layout = e("UIListLayout", {
+					VerticalAlignment = Enum.VerticalAlignment.Center,
+					FillDirection = Enum.FillDirection.Vertical,
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					Padding = UDim.new(0, 6),
+
+					[Roact.Change.AbsoluteContentSize] = function(object)
+						self.setContentSize(object.AbsoluteContentSize)
+					end,
+				}),
+
+				Padding = e("UIPadding", {
+					PaddingTop = UDim.new(0, 20),
+					PaddingBottom = UDim.new(0, 20),
+				}),
+			}),
+
+			Divider = e("Frame", {
+				BackgroundColor3 = theme.DividerColor,
+				BackgroundTransparency = self.props.transparency,
+				Size = UDim2.new(1, 0, 0, 1),
+				BorderSizePixel = 0,
+			}, {
+				Gradient = e("UIGradient", {
+					Transparency = NumberSequence.new({
+						NumberSequenceKeypoint.new(0, 1),
+						NumberSequenceKeypoint.new(DIVIDER_FADE_SIZE, 0),
+						NumberSequenceKeypoint.new(1 - DIVIDER_FADE_SIZE, 0),
+						NumberSequenceKeypoint.new(1, 1),
+					}),
+				}),
+			}),
+		})
+	end)
+end
+
+return Toggle

plugin/src/App/PermissionPopup.lua

@@ -0,0 +1,125 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+
+local Theme = require(Plugin.App.Theme)
+
+local Toggle = require(Plugin.App.Components.Toggle)
+local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
+local TextButton = require(Plugin.App.Components.TextButton)
+
+local e = Roact.createElement
+
+local PermissionPopup = Roact.Component:extend("PermissionPopup")
+
+function PermissionPopup:init()
+	self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0))
+	self.infoSize, self.setInfoSize = Roact.createBinding(Vector2.new(0, 0))
+
+	local response = {}
+	for _, api in self.props.apis do
+		response[api] = if self.props.initialState[api] == nil then true else self.props.initialState[api]
+	end
+
+	self:setState({
+		response = response,
+	})
+end
+
+function PermissionPopup:render()
+	return Theme.with(function(theme)
+		theme = theme.Settings
+
+		local apiToggles = {}
+		for index, api in self.props.apis do
+			apiToggles[api] = e(Toggle, {
+				active = self.state.response[api],
+				name = api,
+				description = self.props.apiDescriptions[api],
+				transparency = self.props.transparency,
+				layoutOrder = index,
+				onClick = function()
+					self:setState(function(state)
+						state.response[api] = not state.response[api]
+						return state
+					end)
+				end,
+			})
+		end
+
+		return e("Frame", {
+			BackgroundTransparency = 1,
+			Size = UDim2.new(1, 0, 1, 0),
+		}, {
+			Layout = e("UIListLayout", {
+				FillDirection = Enum.FillDirection.Vertical,
+				SortOrder = Enum.SortOrder.LayoutOrder,
+				Padding = UDim.new(0, 5),
+				HorizontalAlignment = Enum.HorizontalAlignment.Right,
+			}),
+
+			Padding = e("UIPadding", {
+				PaddingLeft = UDim.new(0, 20),
+				PaddingRight = UDim.new(0, 20),
+				PaddingTop = UDim.new(0, 15),
+				PaddingBottom = UDim.new(0, 15),
+			}),
+
+			Info = e("TextLabel", {
+				BackgroundTransparency = 1,
+				Size = UDim2.new(1, 0, 0, 0),
+				AutomaticSize = Enum.AutomaticSize.Y,
+				Text = string.format("A third-party plugin, %s, is asking to use the following parts of the Rojo API. Please grant/deny access.", self.props.name or "[Unknown]"),
+				Font = Enum.Font.GothamMedium,
+				TextSize = 17,
+				TextColor3 = theme.Setting.NameColor,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextWrapped = true,
+				TextTransparency = self.props.transparency,
+				LayoutOrder = 1,
+
+				[Roact.Change.AbsoluteSize] = function(rbx)
+					self.setInfoSize(rbx.AbsoluteSize)
+				end,
+			}),
+
+			Submit = e(TextButton, {
+				text = "Submit",
+				style = "Solid",
+				transparency = self.props.transparency,
+				layoutOrder = 3,
+				onClick = function()
+					self.props.responseEvent:Fire(self.state.response)
+				end,
+			}),
+
+			ScrollingFrame = e(ScrollingFrame, {
+				size = self.infoSize:map(function(infoSize)
+					return UDim2.new(1, 0, 1, -infoSize.Y-44)
+				end),
+				layoutOrder = 2,
+				contentSize = self.contentSize,
+				transparency = self.props.transparency,
+			}, {
+				APIToggles = Roact.createFragment(apiToggles),
+
+				Padding = e("UIPadding", {
+					PaddingRight = UDim.new(0, 15),
+				}),
+
+				Layout = e("UIListLayout", {
+					FillDirection = Enum.FillDirection.Vertical,
+					SortOrder = Enum.SortOrder.LayoutOrder,
+
+					[Roact.Change.AbsoluteContentSize] = function(object)
+						self.setContentSize(object.AbsoluteContentSize)
+					end,
+				}),
+			}),
+		})
+	end)
+end
+
+return PermissionPopup

plugin/src/App/init.lua

@@ -23,6 +23,7 @@ local Theme = require(script.Theme)
 
 local Page = require(script.Page)
 local Notifications = require(script.Notifications)
+local PermissionPopup = require(script.PermissionPopup)
 local StudioPluginAction = require(script.Components.Studio.StudioPluginAction)
 local StudioToolbar = require(script.Components.Studio.StudioToolbar)
 local StudioToggleButton = require(script.Components.Studio.StudioToggleButton)
@@ -64,6 +65,7 @@ function App:init()
 		guiEnabled = false,
 		notifications = {},
 		toolbarIcon = Assets.Images.PluginButton,
+		popups = {},
 	})
 end
 
@@ -204,6 +206,39 @@ function App:releaseSyncLock()
 	Log.trace("Could not relase sync lock because it is owned by {}", lock.Value)
 end
 
+function App:requestPermission(source: string, name: string, apis: {string}, initialState: {[string]: boolean?}): {[string]: boolean}
+	local responseEvent = Instance.new("BindableEvent")
+
+	self:setState(function(state)
+		state.popups[source] = {
+			responseEvent = responseEvent,
+			initialState = initialState,
+			name = name,
+			apis = apis,
+			content = e(PermissionPopup, {
+				responseEvent = responseEvent,
+				initialState = initialState,
+				source = source,
+				name = name,
+				apis = apis,
+				apiDescriptions = self.headlessAPI._apiDescriptions,
+				transparency = Roact.createBinding(0),
+			}),
+		}
+		return state
+	end)
+
+	local response = responseEvent.Event:Wait()
+	responseEvent:Destroy()
+
+	self:setState(function(state)
+		state.popups[source] = nil
+		return state
+	end)
+
+	return response
+end
+
 function App:startSession(host: string?, port: string?)
 	local claimedLock, priorOwner = self:claimSyncLock()
 	if not claimedLock then
@@ -364,10 +399,50 @@ function App:render()
 		return e(Page, props)
 	end
 
+	local popups = {}
+	for id, popup in self.state.popups do
+		popups["Rojo_"..id] = e(StudioPluginGui, {
+			id = id,
+			title = popup.name .. " Popup",
+			active = true,
+
+			initDockState = Enum.InitialDockState.Top,
+			initEnabled = true,
+			overridePreviousState = true,
+			floatingSize = Vector2.new(400, 300),
+			minimumSize = Vector2.new(390, 240),
+
+			zIndexBehavior = Enum.ZIndexBehavior.Sibling,
+
+			onClose = function()
+				popup.responseEvent:Fire(popup.initialState)
+				popup.responseEvent:Destroy()
+
+				self:setState(function(state)
+					state[id] = nil
+					return state
+				end)
+			end,
+		}, {
+			Content = popup.content,
+
+			Background = Theme.with(function(theme)
+				return e("Frame", {
+					Size = UDim2.new(1, 0, 1, 0),
+					BackgroundColor3 = theme.BackgroundColor,
+					ZIndex = 0,
+					BorderSizePixel = 0,
+				})
+			end),
+		})
+	end
+
 	return e(StudioPluginContext.Provider, {
 		value = self.props.plugin,
 	}, {
 		e(Theme.StudioProvider, nil, {
+			popups = Roact.createFragment(popups),
+
 			gui = e(StudioPluginGui, {
 				id = pluginName,
 				title = pluginName,