Merge branch 'main' into N21-1990-preferred-name

# Conflicts: # src/serverApi/v3/api.ts
hpi-schul-cloud · Jan 10, 2025 · 93013fc · 93013fc
2 parents a1ec60e + 22fc9ba
commit 93013fc
Show file tree

Hide file tree

Showing 8 changed files with 169 additions and 105 deletions.
diff --git a/src/locales/de.ts b/src/locales/de.ts
@@ -1706,6 +1706,15 @@ export default {
 	"pages.roomDetails.board.defaultName": "Raum-Bereich",
 	"pages.rooms.emptyState": "Aktuell gibt es hier noch keine Räume.",
 	"pages.rooms.fab.title": "Raum erstellen",
+	"pages.rooms.infoAlert.welcome": "Willkommen in den neuen Räumen!",
+	"pages.rooms.infoAlert.welcome.collaboration":
+		"Räume werden zukünftig Funktionen aus Kursen und Teams vereinen, um mehr Möglichkeiten für das schulübergreifende Arbeiten zu bieten.",
+	"pages.rooms.infoAlert.welcome.teamsAndCourses":
+		"Teams und Kurse bleiben bestehen, bis die Inhalte in Räume überführt werden können.",
+	"pages.rooms.infoAlert.welcome.visibility":
+		"Räume sind vorerst nur für Lehrkräfte sichtbar und werden weiter ausgebaut. Weitere Information gibt es auf unserer {helpLink}. Wir freuen uns über {feedbackLink} zum aktuellen Stand.",
+	"pages.rooms.infoAlert.welcome.visibility.help": "Hilfeseite",
+	"pages.rooms.infoAlert.welcome.visibility.feedback": "Rückmeldungen",
 	"pages.rooms.members.error.load":
 		"Die Teilnehmenden-Liste konnte nicht geladen werden.",
 	"pages.rooms.members.error.add":

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -1677,6 +1677,15 @@ export default {
 	"pages.roomDetails.board.defaultName": "Room Board",
 	"pages.rooms.emptyState": "Currently there are no rooms here.",
 	"pages.rooms.fab.title": "Create room",
+	"pages.rooms.infoAlert.welcome": "Welcome to the new Rooms!",
+	"pages.rooms.infoAlert.welcome.collaboration":
+		"Rooms will combine functions from courses and teams in the future to provide more opportunities for cross-school working.",
+	"pages.rooms.infoAlert.welcome.teamsAndCourses":
+		"Teams and courses will remain until the content can be transferred to rooms.",
+	"pages.rooms.infoAlert.welcome.visibility":
+		"Rooms are currently only visible to teachers and will be further developed. Further information can be found on our {helpLink}. We look forward to receiving {feedbackLink} on the current status.",
+	"pages.rooms.infoAlert.welcome.visibility.help": "help page",
+	"pages.rooms.infoAlert.welcome.visibility.feedback": "feedback",
 	"pages.rooms.members.error.load": "The participant list could not be loaded.",
 	"pages.rooms.members.error.add": "Adding participants failed.",
 	"pages.rooms.members.error.remove": "Deleting participants failed.",

diff --git a/src/locales/es.ts b/src/locales/es.ts
@@ -1726,6 +1726,15 @@ export default {
 	"pages.roomDetails.board.defaultName": "Tablero de la sala",
 	"pages.rooms.emptyState": "Actualmente no hay salas aquí.",
 	"pages.rooms.fab.title": "Crear sala",
+	"pages.rooms.infoAlert.welcome": "¡Bienvenidos a las nuevas Salas!",
+	"pages.rooms.infoAlert.welcome.collaboration":
+		"En el futuro, las salas combinarán funciones de cursos y equipos para ofrecer más oportunidades de colaboración entre escuelas.",
+	"pages.rooms.infoAlert.welcome.teamsAndCourses":
+		"Los equipos y cursos seguirán existiendo hasta que el contenido pueda ser transferido a las salas.",
+	"pages.rooms.infoAlert.welcome.visibility":
+		"Las salas son actualmente visibles solo para los profesores y se seguirán desarrollando. Puede encontrar más información en nuestro {helpLink}. Agradecemos sus {feedbackLink} sobre el estado actual.",
+	"pages.rooms.infoAlert.welcome.visibility.help": "página de ayuda",
+	"pages.rooms.infoAlert.welcome.visibility.feedback": "comentarios",
 	"pages.rooms.members.error.load":
 		"No se pudo cargar la lista de participantes.",
 	"pages.rooms.members.error.add": "Error al agregar participantes.",

diff --git a/src/locales/uk.ts b/src/locales/uk.ts
@@ -1705,6 +1705,15 @@ export default {
 	"pages.roomDetails.board.defaultName": "Космічна дошка",
 	"pages.rooms.emptyState": "Зараз тут немає кімнат",
 	"pages.rooms.fab.title": "Створити кімнату",
+	"pages.rooms.infoAlert.welcome": "Ласкаво просимо до нових Кімнат!",
+	"pages.rooms.infoAlert.welcome.collaboration":
+		"У майбутньому кімнати об'єднають функції курсів і команд, щоб запропонувати більше можливостей для міжшкільної співпраці.",
+	"pages.rooms.infoAlert.welcome.teamsAndCourses":
+		"Команди та курси залишатимуться, доки вміст не буде перенесено до кімнат.",
+	"pages.rooms.infoAlert.welcome.visibility":
+		"Кімнати наразі видимі лише для вчителів і будуть далі розвиватися. Додаткову інформацію можна знайти на нашій {helpLink}. Ми будемо вдячні за ваші {feedbackLink} щодо поточного стану.",
+	"pages.rooms.infoAlert.welcome.visibility.help": "Сторінка допомоги",
+	"pages.rooms.infoAlert.welcome.visibility.feedback": "відгуки",
 	"pages.rooms.members.error.load": "Не вдалося завантажити список учасників.",
 	"pages.rooms.members.error.add": "Не вдалося додати учасників.",
 	"pages.rooms.members.error.remove": "Не вдалося видалити учасників.",

diff --git a/src/modules/page/room/RoomMembers.page.unit.ts b/src/modules/page/room/RoomMembers.page.unit.ts
@@ -17,7 +17,6 @@ import EnvConfigModule from "@/store/env-config";
 import setupStores from "@@/tests/test-utils/setupStores";
 import { ref } from "vue";
 import { RoleName, RoomDetailsResponse } from "@/serverApi/v3";
-import vueDompurifyHTMLPlugin from "vue-dompurify-html";
 import { roomFactory } from "@@/tests/test-utils/factory/room";
 import { VBtn, VDialog } from "vuetify/lib/components/index.mjs";
 import { AddMembers, MembersTable } from "@feature-room";
@@ -97,7 +96,6 @@ describe("RoomMembersPage", () => {
 					}),
 					createTestingI18n(),
 					createTestingVuetify(),
-					vueDompurifyHTMLPlugin,
 				],
 			},
 		});

