Merge branch 'main' into CA-141-prevent-deleting-a-library-that-is-in…

…-use-in-an-assessment

backend/app_tests/api/test_api_requirement_assessments.py

@@ -113,7 +113,7 @@ def test_get_requirement_assessments(self, authenticated_client):
             },
             {
                 "folder": str(folder.id),
-                "compliance_assessment": str(compliance_assessment.id),
+                "compliance_assessment": {"id": str(compliance_assessment.id), "str": compliance_assessment.name},
                 "requirement": str(RequirementNode.objects.all()[0].id),
             },
             -1,
@@ -143,6 +143,9 @@ def test_create_requirement_assessments(self, authenticated_client):
                 "requirement": str(RequirementNode.objects.all()[0].id),
                 "security_measures": [str(security_measure.id)],
             },
+            {
+                "compliance_assessment": {"id": str(compliance_assessment.id), "str": compliance_assessment.name}
+            },
             base_count=-1,
         )
 
@@ -186,7 +189,7 @@ def test_update_requirement_assessments(self, authenticated_client):
             },
             {
                 "folder": str(Folder.get_root_folder().id),
-                "compliance_assessment": str(compliance_assessment.id),
+                "compliance_assessment": {"id": str(compliance_assessment.id), "str": compliance_assessment.name},
                 "requirement": str(RequirementNode.objects.all()[0].id),
             },
         )

backend/core/serializers.py

@@ -395,6 +395,8 @@ class Meta:
 
 class RequirementAssessmentReadSerializer(BaseModelSerializer):
     name = serializers.CharField(source="__str__")
+    compliance_assessment = FieldsRelatedField()
+
 
     class Meta:
         model = RequirementAssessment

backend/core/views.py

@@ -502,6 +502,7 @@ class SecurityMeasureViewSet(BaseModelViewSet):
         "effort",
         "risk_scenarios",
         "requirement_assessments",
+        "evidences"
     ]
     search_fields = ["name", "description", "risk_scenarios", "requirement_assessments"]
 
