From 6178f20330179074d1df5a93deec57669aa3e26c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marvin=20=C3=96hlerking?=
 <103562092+MarvinOehlerkingCap@users.noreply.github.com>
Date: Thu, 22 Aug 2024 10:25:38 +0200
Subject: [PATCH] N21-2031 Placeholder element for deleted tools in boards
 (#3363)

---
 config/webpack/webpack.common.js              |   3 +
 .../ExternalToolSelectionRow.vue              |   2 +-
 src/locales/de.ts                             |   3 +
 src/locales/en.ts                             |   3 +
 src/locales/es.ts                             |   4 +
 src/locales/uk.ts                             |   3 +
 .../DeletedElement.unit.ts                    | 188 ++++++++++
 .../board-deleted-element/DeletedElement.vue  |  71 ++++
 .../DeletedElementMenu.unit.ts                |  47 +++
 .../DeletedElementMenu.vue                    |  20 ++
 .../feature/board-deleted-element/index.ts    |   3 +
 src/modules/feature/board/card/CardHost.vue   |   8 +-
 .../board/card/ContentElementList.unit.ts     |   5 +
 .../feature/board/card/ContentElementList.vue | 326 ++++++++----------
 src/modules/ui/board/BoardMenu.vue            |   7 +-
 src/modules/ui/board/board-menu-scope.ts      |   3 +-
 src/serverApi/v3/api.ts                       |  67 +++-
 tsconfig.json                                 |   1 +
 18 files changed, 573 insertions(+), 191 deletions(-)
 create mode 100644 src/modules/feature/board-deleted-element/DeletedElement.unit.ts
 create mode 100644 src/modules/feature/board-deleted-element/DeletedElement.vue
 create mode 100644 src/modules/feature/board-deleted-element/DeletedElementMenu.unit.ts
 create mode 100644 src/modules/feature/board-deleted-element/DeletedElementMenu.vue
 create mode 100644 src/modules/feature/board-deleted-element/index.ts

diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js
index 3aa8238d8d..72f1228b4c 100644
--- a/config/webpack/webpack.common.js
+++ b/config/webpack/webpack.common.js
@@ -144,6 +144,9 @@ module.exports = {
 			"@feature-board-collaborative-text-editor-element": getDir(
 				"src/modules/feature/board-collaborative-text-editor-element"
 			),
+			"@feature-board-deleted-element": getDir(
+				"src/modules/feature/board-deleted-element"
+			),
 			"@feature-course-sync": getDir("src/modules/feature/course-sync"),
 			"@feature-board": getDir("src/modules/feature/board"),
 			"@feature-editor": getDir("src/modules/feature/editor"),
diff --git a/src/components/external-tools/configuration/ExternalToolSelectionRow.vue b/src/components/external-tools/configuration/ExternalToolSelectionRow.vue
index 2b2674d381..845d18aaf4 100644
--- a/src/components/external-tools/configuration/ExternalToolSelectionRow.vue
+++ b/src/components/external-tools/configuration/ExternalToolSelectionRow.vue
@@ -16,7 +16,7 @@
 
 <script setup lang="ts">
 import { ExternalToolConfigurationTemplate } from "@data-external-tool";
-import { defineProps, PropType } from "vue";
+import { PropType } from "vue";
 
 defineProps({
 	item: {
diff --git a/src/locales/de.ts b/src/locales/de.ts
index ba16980b67..0f5aa0aa8d 100644
--- a/src/locales/de.ts
+++ b/src/locales/de.ts
@@ -328,6 +328,7 @@ export default {
 	"components.board.menu.fileElement": "Datei-Einstellungen",
 	"components.board.menu.linkElement": "Link-Einstellungen",
 	"components.board.menu.submissionElement": "Abgabe-Einstellungen",
+	"components.board.menu.deletedElement": "Gelöschter-Inhalt-Einstellungen",
 	"components.board.notifications.errors.fileNameExists":
 		"Es existiert bereits eine Datei mit diesem Namen.",
 	"components.board.notifications.errors.fileServiceNotAvailable":
@@ -421,6 +422,8 @@ export default {
 	"components.cardElement.titleElement.validation.required":
 		"Bitte Titel angeben.",
 	"components.cardElement.titleElement": "Titelelement",
+	"components.cardElement.deletedElement.warning.externalToolElement":
+		"Tool {toolName} nicht verfügbar. Bitte an Schuladministrator:in wenden.",
 	"components.datePicker.validation.format":
 		"Bitte Format DD.MM.YYYY verwenden.",
 	"components.datePicker.validation.required": "Bitte Datum angeben",
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 3a6faaefe2..80f0285a97 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -325,6 +325,7 @@ export default {
 	"components.board.menu.fileElement": "File settings",
 	"components.board.menu.linkElement": "Link settings",
 	"components.board.menu.submissionElement": "Submission settings",
+	"components.board.menu.deletedElement": "Deleted content settings",
 	"components.board.notifications.errors.fileNameExists":
 		"A file with this name already exists.",
 	"components.board.notifications.errors.fileServiceNotAvailable":
@@ -418,6 +419,8 @@ export default {
 	"components.cardElement.titleElement.validation.required":
 		"Please enter a title.",
 	"components.cardElement.titleElement": "Title element",
+	"components.cardElement.deletedElement.warning.externalToolElement":
+		"Tool {toolName} not available. Please contact the school administrator.",
 	"components.datePicker.validation.format": "Please use format DD.MM.YYYY",
 	"components.datePicker.validation.required": "Please enter a date.",
 	"components.dateTimePicker.messages.dateInPast":
diff --git a/src/locales/es.ts b/src/locales/es.ts
index 1a40317076..9ba667be81 100644
--- a/src/locales/es.ts
+++ b/src/locales/es.ts
@@ -332,6 +332,8 @@ export default {
 	"components.board.menu.fileElement": "Configuración del archivo",
 	"components.board.menu.linkElement": "Configuración del enlace",
 	"components.board.menu.submissionElement": "Configuración del envío",
+	"components.board.menu.deletedElement":
+		"Configuración de contenido eliminado",
 	"components.board.notifications.errors.fileNameExists":
 		"Ya existe un archivo con este nombre.",
 	"components.board.notifications.errors.fileServiceNotAvailable":
@@ -425,6 +427,8 @@ export default {
 	"components.cardElement.titleElement.validation.required":
 		"Por favor ingrese un título.",
 	"components.cardElement.titleElement": "Elemento título",
+	"components.cardElement.deletedElement.warning.externalToolElement":
+		"La herramienta {toolName} no está disponible. Por favor comuníquese con el administrador de la escuela.",
 	"components.datePicker.validation.format":
 		"Por favor utilice el formato DD.MM.YYYY",
 	"components.datePicker.validation.required": "Por favor ingrese una fecha.",
diff --git a/src/locales/uk.ts b/src/locales/uk.ts
index fab31b3642..7dbdced9a6 100644
--- a/src/locales/uk.ts
+++ b/src/locales/uk.ts
@@ -333,6 +333,7 @@ export default {
 	"components.board.menu.fileElement": "Налаштування файлу",
 	"components.board.menu.linkElement": "Налаштування посилання",
 	"components.board.menu.submissionElement": "Налаштування Подання",
+	"components.board.menu.deletedElement": "Видалені налаштування вмісту",
 	"components.board.notifications.errors.fileNameExists":
 		"Файл з такою назвою вже існує.",
 	"components.board.notifications.errors.fileServiceNotAvailable":
@@ -427,6 +428,8 @@ export default {
 	"components.cardElement.titleElement.validation.required":
 		"Будь ласка, введіть назву.",
 	"components.cardElement.titleElement": "Елемент заголовка",
+	"components.cardElement.deletedElement.warning.externalToolElement":
+		"Інструмент {toolName} недоступний. Будь ласка, зверніться до адміністратора школи.",
 	"components.datePicker.validation.format": "Використовуйте формат ДД.ММ.РРРР",
 	"components.datePicker.validation.required": "Будь ласка, введіть дату.",
 	"components.dateTimePicker.messages.dateInPast": "Дата і час у минулому.",
diff --git a/src/modules/feature/board-deleted-element/DeletedElement.unit.ts b/src/modules/feature/board-deleted-element/DeletedElement.unit.ts
new file mode 100644
index 0000000000..b573e6c11d
--- /dev/null
+++ b/src/modules/feature/board-deleted-element/DeletedElement.unit.ts
@@ -0,0 +1,188 @@
+import { ContentElementType, DeletedElementResponse } from "@/serverApi/v3";
+import { timestampsResponseFactory } from "@@/tests/test-utils";
+import {
+	createTestingI18n,
+	createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import { useBoardFocusHandler, useBoardPermissions } from "@data-board";
+import { createMock, DeepMocked } from "@golevelup/ts-jest";
+import { WarningAlert } from "@ui-alert";
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import { ComponentProps } from "vue-component-type-helpers";
+import DeletedElement from "./DeletedElement.vue";
+import DeletedElementMenu from "./DeletedElementMenu.vue";
+
+jest.mock("@data-board");
+
+const DELETED_ELEMENT: DeletedElementResponse = {
+	id: "deleted-element-id",
+	content: {
+		deletedElementType: ContentElementType.ExternalTool,
+		title: "Deleted Tool",
+	},
+	type: ContentElementType.Deleted,
+	timestamps: timestampsResponseFactory.build(),
+};
+
+describe("DeletedElement", () => {
+	let useBoardFocusHandlerMock: DeepMocked<
+		ReturnType<typeof useBoardFocusHandler>
+	>;
+	let useBoardPermissionsMock: DeepMocked<
+		ReturnType<typeof useBoardPermissions>
+	>;
+
+	beforeEach(() => {
+		useBoardFocusHandlerMock =
+			createMock<ReturnType<typeof useBoardFocusHandler>>();
+		useBoardPermissionsMock = createMock<
+			ReturnType<typeof useBoardPermissions>
+		>({ isTeacher: true });
+
+		jest.mocked(useBoardFocusHandler).mockReturnValue(useBoardFocusHandlerMock);
+		jest.mocked(useBoardPermissions).mockReturnValue(useBoardPermissionsMock);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	const getWrapper = (
+		props: ComponentProps<typeof DeletedElement> = {
+			element: DELETED_ELEMENT,
+			isEditMode: false,
+		}
+	) => {
+		const wrapper = mount(DeletedElement, {
+			global: {
+				plugins: [createTestingVuetify(), createTestingI18n()],
+			},
+			props,
+		});
+
+		return {
+			wrapper,
+		};
+	};
+
+	afterEach(() => {
+		jest.resetAllMocks();
+	});
+
+	describe("when the user is not a teacher", () => {
+		const setup = () => {
+			useBoardPermissionsMock.isTeacher = false;
+
+			const { wrapper } = getWrapper({
+				element: DELETED_ELEMENT,
+				isEditMode: true,
+			});
+
+			return {
+				wrapper,
+			};
+		};
+
+		it("should not show the element", async () => {
+			const { wrapper } = setup();
+
+			const deletedElement = wrapper.findComponent({ ref: "deletedElement" });
+
+			expect(deletedElement.isVisible()).toEqual(false);
+		});
+	});
+
+	describe("Menu", () => {
+		describe("when in edit mode", () => {
+			const setup = () => {
+				const { wrapper } = getWrapper({
+					element: DELETED_ELEMENT,
+					isEditMode: true,
+				});
+
+				return {
+					wrapper,
+				};
+			};
+
+			it("should display the tree dot menu", async () => {
+				const { wrapper } = setup();
+
+				const threeDotMenu = wrapper.findComponent(DeletedElementMenu);
+
+				expect(threeDotMenu.isVisible()).toEqual(true);
+			});
+		});
+
+		describe("when not in edit mode", () => {
+			const setup = () => {
+				const { wrapper } = getWrapper({
+					element: DELETED_ELEMENT,
+					isEditMode: false,
+				});
+
+				return {
+					wrapper,
+				};
+			};
+
+			it("should not display the tree dot menu", async () => {
+				const { wrapper } = setup();
+
+				const threeDotMenu = wrapper.findComponent(DeletedElementMenu);
+
+				expect(threeDotMenu.exists()).toEqual(false);
+			});
+		});
+
+		describe("when deleting the element", () => {
+			const setup = () => {
+				const { wrapper } = getWrapper({
+					element: DELETED_ELEMENT,
+					isEditMode: true,
+				});
+
+				return {
+					wrapper,
+				};
+			};
+
+			it("should emit an event", async () => {
+				const { wrapper } = setup();
+
+				wrapper.findComponent(DeletedElementMenu).vm.$emit("delete:element");
+				await nextTick();
+
+				expect(wrapper.emitted("delete:element")).toEqual([
+					[DELETED_ELEMENT.id],
+				]);
+			});
+		});
+	});
+
+	describe("Alert", () => {
+		describe("when the deleted element was an external tool element", () => {
+			const setup = () => {
+				const { wrapper } = getWrapper({
+					element: DELETED_ELEMENT,
+					isEditMode: true,
+				});
+
+				return {
+					wrapper,
+				};
+			};
+
+			it("should display a warning", async () => {
+				const { wrapper } = setup();
+
+				const alert = wrapper.findComponent(WarningAlert);
+
+				expect(alert.text()).toEqual(
+					"components.cardElement.deletedElement.warning.externalToolElement"
+				);
+			});
+		});
+	});
+});
diff --git a/src/modules/feature/board-deleted-element/DeletedElement.vue b/src/modules/feature/board-deleted-element/DeletedElement.vue
new file mode 100644
index 0000000000..3d11f57fa3
--- /dev/null
+++ b/src/modules/feature/board-deleted-element/DeletedElement.vue
@@ -0,0 +1,71 @@
+<template>
+	<VCard
+		v-show="isTeacher"
+		class="mb-4"
+		data-testid="board-deleted-element"
+		elevation="0"
+		variant="outlined"
+		ref="deletedElement"
+		:ripple="false"
+	>
+		<WarningAlert
+			v-if="
+				element.content.deletedElementType === ContentElementType.ExternalTool
+			"
+		>
+			{{
+				$t(
+					"components.cardElement.deletedElement.warning.externalToolElement",
+					{
+						toolName: element.content.title,
+					}
+				)
+			}}
+		</WarningAlert>
+		<ContentElementBar :has-grey-background="true" :icon="mdiPuzzleOutline">
+			<template #title>
+				{{ element.content.title }}
+			</template>
+			<template #menu>
+				<DeletedElementMenu
+					v-if="isEditMode"
+					@delete:element="onDeleteElement"
+				/>
+			</template>
+		</ContentElementBar>
+	</VCard>
+</template>
+
+<script setup lang="ts">
+import { ContentElementType, DeletedElementResponse } from "@/serverApi/v3";
+import { useBoardFocusHandler, useBoardPermissions } from "@data-board";
+import { mdiPuzzleOutline } from "@mdi/js";
+import { WarningAlert } from "@ui-alert";
+import { ContentElementBar } from "@ui-board";
+import { PropType, Ref, ref, toRef } from "vue";
+import DeletedElementMenu from "./DeletedElementMenu.vue";
+
+const props = defineProps({
+	element: {
+		type: Object as PropType<DeletedElementResponse>,
+		required: true,
+	},
+	isEditMode: { type: Boolean, required: true },
+});
+
+const emit = defineEmits<{
+	(e: "delete:element", elementId: string): void;
+}>();
+
+const { isTeacher } = useBoardPermissions();
+
+const autofocus: Ref<boolean> = ref(false);
+const element: Ref<DeletedElementResponse> = toRef(props, "element");
+useBoardFocusHandler(element.value.id, ref(null), () => {
+	autofocus.value = true;
+});
+
+const onDeleteElement = () => {
+	emit("delete:element", element.value.id);
+};
+</script>
diff --git a/src/modules/feature/board-deleted-element/DeletedElementMenu.unit.ts b/src/modules/feature/board-deleted-element/DeletedElementMenu.unit.ts
new file mode 100644
index 0000000000..899868624b
--- /dev/null
+++ b/src/modules/feature/board-deleted-element/DeletedElementMenu.unit.ts
@@ -0,0 +1,47 @@
+import {
+	createTestingI18n,
+	createTestingVuetify,
+} from "@@/tests/test-utils/setup";
+import { BoardMenuActionDelete } from "@ui-board";
+import { shallowMount } from "@vue/test-utils";
+import DeletedElementMenu from "./DeletedElementMenu.vue";
+
+describe("DeletedElementMenu", () => {
+	const getWrapper = () => {
+		document.body.setAttribute("data-app", "true");
+
+		const wrapper = shallowMount(DeletedElementMenu, {
+			global: {
+				plugins: [createTestingVuetify(), createTestingI18n()],
+			},
+		});
+
+		return {
+			wrapper,
+		};
+	};
+
+	afterEach(() => {
+		jest.resetAllMocks();
+	});
+
+	describe("Delete Button", () => {
+		it("should have a menu option to delete", () => {
+			const { wrapper } = getWrapper();
+
+			const menuItem = wrapper.findComponent(BoardMenuActionDelete);
+
+			expect(menuItem.exists()).toEqual(true);
+		});
+
+		it("should emit the delete event on click", async () => {
+			const { wrapper } = getWrapper();
+
+			const menuItem = wrapper.findComponent(BoardMenuActionDelete);
+
+			await menuItem.trigger("click");
+
+			expect(wrapper.emitted("delete:element")).toBeDefined();
+		});
+	});
+});
diff --git a/src/modules/feature/board-deleted-element/DeletedElementMenu.vue b/src/modules/feature/board-deleted-element/DeletedElementMenu.vue
new file mode 100644
index 0000000000..6fb2174569
--- /dev/null
+++ b/src/modules/feature/board-deleted-element/DeletedElementMenu.vue
@@ -0,0 +1,20 @@
+<template>
+	<BoardMenu scope="deletedElement" data-testid="deleted-element-menu-btn">
+		<BoardMenuActionDelete @click="onDelete" />
+	</BoardMenu>
+</template>
+
+<script setup lang="ts">
+import { BoardMenu, BoardMenuActionDelete } from "@ui-board";
+
+const emit = defineEmits<{
+	(e: "delete:element"): void;
+}>();
+
+const onDelete = async (confirmation: Promise<boolean>) => {
+	const shouldDelete = await confirmation;
+	if (shouldDelete) {
+		emit("delete:element");
+	}
+};
+</script>
diff --git a/src/modules/feature/board-deleted-element/index.ts b/src/modules/feature/board-deleted-element/index.ts
new file mode 100644
index 0000000000..54dcd4a44a
--- /dev/null
+++ b/src/modules/feature/board-deleted-element/index.ts
@@ -0,0 +1,3 @@
+import DeletedElement from "./DeletedElement.vue";
+
+export { DeletedElement };
diff --git a/src/modules/feature/board/card/CardHost.vue b/src/modules/feature/board/card/CardHost.vue
index bca6ebc900..295caea787 100644
--- a/src/modules/feature/board/card/CardHost.vue
+++ b/src/modules/feature/board/card/CardHost.vue
@@ -33,7 +33,11 @@
 					/>
 
 					<div class="board-menu" :class="boardMenuClasses">
-						<BoardMenu v-if="hasDeletePermission" scope="card">
+						<BoardMenu
+							v-if="hasDeletePermission"
+							scope="card"
+							data-testid="card-menu-btn"
+						>
 							<BoardMenuActionEdit
 								v-if="!isEditMode"
 								@click="onStartEditMode"
@@ -89,8 +93,8 @@ import { delay } from "@/utils/helpers";
 import {
 	useBoardFocusHandler,
 	useBoardPermissions,
-	useEditMode,
 	useCardStore,
+	useEditMode,
 } from "@data-board";
 import { mdiArrowExpand } from "@mdi/js";
 import {
diff --git a/src/modules/feature/board/card/ContentElementList.unit.ts b/src/modules/feature/board/card/ContentElementList.unit.ts
index c29a163801..65a0626093 100644
--- a/src/modules/feature/board/card/ContentElementList.unit.ts
+++ b/src/modules/feature/board/card/ContentElementList.unit.ts
@@ -9,6 +9,7 @@ import {
 	createTestingVuetify,
 } from "@@/tests/test-utils/setup";
 import { CollaborativeTextEditorElement } from "@feature-board-collaborative-text-editor-element";
+import { DeletedElement } from "@feature-board-deleted-element";
 import { DrawingContentElement } from "@feature-board-drawing-element";
 import { ExternalToolElement } from "@feature-board-external-tool-element";
 import { FileContentElement } from "@feature-board-file-element";
@@ -88,6 +89,10 @@ describe("ContentElementList", () => {
 				elementType: ContentElementType.CollaborativeTextEditor,
 				component: CollaborativeTextEditorElement,
 			},
+			{
+				elementType: ContentElementType.Deleted,
+				component: DeletedElement,
+			},
 		];
 
 		it.each(elementComponents)(
diff --git a/src/modules/feature/board/card/ContentElementList.vue b/src/modules/feature/board/card/ContentElementList.vue
index 289b8e17e1..a9daf72510 100644
--- a/src/modules/feature/board/card/ContentElementList.vue
+++ b/src/modules/feature/board/card/ContentElementList.vue
@@ -73,15 +73,22 @@
 					@move-up:edit="onMoveElementUp(index, element)"
 					@delete:element="onDeleteElement"
 				/>
+				<DeletedElement
+					v-else-if="isDeletedElementResponse(element)"
+					:element="element"
+					:isEditMode="isEditMode"
+					@delete:element="onDeleteElement"
+				/>
 			</ContentElement>
 		</template>
 	</VCardText>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {
 	CollaborativeTextEditorElementResponse,
 	ContentElementType,
+	DeletedElementResponse,
 	DrawingElementResponse,
 	ExternalToolElementResponse,
 	FileElementResponse,
@@ -93,210 +100,177 @@ import { AnyContentElement } from "@/types/board/ContentElement";
 import { ElementMove } from "@/types/board/DragAndDrop";
 import { ENV_CONFIG_MODULE_KEY, injectStrict } from "@/utils/inject";
 import { CollaborativeTextEditorElement } from "@feature-board-collaborative-text-editor-element";
+import { DeletedElement } from "@feature-board-deleted-element";
 import { DrawingContentElement } from "@feature-board-drawing-element";
 import { ExternalToolElement } from "@feature-board-external-tool-element";
 import { FileContentElement } from "@feature-board-file-element";
 import { LinkContentElement } from "@feature-board-link-element";
 import { SubmissionContentElement } from "@feature-board-submission-element";
 import { RichTextContentElement } from "@feature-board-text-element";
-import { computed, defineComponent, PropType } from "vue";
+import { computed, PropType } from "vue";
 import ContentElement from "./ContentElement.vue";
 
-export default defineComponent({
-	name: "ContentElementList",
-	components: {
-		ContentElement,
-		ExternalToolElement,
-		FileContentElement,
-		RichTextContentElement,
-		SubmissionContentElement,
-		LinkContentElement,
-		DrawingContentElement,
-		CollaborativeTextEditorElement,
+const props = defineProps({
+	elements: {
+		type: Array as PropType<AnyContentElement[]>,
+		required: true,
+	},
+	isEditMode: {
+		type: Boolean,
+		required: true,
 	},
-	props: {
-		elements: {
-			type: Array as PropType<AnyContentElement[]>,
-			required: true,
-		},
-		isEditMode: {
-			type: Boolean,
-			required: true,
-		},
-		isDetailView: {
-			type: Boolean,
-			required: true,
-		},
+	isDetailView: {
+		type: Boolean,
+		required: true,
 	},
-	emits: [
-		"delete:element",
-		"move-down:element",
-		"move-up:element",
-		"move-keyboard:element",
-	],
-	setup(props, { emit }) {
-		const envConfigModule = injectStrict(ENV_CONFIG_MODULE_KEY);
+});
 
-		const onDeleteElement = (elementId: string) => {
-			emit("delete:element", elementId);
-		};
+const emit = defineEmits<{
+	(e: "delete:element", elementId: string): void;
+	(e: "move-down:element", elementMove: ElementMove): void;
+	(e: "move-up:element", elementMove: ElementMove): void;
+	(e: "move-keyboard:element", elementMove: ElementMove, code: string): void;
+}>();
 
-		const isRichTextElementResponse = (
-			element: AnyContentElement
-		): element is RichTextElementResponse => {
-			return element.type === ContentElementType.RichText;
-		};
+const envConfigModule = injectStrict(ENV_CONFIG_MODULE_KEY);
 
-		const isFileElementResponse = (
-			element: AnyContentElement
-		): element is FileElementResponse => {
-			return element.type === ContentElementType.File;
-		};
+const onDeleteElement = (elementId: string) => {
+	emit("delete:element", elementId);
+};
 
-		const isSubmissionContainerElementResponse = (
-			element: AnyContentElement
-		): element is SubmissionContainerElementResponse => {
-			return element.type === ContentElementType.SubmissionContainer;
-		};
+const isRichTextElementResponse = (
+	element: AnyContentElement
+): element is RichTextElementResponse => {
+	return element.type === ContentElementType.RichText;
+};
 
-		const showSubmissionContainerElement = (
-			element: AnyContentElement
-		): element is SubmissionContainerElementResponse => {
-			return (
-				!!envConfigModule.getEnv.FEATURE_COLUMN_BOARD_SUBMISSIONS_ENABLED &&
-				isSubmissionContainerElementResponse(element)
-			);
-		};
+const isFileElementResponse = (
+	element: AnyContentElement
+): element is FileElementResponse => {
+	return element.type === ContentElementType.File;
+};
 
-		const isLinkElementResponse = (
-			element: AnyContentElement
-		): element is LinkElementResponse => {
-			return element.type === ContentElementType.Link;
-		};
+const isSubmissionContainerElementResponse = (
+	element: AnyContentElement
+): element is SubmissionContainerElementResponse => {
+	return element.type === ContentElementType.SubmissionContainer;
+};
 
-		const showLinkElement = (
-			element: AnyContentElement
-		): element is LinkElementResponse => {
-			return (
-				!!envConfigModule.getEnv.FEATURE_COLUMN_BOARD_LINK_ELEMENT_ENABLED &&
-				isLinkElementResponse(element)
-			);
-		};
+const showSubmissionContainerElement = (
+	element: AnyContentElement
+): element is SubmissionContainerElementResponse => {
+	return (
+		envConfigModule.getEnv.FEATURE_COLUMN_BOARD_SUBMISSIONS_ENABLED &&
+		isSubmissionContainerElementResponse(element)
+	);
+};
 
-		const isExternalToolElementResponse = (
-			element: AnyContentElement
-		): element is ExternalToolElementResponse => {
-			return element.type === ContentElementType.ExternalTool;
-		};
+const isLinkElementResponse = (
+	element: AnyContentElement
+): element is LinkElementResponse => {
+	return element.type === ContentElementType.Link;
+};
 
-		const showExternalToolElement = (
-			element: AnyContentElement
-		): element is ExternalToolElementResponse => {
-			return (
-				!!envConfigModule.getEnv.FEATURE_COLUMN_BOARD_EXTERNAL_TOOLS_ENABLED &&
-				isExternalToolElementResponse(element)
-			);
-		};
+const showLinkElement = (
+	element: AnyContentElement
+): element is LinkElementResponse => {
+	return (
+		envConfigModule.getEnv.FEATURE_COLUMN_BOARD_LINK_ELEMENT_ENABLED &&
+		isLinkElementResponse(element)
+	);
+};
 
-		const isDrawingElementResponse = (
-			element: AnyContentElement
-		): element is DrawingElementResponse => {
-			return element.type === ContentElementType.Drawing;
-		};
+const isExternalToolElementResponse = (
+	element: AnyContentElement
+): element is ExternalToolElementResponse => {
+	return element.type === ContentElementType.ExternalTool;
+};
 
-		const showDrawingElement = (
-			element: AnyContentElement
-		): element is DrawingElementResponse => {
-			return (
-				!!envConfigModule.getEnv.FEATURE_TLDRAW_ENABLED &&
-				isDrawingElementResponse(element)
-			);
-		};
+const showExternalToolElement = (
+	element: AnyContentElement
+): element is ExternalToolElementResponse => {
+	return (
+		envConfigModule.getEnv.FEATURE_COLUMN_BOARD_EXTERNAL_TOOLS_ENABLED &&
+		isExternalToolElementResponse(element)
+	);
+};
 
-		const isCollaborativeTextEditorResponse = (
-			element: AnyContentElement
-		): element is CollaborativeTextEditorElementResponse => {
-			return element.type === ContentElementType.CollaborativeTextEditor;
-		};
+const isDrawingElementResponse = (
+	element: AnyContentElement
+): element is DrawingElementResponse => {
+	return element.type === ContentElementType.Drawing;
+};
 
-		const showCollaborativeTextEditorElement = (
-			element: AnyContentElement
-		): element is CollaborativeTextEditorElementResponse => {
-			return (
-				!!envConfigModule.getEnv
-					.FEATURE_COLUMN_BOARD_COLLABORATIVE_TEXT_EDITOR_ENABLED &&
-				isCollaborativeTextEditorResponse(element)
-			);
-		};
+const showDrawingElement = (
+	element: AnyContentElement
+): element is DrawingElementResponse => {
+	return (
+		envConfigModule.getEnv.FEATURE_TLDRAW_ENABLED &&
+		isDrawingElementResponse(element)
+	);
+};
 
-		const onMoveElementDown = (
-			elementIndex: number,
-			element: AnyContentElement
-		) => {
-			const elementMove: ElementMove = {
-				elementIndex,
-				payload: element.id,
-			};
-			emit("move-down:element", elementMove);
-		};
+const isCollaborativeTextEditorResponse = (
+	element: AnyContentElement
+): element is CollaborativeTextEditorElementResponse => {
+	return element.type === ContentElementType.CollaborativeTextEditor;
+};
 
-		const onMoveElementUp = (
-			elementIndex: number,
-			element: AnyContentElement
-		) => {
-			const elementMove: ElementMove = {
-				elementIndex,
-				payload: element.id,
-			};
-			emit("move-up:element", elementMove);
-		};
+const showCollaborativeTextEditorElement = (
+	element: AnyContentElement
+): element is CollaborativeTextEditorElementResponse => {
+	return (
+		envConfigModule.getEnv
+			.FEATURE_COLUMN_BOARD_COLLABORATIVE_TEXT_EDITOR_ENABLED &&
+		isCollaborativeTextEditorResponse(element)
+	);
+};
 
-		const onMoveElementKeyboard = (
-			elementIndex: number,
-			element: AnyContentElement,
-			event: KeyboardEvent
-		) => {
-			const elementMove: ElementMove = {
-				elementIndex,
-				payload: element.id,
-			};
-			emit("move-keyboard:element", elementMove, event.code);
-		};
+const isDeletedElementResponse = (
+	element: AnyContentElement
+): element is DeletedElementResponse => {
+	return element.type === ContentElementType.Deleted;
+};
 
-		const hasMultipleElements = computed(() => props.elements.length > 1);
+const onMoveElementDown = (
+	elementIndex: number,
+	element: AnyContentElement
+) => {
+	const elementMove: ElementMove = {
+		elementIndex,
+		payload: element.id,
+	};
+	emit("move-down:element", elementMove);
+};
 
-		const firstElementId = computed<Element["id"] | null>(() =>
-			props.elements.length > 0 ? props.elements[0].id : null
-		);
+const onMoveElementUp = (elementIndex: number, element: AnyContentElement) => {
+	const elementMove: ElementMove = {
+		elementIndex,
+		payload: element.id,
+	};
+	emit("move-up:element", elementMove);
+};
 
-		const lastElementId = computed<Element["id"] | null>(() => {
-			const lastElementIndex = props.elements.length - 1;
-			return props.elements.length > 0
-				? props.elements[lastElementIndex].id
-				: null;
-		});
+const onMoveElementKeyboard = (
+	elementIndex: number,
+	element: AnyContentElement,
+	event: KeyboardEvent
+) => {
+	const elementMove: ElementMove = {
+		elementIndex,
+		payload: element.id,
+	};
+	emit("move-keyboard:element", elementMove, event.code);
+};
 
-		return {
-			firstElementId,
-			hasMultipleElements,
-			isFileElementResponse,
-			isRichTextElementResponse,
-			isSubmissionContainerElementResponse,
-			isLinkElementResponse,
-			showSubmissionContainerElement,
-			isExternalToolElementResponse,
-			showExternalToolElement,
-			showDrawingElement,
-			showCollaborativeTextEditorElement,
-			isDrawingElementResponse,
-			isCollaborativeTextEditorResponse,
-			showLinkElement,
-			lastElementId,
-			onDeleteElement,
-			onMoveElementDown,
-			onMoveElementUp,
-			onMoveElementKeyboard,
-		};
-	},
+const hasMultipleElements = computed(() => props.elements.length > 1);
+
+const firstElementId = computed<Element["id"] | null>(() =>
+	props.elements.length > 0 ? props.elements[0].id : null
+);
+
+const lastElementId = computed<Element["id"] | null>(() => {
+	const lastElementIndex = props.elements.length - 1;
+	return props.elements.length > 0 ? props.elements[lastElementIndex].id : null;
 });
 </script>
diff --git a/src/modules/ui/board/BoardMenu.vue b/src/modules/ui/board/BoardMenu.vue
index 337c3fb97f..c8e99af5b2 100644
--- a/src/modules/ui/board/BoardMenu.vue
+++ b/src/modules/ui/board/BoardMenu.vue
@@ -17,7 +17,7 @@
 			>
 				<VIcon data-testid="board-menu-icon">{{ mdiDotsVertical }}</VIcon>
 				<span data-testid="board-menu-screen-reader-only" class="d-sr-only">
-					{{ t(boardMenuAriaLabel) }}
+					{{ $t(boardMenuAriaLabel) }}
 				</span>
 			</VBtn>
 		</template>
@@ -32,7 +32,6 @@ import { mdiDotsVertical } from "@mdi/js";
 import { computed, PropType, provide, toRef } from "vue";
 import { BoardMenuScope } from "./board-menu-scope";
 import { MENU_SCOPE } from "./injection-tokens";
-import { useI18n } from "vue-i18n";
 
 const props = defineProps({
 	scope: {
@@ -48,8 +47,6 @@ const props = defineProps({
 const scope = toRef(props, "scope");
 provide(MENU_SCOPE, scope.value);
 
-const { t } = useI18n();
-
 const ariaLabelForScope: Record<BoardMenuScope, string> = {
 	board: "components.board.menu.board",
 	column: "components.board.menu.column",
@@ -61,6 +58,7 @@ const ariaLabelForScope: Record<BoardMenuScope, string> = {
 	fileElement: "components.board.menu.fileElement",
 	linkElement: "components.board.menu.linkElement",
 	submissionElement: "components.board.menu.submissionElement",
+	deletedElement: "components.board.menu.deletedElement",
 };
 
 const boardMenuAriaLabel = computed(() => {
@@ -75,6 +73,7 @@ const boardScopesWithBackground: Array<BoardMenuScope> = [
 	"fileElement",
 	"linkElement",
 	"submissionElement",
+	"deletedElement",
 ];
 
 const hasBackground = computed<boolean>(() =>
diff --git a/src/modules/ui/board/board-menu-scope.ts b/src/modules/ui/board/board-menu-scope.ts
index bda0b49fbe..ae38e09e1b 100644
--- a/src/modules/ui/board/board-menu-scope.ts
+++ b/src/modules/ui/board/board-menu-scope.ts
@@ -7,4 +7,5 @@ export type BoardMenuScope =
 	| "externalToolElement"
 	| "fileElement"
 	| "linkElement"
-	| "submissionElement";
+	| "submissionElement"
+	| "deletedElement";
diff --git a/src/serverApi/v3/api.ts b/src/serverApi/v3/api.ts
index e1ef1b70b6..907f9c3e28 100644
--- a/src/serverApi/v3/api.ts
+++ b/src/serverApi/v3/api.ts
@@ -439,10 +439,10 @@ export interface CardResponse {
     height: number;
     /**
      * 
-     * @type {Array<ExternalToolElementResponse | FileElementResponse | LinkElementResponse | RichTextElementResponse | SubmissionContainerElementResponse | DrawingElementResponse | CollaborativeTextEditorElementResponse>}
+     * @type {Array<ExternalToolElementResponse | FileElementResponse | LinkElementResponse | RichTextElementResponse | SubmissionContainerElementResponse | DrawingElementResponse | CollaborativeTextEditorElementResponse | DeletedElementResponse>}
      * @memberof CardResponse
      */
-    elements: Array<ExternalToolElementResponse | FileElementResponse | LinkElementResponse | RichTextElementResponse | SubmissionContainerElementResponse | DrawingElementResponse | CollaborativeTextEditorElementResponse>;
+    elements: Array<ExternalToolElementResponse | FileElementResponse | LinkElementResponse | RichTextElementResponse | SubmissionContainerElementResponse | DrawingElementResponse | CollaborativeTextEditorElementResponse | DeletedElementResponse>;
     /**
      * 
      * @type {VisibilitySettingsResponse}
@@ -1347,7 +1347,8 @@ export enum ContentElementType {
     RichText = 'richText',
     SubmissionContainer = 'submissionContainer',
     ExternalTool = 'externalTool',
-    CollaborativeTextEditor = 'collaborativeTextEditor'
+    CollaborativeTextEditor = 'collaborativeTextEditor',
+    Deleted = 'deleted'
 }
 
 /**
@@ -1660,6 +1661,7 @@ export enum CopyApiResponseTypeEnum {
     Content = 'CONTENT',
     Course = 'COURSE',
     CoursegroupGroup = 'COURSEGROUP_GROUP',
+    DeletedElement = 'DELETED_ELEMENT',
     ExternalTool = 'EXTERNAL_TOOL',
     ExternalToolElement = 'EXTERNAL_TOOL_ELEMENT',
     File = 'FILE',
@@ -1959,7 +1961,8 @@ export enum CreateCardBodyParamsRequiredEmptyElementsEnum {
     RichText = 'richText',
     SubmissionContainer = 'submissionContainer',
     ExternalTool = 'externalTool',
-    CollaborativeTextEditor = 'collaborativeTextEditor'
+    CollaborativeTextEditor = 'collaborativeTextEditor',
+    Deleted = 'deleted'
 }
 
 /**
@@ -2403,6 +2406,56 @@ export interface DashboardResponse {
      */
     gridElements: Array<DashboardGridElementResponse>;
 }
+/**
+ * 
+ * @export
+ * @interface DeletedElementContent
+ */
+export interface DeletedElementContent {
+    /**
+     * 
+     * @type {string}
+     * @memberof DeletedElementContent
+     */
+    title: string;
+    /**
+     * 
+     * @type {ContentElementType}
+     * @memberof DeletedElementContent
+     */
+    deletedElementType: ContentElementType;
+}
+/**
+ * 
+ * @export
+ * @interface DeletedElementResponse
+ */
+export interface DeletedElementResponse {
+    /**
+     * 
+     * @type {string}
+     * @memberof DeletedElementResponse
+     */
+    id: string;
+    /**
+     * 
+     * @type {ContentElementType}
+     * @memberof DeletedElementResponse
+     */
+    type: ContentElementType;
+    /**
+     * 
+     * @type {DeletedElementContent}
+     * @memberof DeletedElementResponse
+     */
+    content: DeletedElementContent;
+    /**
+     * 
+     * @type {TimestampsResponse}
+     * @memberof DeletedElementResponse
+     */
+    timestamps: TimestampsResponse;
+}
 /**
  * 
  * @export
@@ -11036,7 +11089,7 @@ export const BoardCardApiFp = function(configuration?: Configuration) {
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        async cardControllerCreateElement(cardId: string, createContentElementBodyParams: CreateContentElementBodyParams, options?: any): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<ExternalToolElementResponse | FileElementResponse | LinkElementResponse | RichTextElementResponse | SubmissionContainerElementResponse | DrawingElementResponse>> {
+        async cardControllerCreateElement(cardId: string, createContentElementBodyParams: CreateContentElementBodyParams, options?: any): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<ExternalToolElementResponse | FileElementResponse | LinkElementResponse | RichTextElementResponse | SubmissionContainerElementResponse | DrawingElementResponse | DeletedElementResponse>> {
             const localVarAxiosArgs = await localVarAxiosParamCreator.cardControllerCreateElement(cardId, createContentElementBodyParams, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
@@ -11116,7 +11169,7 @@ export const BoardCardApiFactory = function (configuration?: Configuration, base
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
          */
-        cardControllerCreateElement(cardId: string, createContentElementBodyParams: CreateContentElementBodyParams, options?: any): AxiosPromise<ExternalToolElementResponse | FileElementResponse | LinkElementResponse | RichTextElementResponse | SubmissionContainerElementResponse | DrawingElementResponse> {
+        cardControllerCreateElement(cardId: string, createContentElementBodyParams: CreateContentElementBodyParams, options?: any): AxiosPromise<ExternalToolElementResponse | FileElementResponse | LinkElementResponse | RichTextElementResponse | SubmissionContainerElementResponse | DrawingElementResponse | DeletedElementResponse> {
             return localVarFp.cardControllerCreateElement(cardId, createContentElementBodyParams, options).then((request) => request(axios, basePath));
         },
         /**
@@ -11190,7 +11243,7 @@ export interface BoardCardApiInterface {
      * @throws {RequiredError}
      * @memberof BoardCardApiInterface
      */
-    cardControllerCreateElement(cardId: string, createContentElementBodyParams: CreateContentElementBodyParams, options?: any): AxiosPromise<ExternalToolElementResponse | FileElementResponse | LinkElementResponse | RichTextElementResponse | SubmissionContainerElementResponse | DrawingElementResponse>;
+    cardControllerCreateElement(cardId: string, createContentElementBodyParams: CreateContentElementBodyParams, options?: any): AxiosPromise<ExternalToolElementResponse | FileElementResponse | LinkElementResponse | RichTextElementResponse | SubmissionContainerElementResponse | DrawingElementResponse | DeletedElementResponse>;
 
     /**
      * 
diff --git a/tsconfig.json b/tsconfig.json
index 5f7f2402c3..a21e81d719 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -44,6 +44,7 @@
 			"@feature-render-html": ["src/modules/feature/render-html"],
 			"@feature-news-form": ["src/modules/feature/news-form"],
 			"@feature-media-shelf": ["src/modules/feature/media-shelf"],
+			"@feature-board-deleted-element": ["src/modules/feature/board-deleted-element"],
 			"@ui-alert": ["src/modules/ui/alert"],
 			"@ui-board": ["src/modules/ui/board"],
 			"@ui-chip": ["src/modules/ui/chip"],