diff --git a/src/modules/page/room/Rooms.page.unit.ts b/src/modules/page/room/Rooms.page.unit.ts
@@ -16,19 +16,14 @@ import {
 import setupStores from "@@/tests/test-utils/setupStores";
 import { useRoomsState } from "@data-room";
 import { createMock } from "@golevelup/ts-jest";
-import { flushPromises } from "@vue/test-utils";
-import { useTitle } from "@vueuse/core";
 import { ref } from "vue";
 import { RouteLocation, Router, useRoute, useRouter } from "vue-router";
 import RoomsPage from "./Rooms.page.vue";
-
-jest.mock("@vueuse/core", () => {
-	return {
-		...jest.requireActual("@vueuse/core"),
-		useTitle: jest.fn(),
-	};
-});
-jest.mocked(useTitle).mockReturnValue(ref(null));
+import { mdiPlus } from "@icons/material";
+import DefaultWireframe from "@/components/templates/DefaultWireframe.vue";
+import { RoomGrid } from "@feature-room";
+import ImportFlow from "@/components/share/ImportFlow.vue";
+import InfoAlert from "@/modules/ui/alert/InfoAlert.vue";
 
 jest.mock("vue-router");
 const useRouteMock = useRoute as jest.Mock;
@@ -75,39 +70,46 @@ describe("RoomsPage", () => {
 					[LOADING_STATE_MODULE_KEY]: loadingState,
 					[NOTIFIER_MODULE_KEY]: notifierModuleMock,
 				},
+				stubs: { ImportFlow: true },
 			},
 		});
