Add permissions page

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

@@ -0,0 +1,95 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+local Packages = Rojo.Packages
+
+local Roact = require(Packages.Roact)
+local Log = require(Packages.Log)
+
+local Assets = require(Plugin.Assets)
+local Theme = require(Plugin.App.Theme)
+
+local IconButton = require(Plugin.App.Components.IconButton)
+local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
+local Tooltip = require(Plugin.App.Components.Tooltip)
+
+local e = Roact.createElement
+
+local function Navbar(props)
+	return Theme.with(function(theme)
+		theme = theme.Settings.Navbar
+
+		return e("Frame", {
+			Size = UDim2.new(1, 0, 0, 46),
+			LayoutOrder = props.layoutOrder,
+			BackgroundTransparency = 1,
+		}, {
+			Back = e(IconButton, {
+				icon = Assets.Images.Icons.Back,
+				iconSize = 24,
+				color = theme.BackButtonColor,
+				transparency = props.transparency,
+
+				position = UDim2.new(0, 0, 0.5, 0),
+				anchorPoint = Vector2.new(0, 0.5),
+
+				onClick = props.onBack,
+			}, {
+				Tip = e(Tooltip.Trigger, {
+					text = "Back"
+				}),
+			}),
+
+			Text = e("TextLabel", {
+				Text = "Permissions",
+				Font = Enum.Font.Gotham,
+				TextSize = 18,
+				TextColor3 = theme.TextColor,
+				TextTransparency = props.transparency,
+
+				Size = UDim2.new(1, 0, 1, 0),
+
+				BackgroundTransparency = 1,
+			})
+		})
+	end)
+end
+
+local PermissionsPage = Roact.Component:extend("PermissionsPage")
+
+function PermissionsPage:init()
+	self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0))
+end
+
+function PermissionsPage:render()
+	return Theme.with(function(theme)
+		theme = theme.Settings
+
+		return e(ScrollingFrame, {
+			size = UDim2.new(1, 0, 1, 0),
+			contentSize = self.contentSize,
+			transparency = self.props.transparency,
+		}, {
+			Navbar = e(Navbar, {
+				onBack = self.props.onBack,
+				transparency = self.props.transparency,
+				layoutOrder = 0,
+			}),
+
+			Layout = e("UIListLayout", {
+				FillDirection = Enum.FillDirection.Vertical,
+				SortOrder = Enum.SortOrder.LayoutOrder,
+
+				[Roact.Change.AbsoluteContentSize] = function(object)
+					self.setContentSize(object.AbsoluteContentSize)
+				end,
+			}),
+
+			Padding = e("UIPadding", {
+				PaddingLeft = UDim.new(0, 20),
+				PaddingRight = UDim.new(0, 20),
+			}),
+		})
+	end)
+end
+
+return PermissionsPage

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

@@ -33,19 +33,22 @@ function Setting:init()
 	self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0))
 	self.containerSize, self.setContainerSize = Roact.createBinding(Vector2.new(0, 0))
 
-	self:setState({
-		setting = Settings:get(self.props.id),
-	})
-
-	self.changedCleanup = Settings:onChanged(self.props.id, function(value)
+	if self.props.id then
 		self:setState({
-			setting = value,
+			setting = Settings:get(self.props.id),
 		})
-	end)
+		self.changedCleanup = Settings:onChanged(self.props.id, function(value)
+			self:setState({
+				setting = value,
+			})
+		end)
+	end
 end
 
 function Setting:willUnmount()
-	self.changedCleanup()
+	if self.changedCleanup then
+		self.changedCleanup()
+	end
 end
 
 function Setting:render()
@@ -64,7 +67,9 @@ function Setting:render()
 				self.setContainerSize(object.AbsoluteSize)
 			end,
 		}, {
-			Input = if self.props.options ~= nil then
+			Input = if self.props.customInput then
+				self.props.customInput
+			elseif self.props.options ~= nil then
 				e(Dropdown, {
 					options = self.props.options,
 					active = self.state.setting,

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

@@ -12,6 +12,7 @@ local Theme = require(Plugin.App.Theme)
 local IconButton = require(Plugin.App.Components.IconButton)
 local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame)
 local Tooltip = require(Plugin.App.Components.Tooltip)
+local SlicedImage = require(Plugin.App.Components.SlicedImage)
 local Setting = require(script.Setting)
 
 local e = Roact.createElement
@@ -95,12 +96,52 @@ function SettingsPage:render()
 				layoutOrder = 1,
 			}),
 
