Guided tour: experiment

.gitignore

@@ -1,6 +1,7 @@
 *.DS_Store
 *~$*
 .env
+.venv
 venv
 **/node_modules/
 .vscode

backend/ciso_assistant/settings.py

@@ -114,7 +114,9 @@ def set_ciso_assistant_url(_, __, event_dict):
 logger.info("DEBUG mode: %s", DEBUG)
 logger.info("CISO_ASSISTANT_URL: %s", CISO_ASSISTANT_URL)
 # ALLOWED_HOSTS should contain the backend address
-ALLOWED_HOSTS = os.environ.get("ALLOWED_HOSTS", "localhost,127.0.0.1").split(",")
+ALLOWED_HOSTS = os.environ.get(
+    "ALLOWED_HOSTS", "localhost,127.0.0.1,host.docker.internal"
+).split(",")
 logger.info("ALLOWED_HOSTS: %s", ALLOWED_HOSTS)
 CSRF_TRUSTED_ORIGINS = [CISO_ASSISTANT_URL]
 LOCAL_STORAGE_DIRECTORY = os.environ.get(

frontend/messages/en.json

@@ -1082,5 +1082,6 @@
 	"missionsAndOrganizationalServices": "Missions and organizational services",
 	"human": "Human",
 	"material": "Material",
-	"environmental": "Environmental"
+	"environmental": "Environmental",
+	"guidedTour": "Guided tour"
 }

frontend/messages/fr.json

@@ -1082,5 +1082,6 @@
 	"missionsAndOrganizationalServices": "Missions et service de l'organisation",
 	"human": "Humain",
 	"material": "Matériel",
-	"environmental": "Environnemental"
+	"environmental": "Environnemental",
+	"guidedTour": "Visite guidée"
 }

frontend/package.json

@@ -84,6 +84,7 @@
 		"@unovis/ts": "1.4.3-beta.0",
 		"cmdk-sv": "^0.0.18",
 		"dotenv": "^16.4.7",
+		"driver.js": "^1.3.1",
 		"echarts": "^5.5.1",
 		"eslint-plugin-storybook": "^0.10.2",
 		"globals": "^15.13.0",

frontend/src/lib/components/ModelTable/LibraryActions.svelte

@@ -66,6 +66,7 @@
 				<button
 					type="submit"
 					data-testid="tablerow-import-button"
+					id="tablerow-import-button"
 					on:click={(e) => e.stopPropagation()}
 				>
 					<i class="fa-solid fa-file-import" />

frontend/src/lib/components/ModelTable/ModelTable.svelte

