From bced0d3881e4e6d7e719dcfb850980a5e284437e Mon Sep 17 00:00:00 2001 From: Abderrahmane Smimite Date: Tue, 7 Jan 2025 18:34:03 +0100 Subject: [PATCH 01/23] Guided tour: experiment --- backend/ciso_assistant/settings.py | 4 +- frontend/package.json | 1 + frontend/pnpm-lock.yaml | 8 +++ .../lib/components/ModelTable/Search.svelte | 1 + .../src/lib/components/SideBar/SideBar.svelte | 61 ++++++++++++++++++- .../lib/components/SideBar/SideBarItem.svelte | 2 +- .../(internal)/[model=urlmodel]/+page.svelte | 1 + .../[model=thirdparty_urlmodels]/+page.svelte | 1 + 8 files changed, 76 insertions(+), 3 deletions(-) diff --git a/backend/ciso_assistant/settings.py b/backend/ciso_assistant/settings.py index 95cf91f0d..bd0a74f51 100644 --- 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/package.json b/frontend/package.json index 3ca8ce7c0..55b6b06d5 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -83,6 +83,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", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 0b37da127..4964e369e 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -35,6 +35,9 @@ importers: dotenv: specifier: ^16.4.7 version: 16.4.7 + driver.js: + specifier: ^1.3.1 + version: 1.3.1 echarts: specifier: ^5.5.1 version: 5.5.1 @@ -2332,6 +2335,9 @@ packages: resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==} engines: {node: '>=12'} + driver.js@1.3.1: + resolution: {integrity: sha512-MvUdXbqSgEsgS/H9KyWb5Rxy0aE6BhOVT4cssi2x2XjmXea6qQfgdx32XKVLLSqTaIw7q/uxU5Xl3NV7+cN6FQ==} + dunder-proto@1.0.0: resolution: {integrity: sha512-9+Sj30DIu+4KvHqMfLUGLFYL2PkURSYMVXJyXe92nFRvlYq5hBjLEhblKB+vkd/WVlUYMWigiY07T91Fkk0+4A==} engines: {node: '>= 0.4'} @@ -6640,6 +6646,8 @@ snapshots: dotenv@16.4.7: {} + driver.js@1.3.1: {} + dunder-proto@1.0.0: dependencies: call-bind-apply-helpers: 1.0.1 diff --git a/frontend/src/lib/components/ModelTable/Search.svelte b/frontend/src/lib/components/ModelTable/Search.svelte index 98caf7ee0..37b32d286 100644 --- 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)} /> diff --git a/frontend/src/lib/components/SideBar/SideBar.svelte b/frontend/src/lib/components/SideBar/SideBar.svelte index 13529c9cd..0dfe847cc 100644 --- a/frontend/src/lib/components/SideBar/SideBar.svelte +++ b/frontend/src/lib/components/SideBar/SideBar.svelte @@ -3,10 +3,69 @@ import SideBarHeader from './SideBarHeader.svelte'; import SideBarNavigation from './SideBarNavigation.svelte'; import SideBarToggle from './SideBarToggle.svelte'; - + import { onMount } from 'svelte'; export let open: boolean; $: classesSidebarOpen = (open: boolean) => (open ? '' : '-ml-[14rem] pointer-events-none'); + + import { driver } from 'driver.js'; + import 'driver.js/dist/driver.css'; + + const driverObj = driver(); + onMount(() => { + const driverObj = driver({ + showProgress: true, + steps: [ + { + element: '#overview', + popover: { title: "Let's start!", description: 'Click here to see the subsections' } + }, + { + element: '#myAssignments', + popover: { title: 'Your assignments', description: 'Description' } + }, + { + element: '#organization', + popover: { title: 'Title', description: 'Click here to see the subsections' } + }, + { + element: '#domains', + popover: { + title: 'Click here', + description: 'You will need to create a first domain to get started' + } + }, + { + element: '#add-button', + popover: { + title: 'Click here', + description: 'You will need to create a first domain to get started' + } + }, + { + element: '#catalog', + popover: { title: 'Click to open', description: 'Description' } + }, + { element: '#frameworks', popover: { title: 'Title', description: 'Description' } }, + { + element: '#riskMatrices', + popover: { + title: 'Title', + description: 'You need a framework and a matrix to get started' + } + }, + { element: '#compliance', popover: { title: 'Title', description: 'Description' } }, + { + element: '#complianceAssessments', + popover: { title: 'Title', description: 'Description' } + }, + { element: '#risk', popover: { title: 'Title', description: 'Description' } }, + { element: '#riskAssessments', popover: { title: 'Title', description: 'Description' } } + ] + }); + + driverObj.drive(); + }); diff --git a/frontend/src/lib/components/SideBar/SideBarFooter.svelte b/frontend/src/lib/components/SideBar/SideBarFooter.svelte index 888bc2563..6d9d94721 100644 --- a/frontend/src/lib/components/SideBar/SideBarFooter.svelte +++ b/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(), @@ -129,9 +132,10 @@ {/each} {m.guidedTour()}
Date: Thu, 9 Jan 2025 21:31:05 +0100 Subject: [PATCH 09/23] Trick to sync the highlighted zone to the proper target --- .../src/lib/components/SideBar/SideBar.svelte | 3 ++- .../SideBar/SideBarNavigation.svelte | 22 +++++++------------ frontend/src/lib/utils/stores.ts | 4 ++++ .../(internal)/[model=urlmodel]/+page.svelte | 8 +++++++ 4 files changed, 22 insertions(+), 15 deletions(-) diff --git a/frontend/src/lib/components/SideBar/SideBar.svelte b/frontend/src/lib/components/SideBar/SideBar.svelte index f095903ba..00043bd64 100644 --- a/frontend/src/lib/components/SideBar/SideBar.svelte +++ b/frontend/src/lib/components/SideBar/SideBar.svelte @@ -7,7 +7,7 @@ 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'; @@ -18,6 +18,7 @@ showProgress: true, steps: steps }); + $driverInstance = driverObj; driverObj.drive(); } onMount(() => { diff --git a/frontend/src/lib/components/SideBar/SideBarNavigation.svelte b/frontend/src/lib/components/SideBar/SideBarNavigation.svelte index d062cb2ef..4980373b2 100644 --- a/frontend/src/lib/components/SideBar/SideBarNavigation.svelte +++ b/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); + }