@@ -1161,7 +1162,7 @@ class RequirementAssessmentViewSet(BaseModelViewSet):
     """
 
     model = RequirementAssessment
-    filterset_fields = ["folder"]
+    filterset_fields = ["folder", "evidences"]
     search_fields = ["name", "description"]
 
     @action(detail=False, name="Get updatable measures")

frontend/.eslintignore

@@ -6,6 +6,8 @@ node_modules
 .env
 .env.*
 !.env.example
+/tests/reports/*
+/tests/results/*
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

frontend/.prettierignore

@@ -6,6 +6,8 @@ node_modules
 .env
 .env.*
 !.env.example
+/tests/reports/*
+/tests/results/*
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

frontend/src/lib/components/Forms/ModelForm.svelte

@@ -248,20 +248,6 @@
 			label="Domain"
 			hide={initialData.security_measures || initialData.requirement_assessments}
 		/>
-		<AutocompleteSelect
-			{form}
-			multiple
-			options={getOptions({ objects: model.foreignKeys['security_measures'] })}
-			field="security_measures"
-			label="Security measures"
-		/>
-		<AutocompleteSelect
-			{form}
-			multiple
-			options={getOptions({ objects: model.foreignKeys['requirement_assessments'] })}
-			field="requirement_assessments"
-			label="Requirement assessments"
-		/>
 		<TextField
 			{form}
 			field="link"

frontend/src/lib/components/Modals/CreateModal.svelte

@@ -33,6 +33,8 @@
 				{$modalStore[0].title ?? '(title missing)'}
 			</header>
 			<div
+				role="button"
+				tabindex="0"
 				class="flex items-center hover:text-primary-500 cursor-pointer"
 				on:click={parent.onClose}
 				on:keydown={parent.onClose}

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

@@ -5,4 +5,4 @@
 	$: display = LOCALE_DISPLAY_MAP[cell];
 </script>
 
-<span {...$$restProps}>{@html display}</span>
+<span {...$$restProps}>{display}</span>

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

@@ -77,7 +77,7 @@
 		if (['Enter', 'Space'].includes(event.code)) onRowClick(event, rowIndex);
 	}
 
-	export let identifierField: string = 'id';
+	export let identifierField = 'id';
 
 	export let deleteForm: SuperValidated<AnyZodObject> | undefined = undefined;
 

frontend/src/lib/components/TreeView/RecursiveTreeViewItem.svelte

@@ -151,13 +151,13 @@
 			}}
 		>
 			{#if typeof node.content === 'string'}
-				{@html node.content}
+				{node.content}
 			{:else}
 				<svelte:component this={node.content} {...node.contentProps} />
 			{/if}
 			<svelte:fragment slot="lead">
 				{#if typeof node.lead === 'string'}
-					{@html node.lead}
+					{node.lead}
 				{:else}
 					<svelte:component this={node.lead} {...node.leadProps} />
 				{/if}

frontend/src/lib/components/fragments/WatchlistExceptions.svelte

@@ -43,21 +43,21 @@
 							request_path
 						)}'"
 					>
-						<td scope="row" class="px-3 py-4 font-medium">
+						<th scope="row" class="px-3 py-4 font-medium">
 							{#if acceptance.approver == user.id && acceptance.state == 'submitted'}
 								<span class="mr-1 p-1 rounded-md text-xs bg-indigo-500 text-white">
 									action requested
 								</span>
 							{/if}
 							{acceptance.name}
-						</td>
-						<td class="px-3 py-4">
+						</th>
+						<th class="px-3 py-4">
 							{acceptance.folder.str}
-						</td>
-						<td class="px-3 py-4">
+						</th>
+						<th class="px-3 py-4">
 							{acceptance.approver.str}
-						</td>
-						<td class="px-3 py-4">
+						</th>
+						<th class="px-3 py-4">
 							{#if acceptanceState(acceptance.expiry_date) === 'expired'}
 								<span class="rounded bg-red-500 text-white p-1 text-xs mr-1">expired</span>
 							{:else if acceptanceState(acceptance.expiry_date) === 'upcoming'}
@@ -66,7 +66,7 @@
 								<span class="rounded bg-yellow-500 text-white p-1 text-xs mr-1">today</span>
 							{/if}
 							{formatStringToDate(acceptance.expiry_date)}
-						</td>
+						</th>
 					</tr>
 				{/each}
 			{:else}

frontend/src/lib/utils/crud.ts

@@ -270,7 +270,8 @@ export const URL_MODEL_MAP: ModelMap = {
 		selectFields: [{ field: 'status' }],
 		foreignKeyFields: [
 			{ field: 'security_measures', urlModel: 'security-measures' },
-			{ field: 'evidences', urlModel: 'evidences' }
+			{ field: 'evidences', urlModel: 'evidences' },
+			{ field: 'compliance_assessment', urlModel: 'compliance-assessments' }
 		]
 	},
 	libraries: {

frontend/src/lib/utils/csrf.ts

@@ -6,7 +6,9 @@ async function getCsrfToken() {
 			credentials: 'include'
 		}).then((res) => res.json());
 		return response.csrfToken;
-	} catch (error) {}
+	} catch (error) {
+		console.error(error);
+	}
 }
 
 export const csrfToken = await getCsrfToken();

frontend/src/lib/utils/table.ts

@@ -84,6 +84,10 @@ export const listViewFields = {
 		head: ['Name', 'Framework', 'Description', 'Project'],
 		body: ['name', 'framework', 'description', 'project']
 	},
+	'requirement-assessments': {
+		head: ['Name', 'Description', 'Compliance Assessment'],
+		body: ['name', 'description', 'compliance_assessment']
+	},
 	evidences: {
 		head: ['Name', 'File', 'Description'],
 		body: ['name', 'attachment', 'description']

frontend/src/routes/(app)/compliance-assessments/[id=uuid]/+page.svelte

@@ -49,7 +49,7 @@
 
 		if (node.children && Object.keys(node.children).length > 0) {
 			for (const childId in node.children) {
-				if (node.children.hasOwnProperty(childId)) {
+				if (Object.prototype.hasOwnProperty.call(node.children, childId)) {
 					const childNode = node.children[childId];
 					countStatus(childNode, statusCounts);
 				}

frontend/src/routes/(app)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte

@@ -10,7 +10,7 @@
 	export let security_functions: Record<string, any>[] | undefined = undefined;
 	export let children: Record<string, Record<string, unknown>> | undefined = undefined;
 	export let canEditRequirementAssessment: boolean;
-	export let status: string | undefined = undefined;
+	// export let status: string | undefined = undefined;
 	export let statusCounts: Record<string, number> | undefined;
 
 	$: hasChildren = children && Object.keys(children).length > 0;
@@ -87,7 +87,7 @@
 		{#if threats || security_functions}
 			<div
 				role="button"
-				tabindex="-1"
+				tabindex="0"
 				class="underline text-sm hover:text-primary-400 {classesShowInfoText(showInfo)}"
 				on:click={(_) => (showInfo = !showInfo)}
 				on:keydown={(_) => (showInfo = !showInfo)}

frontend/src/routes/(app)/compliance-assessments/[id=uuid]/TreeViewItemLead.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let status: string;
+	// export let status: string;
 	export let statusDisplay: string;
 	export let statusColor: string;
 	export let assessable: boolean;

frontend/src/routes/(app)/evidences/[id=uuid]/+page.server.ts

@@ -4,6 +4,9 @@ import { z } from 'zod';
 import { setError, superValidate } from 'sveltekit-superforms/server';
 import { setFlash } from 'sveltekit-flash-message/server';
 import type { PageServerLoad } from './$types';
+import type { urlModel } from '$lib/utils/types';
+import { listViewFields } from '$lib/utils/table';
+import { tableSourceMapper, type TableSource } from '@skeletonlabs/skeleton';
 
 export const load: PageServerLoad = async ({ fetch, params }) => {
 	const URLModel = 'evidences';
@@ -14,7 +17,27 @@ export const load: PageServerLoad = async ({ fetch, params }) => {
 
 	const object = await fetch(`${endpoint}object/`).then((res) => res.json());
 
-	return { URLModel, evidence, object };
+	const tables: Record<string, any> = {};
+
+	for (const key of ['security-measures', 'requirement-assessments'] as urlModel[]) {
+		const keyEndpoint = `${BASE_API_URL}/${key}/?evidences=${params.id}`;
+		const response = await fetch(keyEndpoint);
+		if (response.ok) {
+			const data = await response.json().then((data) => data.results);
+			const bodyData = tableSourceMapper(data, listViewFields[key].body);
+
+			const table: TableSource = {
+				head: listViewFields[key].head,
+				body: bodyData,
+				meta: data
+			};
+			tables[key] = table;
+		} else {
+			console.error(`Failed to fetch data for ${key}: ${response.statusText}`);
+		}
+	}
+
+	return { URLModel, evidence, object, tables };
 };
 
 export const actions: Actions = {

frontend/src/routes/(app)/evidences/[id=uuid]/+page.svelte

@@ -5,10 +5,16 @@
 	import { breadcrumbObject } from '$lib/utils/stores';
 	import { URL_MODEL_MAP } from '$lib/utils/crud';
 	import ConfirmModal from '$lib/components/Modals/ConfirmModal.svelte';
-	import type { ModalSettings, ModalComponent, ModalStore } from '@skeletonlabs/skeleton';
-	import { getModalStore } from '@skeletonlabs/skeleton';
+	import type {
+		ModalSettings,
+		ModalComponent,
+		ModalStore,
+		ToastStore
+	} from '@skeletonlabs/skeleton';
+	import { getModalStore, TabGroup, Tab, getToastStore } from '@skeletonlabs/skeleton';
 	import { isURL } from '$lib/utils/helpers';
 	import { getModelInfo } from '$lib/utils/crud.js';
+	import ModelTable from '$lib/components/ModelTable/ModelTable.svelte';
 
 	export let data: PageData;
 	breadcrumbObject.set(data.evidence);
@@ -21,6 +27,7 @@
 	let attachment: Attachment | undefined = undefined;
 
 	const modalStore: ModalStore = getModalStore();
+	const toastStore: ToastStore = getToastStore();
 
 	function modalConfirm(id: string, name: string, action: string): void {
 		const modalComponent: ModalComponent = {
@@ -55,12 +62,14 @@
 	const user = $page.data.user;
 	const model = URL_MODEL_MAP['evidences'];
 	const canEditObject: boolean = Object.hasOwn(user.permissions, `change_${model.name}`);
+
+	let tabSet = 0;
 </script>
 
 <div class="flex flex-col space-y-4">
 	<div class="card px-6 py-4 bg-white flex flex-row justify-between shadow-lg">
 		<div class="flex flex-col space-y-2">
-			{#each Object.entries(data.evidence).filter( ([key, _]) => ['name', 'description', 'folder', 'security_measures', 'requirement_assessments', 'attachment', 'link', 'comment'].includes(key) ) as [key, value]}
+			{#each Object.entries(data.evidence).filter( ([key, _]) => ['name', 'description', 'folder', 'attachment', 'link', 'comment'].includes(key) ) as [key, value]}
 				<div class="flex flex-col">
 					<div class="text-sm font-medium text-gray-800 capitalize-first">
 						{#if key === 'urn'}
@@ -123,6 +132,31 @@
 			{/if}
 		</span>
 	</div>
+	<div class="card px-6 py-4 bg-white flex flex-col shadow-lg space-y-4">
+		<TabGroup>
+			<Tab bind:group={tabSet} name="compliance_assessments_tab" value={0}>Security measures</Tab>
+			<Tab bind:group={tabSet} name="risk_assessments_tab" value={1}>Requirement assessments</Tab>
+			<svelte:fragment slot="panel">
+				{#if tabSet === 0}
+					<div
+						class="h-full flex flex-col space-y-2 variant-outline-surface rounded-container-token p-4"
+					>
+						<ModelTable source={data.tables['security-measures']} URLModel="security-measures" />
+					</div>
+				{/if}
+				{#if tabSet === 1}
+					<div
+						class="h-full flex flex-col space-y-2 variant-outline-surface rounded-container-token p-4"
+					>
+						<ModelTable
+							source={data.tables['requirement-assessments']}
+							URLModel="requirement-assessments"
+						/>
+					</div>
+				{/if}
+			</svelte:fragment>
+		</TabGroup>
+	</div>
 	{#if data.evidence.attachment}
 		<div class="card px-6 py-4 bg-white flex flex-col shadow-lg space-y-4">
 			<div class="flex flex-row justify-between">

frontend/src/routes/(app)/frameworks/[id=uuid]/TreeViewItemContent.svelte

@@ -26,8 +26,11 @@
 	</span>
 	{#if (threats && threats.length > 0) || (security_functions && security_functions.length > 0)}
 		<div
+			role="button"
+			tabindex="0"
 			class="underline text-sm hover:text-primary-400 {classesShowInfoText(showInfo)}"
 			on:click={(_) => (showInfo = !showInfo)}
+			on:keydown={(_) => (showInfo = !showInfo)}
 		>
 			<i class="text-xs fa-solid fa-info-circle" /> Learn more
 		</div>

frontend/src/routes/(app)/libraries/+page.server.ts

@@ -18,7 +18,7 @@ export const load = (async ({ fetch }) => {
 	const libraries: Library[] = await res.json().then((res) => res.results);
 
 	function countObjects(library: Library) {
-		let result: { [key: string]: any } = new Object();
+		const result: { [key: string]: any } = new Object();
 		for (const [key, value] of Object.entries(library.objects)) {
 			if (Array.isArray(value)) {
 				const str = key.charAt(0).toUpperCase() + key.slice(1).replace('_', ' ');