BC-8578 - Remove Visibility Alert From Board (#3516)

* use vuetify lang key (it's the same) * add tooltip & remove alert * capitalized draft translations
hpi-schul-cloud · Jan 27, 2025 · e2ee88c · e2ee88c
1 parent 47d5e49
commit e2ee88c
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 133 deletions.
diff --git a/src/components/molecules/Alert.vue b/src/components/molecules/Alert.vue
@@ -7,7 +7,6 @@
 		closable
 		max-width="400"
 		min-width="200"
-		:close-label="$t('common.labels.close')"
 		border="start"
 		@update:modelValue="closeNotification"
 	>

diff --git a/src/locales/de.ts b/src/locales/de.ts
@@ -378,13 +378,10 @@ export default {
 	"components.board.action.moveUp": "Nach oben verschieben",
 	"components.board.action.changeLayout": "Ansicht ändern",
 	"components.board.action.shareLink.card": "Link zur Karte kopieren",
-	"components.board.alert.info.teacher":
-		"Dieser Bereich ist sichtbar für alle Kursteilnehmenden.",
-	"components.board.alert.info.draft":
-		"Dieser Bereich ist nicht für die Kursteilnehmenden sichtbar.",
 	"components.board.column.defaultTitle": "Neuer Abschnitt",
 	"components.board.column.ghost.column.placeholder": "Abschnitt hinzufügen",
 	"components.board.column.ghost.list.placeholder": "Abschnitt hinzufügen",
+	"components.board.draftChip.tooltip": "Nur für Lehrkräfte sichtbar",
 	"components.board.error.404":
 		"Fehler 404 – Bereich mit diesem Namen wurde nicht gefunden",
 	"components.board.error.403":

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -177,8 +177,8 @@ export default {
 		"Link could not be copied to clipboard",
 	"common.words.courseGroups": "Course Groups",
 	"common.words.courses": "Courses",
-	"common.words.draft": "draft",
-	"common.words.drafts": "drafts",
+	"common.words.draft": "Draft",
+	"common.words.drafts": "Drafts",
 	"common.words.languages.de": "German",
 	"common.words.languages.en": "English",
 	"common.words.languages.es": "Spanish",
@@ -376,13 +376,10 @@ export default {
 	"components.board.action.moveUp": "Move up",
 	"components.board.action.changeLayout": "Change layout",
 	"components.board.action.shareLink.card": "Copy link to card",
-	"components.board.alert.info.teacher":
-		"This board is visible to all course participants.",
-	"components.board.alert.info.draft":
-		"This board is not visible to course participants.",
 	"components.board.column.defaultTitle": "New column",
 	"components.board.column.ghost.column.placeholder": "Add column",
 	"components.board.column.ghost.list.placeholder": "Add section",
+	"components.board.draftChip.tooltip": "Only visible to teachers",
 	"components.board.error.404":
 		"Error 404 – Board with this name was not found",
 	"components.board.error.403":

diff --git a/src/locales/es.ts b/src/locales/es.ts
@@ -179,8 +179,8 @@ export default {
 		"El enlace no se pudo copiar al portapapeles",
 	"common.words.courseGroups": "grupos de cursos",
 	"common.words.courses": "Cursos",
-	"common.words.draft": "borrador",
-	"common.words.drafts": "borradores",
+	"common.words.draft": "Borrador",
+	"common.words.drafts": "Borradores",
 	"common.words.languages.de": "Alemán",
 	"common.words.languages.en": "Inglés",
 	"common.words.languages.es": "Español",
@@ -381,13 +381,10 @@ export default {
 	"components.board.action.moveUp": "Levantar",
 	"components.board.action.changeLayout": "Cambiar vista",
 	"components.board.action.shareLink.card": "Enlace a la ficha",
-	"components.board.alert.info.teacher":
-		"Este tablero es visible para todos los participantes en el curso.",
-	"components.board.alert.info.draft":
-		"Este tablón no es visible para los participantes en el curso.",
 	"components.board.column.defaultTitle": "Nueva columna",
 	"components.board.column.ghost.column.placeholder": "Añadir columna",
 	"components.board.column.ghost.list.placeholder": "Añadir sección",
+	"components.board.draftChip.tooltip": "Sólo visible para los profesores",
 	"components.board.error.404":
 		"Error 404 – No se ha encontrado ningún tablero con este nombre",
 	"components.board.error.403":

diff --git a/src/locales/uk.ts b/src/locales/uk.ts
@@ -180,8 +180,8 @@ export default {
 		"Не вдалося скопіювати посилання в буфер обміну",
 	"common.words.courseGroups": "курсові групи",
 	"common.words.courses": "Мій курс",
-	"common.words.draft": "чернетка",
-	"common.words.drafts": "чернетки",
+	"common.words.draft": "Чернетка",
+	"common.words.drafts": "Чернетки",
 	"common.words.languages.de": "Німецька",
 	"common.words.languages.en": "Англійська",
 	"common.words.languages.es": "Іспанська",
@@ -385,11 +385,10 @@ export default {
 	"components.board.action.moveUp": "Рухатися вгору",
 	"components.board.action.changeLayout": "Змінити вигляд",
 	"components.board.action.shareLink.card": "Скопіювати посилання на Карту",
-	"components.board.alert.info.teacher": "Цю дошку бачать усі учасники курсу.",
-	"components.board.alert.info.draft": "Ця дошка невидима для учасників курсу.",
 	"components.board.column.defaultTitle": "Нова колонка",
 	"components.board.column.ghost.column.placeholder": "Додати стовпець",
 	"components.board.column.ghost.list.placeholder": "Додати розділ",
+	"components.board.draftChip.tooltip": "Видно лише вчителям",
 	"components.board.error.404":
 		"Помилка 404 – Дошки з такою назвою не знайдено",
 	"components.board.error.403":

diff --git a/src/modules/feature/board/board/Board.unit.ts b/src/modules/feature/board/board/Board.unit.ts
@@ -467,90 +467,6 @@ describe("Board", () => {
 		});
 	});
 
-	describe("Info message for teacher", () => {
-		beforeEach(() => {
-			mockedBoardPermissions.isTeacher = true;
-		});
-
-		it("should call the board notifier when the user is teacher", () => {
-			jest.useFakeTimers();
-
-			setup();
-
-			jest.runAllTimers();
-
-			expect(mockedBoardNotifierCalls.showCustomNotifier).toHaveBeenCalled();
-		});
-
-		it("should call the board notifier with draft info when board is not visible", () => {
-			jest.useFakeTimers();
-
-			setup({ isBoardVisible: false });
-
-			jest.runAllTimers();
-
-			expect(mockedBoardNotifierCalls.showCustomNotifier).toHaveBeenCalledWith(
-				"components.board.alert.info.draft",
-				"info"
-			);
-		});
-
-		it("should call the board notifier with published info when board is visible", () => {
-			jest.useFakeTimers();
-
-			setup();
-
-			jest.runAllTimers();
-
-			expect(mockedBoardNotifierCalls.showCustomNotifier).toHaveBeenCalledWith(
-				"components.board.alert.info.teacher",
-				"info"
-			);
-		});
-
-		it("should call the board notifier with published info when board becomes visible", () => {
-			jest.useFakeTimers();
-
-			const { boardStore } = setup({ isBoardVisible: false });
-			boardStore.board!.isVisible = true;
-
-			jest.runAllTimers();
-
-			expect(mockedBoardNotifierCalls.showCustomNotifier).toHaveBeenCalledWith(
-				"components.board.alert.info.teacher",
-				"info"
-			);
-		});
-
-		it("should call the board notifier with draft info when board should not be visible anymore", () => {
-			jest.useFakeTimers();
-
-			const { boardStore } = setup();
-			boardStore.board!.isVisible = false;
-
-			jest.runAllTimers();
-
-			expect(mockedBoardNotifierCalls.showCustomNotifier).toHaveBeenCalledWith(
-				"components.board.alert.info.draft",
-				"info"
-			);
-		});
-
-		it("should not call the board notifier when the user is not a teacher", () => {
-			mockedBoardPermissions.isTeacher = false;
-
-			jest.useFakeTimers();
-
-			setup();
-
-			jest.runAllTimers();
-
-			expect(
-				mockedBoardNotifierCalls.showCustomNotifier
-			).not.toHaveBeenCalled();
-		});
-	});
-
 	describe("BoardColumnGhost component", () => {
 		describe("when user has create column permission", () => {
 			it("should not be rendered on DOM", () => {

diff --git a/src/modules/feature/board/board/Board.vue b/src/modules/feature/board/board/Board.vue
@@ -139,7 +139,6 @@ import {
 	useBoardNotifier,
 	useSharedEditMode,
 } from "@util-board";
-import { useDebounceFn } from "@vueuse/core";
 import { SortableEvent } from "sortablejs";
 import { Sortable } from "sortablejs-vue3";
 import {
@@ -280,7 +279,6 @@ const onUpdateBoardVisibility = async (isVisible: boolean) => {
 		boardId: props.boardId,
 		isVisible,
 	});
-	await setAlert();
 };
 
 const onUpdateColumnTitle = async (columnId: string, newTitle: string) => {
@@ -304,7 +302,6 @@ const scrollToNodeAndFocus = (scrollTargetId: string) => {
 
 onMounted(async () => {
 	resetPageInformation();
-	setAlert();
 	useBoardInactivity();
 	const boardFetchPromise = boardStore.fetchBoardRequest({
 		boardId: props.boardId,
@@ -329,25 +326,9 @@ onUnmounted(() => {
 	resetNotifierModule();
 });
 
-const setAlert = useDebounceFn(() => {
-	if (!isTeacher) return;
-
-	if (!board.value) {
-		return;
-	}
-
-	if (!isBoardVisible.value) {
-		showCustomNotifier(t("components.board.alert.info.draft"), "info");
-	} else {
-		showCustomNotifier(t("components.board.alert.info.teacher"), "info");
-	}
-}, 150);
-
 watch(
 	() => isBoardVisible.value,
 	() => {
-		setAlert();
-
 		if (!(isBoardVisible.value || isTeacher)) {
 			router.replace({ name: "room-details", params: { id: roomId.value } });
 			applicationErrorModule.setError(

diff --git a/src/modules/feature/board/board/BoardDraftChip.unit.ts b/src/modules/feature/board/board/BoardDraftChip.unit.ts
@@ -0,0 +1,22 @@
+import {
+	createTestingI18n,
+	createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import BoardDraftChip from "./BoardDraftChip.vue";
+
+describe("@feature-board/BoardDraftChip", () => {
+	const setup = () => {
+		const wrapper = mount(BoardDraftChip, {
+			global: {
+				plugins: [createTestingI18n(), createTestingVuetify()],
+			},
+		});
+		return wrapper;
+	};
+
+	it("should render correct test", () => {
+		const wrapper = setup();
+
+		expect(wrapper.text()).toStrictEqual("common.words.draft");
+	});
+});
diff --git a/src/modules/feature/board/board/BoardDraftChip.vue b/src/modules/feature/board/board/BoardDraftChip.vue
@@ -0,0 +1,14 @@
+<template>
+	<VTooltip location="bottom" :text="$t('components.board.draftChip.tooltip')">
+		<template v-slot:activator="{ props }">
+			<VChip
+				v-bind="props"
+				size="small"
+				class="align-self-center cursor-default"
+				data-testid="board-draft-chip"
+			>
+				{{ $t("common.words.draft") }}
+			</VChip>
+		</template>
+	</VTooltip>
+</template>
diff --git a/src/modules/feature/board/board/BoardHeader.unit.ts b/src/modules/feature/board/board/BoardHeader.unit.ts
@@ -66,6 +66,10 @@ describe("BoardHeader", () => {
 				provide: {
 					[ENV_CONFIG_MODULE_KEY.valueOf()]: envConfigModuleMock,
 				},
+				stubs: {
+					VTooltip: false,
+					VOverlay: false,
+				},
 			},
 			props: {
 				title: "title-text",
@@ -308,7 +312,9 @@ describe("BoardHeader", () => {
 				{ isDraft: true }
 			);
 
-			expect(wrapper.findComponent({ name: "v-chip" }).exists()).toBe(true);
+			expect(wrapper.findComponent({ name: "BoardDraftChip" }).exists()).toBe(
+				true
+			);
 		});
 
 		it("should display 'publish' button instead of 'revert' button in menu", async () => {

diff --git a/src/modules/feature/board/board/BoardHeader.vue b/src/modules/feature/board/board/BoardHeader.vue
@@ -26,14 +26,7 @@
 			</div>
 		</InlineEditInteractionHandler>
 		<div class="d-flex">
-			<v-chip
-				v-if="isDraft"
-				size="small"
-				class="align-self-center"
-				data-testid="board-draft-chip"
-			>
-				{{ t("common.words.draft") }}
-			</v-chip>
+			<BoardDraftChip v-if="isDraft" />
 			<div class="mx-2">
 				<BoardMenu
 					v-if="hasEditPermission"
@@ -76,6 +69,7 @@ import { computed, onMounted, ref, toRef, watchEffect } from "vue";
 import { useI18n } from "vue-i18n";
 import BoardAnyTitleInput from "../shared/BoardAnyTitleInput.vue";
 import InlineEditInteractionHandler from "../shared/InlineEditInteractionHandler.vue";
+import BoardDraftChip from "./BoardDraftChip.vue";
 
 const props = defineProps({
 	boardId: {