-		const wrapperVM = wrapper.vm as unknown as {
-			pageTitle: string;
-			fabItem: {
-				icon: string;
-				title: string;
-				to: string;
-				ariaLabel: string;
-				testId: string;
-			};
-		};
 
 		return {
 			wrapper,
-			wrapperVM,
 			notifierModuleMock,
 			router,
 		};
 	};
 
 	describe("when the page is mounted", () => {
-		it("should be found in the dom", async () => {
+		it("should be found in the dom", () => {
 			const { wrapper } = setup();
 
 			expect(wrapper.exists()).toBe(true);
 		});
 
-		it("should have the correct title", async () => {
-			const { wrapperVM } = setup();
-			await flushPromises();
-			expect(useTitle).toHaveBeenCalled();
-			expect(wrapperVM.pageTitle).toContain("pages.rooms.title");
+		it("should have the correct page title", () => {
+			setup();
+
+			expect(document.title).toContain("pages.rooms.title");
+		});
+
+		it("should render info alert", () => {
+			const { wrapper } = setup();
+			const alert = wrapper.findComponent(InfoAlert);
+
+			expect(alert.exists()).toBe(true);
+
+			const expectedListHeaderTexts = "pages.rooms.infoAlert.welcome";
+			const expectedListText = [
+				"pages.rooms.infoAlert.welcome.collaboration",
+				"pages.rooms.infoAlert.welcome.teamsAndCourses",
+				"pages.rooms.infoAlert.welcome.visibility",
+			].join("");
+
+			const expectedInfoText = `${expectedListHeaderTexts} ${expectedListText}`;
+
+			expect(alert.text()).toBe(expectedInfoText);
 		});
 	});
 
@@ -126,23 +128,24 @@ describe("RoomsPage", () => {
 
 		it("should activate import flow", () => {
 			const { wrapper } = setupImportMode();
-			const importFLow = wrapper.findComponent({ name: "ImportFlow" });
+			const importFLow = wrapper.findComponent(ImportFlow);
 
 			expect(importFLow.props().isActive).toBe(true);
 		});
 
 		it("should pass the token to the import flow", () => {
 			const { wrapper, token } = setupImportMode();
-			const importFLow = wrapper.findComponent({ name: "ImportFlow" });
+			const importFLow = wrapper.findComponent(ImportFlow);
 
 			expect(importFLow.props().token).toBe(token);
 		});
 
 		describe("when the import flow succeeded", () => {
-			it("should notify about successful import", () => {
+			it("should notify about successful import", async () => {
 				const { wrapper, notifierModuleMock } = setupImportMode();
-				const importFLow = wrapper.findComponent({ name: "ImportFlow" });
-				importFLow.vm.$emit("success", "newName", "newId");
+				const importFlow = wrapper.findComponent(ImportFlow);
+
+				importFlow.vm.$emit("success", "newName", "newId");
 
 				expect(notifierModuleMock.show).toHaveBeenCalledWith(
 					expect.objectContaining({
@@ -152,10 +155,11 @@ describe("RoomsPage", () => {
 				);
 			});
 
-			it("should go to the room details page", () => {
+			it("should go to the room details page", async () => {
 				const { wrapper, router } = setupImportMode();
-				const importFLow = wrapper.findComponent({ name: "ImportFlow" });
-				importFLow.vm.$emit("success", "newName", "newId");
+				const importFlow = wrapper.findComponent(ImportFlow);
+
+				importFlow.vm.$emit("success", "newName", "newId");
 
 				expect(router.replace).toHaveBeenCalledWith({
 					name: "room-details",
@@ -177,19 +181,25 @@ describe("RoomsPage", () => {
 			});
 
 			it("should have the correct props", async () => {
-				const { wrapper, wrapperVM } = setup();
-				const wireframe = wrapper.findComponent({
-					name: "DefaultWireframe",
-				});
+				const { wrapper } = setup();
+				const wireframe = wrapper.findComponent(DefaultWireframe);
+
+				const expectedFabItems = {
+					icon: mdiPlus,
+					title: "common.actions.create",
+					to: "/rooms/new",
+					ariaLabel: "pages.rooms.fab.title",
+					dataTestId: "fab-add-room",
+				};
 
-				expect(wireframe.vm["fab-items"]).toBe(wrapperVM.fabItem);
+				expect(wireframe.props("fabItems")).toEqual(expectedFabItems);
 			});
 		});
 
 		describe("RoomGrid", () => {
 			it("should be found in the dom", async () => {
 				const { wrapper } = setup();
-				const roomGrid = wrapper.findComponent({ name: "RoomGrid" });
+				const roomGrid = wrapper.findComponent(RoomGrid);
 
 				expect(roomGrid.exists()).toBe(true);
 			});

diff --git a/src/modules/page/room/Rooms.page.vue b/src/modules/page/room/Rooms.page.vue
@@ -1,8 +1,43 @@
 <template>
-	<DefaultWireframe max-width="short" :fab-items="fabAction">
+	<DefaultWireframe max-width="nativ" :fab-items="fabAction">
 		<template #header>
 			<h1 class="text-h3 mb-4">{{ t("pages.rooms.title") }}</h1>
 		</template>
+		<InfoAlert class="mb-14">
+			{{ t("pages.rooms.infoAlert.welcome") }}
+
+			<ul class="mt-1 pl-4">
+				<li>{{ t("pages.rooms.infoAlert.welcome.collaboration") }}</li>
+				<li>{{ t("pages.rooms.infoAlert.welcome.teamsAndCourses") }}</li>
+				<li>
+					<i18n-t
+						keypath="pages.rooms.infoAlert.welcome.visibility"
+						scope="global"
+					>
+						<template #helpLink>
+							<a
+								href="/help/confluence/375458794"
+								target="_blank"
+								rel="noopener"
+								:aria-label="helpAriaLabel"
+							>
+								{{ t("pages.rooms.infoAlert.welcome.visibility.help") }}
+							</a>
+						</template>
+						<template #feedbackLink>
+							<a
+								href="/help/contact"
+								target="_blank"
+								rel="noopener"
+								:aria-label="feedbackAriaLabel"
+							>
+								{{ t("pages.rooms.infoAlert.welcome.visibility.feedback") }}
+							</a>
+						</template>
+					</i18n-t>
+				</li>
+			</ul>
+		</InfoAlert>
 		<RoomGrid />
 		<ImportFlow
 			:is-active="isImportMode"
@@ -27,6 +62,7 @@ import { computed, onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 import { BoardExternalReferenceType } from "@/serverApi/v3";
+import { InfoAlert } from "@ui-alert";
 
 const { t } = useI18n();
 const route = useRoute();
@@ -80,4 +116,14 @@ const showImportSuccess = (newName: string) => {
 		timeout: 5000,
 	});
 };
+
+const helpAriaLabel = computed(
+	() =>
+		`${t("pages.rooms.infoAlert.welcome.visibility.help")}, ${t("common.ariaLabel.newTab")}`
+);
+
+const feedbackAriaLabel = computed(
+	() =>
+		`${t("pages.rooms.infoAlert.welcome.visibility.feedback")}, ${t("common.ariaLabel.newTab")}`
+);
 </script>