Guided tour: first iteration (#1333)

* Guided tour: experiment * Refactor the steps outside the component * Add dispatcher to be able to retrigger the GT * More steps * Trick to sync the highlighted zone to the proper target * Update gitignore * Force ruff version for consistency * Moving the data to the component for now to get i18n * clean up * back to main branch versions * adjust translations
intuitem · Jan 18, 2025 · ad577ad · ad577ad
1 parent 5353ebc
commit ad577ad
Show file tree

Hide file tree

Showing 17 changed files with 342 additions and 36 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,7 @@
 *.DS_Store
 *~$*
 .env
+.venv
 venv
 **/node_modules/
 .vscode

diff --git a/backend/ciso_assistant/settings.py b/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(

diff --git a/frontend/messages/en.json b/frontend/messages/en.json
@@ -1084,6 +1084,37 @@
 	"human": "Human",
 	"material": "Material",
 	"environmental": "Environmental",
+	"guidedTour": "Guided tour",
+	"tourWelcomeTitle": "Welcome!",
+	"tourWelcomeDescription": "Let's take a tour of the main features to get you started.",
+	"tourHelpButtonDescription": "You can always restart this tour by clicking this button.",
+	"tourOrganizationTitle": "Organization",
+	"tourOrganizationDescription": "This is where you will define the hierarchy and perimeters of your organization. Click on it.",
+	"tourDomainsDescription": "Domains allow you to isolate your objects using the associated roles. You will need at least one. Click on it.",
+	"tourDomainAddDescription": "This where you will be able to create a new domain.",
+	"tourProjectsDescription": "Projects are functional perimeters within a domain. You will need at least one. Click on it.",
+	"tourProjectAddDescription": "This is where you will be able to create a project.",
+	"tourCatalogTitle": "Catalog Overview",
+	"tourCatalogDescription": "The catalog is where you will be able to import frameworks, threats, matrices and other predifined objects",
+	"tourCatalogBrowseDescription": "You will be able to browse the loaded objects per category and import new ones. <b>Click on it.</b>",
+	"tourFrameworksTitle": "Frameworks",
+	"tourFrameworksDescription": "View and manage compliance frameworks. You will need at least one to initiate an audit. Click on it.",
+	"tourFrameworkAddDescription": "This where you will be able to import new frameworks.",
+	"tourRiskMatricesTitle": "Risk Matrices",
+	"tourRiskMatricesDescription": "View and manage risk matrices. You will need at least one to initiate a risk assessment. Click on it.",
+	"tourMatricesAddDescription": "This is where you will be able to import new matrices.",
+	"tourComplianceDescription": "This where will be able to manage your compliance activities. Click on it.",
+	"tourAuditsTitle": "Audits",
+	"tourAuditsDescription": "This is where you will be able to drive and track your audits and baselines",
+	"tourRiskDescription": "This is where you will be able to manage your risk analysis and registry. Click on it.",
+	"tourRiskAssessmentTitle": "Risk Assessment",
+	"tourRiskAssessmentDescription": "Group and manage your analysis through risk assessments.",
+	"tourAnalyticsTitle": "Analytics",
+	"tourAnalyticsDescription": "The overview section cover your main dashboards and analytics.",
+	"tourAnalyticsViewDescription": "View the aggregated analytics and reports here.",
+	"tourAssignmentsDescription": "or track your indivdual assignements and tasks here.",
+	"tourHelpFinalTitle": "Help & Tour",
+	"tourHelpFinalDescription": "Remember, you can always restart the tour from here!",
 	"documentationScore": "Documentation score",
 	"implementationScore": "Implementation score",
 	"useDocumentationScore": "Use documentation score",

diff --git a/frontend/messages/fr.json b/frontend/messages/fr.json
@@ -1084,6 +1084,37 @@
 	"human": "Humain",
 	"material": "Matériel",
 	"environmental": "Environnemental",
+	"guidedTour": "Visite guidée",
+	"tourWelcomeTitle": "Bienvenue !",
+	"tourWelcomeDescription": "Faisons un tour des principales fonctionnalités pour vous aider à démarrer.",
+	"tourHelpButtonDescription": "Vous pouvez toujours redémarrer cette visite via ce bouton.",
+	"tourOrganizationTitle": "Organisation",
+	"tourOrganizationDescription": "C'est ici que vous définirez la hiérarchie et les périmètres de votre organisation. Cliquez dessus.",
+	"tourDomainsDescription": "Les domaines vous permettent d'isoler vos objets en utilisant les rôles associés. Vous en aurez besoin d'au moins un. Cliquez dessus.",
+	"tourDomainAddDescription": "C'est ici que vous pourrez créer un nouveau domaine.",
+	"tourProjectsDescription": "Les projets sont des périmètres fonctionnels au sein d'un domaine. Vous en aurez besoin d'au moins un. Cliquez dessus.",
+	"tourProjectAddDescription": "C'est ici que vous pourrez créer un projet.",
+	"tourCatalogTitle": "Aperçu du Catalogue",
+	"tourCatalogDescription": "Le catalogue est l'endroit où vous pourrez importer des référentiels, des menaces, des matrices et d'autres objets prédéfinis",
+	"tourCatalogBrowseDescription": "Vous pourrez parcourir les objets chargés par catégorie et en importer de nouveaux. <b>Cliquez dessus.</b>",
+	"tourFrameworksTitle": "Référentiels",
+	"tourFrameworksDescription": "Consultez et gérez les référentiels de conformité. Vous en aurez besoin d'au moins un pour initier un audit. Cliquez dessus.",
+	"tourFrameworkAddDescription": "C'est ici que vous pourrez importer de nouveaux référentiels.",
+	"tourRiskMatricesTitle": "Matrices de Risques",
+	"tourRiskMatricesDescription": "Consultez et gérez les matrices de risques. Vous en aurez besoin d'au moins une pour initier une évaluation des risques. Cliquez dessus.",
+	"tourMatricesAddDescription": "C'est ici que vous pourrez importer de nouvelles matrices.",
+	"tourComplianceDescription": "C'est ici que vous pourrez gérer vos activités de conformité. Cliquez dessus.",
+	"tourAuditsTitle": "Audits",
+	"tourAuditsDescription": "C'est ici que vous pourrez piloter et suivre vos audits et référentiels",
+	"tourRiskDescription": "C'est ici que vous pourrez gérer votre analyse et registre des risques. Cliquez dessus.",
+	"tourRiskAssessmentTitle": "Évaluation des Risques",
+	"tourRiskAssessmentDescription": "Groupez et gérez vos analyses à travers des évaluations des risques.",
+	"tourAnalyticsTitle": "Analyses",
+	"tourAnalyticsDescription": "La section aperçu couvre vos principaux tableaux de bord et analyses.",
+	"tourAnalyticsViewDescription": "Consultez ici les analyses et rapports agrégés.",
+	"tourAssignmentsDescription": "ou suivez ici vos tâches et assignations individuelles.",
+	"tourHelpFinalTitle": "Aide & Visite",
+	"tourHelpFinalDescription": "Vous pouvez toujours redémarrer la visite d'ici !",
 	"documentationScore": "Score de documentation",
 	"implementationScore": "Score d'implémentation",
 	"useDocumentationScore": "Utiliser le score de documentation",

diff --git a/frontend/package.json b/frontend/package.json
@@ -84,7 +84,8 @@
 		"@unovis/ts": "1.4.3-beta.0",
 		"cmdk-sv": "^0.0.18",
 		"dotenv": "^16.4.7",
-		"echarts": "^5.5.1",
+		"driver.js": "^1.3.1",
+		"echarts": "^5.6.0",
 		"eslint-plugin-storybook": "^0.10.2",
 		"globals": "^15.13.0",
 		"svelte-multiselect": "^10.3.0",

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/lib/components/Forms/TextField.svelte b/frontend/src/lib/components/Forms/TextField.svelte
@@ -59,6 +59,7 @@
 			type="text"
 			class="{'input ' + _class} {classesTextField($errors)}"
 			data-testid="form-input-{field.replaceAll('_', '-')}"
+			id="form-input-{field.replaceAll('_', '-')}"
 			name={field}
 			aria-invalid={$errors ? 'true' : undefined}
 			placeholder=""

diff --git 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
@@ -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/ModelTable/Search.svelte b/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)}
 />