Create utils that allow admins to see which tutorials can access other roles of their organization

Author: tristantr

frontend/src/lib/components/FlowTutorials.svelte

@@ -40,7 +40,7 @@
 <TroubleshootFlowTutorial 
 	bind:this={troubleshootFlowTutorial}
 	index={getTutorialIndex('troubleshoot-flow')}
-	on:error 
-	on:skipAll={skipAll} 
-	on:reload 
+	on:error
+	on:skipAll={skipAll}
+	on:reload
 />

frontend/src/lib/tutorials/config.ts

@@ -1,6 +1,7 @@
 import type { ComponentType } from 'svelte'
 import { Workflow, GraduationCap, Wrench, PlayCircle, Link2 } from 'lucide-svelte'
 import { base } from '$lib/base'
+import type { Role } from './roleUtils'
 
 export interface TutorialConfig {
 	id: string
@@ -11,14 +12,14 @@ export interface TutorialConfig {
 	index?: number // Bitmask index in the database (for progress tracking)
 	active?: boolean // Whether this tutorial is active and should be displayed (default: true)
 	comingSoon?: boolean
-	roles?: ('admin' | 'developer' | 'operator')[] // Roles that can access this tutorial (if not specified, available to everyone)
+	roles?: Role[] // Roles that can access this tutorial (if not specified, available to everyone)
 	order?: number
 }
 
 export interface TabConfig {
 	label: string
 	tutorials: TutorialConfig[]
-	roles?: ('admin' | 'developer' | 'operator')[] // Roles that can access this tab category (if not specified, available to everyone)
+	roles?: Role[] // Roles that can access this tab category (if not specified, available to everyone)
 	progressBar?: boolean // Whether to display the progress bar for this tab (default: true)
 	active?: boolean // Whether this tab category is active and should be displayed (default: true)
 }
@@ -37,15 +38,12 @@ export function getTutorialIndex(id: string): number {
 	throw new Error(`Tutorial index not found for id: ${id}. Make sure the tutorial has an index defined in config.`)
 }
 
-// Available roles
-    // 'developer': Developer role (can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f).
-    // 'operator': Operator role (can execute and view scripts/flows/apps from your workspace, and only those that he has visibility on).
-    // 'admin': Admin role (has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace).
+// Available roles : developer, admin, operator
 
 export const TUTORIALS_CONFIG: Record<TabId, TabConfig> = {
 	quickstart: {
 		label: 'Quickstart',
-		roles: ['developer', 'admin'],
+		roles: ['admin', 'developer', 'operator'],
 		progressBar: true,
 		active: true,
 		tutorials: [
@@ -60,7 +58,7 @@ export const TUTORIALS_CONFIG: Record<TabId, TabConfig> = {
 				index: 1,
 				active: true,
 				comingSoon: false,
-				roles: ['developer', 'admin'],
+				roles: ['operator','developer', 'admin'],
 				order: 1
 			},
 			{
@@ -88,7 +86,7 @@ export const TUTORIALS_CONFIG: Record<TabId, TabConfig> = {
 				index: 3,
 				active: true,
 				comingSoon: false,
-				roles: ['developer', 'admin'],
+				roles: ['admin','developer'],
 				order: 3
 			}
 		]

frontend/src/lib/tutorials/roleUtils.ts

@@ -0,0 +1,64 @@
+import type { UserExt } from '$lib/stores'
+
+export type Role = 'admin' | 'developer' | 'operator'
+
+/**
+ * Get the effective role of a user based on their database flags.
+ * - Admin: user.is_admin === true
+ * - Operator: user.operator === true (and not admin)
+ * - Developer: default (neither admin nor operator)
+ */
+export function getUserEffectiveRole(user: UserExt | null | undefined): Role | null {
+	if (!user) return null
+	if (user.is_admin) return 'admin'
+	if (user.operator) return 'operator'
+	return 'developer'
+}
+
+/**
+ * Check if a role has access to a required role.
+ * This is the core role-checking logic used by both normal and preview modes.
+ */
+function checkRoleMatch(
+	userRole: Role,
+	requiredRole: Role
+): boolean {
+	if (requiredRole === 'admin') return userRole === 'admin'
+	if (requiredRole === 'operator') return userRole === 'operator' || userRole === 'admin'
+	if (requiredRole === 'developer') return userRole === 'developer' || userRole === 'admin'
+	return false
+}
+
+/**
+ * Check if a user or preview role has access based on a roles array.
+ * This is the unified function that handles both normal user access and admin preview mode.
+ */
+export function hasRoleAccess(
+	user: UserExt | null | undefined,
+	roles?: Role[],
+	previewRole?: Role
+): boolean {
+	// No roles specified = available to everyone
+	if (!roles || roles.length === 0) return true
+	
+	// If previewRole is provided, use it (admin preview mode)
+	// Otherwise, derive role from user
+	const effectiveRole = previewRole ?? getUserEffectiveRole(user)
+	if (!effectiveRole) return false
+
+	// Check if effective role has any of the required roles
+	return roles.some((role) => checkRoleMatch(effectiveRole, role))
+}
+
+/**
+ * Check if a preview role has access based on a roles array.
+ * Used by admins to preview what other roles can see.
+ * This is a convenience wrapper around hasRoleAccess for preview mode.
+ */
+export function hasRoleAccessForPreview(
+	previewRole: Role,
+	roles?: Role[]
+): boolean {
+	return hasRoleAccess(null, roles, previewRole)
+}
+

frontend/src/routes/(root)/(logged)/tutorials/+page.svelte

@@ -23,33 +23,13 @@
 	import { RefreshCw, CheckCheck, CheckCircle2, Circle, Shield, Code, UserCog } from 'lucide-svelte'
 	import { TUTORIALS_CONFIG, type TabId } from '$lib/tutorials/config'
 	import { userStore } from '$lib/stores'
-	import type { UserExt } from '$lib/stores'
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
+	import { hasRoleAccess, hasRoleAccessForPreview, type Role } from '$lib/tutorials/roleUtils'
 
 	// Role override for admins to preview what other roles see
 	// Only used when user is admin - defaults to 'admin' (their actual role)
-	let roleOverride: 'admin' | 'developer' | 'operator' = $state('admin')
-
-	/**
-	 * Check if a user has access based on a roles array.
-	 */
-	function hasRoleAccess(
-		user: UserExt | null | undefined,
-		roles?: ('admin' | 'developer' | 'operator')[]
-	): boolean {
-		// No roles specified = available to everyone
-		if (!roles || roles.length === 0) return true
-		if (!user) return false
-
-		// Check if user has any of the required roles
-		return roles.some((role) => {
-			if (role === 'admin') return user.is_admin
-			if (role === 'operator') return user.operator || user.is_admin
-			if (role === 'developer') return !user.operator || user.is_admin
-			return false
-		})
-	}
+	let roleOverride: Role = $state('admin')
 
 	// Debug: Log user role for troubleshooting
 	$effect(() => {
@@ -65,36 +45,25 @@
 	})
 
 	/**
-	 * Check if a preview role has access based on a roles array.
-	 * Used by admins to preview what other roles can see.
+	 * Check if the current user (or preview role) has access to a roles array.
+	 * Handles both normal access and admin preview mode.
 	 */
-	function hasRoleAccessForPreview(
-		previewRole: 'admin' | 'developer' | 'operator',
-		roles?: ('admin' | 'developer' | 'operator')[]
-	): boolean {
-		// No roles specified = available to everyone
-		if (!roles || roles.length === 0) return true
-
-		// Check if preview role has any of the required roles
-		return roles.some((role) => {
-			if (role === 'admin') return previewRole === 'admin'
-			if (role === 'operator') return previewRole === 'operator' || previewRole === 'admin'
-			if (role === 'developer') return previewRole === 'developer' || previewRole === 'admin'
-			return false
-		})
+	function checkAccess(roles?: Role[]): boolean {
+		const user = $userStore
+		// Use preview function if admin has selected a role override
+		if (user?.is_admin && roleOverride !== 'admin') {
+			return hasRoleAccessForPreview(roleOverride, roles)
+		}
+		return hasRoleAccess(user, roles)
 	}
 
 	// Get active tabs only (filtered by active and roles)
 	const activeTabs = $derived.by(() => {
-		const user = $userStore
 		return Object.entries(TUTORIALS_CONFIG).filter(([, config]) => {
 			// Filter by active
 			if (config.active === false) return false
-			// Filter by roles - use preview function if admin has selected a role override
-			if (user?.is_admin && roleOverride !== 'admin') {
-				return hasRoleAccessForPreview(roleOverride, config.roles)
-			}
-			return hasRoleAccess(user, config.roles)
+			// Filter by roles
+			return checkAccess(config.roles)
 		}) as [TabId, typeof TUTORIALS_CONFIG[TabId]][]
 	})
 
@@ -119,11 +88,7 @@
 	const visibleTutorials = $derived(
 		currentTabConfig.tutorials.filter((tutorial) => {
 			if (tutorial.active === false) return false
-			// Use preview function if admin has selected a role override
-			if ($userStore?.is_admin && roleOverride !== 'admin') {
-				return hasRoleAccessForPreview(roleOverride, tutorial.roles)
-			}
-			return hasRoleAccess($userStore, tutorial.roles)
+			return checkAccess(tutorial.roles)
 		})
 	)
 
@@ -238,18 +203,12 @@
 	// Calculate progress for each tab
 	function getTabProgress(tabId: TabId) {
 		const tabConfig = TUTORIALS_CONFIG[tabId]
-		const user = $userStore
 		
 		// Get all tutorial indexes for this tab (filtered by role)
 		const indexes: number[] = []
 		for (const tutorial of tabConfig.tutorials) {
 			if (tutorial.active === false || tutorial.index === undefined) continue
-			// Use preview function if admin has selected a role override
-			if (user?.is_admin && roleOverride !== 'admin') {
-				if (!hasRoleAccessForPreview(roleOverride, tutorial.roles)) continue
-			} else {
-				if (!hasRoleAccess(user, tutorial.roles)) continue
-			}
+			if (!checkAccess(tutorial.roles)) continue
 			indexes.push(tutorial.index)
 		}