BC-11012 - Room Bug-fixes (#3979)

- fix: boardtitle - enter-key ends edit mode
- add top padding to the three-dot menu 
- fix breadcrumbs
- reset room store after dialog 
- fix bullet points cut off on mobile
- remove tooltip from board draft chip
- fix some i18n values
 - fix ghost effect on changeRole dialog

Author: muratmerdoglu-dp

src/locales/de.ts

@@ -1820,7 +1820,7 @@ export default {
 	"pages.rooms.members.handOverAlert.confirm.label":
 		"Bei Übertragung dieser Berechtigung an {memberFullName} verliert {roomOwner} das Recht, den Raum zu löschen.",
 	"pages.rooms.members.handOverAlert.confirm.label.subText":
-		"Diese Aktion kann nur von {memberFullName} rückgängig gemacht werden.",
+		"Diese Aktion kann nur von {memberFullName} oder der schuladministrierenden Person rückgängig gemacht werden.",
 	"pages.rooms.members.inviteMember.step.prepare.title": "Einladungslink erstellen",
 	"pages.rooms.members.inviteMember.firstStep.subTitle":
 		"Im nächsten Schritt wird ein Link erstellt, mit dem der Raum betreten	werden kann.",

src/locales/en.ts

@@ -1791,7 +1791,8 @@ export default {
 		"{roomOwner} loses the “Own” permissions and receives the “Administer” permission.",
 	"pages.rooms.members.handOverAlert.confirm.label":
 		"If this permission is transferred to {memberFullName}, {roomOwner} loses the right to delete the room.",
-	"pages.rooms.members.handOverAlert.confirm.label.subText": "This action can only be undone by {memberFullName}.",
+	"pages.rooms.members.handOverAlert.confirm.label.subText":
+		"This action can only be undone by {memberFullName} or a school administrator.",
 	"pages.rooms.members.inviteMember.step.prepare.title": "Create invitation link",
 	"pages.rooms.members.inviteMember.firstStep.subTitle":
 		"The next step is to create a link, which can be used to enter the room.",

src/locales/es.ts

@@ -1833,7 +1833,7 @@ export default {
 	"pages.rooms.members.handOverAlert.confirm.label":
 		"Si esta autorización se transfiere a {memberFullName}, {roomOwner} pierde el derecho a eliminar la sala.",
 	"pages.rooms.members.handOverAlert.confirm.label.subText":
-		"Esta acción sólo puede ser deshecha por {memberFullName}.",
+		"Esta acción sólo puede ser deshecha por {memberFullName} o el administrador de la escuela.",
 	"pages.rooms.members.inviteMember.step.prepare.title": "Crear enlace de invitación",
 	"pages.rooms.members.inviteMember.firstStep.subTitle":
 		"El siguiente paso es crear un enlace, que se puede utilizar para entrar en la sala.",

src/locales/uk.ts

@@ -1806,7 +1806,8 @@ export default {
 		"{roomOwner} втрачає права «Власник» і отримує права «Адміністратор».",
 	"pages.rooms.members.handOverAlert.confirm.label":
 		"Якщо цей дозвіл буде передано {memberFullName}, {roomOwner} втратить право видаляти кімнату.",
-	"pages.rooms.members.handOverAlert.confirm.label.subText": "Ця дія може бути скасована лише {memberFullName}.",
+	"pages.rooms.members.handOverAlert.confirm.label.subText":
+		"Ця дія може бути скасована лише {memberFullName} або адміністратор школи.",
 	"pages.rooms.members.inviteMember.step.prepare.title": "Створити посилання для запрошення",
 	"pages.rooms.members.inviteMember.firstStep.subTitle":
 		"Наступним кроком буде створення посилання, за яким можна буде увійти в кімнату.",

src/modules/feature/board/board/BoardColumnHeader.unit.ts

@@ -14,6 +14,7 @@ import {
 } from "@ui-kebab-menu";
 import { useCourseBoardEditMode } from "@util-board";
 import { shallowMount } from "@vue/test-utils";
+import { flatten } from "lodash";
 import { computed, nextTick, ref } from "vue";
 
 vi.mock("@data-board/BoardPermissions.composable");
@@ -79,14 +80,28 @@ describe("BoardColumnHeader", () => {
 	});
 
 	describe("when the title updated", () => {
-		it("should emit 'update:title'", () => {
+		it("should not emit 'update:title' immediatly", async () => {
 			const wrapper = setup();
 
+			const newTitle = "New column title";
 			const titleInput = wrapper.findComponent(BoardAnyTitleInput);
-			titleInput.vm.$emit("update:value");
+			titleInput.vm.$emit("update:value", newTitle);
 
-			const emitted = wrapper.emitted();
-			expect(emitted["update:title"]).toBeDefined();
+			const emittedUpdateTitle = wrapper.emitted("update:title");
+			expect(emittedUpdateTitle).toBeUndefined();
+		});
+
+		it("should emit 'update:title' after debounce time", async () => {
+			vi.useFakeTimers();
+			const wrapper = setup();
+
+			const newTitle = "New column title";
+			const titleInput = wrapper.findComponent(BoardAnyTitleInput);
+			titleInput.vm.$emit("update:value", newTitle);
+			await vi.advanceTimersByTimeAsync(3000);
+
+			const emittedUpdateTitle = wrapper.emitted("update:title");
+			expect(flatten(emittedUpdateTitle)).toStrictEqual([newTitle]);
 		});
 	});
 

src/modules/feature/board/board/BoardColumnHeader.vue

@@ -10,7 +10,7 @@
 					@move:column-keyboard="onMoveColumnKeyboard"
 				>
 					<BoardAnyTitleInput
-						:value="title"
+						:value="updatedTitle"
 						:empty-value-fallback="t('components.board.column.defaultTitle')"
 						:data-testid="`column-title-${index}`"
 						scope="column"
@@ -58,7 +58,8 @@ import {
 	KebabMenuActionMoveUp,
 	KebabMenuActionRename,
 } from "@ui-kebab-menu";
-import { ref, toRef } from "vue";
+import { watchDebounced } from "@vueuse/core";
+import { ref, toRef, watch } from "vue";
 import { useI18n } from "vue-i18n";
 
 const props = defineProps({
@@ -81,6 +82,9 @@ const emit = defineEmits([
 const { t } = useI18n();
 
 const columnId = toRef(props, "columnId");
+const columnTitle = toRef(props, "title");
+const updatedTitle = ref(columnTitle.value);
+const lastEmittedTitle = ref(columnTitle.value);
 const { hasEditPermission, hasDeletePermission } = useBoardPermissions();
 const { isEditMode, startEditMode, stopEditMode } = useCourseBoardEditMode(columnId.value);
 
@@ -94,6 +98,7 @@ const onStartEditMode = () => {
 
 const onEndEditMode = () => {
 	if (!hasEditPermission.value) return;
+	emitTitleUpdate();
 	stopEditMode();
 };
 
@@ -130,5 +135,18 @@ const onMoveColumnRight = () => emitIfNotListBoard("move:column-right");
 const onMoveColumnDown = () => emit("move:column-down");
 const onMoveColumnUp = () => emit("move:column-up");
 
-const onUpdateTitle = (newTitle: string) => emit("update:title", newTitle);
+const onUpdateTitle = (newTitle: string) => (updatedTitle.value = newTitle);
+
+const emitTitleUpdate = () => {
+	if (lastEmittedTitle.value !== updatedTitle.value) {
+		emit("update:title", updatedTitle.value);
+		lastEmittedTitle.value = updatedTitle.value;
+	}
+};
+
+watchDebounced(updatedTitle, emitTitleUpdate, { debounce: 500, maxWait: 2000 });
+watch(columnTitle, (newVal) => {
+	updatedTitle.value = newVal;
+	lastEmittedTitle.value = newVal;
+});
 </script>

src/modules/feature/board/board/BoardColumnInteractionHandler.unit.ts

@@ -6,6 +6,9 @@ describe("BoardColumnInteractionHandler", () => {
 	const setup = (props: { isEditMode: boolean }) => {
 		document.body.setAttribute("data-app", "true");
 		const wrapper = shallowMount(BoardColumnInteractionHandler, {
+			slots: {
+				default: `<button data-testid="button">Menu representative</button>`,
+			},
 			global: {
 				plugins: [createTestingI18n()],
 			},
@@ -22,7 +25,6 @@ describe("BoardColumnInteractionHandler", () => {
 	});
 
 	describe("keyboard events", () => {
-		// TODO: add more keypress events
 		describe("when arrow keys pressed", () => {
 			it.each(["left", "right"])(
 				"should emit 'move:column-keyboard' event with '%s' key stroke when it is not in edit mode",
@@ -38,5 +40,54 @@ describe("BoardColumnInteractionHandler", () => {
 				}
 			);
 		});
+
+		describe("when enter key is pressed", () => {
+			describe("when being in edit mode", () => {
+				it("should end edit mode", async () => {
+					const wrapper = setup({ isEditMode: true });
+					const element = wrapper.find("[data-testid=inline-edit-interaction-handler]");
+
+					await element.trigger("keydown.enter");
+
+					const emitted = wrapper.emitted("end-edit-mode");
+					expect(emitted?.length).toBe(1);
+				});
+			});
+
+			describe("when being not in edit mode", () => {
+				it("should start edit mode", async () => {
+					const wrapper = setup({ isEditMode: false });
+					const element = wrapper.find("[data-testid=inline-edit-interaction-handler]");
+
+					await element.trigger("keydown.enter");
+
+					const emitted = wrapper.emitted("start-edit-mode");
+					expect(emitted?.length).toBe(1);
+				});
+
+				describe("when focus is on a button", () => {
+					it("should not start edit mode", async () => {
+						const wrapper = setup({ isEditMode: false });
+						const element = wrapper.find("[data-testid=button]");
+						await element.trigger("keydown.enter");
+
+						const emitted = wrapper.emitted("start-edit-mode");
+						expect(emitted).toBeUndefined();
+					});
+				});
+			});
+		});
+
+		describe("when tab key is pressed", () => {
+			it("should end edit mode", async () => {
+				const wrapper = setup({ isEditMode: true });
+				const element = wrapper.find("[data-testid=event-handle]");
+
+				await element.trigger("keydown.tab");
+
+				const emitted = wrapper.emitted("end-edit-mode");
+				expect(emitted?.length).toBe(1);
+			});
+		});
 	});
 });

src/modules/feature/board/board/BoardColumnInteractionHandler.vue

@@ -1,16 +1,16 @@
 <template>
 	<InlineEditInteractionHandler
+		data-testid="inline-edit-interaction-handler"
 		:is-edit-mode="isEditMode"
 		:tabindex="0"
 		@start-edit-mode="onStartEditMode"
 		@end-edit-mode="onEndEditMode"
-		@keydown.enter="onKeydownEnter"
+		@keydown.enter.prevent="onKeydownEnter"
 	>
 		<div
 			data-testid="event-handle"
 			@keydown.left.right.capture="onKeydownArrow"
-			@keydown.tab.capture="onKeydownTab"
-			@keydown.enter.capture="onKeydownEnter"
+			@keydown.tab.capture.prevent="onKeydownTab"
 		>
 			<slot />
 		</div>
@@ -50,7 +50,8 @@ const onKeydownEnter = (event: KeyboardEvent) => {
 	}
 	if (!props.isEditMode) {
 		emit("start-edit-mode");
-		event.preventDefault();
+	} else {
+		emit("end-edit-mode");
 	}
 };