From 84572a500376883bed1585ac52cd688cc9b10779 Mon Sep 17 00:00:00 2001
From: Abderrahmane Smimite <smimite@gmail.com>
Date: Wed, 8 Jan 2025 18:20:07 +0100
Subject: [PATCH] More steps

---
 .../ModelTable/LibraryActions.svelte          |  1 +
 .../components/ModelTable/ModelTable.svelte   |  6 +-
 .../components/SideBar/SideBarFooter.svelte   |  7 +-
 .../lib/components/SideBar/guidedTourData.ts  | 83 +++++++++++++++----
 4 files changed, 79 insertions(+), 18 deletions(-)

diff --git a/frontend/src/lib/components/ModelTable/LibraryActions.svelte b/frontend/src/lib/components/ModelTable/LibraryActions.svelte
index 4a5d25404..9e61d1cce 100644
--- a/frontend/src/lib/components/ModelTable/LibraryActions.svelte
+++ b/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" />
diff --git a/frontend/src/lib/components/ModelTable/ModelTable.svelte b/frontend/src/lib/components/ModelTable/ModelTable.svelte
index a5caa0426..7eb670bd9 100644
--- a/frontend/src/lib/components/ModelTable/ModelTable.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/SideBar/SideBarFooter.svelte b/frontend/src/lib/components/SideBar/SideBarFooter.svelte
index 6d9d94721..bc4f19535 100644
--- a/frontend/src/lib/components/SideBar/SideBarFooter.svelte
+++ b/frontend/src/lib/components/SideBar/SideBarFooter.svelte
@@ -103,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"
diff --git a/frontend/src/lib/components/SideBar/guidedTourData.ts b/frontend/src/lib/components/SideBar/guidedTourData.ts
index 1273ba3c3..3520e2bba 100644
--- a/frontend/src/lib/components/SideBar/guidedTourData.ts
+++ b/frontend/src/lib/components/SideBar/guidedTourData.ts
@@ -1,5 +1,7 @@
+// id is not needed, just to help us with authoring
 export const steps = [
 	{
+		id: 1,
 		element: 'none',
 		popover: {
 			title: 'Welcome !',
@@ -8,13 +10,14 @@ export const steps = [
 		}
 	},
 	{
+		id: 2,
 		element: '#organization',
 		popover: {
-			title: 'Click to unfold',
-			description: 'This section will help you define the scopes of your work.'
+			title: 'Click to unfold'
 		}
 	},
 	{
+		id: 3,
 		element: '#domains',
 		popover: {
 			title: 'Click here',
@@ -22,41 +25,91 @@ export const steps = [
 		}
 	},
 	{
+		id: 4,
 		element: '#add-button',
 		popover: {
-			title: 'Click here',
 			description: 'You will need to create a first domain to get started'
 		}
 	},
 	{
-		element: 'none',
+		id: 6,
+		element: '#catalog',
 		popover: {
-			title: 'The catalog',
+			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' } },
 	{
-		element: '#catalog',
-		popover: { title: 'Click to unfold' }
+		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."
+		}
 	},
-	{ element: '#frameworks', popover: { title: 'Title', description: 'Description' } },
 	{
+		id: 12,
 		element: '#add-button',
 		popover: { title: 'Click to import one', description: 'Description' }
 	},
 	{
-		element: '#riskMatrices',
+		id: 13,
+		element: '#filters',
 		popover: {
-			title: 'Title',
-			description: 'You need a framework and a matrix to get  started'
+			description:
+				'Notice that we came back to the library view with an extra filter being applied.'
 		}
 	},
-	{ element: '#compliance', popover: { title: 'Title', description: 'Description' } },
 	{
+		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: { title: 'Title', description: 'Description' }
+		popover: {
+			description:
+				'This is where you can create and manage your audits that will serve as your baseline'
+		}
 	},
-	{ element: '#risk', popover: { title: 'Title', description: 'Description' } },
-	{ element: '#riskAssessments', popover: { title: 'Title', description: 'Description' } }
+	{ 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!'
+		}
+	}
 ];