+			Permissions = e(Setting, {
+				name = "Third Party Permissions",
+				description = "Manage permissions for third party plugins",
+				transparency = self.props.transparency,
+				layoutOrder = 2,
+				customInput = e("TextButton", {
+					Text = "",
+					BackgroundTransparency = 1,
+					Size = UDim2.fromOffset(28, 28),
+					Position = UDim2.fromScale(1, 0.5),
+					AnchorPoint = Vector2.new(1, 0.5),
+
+					[Roact.Event.Activated] = function()
+						self.props.onNavigatePermissions()
+					end,
+				}, {
+					Button = Theme.with(function(theme)
+						theme = theme.Checkbox
+						return e(SlicedImage, {
+							slice = Assets.Slices.RoundedBorder,
+							color = theme.Inactive.BorderColor,
+							transparency = self.props.transparency,
+							size = UDim2.new(1, 0, 1, 0),
+						}, {
+							Icon = e("ImageLabel", {
+								Image = Assets.Images.Icons.Expand,
+								ImageColor3 = theme.Inactive.IconColor,
+								ImageTransparency = self.props.transparency,
+
+								Size = UDim2.new(0, 16, 0, 16),
+								Position = UDim2.new(0.5, 0, 0.5, 0),
+								AnchorPoint = Vector2.new(0.5, 0.5),
+
+								BackgroundTransparency = 1,
+							}),
+						})
+					end),
+				}),
+			}),
+
 			ShowNotifications = e(Setting, {
 				id = "showNotifications",
 				name = "Show Notifications",
 				description = "Popup notifications in viewport",
 				transparency = self.props.transparency,
-				layoutOrder = 2,
+				layoutOrder = 3,
 			}),
 
 			PlaySounds = e(Setting, {
@@ -108,7 +149,7 @@ function SettingsPage:render()
 				name = "Play Sounds",
 				description = "Toggle sound effects",
 				transparency = self.props.transparency,
-				layoutOrder = 3,
+				layoutOrder = 4,
 			}),
 
 			TwoWaySync = e(Setting, {
@@ -116,7 +157,7 @@ function SettingsPage:render()
 				name = "Two-Way Sync",
 				description = "EXPERIMENTAL! Editing files in Studio will sync them into the filesystem",
 				transparency = self.props.transparency,
-				layoutOrder = 4,
+				layoutOrder = 5,
 			}),
 
 			LogLevel = e(Setting, {
@@ -124,7 +165,7 @@ function SettingsPage:render()
 				name = "Log Level",
 				description = "Plugin output verbosity level",
 				transparency = self.props.transparency,
-				layoutOrder = 5,
+				layoutOrder = 6,
 
 				options = invertedLevels,
 				showReset = Settings:getBinding("logLevel"):map(function(value)
@@ -140,7 +181,7 @@ function SettingsPage:render()
 				name = "Typechecking",
 				description = "Toggle typechecking on the API surface",
 				transparency = self.props.transparency,
-				layoutOrder = 6,
+				layoutOrder = 7,
 			}),
 
 			Layout = e("UIListLayout", {

plugin/src/App/StatusPages/init.lua

@@ -1,7 +1,8 @@
 return {
 	NotConnected = require(script.NotConnected),
 	Settings = require(script.Settings),
+	Permissions = require(script.Permissions),
 	Connecting = require(script.Connecting),
 	Connected = require(script.Connected),
 	Error = require(script.Error),
-}
+}

plugin/src/App/init.lua

@@ -35,6 +35,7 @@ local StatusPages = require(script.StatusPages)
 local AppStatus = strict("AppStatus", {
 	NotConnected = "NotConnected",
 	Settings = "Settings",
+	Permissions = "Permissions",
 	Connecting = "Connecting",
 	Connected = "Connected",
 	Error = "Error",
@@ -509,6 +510,20 @@ function App:render()
 								appStatus = AppStatus.NotConnected,
 							})
 						end,
+
+						onNavigatePermissions = function()
+							self:setState({
+								appStatus = AppStatus.Permissions,
+							})
+						end,
+					}),
+
+					Permissions = createPageElement(AppStatus.Permissions, {
+						onBack = function()
+							self:setState({
+								appStatus = AppStatus.Settings,
+							})
+						end,
 					}),
 
 					Error = createPageElement(AppStatus.Error, {

plugin/src/Assets.lua

@@ -25,6 +25,7 @@ local Assets = {
 			Close = "rbxassetid://6012985953",
 			Back = "rbxassetid://6017213752",
 			Reset = "rbxassetid://10142422327",
+			Expand = "rbxassetid://12045401097",
 		},
 		Checkbox = {
 			Active = "rbxassetid://6016251644",