feat: show guided tour on first connection

backend/iam/views.py

@@ -21,7 +21,7 @@
 
 from ciso_assistant.settings import EMAIL_HOST, EMAIL_HOST_RESCUE
 
-from .models import Role, RoleAssignment
+from .models import Folder, Role, RoleAssignment
 from .serializers import (
     ChangePasswordSerializer,
     LoginSerializer,
@@ -70,6 +70,9 @@ def get(self, request) -> Response:
                 {"error": "You are not logged in. Please ensure you are logged in."},
                 status=HTTP_401_UNAUTHORIZED,
             )
+        accessible_domains = RoleAssignment.get_accessible_folders(
+            Folder.get_root_folder(), request.user, Folder.ContentType.DOMAIN
+        )
         res_data = {
             "id": request.user.id,
             "email": request.user.email,
@@ -82,6 +85,7 @@ def get(self, request) -> Response:
             "permissions": request.user.permissions,
             "is_third_party": request.user.is_third_party,
             "is_admin": request.user.is_admin(),
+            "accessible_domains": [str(f) for f in accessible_domains],
         }
         return Response(res_data, status=HTTP_200_OK)
 

frontend/src/lib/components/SideBar/SideBar.svelte

@@ -4,14 +4,18 @@
 	import SideBarNavigation from './SideBarNavigation.svelte';
 	import SideBarToggle from './SideBarToggle.svelte';
 	import { onMount } from 'svelte';
-	export let open: boolean;
-	export let firstTime = false; // this needs to come from the db ; we also need to make room for variable about the specialized guided tours
-	import { driverInstance } from '$lib/utils/stores';
-	$: classesSidebarOpen = (open: boolean) => (open ? '' : '-ml-[14rem] pointer-events-none');
 
-	import { safeTranslate } from '$lib/utils/i18n';
+	import { driverInstance, firstTimeConnection } from '$lib/utils/stores';
 	import * as m from '$paraglide/messages';
 
+	import { driver } from 'driver.js';
+	import 'driver.js/dist/driver.css';
+	import { page } from '$app/stores';
+
+	export let open: boolean;
+
+	const user = $page.data?.user;
+
 	// id is not needed, just to help us with authoring
 	// this is not great, but couldn't find a way for i18n while separating the file.
 	const steps = [
@@ -173,38 +177,30 @@
 		}
 	];
 
-	function wrapStepWithTranslation(step: any) {
-		const { popover, ...rest } = step;
-
-		if (!popover) return step;
-
-		return {
-			...rest,
-			popover: {
-				...popover,
-				title: safeTranslate(popover.title),
-				description: safeTranslate(popover.description)
-			}
-		};
-	}
-	import { driver } from 'driver.js';
-	import 'driver.js/dist/driver.css';
-	import { description } from '$paraglide/messages/ro';
-
 	function triggerVisit() {
-		const translatedSteps = steps; //steps.map(wrapStepWithTranslation);
+		const translatedSteps = steps;
 		const driverObj = driver({
 			showProgress: true,
 			steps: translatedSteps
 		});
 		$driverInstance = driverObj;
 		driverObj.drive();
 	}
+
 	onMount(() => {
-		if (firstTime) {
+		if (displayGuidedTour) {
 			triggerVisit();
+			$firstTimeConnection = false; // This will prevent the tour from showing up again on page reload
 		}
 	});
+
+	$: classesSidebarOpen = (open: boolean) => (open ? '' : '-ml-[14rem] pointer-events-none');
+
+	$: $firstTimeConnection = $firstTimeConnection && user.accessible_domains.length === 0;
+
+	// NOTE: For now, there is only a single guided tour, which is targeted at an administrator.
+	// Later, we will have tours for domain managers, analysts etc.
+	$: displayGuidedTour = $firstTimeConnection && user.is_admin;
 </script>
 
 <aside

frontend/src/lib/utils/stores.ts

@@ -2,6 +2,7 @@ import { writable } from 'svelte/store';
 import { browser } from '$app/environment';
 import { persisted } from 'svelte-persisted-store';
 import type { TreeViewNode } from '@skeletonlabs/skeleton';
+import type { Driver } from 'driver.js';
 
 export const showNotification = writable(
 	(browser && localStorage.getItem('showNotification')) || 'false'
@@ -15,6 +16,8 @@ export const clientSideToast = writable(undefined);
 
 const requirementAssessmentsList: string[] = [];
 
+export const firstTimeConnection = persisted('firstTimeConnection', true);
+
 export const hideSuggestions = persisted('hideSuggestions', requirementAssessmentsList, {
 	storage: 'session'
 });
@@ -51,6 +54,4 @@ export const createModalCache = {
 	data: {}
 };
 
-import type { Driver } from 'driver.js';
-
 export const driverInstance = writable<Driver | null>(null);

frontend/src/lib/utils/types.ts

@@ -9,6 +9,12 @@ export interface User {
 	last_name: string;
 	is_active: boolean;
 	date_joined: string;
+	user_groups: Record<string, any>[];
+	roles: Record<string, any>[];
+	permissions: Record<string, any>[];
+	is_third_party: boolean;
+	is_admin: boolean;
+	accessible_domains: string[];
 }
 
 export interface GlobalSettings {