Add link to online docs in sidebar footer toggle menu

frontend/messages/en.json

@@ -491,5 +491,6 @@
 	"libraryAlreadyImportedError": "This library has already been imported.",
 	"invalidLibraryFileError": "Invalid library file. Please make sure the format is correct.",
 	"taintedFormMessage": "Do you want to leave this page? Changes you made may not be saved.",
-	"riskScenariosStatus": "Risk scenarios status"
+	"riskScenariosStatus": "Risk scenarios status",
+	"onlineDocs": "Online documentation"
 }

frontend/messages/fr.json

@@ -491,5 +491,6 @@
 	"libraryAlreadyImportedError": "Cette libairie a été déjà été importée.",
 	"invalidLibraryFileError": "Fichier de bibliothèque invalide. Veuillez vérifier le format du fichier.",
 	"taintedFormMessage": "Voulez-vous vraiment quitter cette page ? Toutes les données non enregistrées seront perdues.",
-	"riskScenariosStatus": "Statut des scénarios de risque"
+	"riskScenariosStatus": "Statut des scénarios de risque",
+	"onlineDocs": "Documentation en ligne"
 }

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

@@ -48,7 +48,10 @@
 	<div class="flex flex-row items-center justify-between">
 		<div class="flex flex-col w-3/4">
 			{#if $page.data.user}
-				<span class="text-gray-900 text-sm whitespace-nowrap overflow-hidden truncate w-full" data-testid="sidebar-user-name-display">
+				<span
+					class="text-gray-900 text-sm whitespace-nowrap overflow-hidden truncate w-full"
+					data-testid="sidebar-user-name-display"
+				>
 					{$page.data.user.first_name}
 					{$page.data.user.last_name}
 				</span>
@@ -90,6 +93,12 @@
 				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="about-button"><i class="fa-solid fa-circle-info mr-2" />{m.aboutCiso()}</button
 			>
+			<a
+				href="https://intuitem.gitbook.io/ciso-assistant"
+				target="_blank"
+				class="unstyled 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="docs-button"><i class="fa-solid fa-book mr-2" />{m.onlineDocs()}</a
+			>
 			<form action="/logout" method="POST">
 				<button class="w-full" type="submit" data-testid="logout-button">
 					<span

frontend/tests/functional/nav.test.ts

@@ -3,23 +3,25 @@ import { languageTag, setLanguageTag, availableLanguageTags } from '../../src/pa
 import { test, expect, setHttpResponsesListener } from '../utils/test-utils.js';
 
 test('sidebar navigation tests', async ({ logedPage, analyticsPage, sideBar, page }) => {
-    test.slow();
-    
-    await test.step('proper redirection to the analytics page after login', async () => {
-        await analyticsPage.hasUrl();
-        await analyticsPage.hasTitle();
-        setHttpResponsesListener(page);
-    });
-    
-    await test.step('navigation link are working properly', async () => {
+	test.slow();
+
+	await test.step('proper redirection to the analytics page after login', async () => {
+		await analyticsPage.hasUrl();
+		await analyticsPage.hasTitle();
+		setHttpResponsesListener(page);
+	});
+
+	await test.step('navigation link are working properly', async () => {
 		const locals = localItems(languageTag());
-    	for await (const [key, value] of sideBar.items) {            
+		for await (const [key, value] of sideBar.items) {
 			for await (const item of value) {
 				if (item.href !== '/role-assignments') {
 					await sideBar.click(key, item.href, false);
-					if (item.href === '/scoring-assistant' && await logedPage.modalTitle.isVisible()) {
+					if (item.href === '/scoring-assistant' && (await logedPage.modalTitle.isVisible())) {
 						await expect(logedPage.modalTitle).toBeVisible();
-						await expect(logedPage.modalTitle).toHaveText('Please import a risk matrix from the library to get access to this page');
+						await expect(logedPage.modalTitle).toHaveText(
+							'Please import a risk matrix from the library to get access to this page'
+						);
 						await page.mouse.click(20, 20); // click outside the modal to close it
 						await expect(logedPage.modalTitle).not.toBeVisible();
 						continue;
@@ -49,11 +51,18 @@ test('sidebar navigation tests', async ({ logedPage, analyticsPage, sideBar, pag
 		await logedPage.checkForUndefinedText();
 	});
 
+	await test.step('docs button is working properly and redirects to gitbook docs', async () => {
+		await sideBar.moreButton.click();
+		await expect(sideBar.morePanel).not.toHaveAttribute('inert');
+		await logedPage.checkForUndefinedText();
+		await expect(sideBar.docsButton).toBeVisible();
+	});
+
 	await test.step('translation panel is working properly', async () => {
 		await analyticsPage.goto();
 		for await (const languageTag of availableLanguageTags.toSorted((a, b) => {
 			// English is always tested at last to ensure a clean state at the end
-			return (a === 'en' ? 1 : (b === 'en' ? -1 : a.localeCompare(b)));
+			return a === 'en' ? 1 : b === 'en' ? -1 : a.localeCompare(b);
 		})) {
 			await sideBar.moreButton.click();
 			await expect(sideBar.morePanel).not.toHaveAttribute('inert');

frontend/tests/utils/sidebar.ts

@@ -14,6 +14,7 @@ export class SideBar {
 	readonly moreButton: Locator;
 	readonly morePanel: Locator;
 	readonly profileButton: Locator;
+	readonly docsButton: Locator;
 	readonly languageSelect: Locator;
 	readonly aboutButton: Locator;
 	readonly logoutButton: Locator;
@@ -32,6 +33,7 @@ export class SideBar {
 		this.moreButton = this.page.getByTestId('sidebar-more-btn');
 		this.morePanel = this.page.getByTestId('sidebar-more-panel');
 		this.profileButton = this.page.getByTestId('profile-button');
+		this.docsButton = this.page.getByTestId('docs-button');
 		this.languageSelect = this.page.getByTestId('language-select');
 		this.aboutButton = this.page.getByTestId('about-button');
 		this.logoutButton = this.page.getByTestId('logout-button');
@@ -43,10 +45,10 @@ export class SideBar {
 		await expect(this.morePanel).not.toHaveAttribute('inert');
 		await expect(this.logoutButton).toBeVisible();
 		await this.logoutButton.click();
-		await expect(this.page).toHaveURL(/^.*\/login$/)
+		await expect(this.page).toHaveURL(/^.*\/login$/);
 	}
 
-	async click(parent: string, tab: string, waitForURL: boolean = true) {
+	async click(parent: string, tab: string, waitForURL = true) {
 		if (!(await this.page.getByTestId('accordion-item-' + tab.substring(1)).isVisible())) {
 			await this.page.locator('#' + parent.toLowerCase().replace(' ', '-')).click();
 		}