BC-7020- Hint "Editable for all users" (#3220)

hpi-schul-cloud · May 6, 2024 · 437c1bb · 437c1bb
1 parent dda73b8
commit 437c1bb
Show file tree

Hide file tree

Showing 8 changed files with 173 additions and 106 deletions.
diff --git a/src/assets/img/collaborativeEditor.svg b/src/assets/img/collaborativeEditor.svg
diff --git a/src/locales/de.ts b/src/locales/de.ts
@@ -314,6 +314,8 @@ export default {
 	"components.cardElement.dragElement": "verschieben",
 	"components.cardElement.drawingElement": "Whiteboard",
 	"components.cardElement.collaborativeTextEditorElement": "Texteditor",
+	"components.cardElement.collaborativeTextEditorElement.alert.info.visible":
+		"Der Texteditor ist für alle Kursteilnehmenden sichtbar und bearbeitbar.",
 	"components.cardElement.fileElement.altDescription":
 		"Eine kurze Beschreibung hilft Personen, die das Bild nicht sehen können.",
 	"components.cardElement.fileElement.alternativeText": "Alternativtext",

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -311,6 +311,8 @@ export default {
 	"components.cardElement.dragElement": "Move element",
 	"components.cardElement.drawingElement": "Whiteboard",
 	"components.cardElement.collaborativeTextEditorElement": "Texteditor",
+	"components.cardElement.collaborativeTextEditorElement.alert.info.visible":
+		"This collaborative text editor is visible and editable for all course participants.",
 	"components.cardElement.fileElement.altDescription":
 		"A short description helps people who cannot see the picture.",
 	"components.cardElement.fileElement.alternativeText": "Alternative Text",

diff --git a/src/locales/es.ts b/src/locales/es.ts
@@ -317,6 +317,8 @@ export default {
 	"components.cardElement.dragElement": "Mover elemento",
 	"components.cardElement.drawingElement": "Pizarra",
 	"components.cardElement.collaborativeTextEditorElement": "Texteditor",
+	"components.cardElement.collaborativeTextEditorElement.alert.info.visible":
+		"Esta editor de texto es visible y editable para todos los participantes en el curso.",
 	"components.cardElement.fileElement.altDescription":
 		"Una breve descripción ayuda a las personas que no pueden ver la imagen.",
 	"components.cardElement.fileElement.alternativeText": "Texto alternativo",

diff --git a/src/locales/uk.ts b/src/locales/uk.ts
@@ -318,6 +318,8 @@ export default {
 	"components.cardElement.dragElement": "Перемістити елемент",
 	"components.cardElement.drawingElement": "Дошка",
 	"components.cardElement.collaborativeTextEditorElement": "Texteditor",
+	"components.cardElement.collaborativeTextEditorElement.alert.info.visible":
+		"Цей текстовий редактор є видимою і доступною для редагування для всіх учасників курсу.",
 	"components.cardElement.fileElement.altDescription":
 		"Короткий опис допомагає людям, які не бачать зображення.",
 	"components.cardElement.fileElement.alternativeText": "альтернативний текст",

diff --git a/src/modules/feature/board/shared/AddElementDialog.composable.ts b/src/modules/feature/board/shared/AddElementDialog.composable.ts
@@ -10,7 +10,8 @@ import {
 	mdiTextBoxEditOutline,
 	mdiTrayArrowUp,
 } from "@mdi/js";
-import { useSharedLastCreatedElement } from "@util-board";
+import { useBoardNotifier, useSharedLastCreatedElement } from "@util-board";
+import { useI18n } from "vue-i18n";
 import { useSharedElementTypeSelection } from "./SharedElementTypeSelection.composable";
 
 type AddCardElement = (
@@ -20,6 +21,8 @@ type AddCardElement = (
 export const useAddElementDialog = (addElementFunction: AddCardElement) => {
 	const envConfigModule = injectStrict(ENV_CONFIG_MODULE_KEY);
 	const { lastCreatedElementId } = useSharedLastCreatedElement();
+	const { showCustomNotifier } = useBoardNotifier();
+	const { t } = useI18n();
 
 	const { isDialogOpen, closeDialog, elementTypeOptions } =
 		useSharedElementTypeSelection();
@@ -29,6 +32,18 @@ export const useAddElementDialog = (addElementFunction: AddCardElement) => {
 
 		const elementData = await addElementFunction(elementType);
 		lastCreatedElementId.value = elementData?.id;
+		showNotificationByElementType(elementType);
+	};
+
+	const showNotificationByElementType = (elementType: ContentElementType) => {
+		if (elementType === ContentElementType.CollaborativeTextEditor) {
+			showCustomNotifier(
+				t(
+					"components.cardElement.collaborativeTextEditorElement.alert.info.visible"
+				),
+				"info"
+			);
+		}
 	};
 
 	const options = [

diff --git a/src/modules/feature/board/shared/AddElementDialog.composable.unit.ts b/src/modules/feature/board/shared/AddElementDialog.composable.unit.ts
@@ -3,6 +3,9 @@ import { ConfigResponse } from "@/serverApi/v3/api";
 import NotifierModule from "@/store/notifier";
 import { injectStrict } from "@/utils/inject";
 import setupStores from "@@/tests/test-utils/setupStores";
+import { createMock } from "@golevelup/ts-jest";
+import { useBoardNotifier, useSharedLastCreatedElement } from "@util-board";
+import { ref } from "vue";
 import { setupSharedElementTypeSelectionMock } from "../test-utils/sharedElementTypeSelectionMock";
 import { useAddElementDialog } from "./AddElementDialog.composable";
 
@@ -13,6 +16,31 @@ jest.mock("./SharedElementTypeSelection.composable");
 jest.mock("@/utils/inject");
 const mockedInjectStrict = jest.mocked(injectStrict);
 
+const i18nKey =
+	"components.cardElement.collaborativeTextEditorElement.alert.info.visible";
+
+const translationMap: Record<string, string> = {};
+
+jest.mock("vue-i18n", () => {
+	return {
+		...jest.requireActual("vue-i18n"),
+		useI18n: jest.fn().mockReturnValue({
+			t: (key: string) => key,
+			tc: (key: string) => key,
+			te: (key: string) => translationMap[key] !== undefined,
+		}),
+	};
+});
+
+jest.mock("@util-board");
+const mockedUseBoardNotifier = jest.mocked(useBoardNotifier);
+jest.mocked(useSharedLastCreatedElement).mockImplementation(() => {
+	return {
+		lastCreatedElementId: ref(undefined),
+		resetLastCreatedElementId: jest.fn(),
+	};
+});
+
 // simple mock, as we only need to provide the env-config-module (the concrete value is even irrelevant for the currently implemented tests)
 mockedInjectStrict.mockImplementation(() => {
 	return {
@@ -34,9 +62,18 @@ describe("ElementTypeSelection Composable", () => {
 				const addElementMock = jest.fn();
 				const elementType = ContentElementType.RichText;
 
+				const showCustomNotifierMock = jest.fn();
+				const mockedBoardNotifierCalls = createMock<
+					ReturnType<typeof useBoardNotifier>
+				>({
+					showCustomNotifier: showCustomNotifierMock,
+				});
+				mockedUseBoardNotifier.mockReturnValue(mockedBoardNotifierCalls);
+
 				return {
 					addElementMock,
 					elementType,
+					showCustomNotifierMock,
 				};
 			};
 
@@ -63,6 +100,72 @@ describe("ElementTypeSelection Composable", () => {
 
 				expect(isDialogOpen.value).toBe(false);
 			});
+
+			describe("when element type is CollaborativeTextEditor", () => {
+				const setup = () => {
+					setupSharedElementTypeSelectionMock();
+
+					const addElementMock = jest.fn();
+					const elementType = ContentElementType.CollaborativeTextEditor;
+
+					const showCustomNotifierMock = jest.fn();
+					const mockedBoardNotifierCalls = createMock<
+						ReturnType<typeof useBoardNotifier>
+					>({
+						showCustomNotifier: showCustomNotifierMock,
+					});
+					mockedUseBoardNotifier.mockReturnValue(mockedBoardNotifierCalls);
+
+					return {
+						addElementMock,
+						elementType,
+						showCustomNotifierMock,
+					};
+				};
+				it("should show Notification", async () => {
+					const { addElementMock, elementType, showCustomNotifierMock } =
+						setup();
+
+					const { onElementClick } = useAddElementDialog(addElementMock);
+
+					await onElementClick(elementType);
+
+					expect(showCustomNotifierMock).toHaveBeenCalledWith(i18nKey, "info");
+				});
+			});
+
+			describe("when element type is NOT CollaborativeTextEditor", () => {
+				const setup = () => {
+					setupSharedElementTypeSelectionMock();
+
+					const addElementMock = jest.fn();
+					const elementType = ContentElementType.RichText;
+
+					const showCustomNotifierMock = jest.fn();
+					const mockedBoardNotifierCalls = createMock<
+						ReturnType<typeof useBoardNotifier>
+					>({
+						showCustomNotifier: showCustomNotifierMock,
+					});
+					mockedUseBoardNotifier.mockReturnValue(mockedBoardNotifierCalls);
+
+					return {
+						addElementMock,
+						elementType,
+						showCustomNotifierMock,
+					};
+				};
+				it("should NOT show Notification", async () => {
+					const { addElementMock, elementType, showCustomNotifierMock } =
+						setup();
+
+					const { onElementClick } = useAddElementDialog(addElementMock);
+
+					await onElementClick(elementType);
+
+					expect(showCustomNotifierMock).toBeCalledTimes(0);
+				});
+			});
 		});
 		describe("when addElement returns error", () => {
 			const setup = () => {

diff --git a/src/modules/feature/board/test-utils/AddElementDialogMock.ts b/src/modules/feature/board/test-utils/AddElementDialogMock.ts
@@ -1,6 +1,6 @@
-import { useAddElementDialog } from "../shared/AddElementDialog.composable";
 import { jest } from "@jest/globals";
 import { Ref, ref } from "vue";
+import { useAddElementDialog } from "../shared/AddElementDialog.composable";
 
 interface Props {
 	askTypeMock?: jest.Mock;