@@ -238,7 +238,11 @@
 <div class="table-container {classesBase}">
 	<header class="flex justify-between items-center space-x-8 p-2">
 		{#if filteredFields.length > 0 && hasRows && !hideFilters}
-			<button use:popup={popupFilter} class="btn variant-filled-primary self-end relative">
+			<button
+				use:popup={popupFilter}
+				class="btn variant-filled-primary self-end relative"
+				id="filters"
+			>
 				<i class="fa-solid fa-filter mr-2" />
 				{m.filters()}
 				{#if filterCount}

frontend/src/lib/components/ModelTable/Search.svelte

@@ -9,6 +9,7 @@
 	class="input bg-surface-50 max-w-2xl"
 	placeholder={m.searchPlaceholder()}
 	data-testid="search-input"
+	id="search-input"
 	bind:value
 	on:input={() => handler.search(value)}
 />

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

@@ -3,10 +3,29 @@
 	import SideBarHeader from './SideBarHeader.svelte';
 	import SideBarNavigation from './SideBarNavigation.svelte';
 	import SideBarToggle from './SideBarToggle.svelte';
-
+	import { onMount } from 'svelte';
 	export let open: boolean;
-
+	import { steps } from './guidedTourData.js';
+	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 { driver } from 'driver.js';
+	import 'driver.js/dist/driver.css';
+
+	function triggerVisit() {
+		const driverObj = driver({
+			showProgress: true,
+			steps: steps
+		});
+		$driverInstance = driverObj;
+		driverObj.drive();
+	}
+	onMount(() => {
+		if (firstTime) {
+			triggerVisit();
+		}
+	});
 </script>
 
 <aside
@@ -17,7 +36,7 @@
 	<nav class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden bg-gray-50 py-4 px-3">
 		<SideBarHeader />
 		<SideBarNavigation />
-		<SideBarFooter />
+		<SideBarFooter on:triggerGT={triggerVisit} />
 	</nav>
 </aside>
 

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

@@ -8,6 +8,9 @@
 	import * as m from '$paraglide/messages';
 	import { setCookie } from '$lib/utils/cookies';
 
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
 	const language: any = {
 		french: m.french(),
 		english: m.english(),
@@ -100,8 +103,11 @@
 				</span>
 			{/if}
 		</div>
-		<button class="btn bg-initial" data-testid="sidebar-more-btn" use:popup={popupUser}
-			><i class="fa-solid fa-ellipsis-vertical" /></button
+		<button
+			class="btn bg-initial"
+			data-testid="sidebar-more-btn"
+			id="sidebar-more-btn"
+			use:popup={popupUser}><i class="fa-solid fa-ellipsis-vertical" /></button
 		>
 		<div
 			class="card whitespace-nowrap bg-white py-2 w-fit shadow-lg space-y-1"
@@ -128,6 +134,12 @@
 					</option>
 				{/each}
 			</select>
+			<button
+				on:click={() => dispatch('triggerGT')}
+				class="cursor-pointer flex items-center gap-2 w-full px-4 py-2.5 text-left text-sm hover:bg-gray-100 disabled:text-gray-500 text-gray-800"
+				data-testid="gt-button"
+				><i class="fa-solid fa-wand-magic-sparkles mr-2" />{m.guidedTour()}</button
+			>
 			<button
 				on:click={modalBuildInfo}
 				class="cursor-pointer flex items-center gap-2 w-full px-4 py-2.5 text-left text-sm hover:bg-gray-100 disabled:text-gray-500 text-gray-800"

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

@@ -20,7 +20,7 @@
 		)}"
 		data-testid={'accordion-item-' + item.href.substring(1)}
 	>
-		<span class="px-4 flex items-center w-full space-x-2 text-xs">
+		<span class="px-4 flex items-center w-full space-x-2 text-xs" id={item.name}>
 			<i class="{item.fa_icon} w-1/12" />
 			<span class="text-sm tracking-wide truncate">{safeTranslate(item.name)}</span>
 		</span>

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

@@ -6,20 +6,7 @@
 	import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';
 	import { page } from '$app/stores';
 	import { URL_MODEL_MAP } from '$lib/utils/crud';
-
-	// if (browser) {
-	// 	let buttonList = document.querySelectorAll('button');
-	// 	buttonList.forEach((button) => {
-	// 		button.addEventListener('click', () => {
-	// 			buttonList.forEach((button) => {
-	// 				button.classList.remove('bg-primary-100');
-	// 				button.classList.remove('text-primary-800');
-	// 			});
-	// 			button.classList.add('bg-primary-100');
-	// 			button.classList.add('text-primary-800');
-	// 		});
-	// 	});
-	// }
+	import { driverInstance } from '$lib/utils/stores';
 
 	const user = $page.data.user;
 
@@ -54,6 +41,12 @@
 	function lastAccordionItemOpened(value: string) {
 		lastAccordionItem.set(value);
 	}
+
+	function handleNavClick() {
+		setTimeout(() => {
+			$driverInstance?.moveNext();
+		}, 0);
+	}
 </script>
 
 <nav class="flex-grow scrollbar">
@@ -75,6 +68,7 @@
 			<AccordionItem
 				id={item.name.toLowerCase().replace(' ', '-')}
 				on:click={() => lastAccordionItemOpened(item.name)}
+				on:click={handleNavClick}
 				open={$lastAccordionItem === item.name}
 			>
 				<svelte:fragment slot="summary"><SideBarCategory {item} /></svelte:fragment>

frontend/src/lib/components/SideBar/guidedTourData.ts

@@ -0,0 +1,115 @@
+// id is not needed, just to help us with authoring
+export const steps = [
+	{
+		id: 1,
+		element: 'none',
+		popover: {
+			title: 'Welcome !',
+			description:
+				'The quick guided tour will help setup the main parts to get started with CISO Assistant.'
+		}
+	},
+	{
+		id: 2,
+		element: '#organization',
+		popover: {
+			title: 'Click to unfold'
+		}
+	},
+	{
+		id: 3,
+		element: '#domains',
+		popover: {
+			title: 'Click here',
+			description: 'You will need to create a first domain to get started'
+		}
+	},
+	{
+		id: 4,
+		element: '#add-button',
+		popover: {
+			description: 'You will need to create a first domain to get started'
+		}
+	},
+	{
+		id: 6,
+		element: '#catalog',
+		popover: {
+			title: 'Click to unfold',
+			description:
+				'The library of CISO Assistant is quite comprehensive and contain multiple objects: frameworks, threats, matrices.'
+		}
+	},
+	{ id: 7, element: '#frameworks', popover: { title: 'click here' } },
+	{
+		id: 8,
+		element: '#add-button',
+		popover: { title: 'Click to import one', description: 'Description' }
+	},
+	{
+		id: 9,
+		element: '#search-input',
+		popover: { title: 'Type to filter', description: 'You can try csf v2' }
+	},
+	{
+		id: 10,
+		element: '#tablerow-import-button',
+		popover: { title: 'Click here to load it' }
+	},
+	{
+		id: 11,
+		element: '#riskMatrices',
+		popover: {
+			title: 'click here',
+			description:
+				"You will also need a matrix for your risk assessment. Let's filter the library content to focus on that."
+		}
+	},
+	{
+		id: 12,
+		element: '#add-button',
+		popover: { title: 'Click to import one', description: 'Description' }
+	},
+	{
+		id: 13,
+		element: '#filters',
+		popover: {
+			description:
+				'Notice that we came back to the library view with an extra filter being applied.'
+		}
+	},
+	{
+		id: 14,
+		element: '#tablerow-import-button',
+		popover: { title: 'Click here to load it' }
+	},
+	{ id: 15, element: '#compliance', popover: { title: 'Click to unfold' } },
+	{
+		id: 16,
+		element: '#complianceAssessments',
+		popover: {
+			description:
+				'This is where you can create and manage your audits that will serve as your baseline'
+		}
+	},
+	{ id: 17, element: '#risk', popover: { title: 'Click to unfold' } },
+	{
+		id: 18,
+		element: '#riskAssessments',
+		popover: { description: 'And this is where you will be able to perform your risk assessments' }
+	},
+	{
+		id: 19,
+		element: '#sidebar-more-btn',
+		popover: { description: 'You can retrigger the guided tour and adjust your preferences here.' }
+	},
+	{
+		id: 20,
+		element: 'none',
+		popover: {
+			title: 'All set',
+			description:
+				'You are good to go. Feel free to reach out the Discord server to interact with the growing community!'
+		}
+	}
+];

frontend/src/lib/utils/stores.ts

@@ -50,3 +50,7 @@ export const createModalCache = {
 	},
 	data: {}
 };
+
+import type { Driver } from 'driver.js';
+
+export const driverInstance = writable<Driver | null>(null);