From 257c7fed2be2c632937983fac23418057d1776a0 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Thu, 24 Aug 2023 08:56:34 +0200
Subject: [PATCH 01/89] Call preview api for display of preview

---
 .../components/FileContentElement.vue         | 109 +++++++++---------
 .../components/FileContentElementDisplay.vue  |  30 ++---
 .../components/FileContentElementEdit.vue     |  28 +++--
 .../components/FileContentElementInit.vue     |   4 +-
 .../components/ImageFileDisplay.vue           |  28 +++--
 .../components/types/file-properties.ts       |   7 ++
 src/utils/fileHelper.ts                       |  10 ++
 src/utils/fileHelper.unit.ts                  |  33 +++++-
 8 files changed, 156 insertions(+), 93 deletions(-)
 create mode 100644 src/components/feature-board-file-element/components/types/file-properties.ts

diff --git a/src/components/feature-board-file-element/components/FileContentElement.vue b/src/components/feature-board-file-element/components/FileContentElement.vue
index bb0d461ba1..c2266f6503 100644
--- a/src/components/feature-board-file-element/components/FileContentElement.vue
+++ b/src/components/feature-board-file-element/components/FileContentElement.vue
@@ -10,58 +10,54 @@
 		tabindex="0"
 		@keydown.up.down="onKeydownArrow"
 	>
-		<div v-if="isImage">
-			<ImageFileDisplay
-				:fileName="fileName"
-				:fileSize="fileSize"
-				:isDownloadAllowed="!isBlockedByVirusScan"
-				:url="fileUrl"
-				:isEditMode="isEditMode"
-				:isFirstElement="isFirstElement"
-				:isLastElement="isLastElement"
-				:hasMultipleElements="hasMultipleElements"
-				@move-down:element="onMoveFileEditDown"
-				@move-up:element="onMoveFileEditUp"
-				@delete:element="onDeleteElement"
-			/>
-		</div>
-		<div v-else>
+		<template v-if="fileProperties">
+			<div v-if="fileProperties.previewUrl">
+				<ImageFileDisplay
+					:fileProperties="fileProperties"
+					:isEditMode="isEditMode"
+					:isFirstElement="isFirstElement"
+					:isLastElement="isLastElement"
+					:hasMultipleElements="hasMultipleElements"
+					@move-down:element="onMoveFileEditDown"
+					@move-up:element="onMoveFileEditUp"
+					@delete:element="onDeleteElement"
+				/>
+			</div>
+			<div v-else>
+				<FileContentElementDisplay
+					v-if="!isEditMode"
+					:fileProperties="fileProperties"
+				/>
+				<FileContentElementEdit
+					v-if="isEditMode && fileRecord"
+					:fileProperties="fileProperties"
+					:elementId="element.id"
+					:isFirstElement="isFirstElement"
+					:isLastElement="isLastElement"
+					:hasMultipleElements="hasMultipleElements"
+					:needsFileUpload="needsFileUpload"
+					@move-down:element="onMoveFileEditDown"
+					@move-up:element="onMoveFileEditUp"
+					@delete:element="onDeleteElement"
+				/>
+			</div>
+		</template>
+		<template v-else>
 			<FileContentElementInit
 				v-if="isEditMode && fileRecord === undefined"
-				:fileName="fileName"
 				:elementId="element.id"
 				@upload:file="onUploadFile"
 			/>
-			<FileContentElementDisplay
-				v-if="!isEditMode"
-				:fileName="fileName"
-				:fileSize="fileSize"
-				:url="url"
-				:isDownloadAllowed="!isBlockedByVirusScan"
-			/>
-			<FileContentElementEdit
-				v-if="isEditMode && fileRecord"
-				:fileName="fileName"
-				:fileSize="fileSize"
-				:elementId="element.id"
-				:isDownloadAllowed="!isBlockedByVirusScan"
-				:url="url"
-				:isFirstElement="isFirstElement"
-				:isLastElement="isLastElement"
-				:hasMultipleElements="hasMultipleElements"
-				:needsFileUpload="needsFileUpload"
-				@move-down:element="onMoveFileEditDown"
-				@move-up:element="onMoveFileEditUp"
-				@delete:element="onDeleteElement"
-			/>
-		</div>
+		</template>
+
 		<FileContentElementAlert v-if="isBlockedByVirusScan" />
 	</v-card>
 </template>
 
 <script lang="ts">
-import { FileRecordParentType } from "@/fileStorageApi/v3";
+import { FileRecordParentType, PreviewStatus } from "@/fileStorageApi/v3";
 import { FileElementResponse } from "@/serverApi/v3";
+import { convertDownloadToPreviewUrl } from "@/utils/fileHelper";
 import { useBoardFocusHandler, useContentElementState } from "@data-board";
 import { useDeleteConfirmationDialog } from "@ui-confirmation-dialog";
 import { computed, defineComponent, onMounted, PropType, ref } from "vue";
@@ -110,16 +106,23 @@ export default defineComponent({
 
 		const { isBlockedByVirusScan, isImage, url } = useFileRecord(fileRecord);
 
-		const fileName = computed(() => {
-			return fileRecord.value === undefined ? "" : fileRecord.value.name;
-		});
-
-		const fileSize = computed(() => {
-			return fileRecord.value === undefined ? 0 : fileRecord.value.size;
-		});
+		const fileProperties = computed(() => {
+			if (fileRecord.value === undefined) {
+				return;
+			}
 
-		const fileUrl = computed(() => {
-			return fileRecord.value === undefined ? "" : fileRecord.value.url;
+			const previewUrl =
+				fileRecord.value?.previewStatus === PreviewStatus.PREVIEW_POSSIBLE
+					? convertDownloadToPreviewUrl(fileRecord.value.url)
+					: undefined;
+
+			return {
+				size: fileRecord.value.size,
+				name: fileRecord.value.name,
+				url: fileRecord.value.url,
+				previewUrl,
+				isDownloadAllowed: !isBlockedByVirusScan,
+			};
 		});
 
 		const hasFileRecord = computed(() => {
@@ -167,7 +170,7 @@ export default defineComponent({
 			}
 
 			const shouldDelete = await askDeleteConfirmation(
-				fileName.value,
+				fileRecord.value?.name,
 				"boardElement"
 			);
 
@@ -186,9 +189,7 @@ export default defineComponent({
 
 		return {
 			fileContentElement,
-			fileSize,
-			fileName,
-			fileUrl,
+			fileProperties,
 			fileRecord,
 			hasFileRecord,
 			isBlockedByVirusScan,
diff --git a/src/components/feature-board-file-element/components/FileContentElementDisplay.vue b/src/components/feature-board-file-element/components/FileContentElementDisplay.vue
index 6d2ae288aa..2c7fca7963 100644
--- a/src/components/feature-board-file-element/components/FileContentElementDisplay.vue
+++ b/src/components/feature-board-file-element/components/FileContentElementDisplay.vue
@@ -1,5 +1,5 @@
 <template>
-	<div v-if="fileName !== ''">
+	<div v-if="fileProperties.name !== ''">
 		<v-list-item
 			class="grey lighten-3 px-2 rounded-t-sm"
 			data-testid="board-file-element-display"
@@ -17,37 +17,41 @@
 
 			<v-list-item-content>
 				<a
-					v-if="isDownloadAllowed"
+					v-if="fileProperties.isDownloadAllowed"
 					class="subtitle-1 d-inline-block text-truncate"
 					data-testid="board-file-element-display-file-name-link"
-					:download="fileName"
-					:href="url"
-					>{{ fileName }}</a
+					:download="fileProperties.name"
+					:href="fileProperties.url"
+					>{{ fileProperties.name }}</a
 				>
 				<span
 					v-else
 					class="subtitle-1 d-inline-block text-truncate"
 					data-testid="board-file-element-display-file-name"
-					>{{ fileName }}</span
+					>{{ fileProperties.name }}</span
 				>
 			</v-list-item-content>
 		</v-list-item>
-		<FileContentElementChips :fileSize="fileSize" :fileName="fileName" />
+		<FileContentElementChips
+			:fileSize="fileProperties.size"
+			:fileName="fileProperties.name"
+		/>
 	</div>
 </template>
 
 <script lang="ts">
-import FileContentElementChips from "./FileContentElementChips.vue";
 import { mdiFileDocumentOutline } from "@mdi/js";
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
+import FileContentElementChips from "./FileContentElementChips.vue";
+import { FileProperties } from "./types/file-properties";
 
 export default defineComponent({
 	name: "FileContentElementDisplay",
 	props: {
-		fileName: { type: String, required: true },
-		fileSize: { type: Number, required: true },
-		isDownloadAllowed: { type: Boolean, required: true },
-		url: { type: String, required: true },
+		fileProperties: {
+			type: Object as PropType<FileProperties>,
+			required: true,
+		},
 	},
 	components: { FileContentElementChips },
 	setup() {
diff --git a/src/components/feature-board-file-element/components/FileContentElementEdit.vue b/src/components/feature-board-file-element/components/FileContentElementEdit.vue
index 4ec507abd8..d561322fd5 100644
--- a/src/components/feature-board-file-element/components/FileContentElementEdit.vue
+++ b/src/components/feature-board-file-element/components/FileContentElementEdit.vue
@@ -19,14 +19,14 @@
 				<span
 					class="subtitle-1 d-inline-block text-truncate"
 					data-testid="board-file-element-edit-file-name"
-					>{{ fileName }}</span
+					>{{ fileProperties.name }}</span
 				>
 			</v-list-item-content>
 
 			<FileContentElementMenu
-				:fileName="fileName"
-				:isDownloadAllowed="isDownloadAllowed"
-				:url="url"
+				:fileName="fileProperties.name"
+				:isDownloadAllowed="fileProperties.isDownloadAllowed"
+				:url="fileProperties.url"
 				:isFirstElement="isFirstElement"
 				:isLastElement="isLastElement"
 				:hasMultipleElements="hasMultipleElements"
@@ -35,26 +35,30 @@
 				@delete:element="onDeleteElement"
 			/>
 		</v-list-item>
-		<FileContentElementChips :fileSize="fileSize" :fileName="fileName" />
+		<FileContentElementChips
+			:fileSize="fileProperties.size"
+			:fileName="fileProperties.name"
+		/>
 	</div>
 </template>
 
 <script lang="ts">
-import { mdiFileDocumentOutline, mdiClose } from "@mdi/js";
-import { defineComponent, ref, watch } from "vue";
+import { mdiClose, mdiFileDocumentOutline } from "@mdi/js";
+import { useSharedLastCreatedElement } from "@util-board";
+import { defineComponent, PropType, ref, watch } from "vue";
 import FileContentElementChips from "./FileContentElementChips.vue";
 import FileContentElementMenu from "./FileContentElementMenu.vue";
-import { useSharedLastCreatedElement } from "@util-board";
+import { FileProperties } from "./types/file-properties";
 
 export default defineComponent({
 	name: "FileContentElementEdit",
 	components: { FileContentElementChips, FileContentElementMenu },
 	props: {
-		fileName: { type: String, required: true },
-		fileSize: { type: Number, required: true },
+		fileProperties: {
+			type: Object as PropType<FileProperties>,
+			required: true,
+		},
 		elementId: { type: String, required: true },
-		isDownloadAllowed: { type: Boolean, required: true },
-		url: { type: String, required: true },
 		isFirstElement: { type: Boolean, required: true },
 		isLastElement: { type: Boolean, required: true },
 		hasMultipleElements: { type: Boolean, required: true },
diff --git a/src/components/feature-board-file-element/components/FileContentElementInit.vue b/src/components/feature-board-file-element/components/FileContentElementInit.vue
index 99b990438c..25e95cf87b 100644
--- a/src/components/feature-board-file-element/components/FileContentElementInit.vue
+++ b/src/components/feature-board-file-element/components/FileContentElementInit.vue
@@ -2,7 +2,6 @@
 	<div>
 		<div v-if="!fileWasPicked" class="grey lighten-3">
 			<FilePicker
-				v-if="fileName === ''"
 				@update:file="onFileSelect"
 				:isFilePickerOpen.sync="isFilePickerOpen"
 			/>
@@ -17,14 +16,13 @@
 </template>
 
 <script lang="ts">
+import { useSharedLastCreatedElement } from "@util-board";
 import { defineComponent, ref, watch } from "vue";
 import FilePicker from "./FilePicker.vue";
-import { useSharedLastCreatedElement } from "@util-board";
 
 export default defineComponent({
 	name: "FileContentElementInit",
 	props: {
-		fileName: { type: String, required: true },
 		elementId: { type: String, required: true },
 	},
 	components: { FilePicker },
diff --git a/src/components/feature-board-file-element/components/ImageFileDisplay.vue b/src/components/feature-board-file-element/components/ImageFileDisplay.vue
index d92a994229..382cae0677 100644
--- a/src/components/feature-board-file-element/components/ImageFileDisplay.vue
+++ b/src/components/feature-board-file-element/components/ImageFileDisplay.vue
@@ -1,11 +1,15 @@
 <template>
 	<div>
-		<v-img class="rounded-t-sm" :src="url" :alt="fileName" />
+		<v-img
+			class="rounded-t-sm"
+			:src="fileProperties.previewUrl"
+			:alt="fileProperties.name"
+		/>
 		<div v-if="isEditMode" class="menu">
 			<FileContentElementMenu
-				:fileName="fileName"
-				:isDownloadAllowed="isDownloadAllowed"
-				:url="url"
+				:fileName="fileProperties.name"
+				:isDownloadAllowed="fileProperties.isDownloadAllowed"
+				:url="fileProperties.url"
 				:isFirstElement="isFirstElement"
 				:isLastElement="isLastElement"
 				:hasMultipleElements="hasMultipleElements"
@@ -14,23 +18,27 @@
 				@delete:element="onDeleteElement"
 			/>
 		</div>
-		<FileContentElementChips :fileSize="fileSize" :fileName="fileName" />
+		<FileContentElementChips
+			:fileSize="fileProperties.size"
+			:fileName="fileProperties.name"
+		/>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 import FileContentElementChips from "./FileContentElementChips.vue";
 import FileContentElementMenu from "./FileContentElementMenu.vue";
+import { FileProperties } from "./types/file-properties";
 
 export default defineComponent({
 	name: "ImageFileDisplay",
 	components: { FileContentElementMenu, FileContentElementChips },
 	props: {
-		fileName: { type: String, required: true },
-		fileSize: { type: Number, required: true },
-		isDownloadAllowed: { type: Boolean, required: true },
-		url: { type: String, required: true },
+		fileProperties: {
+			type: Object as PropType<FileProperties>,
+			required: true,
+		},
 		isEditMode: { type: Boolean, required: true },
 		isFirstElement: { type: Boolean, required: true },
 		isLastElement: { type: Boolean, required: true },
diff --git a/src/components/feature-board-file-element/components/types/file-properties.ts b/src/components/feature-board-file-element/components/types/file-properties.ts
new file mode 100644
index 0000000000..9cdc6f4ba0
--- /dev/null
+++ b/src/components/feature-board-file-element/components/types/file-properties.ts
@@ -0,0 +1,7 @@
+export interface FileProperties {
+	name: string;
+	size: number;
+	url: string;
+	previewUrl?: string;
+	isDownloadAllowed: boolean;
+}
diff --git a/src/utils/fileHelper.ts b/src/utils/fileHelper.ts
index 01b6ab9d6a..d694edc12c 100644
--- a/src/utils/fileHelper.ts
+++ b/src/utils/fileHelper.ts
@@ -1,3 +1,5 @@
+import { PreviewOutputMimeTypes, PreviewWidth } from "@/fileStorageApi/v3";
+
 export const toBase64 = (file: File) =>
 	new Promise((resolve, reject) => {
 		const reader = new FileReader();
@@ -44,3 +46,11 @@ export function getFileExtension(fileName: string): string {
 
 	return ext;
 }
+
+export function convertDownloadToPreviewUrl(downloadUrl: string): string {
+	const previewUrl =
+		downloadUrl.replace("download", "preview") +
+		`?outputFormat=${PreviewOutputMimeTypes.IMAGE_WEBP}&width=${PreviewWidth._500}`;
+
+	return previewUrl;
+}
diff --git a/src/utils/fileHelper.unit.ts b/src/utils/fileHelper.unit.ts
index f03cc37627..fda6e21c93 100644
--- a/src/utils/fileHelper.unit.ts
+++ b/src/utils/fileHelper.unit.ts
@@ -1,4 +1,9 @@
-import { convertFileSize, downloadFile, getFileExtension } from "./fileHelper";
+import {
+	convertDownloadToPreviewUrl,
+	convertFileSize,
+	downloadFile,
+	getFileExtension,
+} from "./fileHelper";
 
 describe("@/utils/fileHelper", () => {
 	describe("downloadFile", () => {
@@ -142,4 +147,30 @@ describe("@/utils/fileHelper", () => {
 			});
 		});
 	});
+
+	describe("convertDownloadToPreviewUrl", () => {
+		it("should return the preview url", () => {
+			const url = "/file/download/233/text.txt";
+
+			const result = convertDownloadToPreviewUrl(url);
+
+			expect(result).toEqual("/file/preview/233/text.txt");
+		});
+
+		it("should return the preview url with two download words in source", () => {
+			const url = "/file/download/233/download";
+
+			const result = convertDownloadToPreviewUrl(url);
+
+			expect(result).toEqual("/file/preview/233/download");
+		});
+
+		it("should return the preview url with two download words in source with extension", () => {
+			const url = "/file/download/233/download.txt";
+
+			const result = convertDownloadToPreviewUrl(url);
+
+			expect(result).toEqual("/file/preview/233/download.txt");
+		});
+	});
 });

From 063b3d00c18e9ce925d26d2acdbd53dae6cc0823 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Thu, 24 Aug 2023 10:09:37 +0200
Subject: [PATCH 02/89] Use fileProperties for footer

---
 .../components/FileContentElementDisplay.vue  |  5 +----
 .../components/FileContentElementEdit.vue     |  5 +----
 .../components/FileContentElementFooter.vue   | 22 +++++++++++--------
 .../components/ImageFileDisplay.vue           |  5 +----
 4 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/src/components/feature-board-file-element/components/FileContentElementDisplay.vue b/src/components/feature-board-file-element/components/FileContentElementDisplay.vue
index 7f22e74e36..f5355322f9 100644
--- a/src/components/feature-board-file-element/components/FileContentElementDisplay.vue
+++ b/src/components/feature-board-file-element/components/FileContentElementDisplay.vue
@@ -24,10 +24,7 @@
 			</v-list-item-content>
 		</v-list-item>
 		<FileContentElementFooter
-			:fileSize="fileProperties.size"
-			:fileName="fileProperties.name"
-			:isDownloadAllowed="fileProperties.isDownloadAllowed"
-			:url="fileProperties.url"
+			:fileProperties="fileProperties"
 		></FileContentElementFooter>
 	</div>
 </template>
diff --git a/src/components/feature-board-file-element/components/FileContentElementEdit.vue b/src/components/feature-board-file-element/components/FileContentElementEdit.vue
index 76ad817e98..ee30d5eefb 100644
--- a/src/components/feature-board-file-element/components/FileContentElementEdit.vue
+++ b/src/components/feature-board-file-element/components/FileContentElementEdit.vue
@@ -36,10 +36,7 @@
 			/>
 		</v-list-item>
 		<FileContentElementFooter
-			:fileSize="fileProperties.size"
-			:fileName="fileProperties.name"
-			:isDownloadAllowed="fileProperties.isDownloadAllowed"
-			:url="fileProperties.url"
+			:fileProperties="fileProperties"
 		></FileContentElementFooter>
 	</div>
 </template>
diff --git a/src/components/feature-board-file-element/components/FileContentElementFooter.vue b/src/components/feature-board-file-element/components/FileContentElementFooter.vue
index c197d23e4c..839c8c26c0 100644
--- a/src/components/feature-board-file-element/components/FileContentElementFooter.vue
+++ b/src/components/feature-board-file-element/components/FileContentElementFooter.vue
@@ -2,14 +2,17 @@
 	<v-container class="ma-0 pa-0">
 		<v-row>
 			<v-col cols="10">
-				<FileContentElementChips :fileSize="fileSize" :fileName="fileName" />
+				<FileContentElementChips
+					:fileSize="fileProperties.size"
+					:fileName="fileProperties.name"
+				/>
 			</v-col>
 
 			<v-col cols="2">
 				<FileContentElementDownload
-					:fileName="fileName"
-					:isDownloadAllowed="isDownloadAllowed"
-					:url="url"
+					:fileName="fileProperties.name"
+					:isDownloadAllowed="fileProperties.isDownloadAllowed"
+					:url="fileProperties.url"
 				></FileContentElementDownload>
 			</v-col>
 		</v-row>
@@ -17,9 +20,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, PropType } from "vue";
 import FileContentElementChips from "./FileContentElementChips.vue";
 import FileContentElementDownload from "./FileContentElementDownload.vue";
+import { FileProperties } from "./types/file-properties";
 
 export default defineComponent({
 	name: "FileContentElementFooter",
@@ -28,10 +32,10 @@ export default defineComponent({
 		FileContentElementDownload,
 	},
 	props: {
-		fileName: { type: String, required: true },
-		fileSize: { type: Number, required: true },
-		isDownloadAllowed: { type: Boolean, required: true },
-		url: { type: String, required: true },
+		fileProperties: {
+			type: Object as PropType<FileProperties>,
+			required: true,
+		},
 	},
 });
 </script>
diff --git a/src/components/feature-board-file-element/components/ImageFileDisplay.vue b/src/components/feature-board-file-element/components/ImageFileDisplay.vue
index 5586ce46f6..273536849a 100644
--- a/src/components/feature-board-file-element/components/ImageFileDisplay.vue
+++ b/src/components/feature-board-file-element/components/ImageFileDisplay.vue
@@ -19,10 +19,7 @@
 			/>
 		</div>
 		<FileContentElementFooter
-			:fileSize="fileProperties.size"
-			:fileName="fileProperties.name"
-			:isDownloadAllowed="fileProperties.isDownloadAllowed"
-			:url="fileProperties.url"
+			:fileProperties="fileProperties"
 		></FileContentElementFooter>
 	</div>
 </template>

From 6cfa827e2ca06dbce0b09ef20d5f2aa667f9c3f6 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Thu, 24 Aug 2023 11:01:44 +0200
Subject: [PATCH 03/89] Generate file storage client

---
 src/fileStorageApi/v3/models/file-record-scan-status.ts | 1 +
 src/fileStorageApi/v3/models/preview-status.ts          | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/fileStorageApi/v3/models/file-record-scan-status.ts b/src/fileStorageApi/v3/models/file-record-scan-status.ts
index 2a251ee6fb..357f7f87d3 100644
--- a/src/fileStorageApi/v3/models/file-record-scan-status.ts
+++ b/src/fileStorageApi/v3/models/file-record-scan-status.ts
@@ -23,6 +23,7 @@ export enum FileRecordScanStatus {
     PENDING = 'pending',
     VERIFIED = 'verified',
     BLOCKED = 'blocked',
+    WONT_CHECK = 'wont_check',
     ERROR = 'error'
 }
 
diff --git a/src/fileStorageApi/v3/models/preview-status.ts b/src/fileStorageApi/v3/models/preview-status.ts
index d0c85afcc0..a7e8fc59fa 100644
--- a/src/fileStorageApi/v3/models/preview-status.ts
+++ b/src/fileStorageApi/v3/models/preview-status.ts
@@ -23,6 +23,7 @@ export enum PreviewStatus {
     PREVIEW_POSSIBLE = 'preview_possible',
     AWAITING_SCAN_STATUS = 'awaiting_scan_status',
     PREVIEW_NOT_POSSIBLE_SCAN_STATUS_ERROR = 'preview_not_possible_scan_status_error',
+    PREVIEW_NOT_POSSIBLE_SCAN_STATUS_WONT_CHECK = 'preview_not_possible_scan_status_wont_check',
     PREVIEW_NOT_POSSIBLE_SCAN_STATUS_BLOCKED = 'preview_not_possible_scan_status_blocked',
     PREVIEW_NOT_POSSIBLE_WRONG_MIME_TYPE = 'preview_not_possible_wrong_mime_type'
 }

From b9b84efceef1c92bed94b4c5385fde42e0611b05 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Thu, 24 Aug 2023 12:08:02 +0200
Subject: [PATCH 04/89] Add notification for preview status

---
 .../components/FileContentElement.vue         |  5 +-
 .../components/FileContentElementAlert.vue    | 62 ++++++++++++++++---
 src/locales/de.json                           |  3 +
 3 files changed, 58 insertions(+), 12 deletions(-)

diff --git a/src/components/feature-board-file-element/components/FileContentElement.vue b/src/components/feature-board-file-element/components/FileContentElement.vue
index c2266f6503..ff0430e895 100644
--- a/src/components/feature-board-file-element/components/FileContentElement.vue
+++ b/src/components/feature-board-file-element/components/FileContentElement.vue
@@ -10,7 +10,7 @@
 		tabindex="0"
 		@keydown.up.down="onKeydownArrow"
 	>
-		<template v-if="fileProperties">
+		<template v-if="fileProperties && fileRecord">
 			<div v-if="fileProperties.previewUrl">
 				<ImageFileDisplay
 					:fileProperties="fileProperties"
@@ -41,6 +41,7 @@
 					@delete:element="onDeleteElement"
 				/>
 			</div>
+			<FileContentElementAlert :previewStatus="fileRecord.previewStatus" />
 		</template>
 		<template v-else>
 			<FileContentElementInit
@@ -49,8 +50,6 @@
 				@upload:file="onUploadFile"
 			/>
 		</template>
-
-		<FileContentElementAlert v-if="isBlockedByVirusScan" />
 	</v-card>
 </template>
 
diff --git a/src/components/feature-board-file-element/components/FileContentElementAlert.vue b/src/components/feature-board-file-element/components/FileContentElementAlert.vue
index a43fcdfd9f..1976277041 100644
--- a/src/components/feature-board-file-element/components/FileContentElementAlert.vue
+++ b/src/components/feature-board-file-element/components/FileContentElementAlert.vue
@@ -1,27 +1,71 @@
-<template>
+<template v-if="alertProperties.text">
 	<v-alert
 		class="mb-0 py-4 rounded-t-0"
-		color="error"
+		:color="alertProperties.color"
 		data-testid="board-file-element-alert"
 		dense
-		icon="$warning"
+		:icon="alertProperties.icon"
 		text
 		variant="tonal"
 	>
-		<div class="black--text">
-			{{ $t("components.cardElement.fileElement.virusDetected") }}
+		<div class="black--text" v-if="alertProperties.text">
+			{{ $t(alertProperties.text) }}
 		</div>
 	</v-alert>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { PreviewStatus } from "@/fileStorageApi/v3";
+import { computed, defineComponent, PropType } from "vue";
 
 export default defineComponent({
 	name: "FileContentElementAlert",
-	props: {},
-	setup() {
-		return {};
+	props: {
+		previewStatus: {
+			type: Object as PropType<PreviewStatus>,
+			required: true,
+		},
+	},
+	setup(props) {
+		const alertProperties = computed(() => {
+			if (
+				props.previewStatus ===
+				PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_BLOCKED
+			) {
+				return {
+					color: "error",
+					icon: "$error",
+					text: "components.cardElement.fileElement.virusDetected",
+				};
+			} else if (props.previewStatus === PreviewStatus.AWAITING_SCAN_STATUS) {
+				return {
+					color: "info",
+					icon: "$info",
+					text: "components.cardElement.fileElement.awaitingScan",
+				};
+			} else if (
+				props.previewStatus ===
+				PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_WONT_CHECK
+			) {
+				return {
+					color: "info",
+					icon: "$info",
+					text: "components.cardElement.fileElement.scanWontCheck",
+				};
+			} else if (
+				props.previewStatus ===
+				PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_ERROR
+			) {
+				return {
+					color: "warning",
+					icon: "$warning",
+					text: "components.cardElement.fileElement.scanError",
+				};
+			} else {
+				return {};
+			}
+		});
+		return { alertProperties };
 	},
 });
 </script>
diff --git a/src/locales/de.json b/src/locales/de.json
index 015744bdb3..e6c9a45f37 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -782,6 +782,9 @@
 	"components.cardElement.deleteElement": "löschen",
 	"components.cardElement.dragElement": "verschieben",
 	"components.cardElement.fileElement.virusDetected": "Datei wurde aufgrund eines Virenverdachts gesperrt.",
+	"components.cardElement.fileElement.awaitingScan": "Vorschau wird nach erfolgreicher Virenprüfung angezeigt. Aktuell wird die Datei gescannt. Status aktualisieren",
+	"components.cardElement.fileElement.scanError": "Fehler bei der Virenprüfung. Vorschau kann nicht erstellt werden. Datei bitte erneut hochladen.",
+	"components.cardElement.fileElement.scanWontCheck": "Aufgrund der Größe kann keine Vorschau generiert werden.",
 	"components.cardElement.richTextElement": "Textelement",
 	"components.cardElement.richTextElement.placeholder": "Text hinzufügen",
 	"components.cardElement.submissionElement": "Abgabe",

From fe57d7a4f31119d3007e26569baf391453e3f7e3 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Thu, 24 Aug 2023 13:11:08 +0200
Subject: [PATCH 05/89] Refactor Alert

---
 .../components/FileContentElementAlert.vue    | 80 ++++++++++---------
 1 file changed, 42 insertions(+), 38 deletions(-)

diff --git a/src/components/feature-board-file-element/components/FileContentElementAlert.vue b/src/components/feature-board-file-element/components/FileContentElementAlert.vue
index 1976277041..86b9d8a5f1 100644
--- a/src/components/feature-board-file-element/components/FileContentElementAlert.vue
+++ b/src/components/feature-board-file-element/components/FileContentElementAlert.vue
@@ -1,4 +1,4 @@
-<template v-if="alertProperties.text">
+<template v-if="showAlert">
 	<v-alert
 		class="mb-0 py-4 rounded-t-0"
 		:color="alertProperties.color"
@@ -27,45 +27,49 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
+		const defaultProps = { color: "", icon: "", text: "" };
+		const properties = {
+			[PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_BLOCKED]: {
+				color: "error",
+				icon: "$error",
+				text: "components.cardElement.fileElement.virusDetected",
+			},
+			[PreviewStatus.AWAITING_SCAN_STATUS]: {
+				color: "info",
+				icon: "$info",
+				text: "components.cardElement.fileElement.awaitingScan",
+			},
+			[PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_WONT_CHECK]: {
+				color: "info",
+				icon: "$info",
+				text: "components.cardElement.fileElement.scanWontCheck",
+			},
+			[PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_ERROR]: {
+				color: "warning",
+				icon: "$warning",
+				text: "components.cardElement.fileElement.scanError",
+			},
+			[PreviewStatus.PREVIEW_POSSIBLE]: {
+				...defaultProps,
+			},
+			[PreviewStatus.PREVIEW_NOT_POSSIBLE_WRONG_MIME_TYPE]: {
+				...defaultProps,
+			},
+		};
+
 		const alertProperties = computed(() => {
-			if (
-				props.previewStatus ===
-				PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_BLOCKED
-			) {
-				return {
-					color: "error",
-					icon: "$error",
-					text: "components.cardElement.fileElement.virusDetected",
-				};
-			} else if (props.previewStatus === PreviewStatus.AWAITING_SCAN_STATUS) {
-				return {
-					color: "info",
-					icon: "$info",
-					text: "components.cardElement.fileElement.awaitingScan",
-				};
-			} else if (
-				props.previewStatus ===
-				PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_WONT_CHECK
-			) {
-				return {
-					color: "info",
-					icon: "$info",
-					text: "components.cardElement.fileElement.scanWontCheck",
-				};
-			} else if (
-				props.previewStatus ===
-				PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_ERROR
-			) {
-				return {
-					color: "warning",
-					icon: "$warning",
-					text: "components.cardElement.fileElement.scanError",
-				};
-			} else {
-				return {};
-			}
+			return properties[props.previewStatus];
+		});
+
+		const showAlert = computed(() => {
+			return (
+				props.previewStatus !== PreviewStatus.PREVIEW_POSSIBLE &&
+				props.previewStatus !==
+					PreviewStatus.PREVIEW_NOT_POSSIBLE_WRONG_MIME_TYPE
+			);
 		});
-		return { alertProperties };
+
+		return { alertProperties, PreviewStatus, showAlert };
 	},
 });
 </script>

From c9f78bb17dbfcba2114e6a0347efd70608833e77 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Thu, 24 Aug 2023 15:55:46 +0200
Subject: [PATCH 06/89] Show FileElement only to user with read permission if
 not blocked

---
 .../components/FileContentElement.vue         | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/feature-board-file-element/components/FileContentElement.vue b/src/components/feature-board-file-element/components/FileContentElement.vue
index ff0430e895..245ff3f5d5 100644
--- a/src/components/feature-board-file-element/components/FileContentElement.vue
+++ b/src/components/feature-board-file-element/components/FileContentElement.vue
@@ -1,5 +1,6 @@
 <template>
 	<v-card
+		v-show="showElement"
 		class="mb-4"
 		data-testid="board-file-element"
 		dense
@@ -54,10 +55,18 @@
 </template>
 
 <script lang="ts">
-import { FileRecordParentType, PreviewStatus } from "@/fileStorageApi/v3";
+import {
+	FileRecordParentType,
+	FileRecordScanStatus,
+	PreviewStatus,
+} from "@/fileStorageApi/v3";
 import { FileElementResponse } from "@/serverApi/v3";
 import { convertDownloadToPreviewUrl } from "@/utils/fileHelper";
-import { useBoardFocusHandler, useContentElementState } from "@data-board";
+import {
+	useBoardFocusHandler,
+	useBoardPermissions,
+	useContentElementState,
+} from "@data-board";
 import { useDeleteConfirmationDialog } from "@ui-confirmation-dialog";
 import { computed, defineComponent, onMounted, PropType, ref } from "vue";
 import { useFileRecord } from "../FileRecord.composable";
@@ -96,6 +105,7 @@ export default defineComponent({
 
 		useBoardFocusHandler(props.element.id, fileContentElement);
 
+		const { hasEditPermission } = useBoardPermissions();
 		const { modelValue } = useContentElementState(props);
 		const { fetchFile, upload, fileRecord } = useFileStorageApi(
 			props.element.id,
@@ -138,6 +148,16 @@ export default defineComponent({
 			return fileRecord.value !== undefined || props.isEditMode === true;
 		});
 
+		const showElement = computed(() => {
+			return (
+				hasEditPermission ||
+				(!hasEditPermission &&
+					fileRecord.value !== undefined &&
+					fileRecord.value?.securityCheckStatus !==
+						FileRecordScanStatus.BLOCKED)
+			);
+		});
+
 		onMounted(() => {
 			(async () => {
 				await fetchFile();
@@ -197,6 +217,7 @@ export default defineComponent({
 			modelValue,
 			needsFileUpload,
 			url,
+			showElement,
 			onDeleteElement,
 			onKeydownArrow,
 			onMoveFileEditDown,

From 08c15bf427ca98a5cb0bdc60e20b737cbce13bb7 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Thu, 24 Aug 2023 15:56:06 +0200
Subject: [PATCH 07/89] Fix conditional rendering of alert

---
 .../components/FileContentElementAlert.vue                   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/feature-board-file-element/components/FileContentElementAlert.vue b/src/components/feature-board-file-element/components/FileContentElementAlert.vue
index 86b9d8a5f1..0d1b79b07c 100644
--- a/src/components/feature-board-file-element/components/FileContentElementAlert.vue
+++ b/src/components/feature-board-file-element/components/FileContentElementAlert.vue
@@ -1,5 +1,6 @@
-<template v-if="showAlert">
+<template>
 	<v-alert
+		v-if="showAlert"
 		class="mb-0 py-4 rounded-t-0"
 		:color="alertProperties.color"
 		data-testid="board-file-element-alert"
@@ -22,7 +23,7 @@ export default defineComponent({
 	name: "FileContentElementAlert",
 	props: {
 		previewStatus: {
-			type: Object as PropType<PreviewStatus>,
+			type: String as PropType<PreviewStatus>,
 			required: true,
 		},
 	},

From 952cd5f9a60f0ab6765a24144bf1a7472d06d119 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Fri, 25 Aug 2023 14:13:31 +0200
Subject: [PATCH 08/89] Revert "Show FileElement only to user with read
 permission if not blocked"

This reverts commit c9f78bb17dbfcba2114e6a0347efd70608833e77.
---
 .../components/FileContentElement.vue         | 25 ++-----------------
 1 file changed, 2 insertions(+), 23 deletions(-)

diff --git a/src/components/feature-board-file-element/components/FileContentElement.vue b/src/components/feature-board-file-element/components/FileContentElement.vue
index 245ff3f5d5..ff0430e895 100644
--- a/src/components/feature-board-file-element/components/FileContentElement.vue
+++ b/src/components/feature-board-file-element/components/FileContentElement.vue
@@ -1,6 +1,5 @@
 <template>
 	<v-card
-		v-show="showElement"
 		class="mb-4"
 		data-testid="board-file-element"
 		dense
@@ -55,18 +54,10 @@
 </template>
 
 <script lang="ts">
-import {
-	FileRecordParentType,
-	FileRecordScanStatus,
-	PreviewStatus,
-} from "@/fileStorageApi/v3";
+import { FileRecordParentType, PreviewStatus } from "@/fileStorageApi/v3";
 import { FileElementResponse } from "@/serverApi/v3";
 import { convertDownloadToPreviewUrl } from "@/utils/fileHelper";
-import {
-	useBoardFocusHandler,
-	useBoardPermissions,
-	useContentElementState,
-} from "@data-board";
+import { useBoardFocusHandler, useContentElementState } from "@data-board";
 import { useDeleteConfirmationDialog } from "@ui-confirmation-dialog";
 import { computed, defineComponent, onMounted, PropType, ref } from "vue";
 import { useFileRecord } from "../FileRecord.composable";
@@ -105,7 +96,6 @@ export default defineComponent({
 
 		useBoardFocusHandler(props.element.id, fileContentElement);
 
-		const { hasEditPermission } = useBoardPermissions();
 		const { modelValue } = useContentElementState(props);
 		const { fetchFile, upload, fileRecord } = useFileStorageApi(
 			props.element.id,
@@ -148,16 +138,6 @@ export default defineComponent({
 			return fileRecord.value !== undefined || props.isEditMode === true;
 		});
 
-		const showElement = computed(() => {
-			return (
-				hasEditPermission ||
-				(!hasEditPermission &&
-					fileRecord.value !== undefined &&
-					fileRecord.value?.securityCheckStatus !==
-						FileRecordScanStatus.BLOCKED)
-			);
-		});
-
 		onMounted(() => {
 			(async () => {
 				await fetchFile();
@@ -217,7 +197,6 @@ export default defineComponent({
 			modelValue,
 			needsFileUpload,
 			url,
-			showElement,
 			onDeleteElement,
 			onKeydownArrow,
 			onMoveFileEditDown,

From 4f468c869321bb02c0bb22f32d1ba5c621e5102b Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Fri, 25 Aug 2023 15:25:27 +0200
Subject: [PATCH 09/89] Remove fileRecordComposable and fix disaable of
 download button

---
 .../FileRecord.composable.ts                  | 34 --------
 .../components/FileContentElement.vue         | 26 +++---
 .../feature-board-file-element/index.ts       |  3 +-
 src/utils/fileHelper.ts                       | 15 +++-
 src/utils/fileHelper.unit.ts                  | 79 +++++++++++++++++++
 .../composable-mocks/fileRecordMock.ts        | 28 -------
 tests/test-utils/composable-mocks/index.ts    |  1 -
 7 files changed, 107 insertions(+), 79 deletions(-)
 delete mode 100644 src/components/feature-board-file-element/FileRecord.composable.ts
 delete mode 100644 tests/test-utils/composable-mocks/fileRecordMock.ts

diff --git a/src/components/feature-board-file-element/FileRecord.composable.ts b/src/components/feature-board-file-element/FileRecord.composable.ts
deleted file mode 100644
index 70911228be..0000000000
--- a/src/components/feature-board-file-element/FileRecord.composable.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { FileRecordResponse, FileRecordScanStatus } from "@/fileStorageApi/v3";
-import { Ref, computed } from "vue";
-
-export const useFileRecord = (
-	fileRecord: Ref<FileRecordResponse | undefined>
-) => {
-	const isImage = computed(() => {
-		if (!fileRecord.value) {
-			return false;
-		}
-
-		const { mimeType } = fileRecord.value;
-		const result =
-			mimeType === "image/bmp" ||
-			mimeType === "image/gif" ||
-			mimeType === "image/jpeg" ||
-			mimeType === "image/png" ||
-			mimeType === "image/svg+xml";
-
-		return result;
-	});
-
-	const isBlockedByVirusScan = computed(
-		() => fileRecord.value?.securityCheckStatus === FileRecordScanStatus.BLOCKED
-	);
-
-	const url = computed(() =>
-		!isBlockedByVirusScan.value && fileRecord.value?.url
-			? fileRecord.value.url
-			: ""
-	);
-
-	return { isImage, isBlockedByVirusScan, url };
-};
diff --git a/src/components/feature-board-file-element/components/FileContentElement.vue b/src/components/feature-board-file-element/components/FileContentElement.vue
index ff0430e895..1b20afe88d 100644
--- a/src/components/feature-board-file-element/components/FileContentElement.vue
+++ b/src/components/feature-board-file-element/components/FileContentElement.vue
@@ -54,13 +54,16 @@
 </template>
 
 <script lang="ts">
-import { FileRecordParentType, PreviewStatus } from "@/fileStorageApi/v3";
+import { FileRecordParentType } from "@/fileStorageApi/v3";
 import { FileElementResponse } from "@/serverApi/v3";
-import { convertDownloadToPreviewUrl } from "@/utils/fileHelper";
+import {
+	convertDownloadToPreviewUrl,
+	isDownloadAllowed,
+	isPreviewPossible,
+} from "@/utils/fileHelper";
 import { useBoardFocusHandler, useContentElementState } from "@data-board";
 import { useDeleteConfirmationDialog } from "@ui-confirmation-dialog";
 import { computed, defineComponent, onMounted, PropType, ref } from "vue";
-import { useFileRecord } from "../FileRecord.composable";
 import { useFileStorageApi } from "../FileStorageApi.composable";
 import FileContentElementAlert from "./FileContentElementAlert.vue";
 import FileContentElementDisplay from "./FileContentElementDisplay.vue";
@@ -103,24 +106,23 @@ export default defineComponent({
 		);
 		const { askDeleteConfirmation } = useDeleteConfirmationDialog();
 
-		const { isBlockedByVirusScan, isImage, url } = useFileRecord(fileRecord);
-
 		const fileProperties = computed(() => {
 			if (fileRecord.value === undefined) {
 				return;
 			}
 
-			const previewUrl =
-				fileRecord.value?.previewStatus === PreviewStatus.PREVIEW_POSSIBLE
-					? convertDownloadToPreviewUrl(fileRecord.value.url)
-					: undefined;
+			const previewUrl = isPreviewPossible(fileRecord.value?.previewStatus)
+				? convertDownloadToPreviewUrl(fileRecord.value.url)
+				: undefined;
 
 			return {
 				size: fileRecord.value.size,
 				name: fileRecord.value.name,
 				url: fileRecord.value.url,
 				previewUrl,
-				isDownloadAllowed: !isBlockedByVirusScan,
+				isDownloadAllowed: isDownloadAllowed(
+					fileRecord.value.securityCheckStatus
+				),
 			};
 		});
 
@@ -191,12 +193,10 @@ export default defineComponent({
 			fileProperties,
 			fileRecord,
 			hasFileRecord,
-			isBlockedByVirusScan,
-			isImage,
+
 			isOutlined,
 			modelValue,
 			needsFileUpload,
-			url,
 			onDeleteElement,
 			onKeydownArrow,
 			onMoveFileEditDown,
diff --git a/src/components/feature-board-file-element/index.ts b/src/components/feature-board-file-element/index.ts
index fc1b5807c1..43a3fb9686 100644
--- a/src/components/feature-board-file-element/index.ts
+++ b/src/components/feature-board-file-element/index.ts
@@ -1,5 +1,4 @@
 import FileContentElement from "./components/FileContentElement.vue";
-import { useFileRecord } from "./FileRecord.composable";
 import { useFileStorageApi } from "./FileStorageApi.composable";
 
-export { FileContentElement, useFileRecord, useFileStorageApi };
+export { FileContentElement, useFileStorageApi };
diff --git a/src/utils/fileHelper.ts b/src/utils/fileHelper.ts
index d694edc12c..eb3e6426fe 100644
--- a/src/utils/fileHelper.ts
+++ b/src/utils/fileHelper.ts
@@ -1,4 +1,9 @@
-import { PreviewOutputMimeTypes, PreviewWidth } from "@/fileStorageApi/v3";
+import {
+	FileRecordScanStatus,
+	PreviewOutputMimeTypes,
+	PreviewStatus,
+	PreviewWidth,
+} from "@/fileStorageApi/v3";
 
 export const toBase64 = (file: File) =>
 	new Promise((resolve, reject) => {
@@ -54,3 +59,11 @@ export function convertDownloadToPreviewUrl(downloadUrl: string): string {
 
 	return previewUrl;
 }
+
+export function isDownloadAllowed(scanStatus: FileRecordScanStatus): boolean {
+	return scanStatus !== FileRecordScanStatus.BLOCKED;
+}
+
+export function isPreviewPossible(previewStatus: PreviewStatus): boolean {
+	return previewStatus === PreviewStatus.PREVIEW_POSSIBLE;
+}
diff --git a/src/utils/fileHelper.unit.ts b/src/utils/fileHelper.unit.ts
index fda6e21c93..794f759b7a 100644
--- a/src/utils/fileHelper.unit.ts
+++ b/src/utils/fileHelper.unit.ts
@@ -1,8 +1,11 @@
+import { FileRecordScanStatus, PreviewStatus } from "@/fileStorageApi/v3";
 import {
 	convertDownloadToPreviewUrl,
 	convertFileSize,
 	downloadFile,
 	getFileExtension,
+	isDownloadAllowed,
+	isPreviewPossible,
 } from "./fileHelper";
 
 describe("@/utils/fileHelper", () => {
@@ -173,4 +176,80 @@ describe("@/utils/fileHelper", () => {
 			expect(result).toEqual("/file/preview/233/download.txt");
 		});
 	});
+
+	describe("isDownloadAllowed", () => {
+		describe("when scan status is not blocked", () => {
+			it("should return true", () => {
+				const result = isDownloadAllowed(FileRecordScanStatus.VERIFIED);
+
+				expect(result).toBe(true);
+			});
+		});
+
+		describe("when scan status is blocked", () => {
+			it("should return false", () => {
+				const result = isDownloadAllowed(FileRecordScanStatus.BLOCKED);
+
+				expect(result).toBe(false);
+			});
+		});
+	});
+
+	describe("isPreviewPossible", () => {
+		describe("when preview status is possible", () => {
+			it("should return true", () => {
+				const result = isPreviewPossible(PreviewStatus.PREVIEW_POSSIBLE);
+
+				expect(result).toBe(true);
+			});
+		});
+
+		describe("when preview status is AWAITING_SCAN_STATUS", () => {
+			it("should return false", () => {
+				const result = isPreviewPossible(PreviewStatus.AWAITING_SCAN_STATUS);
+
+				expect(result).toBe(false);
+			});
+		});
+
+		describe("when preview status is PREVIEW_NOT_POSSIBLE_SCAN_STATUS_ERROR", () => {
+			it("should return false", () => {
+				const result = isPreviewPossible(
+					PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_ERROR
+				);
+
+				expect(result).toBe(false);
+			});
+		});
+
+		describe("when preview status is PREVIEW_NOT_POSSIBLE_SCAN_STATUS_WONT_CHECK", () => {
+			it("should return false", () => {
+				const result = isPreviewPossible(
+					PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_WONT_CHECK
+				);
+
+				expect(result).toBe(false);
+			});
+		});
+
+		describe("when preview status is PREVIEW_NOT_POSSIBLE_SCAN_STATUS_BLOCKED", () => {
+			it("should return false", () => {
+				const result = isPreviewPossible(
+					PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_BLOCKED
+				);
+
+				expect(result).toBe(false);
+			});
+		});
+
+		describe("when preview status is PREVIEW_NOT_POSSIBLE_WRONG_MIME_TYPE", () => {
+			it("should return false", () => {
+				const result = isPreviewPossible(
+					PreviewStatus.PREVIEW_NOT_POSSIBLE_WRONG_MIME_TYPE
+				);
+
+				expect(result).toBe(false);
+			});
+		});
+	});
 });
diff --git a/tests/test-utils/composable-mocks/fileRecordMock.ts b/tests/test-utils/composable-mocks/fileRecordMock.ts
deleted file mode 100644
index 058e6c64b3..0000000000
--- a/tests/test-utils/composable-mocks/fileRecordMock.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useFileRecord } from "@feature-board-file-element";
-import { jest } from "@jest/globals";
-import { computed } from "vue";
-
-interface Props {
-	isImageMock?: boolean;
-	isBlockedByVirusScanMock?: boolean;
-	urlMock?: string;
-}
-
-export const setupFileRecordMock = (props: Props = {}) => {
-	const { isImageMock, isBlockedByVirusScanMock, urlMock } = props;
-
-	const isImage = computed(() => isImageMock ?? false);
-	const isBlockedByVirusScan = computed(
-		() => isBlockedByVirusScanMock ?? false
-	);
-	const url = computed(() => urlMock ?? "");
-
-	const mocks = {
-		isImage,
-		isBlockedByVirusScan,
-		url,
-	};
-
-	const useFileRecordMock = jest.mocked(useFileRecord);
-	useFileRecordMock.mockReturnValue(mocks);
-};
diff --git a/tests/test-utils/composable-mocks/index.ts b/tests/test-utils/composable-mocks/index.ts
index 0a5dc82afd..2876cece81 100644
--- a/tests/test-utils/composable-mocks/index.ts
+++ b/tests/test-utils/composable-mocks/index.ts
@@ -1,2 +1 @@
-export * from "./fileRecordMock";
 export * from "../../../src/components/feature-board/test-utils/sharedElementTypeSelectionMock";

From e8ac4272c398d9235574bff7a73e489595a61fd3 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Mon, 28 Aug 2023 08:58:44 +0200
Subject: [PATCH 10/89] Add more translations

---
 src/locales/en.json | 3 +++
 src/locales/es.json | 3 +++
 src/locales/uk.json | 3 +++
 3 files changed, 9 insertions(+)

diff --git a/src/locales/en.json b/src/locales/en.json
index 7dcb9933b3..e7fb024b01 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -778,6 +778,9 @@
 	"components.cardElement.deleteElement": "Delete element",
 	"components.cardElement.dragElement": "Move element",
 	"components.cardElement.fileElement.virusDetected": "File has been locked due to a suspected virus.",
+	"components.cardElement.fileElement.awaitingScan": "Preview is displayed after a successful virus scan. The file is currently being scanned.",
+	"components.cardElement.fileElement.scanError": "Error during virus check. Preview cannot be created. Please upload the file again.",
+	"components.cardElement.fileElement.scanWontCheck": "Due to the size, no preview can be generated.",
 	"components.cardElement.richTextElement": "Text element",
 	"components.cardElement.richTextElement.placeholder": "Add text",
 	"components.cardElement.submissionElement": "Submission",
diff --git a/src/locales/es.json b/src/locales/es.json
index c0385e2749..22c8bb02d6 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -788,6 +788,9 @@
 	"components.cardElement.deleteElement": "Suprimir elemento",
 	"components.cardElement.dragElement": "Mover elemento",
 	"components.cardElement.fileElement.virusDetected": "Se ha bloqueado el archivo debido a un virus sospechoso.",
+	"components.cardElement.fileElement.awaitingScan": "La vista previa se muestra después de una comprobación de virus correcta. El fichero se está analizando actualmente.",
+	"components.cardElement.fileElement.scanError": "Error durante la comprobación de virus. No se puede crear la vista previa. Vuelva a cargar el archivo.",
+	"components.cardElement.fileElement.scanWontCheck": "Debido al tamaño, no se puede generar una vista previa.",
 	"components.cardElement.richTextElement": "Elemento texto",
 	"components.cardElement.richTextElement.placeholder": "Añadir texto",
 	"components.cardElement.submissionElement": "Envío",
diff --git a/src/locales/uk.json b/src/locales/uk.json
index 5bdd85da63..93e7f1a319 100644
--- a/src/locales/uk.json
+++ b/src/locales/uk.json
@@ -307,6 +307,9 @@
 	"components.cardElement.deleteElement": "Видалити елемент",
 	"components.cardElement.dragElement": "Перемістити елемент",
 	"components.cardElement.fileElement.virusDetected": "Файл було заблоковано через підозру на вірус.",
+	"components.cardElement.fileElement.awaitingScan": "Попередній перегляд відображається після успішної перевірки на віруси. Наразі відбувається перевірка файлу.",
+	"components.cardElement.fileElement.scanError": "Помилка під час перевірки на віруси. Неможливо створити попередній перегляд. Будь ласка, завантажте файл ще раз.",
+	"components.cardElement.fileElement.scanWontCheck": "Через розмір не може бути створено прев'ю.",
 	"components.cardElement.richTextElement": "Текстовий елемент",
 	"components.cardElement.richTextElement.placeholder": "додати текст",
 	"components.cardElement.submissionElement": "Подання",

From 7fd6d7a31dd67444bad9096ebfbf123fa58363f0 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Mon, 28 Aug 2023 11:13:13 +0200
Subject: [PATCH 11/89] Add reload status link

---
 .../components/FileContentElement.vue         | 10 +++++-
 .../components/FileContentElementAlert.vue    | 34 +++++++++++++------
 src/locales/de.json                           |  1 +
 src/locales/en.json                           |  1 +
 src/locales/es.json                           |  1 +
 src/locales/uk.json                           |  1 +
 6 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/components/feature-board-file-element/components/FileContentElement.vue b/src/components/feature-board-file-element/components/FileContentElement.vue
index 1b20afe88d..0c091b9e23 100644
--- a/src/components/feature-board-file-element/components/FileContentElement.vue
+++ b/src/components/feature-board-file-element/components/FileContentElement.vue
@@ -41,7 +41,10 @@
 					@delete:element="onDeleteElement"
 				/>
 			</div>
-			<FileContentElementAlert :previewStatus="fileRecord.previewStatus" />
+			<FileContentElementAlert
+				:previewStatus="fileRecord.previewStatus"
+				@on-status-reload="onFetchFile"
+			/>
 		</template>
 		<template v-else>
 			<FileContentElementInit
@@ -188,6 +191,10 @@ export default defineComponent({
 			}
 		};
 
+		const onFetchFile = async (): Promise<void> => {
+			await fetchFile();
+		};
+
 		return {
 			fileContentElement,
 			fileProperties,
@@ -202,6 +209,7 @@ export default defineComponent({
 			onMoveFileEditDown,
 			onMoveFileEditUp,
 			onUploadFile,
+			onFetchFile,
 		};
 	},
 });
diff --git a/src/components/feature-board-file-element/components/FileContentElementAlert.vue b/src/components/feature-board-file-element/components/FileContentElementAlert.vue
index 0d1b79b07c..1d59f3714c 100644
--- a/src/components/feature-board-file-element/components/FileContentElementAlert.vue
+++ b/src/components/feature-board-file-element/components/FileContentElementAlert.vue
@@ -11,6 +11,9 @@
 	>
 		<div class="black--text" v-if="alertProperties.text">
 			{{ $t(alertProperties.text) }}
+			<a v-if="alertProperties.actionText" @click.prevent="onStatusReload">
+				{{ $t(alertProperties.actionText) }}
+			</a>
 		</div>
 	</v-alert>
 </template>
@@ -19,6 +22,13 @@
 import { PreviewStatus } from "@/fileStorageApi/v3";
 import { computed, defineComponent, PropType } from "vue";
 
+interface Props {
+	color: string;
+	icon: string;
+	text: string;
+	actionText?: string;
+}
+
 export default defineComponent({
 	name: "FileContentElementAlert",
 	props: {
@@ -27,9 +37,9 @@ export default defineComponent({
 			required: true,
 		},
 	},
-	setup(props) {
-		const defaultProps = { color: "", icon: "", text: "" };
-		const properties = {
+	emits: ["on-status-reload"],
+	setup(props, { emit }) {
+		const properties: { [key: string]: Props } = {
 			[PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_BLOCKED]: {
 				color: "error",
 				icon: "$error",
@@ -39,6 +49,7 @@ export default defineComponent({
 				color: "info",
 				icon: "$info",
 				text: "components.cardElement.fileElement.awaitingScan",
+				actionText: "components.cardElement.fileElement.reloadStatus",
 			},
 			[PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_WONT_CHECK]: {
 				color: "info",
@@ -50,12 +61,6 @@ export default defineComponent({
 				icon: "$warning",
 				text: "components.cardElement.fileElement.scanError",
 			},
-			[PreviewStatus.PREVIEW_POSSIBLE]: {
-				...defaultProps,
-			},
-			[PreviewStatus.PREVIEW_NOT_POSSIBLE_WRONG_MIME_TYPE]: {
-				...defaultProps,
-			},
 		};
 
 		const alertProperties = computed(() => {
@@ -70,7 +75,16 @@ export default defineComponent({
 			);
 		});
 
-		return { alertProperties, PreviewStatus, showAlert };
+		const onStatusReload = () => {
+			emit("on-status-reload");
+		};
+
+		return {
+			alertProperties,
+			PreviewStatus,
+			showAlert,
+			onStatusReload,
+		};
 	},
 });
 </script>
diff --git a/src/locales/de.json b/src/locales/de.json
index d4e43ba408..41c03513c9 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -786,6 +786,7 @@
 	"components.cardElement.fileElement.awaitingScan": "Vorschau wird nach erfolgreicher Virenprüfung angezeigt. Aktuell wird die Datei gescannt. Status aktualisieren",
 	"components.cardElement.fileElement.scanError": "Fehler bei der Virenprüfung. Vorschau kann nicht erstellt werden. Datei bitte erneut hochladen.",
 	"components.cardElement.fileElement.scanWontCheck": "Aufgrund der Größe kann keine Vorschau generiert werden.",
+	"components.cardElement.fileElement.reloadStatus": "Status aktualisieren",
 	"components.cardElement.richTextElement": "Textelement",
 	"components.cardElement.richTextElement.placeholder": "Text hinzufügen",
 	"components.cardElement.submissionElement": "Abgabe",
diff --git a/src/locales/en.json b/src/locales/en.json
index e7fb024b01..d783df558d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -780,6 +780,7 @@
 	"components.cardElement.fileElement.virusDetected": "File has been locked due to a suspected virus.",
 	"components.cardElement.fileElement.awaitingScan": "Preview is displayed after a successful virus scan. The file is currently being scanned.",
 	"components.cardElement.fileElement.scanError": "Error during virus check. Preview cannot be created. Please upload the file again.",
+	"components.cardElement.fileElement.reloadStatus": "Update status",
 	"components.cardElement.fileElement.scanWontCheck": "Due to the size, no preview can be generated.",
 	"components.cardElement.richTextElement": "Text element",
 	"components.cardElement.richTextElement.placeholder": "Add text",
diff --git a/src/locales/es.json b/src/locales/es.json
index 22c8bb02d6..646a5895cf 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -791,6 +791,7 @@
 	"components.cardElement.fileElement.awaitingScan": "La vista previa se muestra después de una comprobación de virus correcta. El fichero se está analizando actualmente.",
 	"components.cardElement.fileElement.scanError": "Error durante la comprobación de virus. No se puede crear la vista previa. Vuelva a cargar el archivo.",
 	"components.cardElement.fileElement.scanWontCheck": "Debido al tamaño, no se puede generar una vista previa.",
+	"components.cardElement.fileElement.reloadStatus": "Estado de actualización",
 	"components.cardElement.richTextElement": "Elemento texto",
 	"components.cardElement.richTextElement.placeholder": "Añadir texto",
 	"components.cardElement.submissionElement": "Envío",
diff --git a/src/locales/uk.json b/src/locales/uk.json
index 93e7f1a319..222481e4da 100644
--- a/src/locales/uk.json
+++ b/src/locales/uk.json
@@ -310,6 +310,7 @@
 	"components.cardElement.fileElement.awaitingScan": "Попередній перегляд відображається після успішної перевірки на віруси. Наразі відбувається перевірка файлу.",
 	"components.cardElement.fileElement.scanError": "Помилка під час перевірки на віруси. Неможливо створити попередній перегляд. Будь ласка, завантажте файл ще раз.",
 	"components.cardElement.fileElement.scanWontCheck": "Через розмір не може бути створено прев'ю.",
+	"components.cardElement.fileElement.reloadStatus": "Статус оновлення",
 	"components.cardElement.richTextElement": "Текстовий елемент",
 	"components.cardElement.richTextElement.placeholder": "додати текст",
 	"components.cardElement.submissionElement": "Подання",

From dd5ed6a747ef213a0e74e46be64d29e4292fd0c1 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Mon, 28 Aug 2023 11:18:39 +0200
Subject: [PATCH 12/89] Remove empty line

---
 .../feature-board-file-element/components/FileContentElement.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/feature-board-file-element/components/FileContentElement.vue b/src/components/feature-board-file-element/components/FileContentElement.vue
index 0c091b9e23..cb9be07002 100644
--- a/src/components/feature-board-file-element/components/FileContentElement.vue
+++ b/src/components/feature-board-file-element/components/FileContentElement.vue
@@ -200,7 +200,6 @@ export default defineComponent({
 			fileProperties,
 			fileRecord,
 			hasFileRecord,
-
 			isOutlined,
 			modelValue,
 			needsFileUpload,

From 6a7ef82a76d9b811e553e58940b6f83a263dfa43 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Mon, 28 Aug 2023 11:32:51 +0200
Subject: [PATCH 13/89] Add width param to convertDownloadToPreviewUrl

---
 src/utils/fileHelper.ts      |  7 +++++--
 src/utils/fileHelper.unit.ts | 23 ++++++++++++++++++++---
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/utils/fileHelper.ts b/src/utils/fileHelper.ts
index eb3e6426fe..8299b44794 100644
--- a/src/utils/fileHelper.ts
+++ b/src/utils/fileHelper.ts
@@ -52,10 +52,13 @@ export function getFileExtension(fileName: string): string {
 	return ext;
 }
 
-export function convertDownloadToPreviewUrl(downloadUrl: string): string {
+export function convertDownloadToPreviewUrl(
+	downloadUrl: string,
+	width: PreviewWidth = PreviewWidth._500
+): string {
 	const previewUrl =
 		downloadUrl.replace("download", "preview") +
-		`?outputFormat=${PreviewOutputMimeTypes.IMAGE_WEBP}&width=${PreviewWidth._500}`;
+		`?outputFormat=${PreviewOutputMimeTypes.IMAGE_WEBP}&width=${width}`;
 
 	return previewUrl;
 }
diff --git a/src/utils/fileHelper.unit.ts b/src/utils/fileHelper.unit.ts
index 794f759b7a..f8ad71d103 100644
--- a/src/utils/fileHelper.unit.ts
+++ b/src/utils/fileHelper.unit.ts
@@ -157,7 +157,9 @@ describe("@/utils/fileHelper", () => {
 
 			const result = convertDownloadToPreviewUrl(url);
 
-			expect(result).toEqual("/file/preview/233/text.txt");
+			expect(result).toEqual(
+				`/file/preview/233/text.txt?outputFormat=image/webp&width=500`
+			);
 		});
 
 		it("should return the preview url with two download words in source", () => {
@@ -165,7 +167,9 @@ describe("@/utils/fileHelper", () => {
 
 			const result = convertDownloadToPreviewUrl(url);
 
-			expect(result).toEqual("/file/preview/233/download");
+			expect(result).toEqual(
+				`/file/preview/233/download?outputFormat=image/webp&width=500`
+			);
 		});
 
 		it("should return the preview url with two download words in source with extension", () => {
@@ -173,7 +177,20 @@ describe("@/utils/fileHelper", () => {
 
 			const result = convertDownloadToPreviewUrl(url);
 
-			expect(result).toEqual("/file/preview/233/download.txt");
+			expect(result).toEqual(
+				`/file/preview/233/download.txt?outputFormat=image/webp&width=500`
+			);
+		});
+
+		it("should return the preview url", () => {
+			const url = "/file/download/233/text.txt";
+
+			// @ts-expect-error Enum only provides on value currently but will provide more in the future
+			const result = convertDownloadToPreviewUrl(url, 1000);
+
+			expect(result).toEqual(
+				`/file/preview/233/text.txt?outputFormat=image/webp&width=1000`
+			);
 		});
 	});
 

From 0875ea674be1ee8b42d2c1cc175ded65ac2a49a1 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Mon, 28 Aug 2023 12:20:06 +0200
Subject: [PATCH 14/89] Add href to alert

---
 .../components/FileContentElementAlert.vue                  | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/feature-board-file-element/components/FileContentElementAlert.vue b/src/components/feature-board-file-element/components/FileContentElementAlert.vue
index 1d59f3714c..4cfb1c86dd 100644
--- a/src/components/feature-board-file-element/components/FileContentElementAlert.vue
+++ b/src/components/feature-board-file-element/components/FileContentElementAlert.vue
@@ -11,7 +11,11 @@
 	>
 		<div class="black--text" v-if="alertProperties.text">
 			{{ $t(alertProperties.text) }}
-			<a v-if="alertProperties.actionText" @click.prevent="onStatusReload">
+			<a
+				href="#"
+				v-if="alertProperties.actionText"
+				@click.prevent="onStatusReload"
+			>
 				{{ $t(alertProperties.actionText) }}
 			</a>
 		</div>

From 1a047df289c9f3e5d4ed3302af91713afde20240 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Mon, 28 Aug 2023 18:33:20 +0200
Subject: [PATCH 15/89] Fix tests

---
 .../FileRecord.composable.unit.ts             | 164 ----
 .../components/FileContentElement.unit.ts     | 819 ++++++------------
 .../FileContentElementAlert.unit.ts           | 206 ++++-
 .../FileContentElementDisplay.unit.ts         |  12 +-
 .../components/FileContentElementEdit.unit.ts |  14 +-
 .../FileContentElementFooter.unit.ts          |  22 +-
 .../components/ImageFileDisplay.unit.ts       |  27 +-
 7 files changed, 484 insertions(+), 780 deletions(-)
 delete mode 100644 src/components/feature-board-file-element/FileRecord.composable.unit.ts

diff --git a/src/components/feature-board-file-element/FileRecord.composable.unit.ts b/src/components/feature-board-file-element/FileRecord.composable.unit.ts
deleted file mode 100644
index 21d6042530..0000000000
--- a/src/components/feature-board-file-element/FileRecord.composable.unit.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-import {
-	FileRecordParentType,
-	FileRecordScanStatus,
-} from "@/fileStorageApi/v3";
-import { ObjectIdMock, fileRecordResponseFactory } from "@@/tests/test-utils";
-import { ref } from "vue";
-import { useFileRecord } from "./FileRecord.composable";
-
-describe("FileRecord Composable", () => {
-	describe("isImage", () => {
-		describe("when file record is undefined", () => {
-			const setup = () => {
-				const fileRecordResponse = ref(undefined);
-
-				return { fileRecordResponse };
-			};
-
-			it("should set isImage to be false", async () => {
-				const { fileRecordResponse } = setup();
-
-				const { isImage } = useFileRecord(fileRecordResponse);
-
-				expect(isImage.value).toBe(false);
-			});
-		});
-
-		describe("when file is an image", () => {
-			const setup = () => {
-				const parentId = ObjectIdMock();
-				const parentType = FileRecordParentType.BOARDNODES;
-				const fileRecordResponse = ref(
-					fileRecordResponseFactory.build({
-						parentId,
-						parentType,
-						mimeType: "image/png",
-					})
-				);
-
-				return { fileRecordResponse };
-			};
-
-			it("should set isImage to be true", async () => {
-				const { fileRecordResponse } = setup();
-
-				const { isImage } = useFileRecord(fileRecordResponse);
-
-				expect(isImage.value).toBe(true);
-			});
-		});
-
-		describe("when file record is not an image", () => {
-			const setup = () => {
-				const parentId = ObjectIdMock();
-				const parentType = FileRecordParentType.BOARDNODES;
-				const fileRecordResponse = ref(
-					fileRecordResponseFactory.build({
-						parentId,
-						parentType,
-					})
-				);
-
-				return { fileRecordResponse };
-			};
-
-			it("should set isImage to be false", async () => {
-				const { fileRecordResponse } = setup();
-
-				const { isImage } = useFileRecord(fileRecordResponse);
-
-				expect(isImage.value).toBe(false);
-			});
-		});
-	});
-
-	describe("isBlockedByVirusScan & url", () => {
-		describe("when file record is undefined", () => {
-			const setup = () => {
-				const fileRecordResponse = ref(undefined);
-
-				return { fileRecordResponse };
-			};
-
-			it("should set isBlockedByVirusScan to be false", async () => {
-				const { fileRecordResponse } = setup();
-
-				const { isBlockedByVirusScan } = useFileRecord(fileRecordResponse);
-
-				expect(isBlockedByVirusScan.value).toBe(false);
-			});
-
-			it("should set url to be empty", async () => {
-				const { fileRecordResponse } = setup();
-
-				const { url } = useFileRecord(fileRecordResponse);
-
-				expect(url.value).toBe("");
-			});
-		});
-
-		describe("when file is blocked by the virus scanner", () => {
-			const setup = () => {
-				const parentId = ObjectIdMock();
-				const parentType = FileRecordParentType.BOARDNODES;
-				const fileRecordResponse = ref(
-					fileRecordResponseFactory.build({
-						parentId,
-						parentType,
-						securityCheckStatus: FileRecordScanStatus.BLOCKED,
-					})
-				);
-
-				return { fileRecordResponse };
-			};
-
-			it("should set isBlockedByVirusScan to be true", async () => {
-				const { fileRecordResponse } = setup();
-
-				const { isBlockedByVirusScan } = useFileRecord(fileRecordResponse);
-
-				expect(isBlockedByVirusScan.value).toBe(true);
-			});
-
-			it("should set url to be empty", async () => {
-				const { fileRecordResponse } = setup();
-
-				const { url } = useFileRecord(fileRecordResponse);
-
-				expect(url.value).toBe("");
-			});
-		});
-
-		describe("when file is not blocked by the virus scanner", () => {
-			const setup = () => {
-				const parentId = ObjectIdMock();
-				const parentType = FileRecordParentType.BOARDNODES;
-				const fileRecordResponse = ref(
-					fileRecordResponseFactory.build({
-						parentId,
-						parentType,
-						securityCheckStatus: FileRecordScanStatus.VERIFIED,
-					})
-				);
-
-				return { fileRecordResponse };
-			};
-
-			it("should set isBlockedByVirusScan to be false", async () => {
-				const { fileRecordResponse } = setup();
-
-				const { isBlockedByVirusScan } = useFileRecord(fileRecordResponse);
-
-				expect(isBlockedByVirusScan.value).toBe(false);
-			});
-
-			it("should set url correctly", async () => {
-				const { fileRecordResponse } = setup();
-
-				const { url } = useFileRecord(fileRecordResponse);
-
-				expect(url.value).toBe(fileRecordResponse.value.url);
-			});
-		});
-	});
-});
diff --git a/src/components/feature-board-file-element/components/FileContentElement.unit.ts b/src/components/feature-board-file-element/components/FileContentElement.unit.ts
index 855f53ddbf..a3894b7fec 100644
--- a/src/components/feature-board-file-element/components/FileContentElement.unit.ts
+++ b/src/components/feature-board-file-element/components/FileContentElement.unit.ts
@@ -1,6 +1,7 @@
-import { FileRecordScanStatus } from "@/fileStorageApi/v3";
+import { FileRecordScanStatus, PreviewStatus } from "@/fileStorageApi/v3";
 import NotifierModule from "@/store/notifier";
 import { AnyContentElement } from "@/types/board/ContentElement";
+import { convertDownloadToPreviewUrl } from "@/utils/fileHelper";
 import { I18N_KEY, NOTIFIER_MODULE_KEY } from "@/utils/inject";
 import { createModuleMocks } from "@/utils/mock-store-module";
 import { setupFileStorageApiMock } from "@@/tests/test-utils/api-mocks/fileStorageApiMock";
@@ -11,7 +12,6 @@ import { createMock } from "@golevelup/ts-jest";
 import { useDeleteConfirmationDialog } from "@ui-confirmation-dialog";
 import { MountOptions, shallowMount } from "@vue/test-utils";
 import Vue, { nextTick } from "vue";
-import { setupFileRecordMock } from "../../../../tests/test-utils/composable-mocks/fileRecordMock";
 import FileContentElement from "./FileContentElement.vue";
 import FileContentElementAlert from "./FileContentElementAlert.vue";
 import FileContentElementChips from "./FileContentElementChips.vue";
@@ -28,7 +28,6 @@ jest.mock("@data-board", () => {
 });
 jest.mock("@feature-board");
 jest.mock("../FileStorageApi.composable");
-jest.mock("../FileRecord.composable");
 
 jest.mock("@ui-confirmation-dialog");
 const mockedUse = createMock<ReturnType<typeof useDeleteConfirmationDialog>>();
@@ -64,39 +63,89 @@ describe("FileContentElement", () => {
 
 	describe("when component is in view mode", () => {
 		describe("when file needs to be uploaded", () => {
-			describe("when upload is successful", () => {
-				const setup = () => {
-					const element = fileElementResponseFactory.build();
-					document.body.setAttribute("data-app", "true");
+			const setup = () => {
+				const element = fileElementResponseFactory.build();
+				document.body.setAttribute("data-app", "true");
 
-					const fileRecordResponse = fileRecordResponseFactory.build();
+				const fileRecordResponse = fileRecordResponseFactory.build({});
 
-					const uploadMock = jest.fn().mockImplementationOnce(() => {
-						fileRecord.value = fileRecordResponse;
-					});
-					const { upload, fileRecord } = setupFileStorageApiMock({
-						uploadMock,
-					});
+				const uploadMock = jest.fn().mockImplementationOnce(() => {
+					fileRecord.value = fileRecordResponse;
+				});
+				const { upload, fileRecord } = setupFileStorageApiMock({
+					uploadMock,
+				});
 
-					setupFileRecordMock();
+				const { wrapper, deleteElementMock } = getWrapper({
+					fileName: "myfile",
+					element,
+					isEditMode: false,
+					isFirstElement: false,
+					isLastElement: false,
+					hasMultipleElements: false,
+				});
 
-					const { wrapper, deleteElementMock } = getWrapper({
-						fileName: "myfile",
-						element,
-						isEditMode: false,
-						isFirstElement: false,
-						isLastElement: false,
-						hasMultipleElements: false,
-					});
+				return {
+					wrapper,
+					upload,
+					fileRecord,
+					deleteElementMock,
+				};
+			};
 
-					return {
-						wrapper,
-						upload,
-						fileRecord,
-						deleteElementMock,
-					};
+			it("should be found in dom", () => {
+				const { wrapper } = setup();
+				expect(wrapper.findComponent(FileContentElement).exists()).toBe(true);
+			});
+
+			it("should not render Init component", async () => {
+				const { wrapper } = setup();
+
+				await wrapper.vm.$nextTick();
+
+				const fileContentElementInit = wrapper.findComponent(
+					FileContentElementInit
+				);
+				expect(fileContentElementInit.exists()).toBe(false);
+			});
+		});
+
+		describe("when file is uploaded", () => {
+			const setup = () => {
+				const element = fileElementResponseFactory.build();
+				document.body.setAttribute("data-app", "true");
+
+				const fileRecordResponse = fileRecordResponseFactory.build({
+					securityCheckStatus: FileRecordScanStatus.PENDING,
+				});
+				const fetchFileMock = jest.fn().mockImplementationOnce(() => {
+					fileRecord.value = fileRecordResponse;
+				});
+				const { fetchFile, fileRecord } = setupFileStorageApiMock({
+					fetchFileMock,
+				});
+
+				mockedUse.askDeleteConfirmation.mockResolvedValue(true);
+
+				const { wrapper, deleteElementMock } = getWrapper({
+					fileName: "abc.jpg",
+					element,
+					isEditMode: false,
+					isFirstElement: false,
+					isLastElement: false,
+					hasMultipleElements: false,
+				});
+
+				return {
+					wrapper,
+					fetchFile,
+					fileRecordResponse,
+					element,
+					deleteElementMock,
 				};
+			};
 
+			describe("when no virus is detected", () => {
 				it("should be found in dom", () => {
 					const { wrapper } = setup();
 
@@ -107,283 +156,212 @@ describe("FileContentElement", () => {
 				it("should render FileContentElementDisplay component", async () => {
 					const { wrapper } = setup();
 
+					await wrapper.vm.$nextTick();
+					await wrapper.vm.$nextTick();
+
 					const fileContentElementDisplay = wrapper.findComponent(
 						FileContentElementDisplay
 					);
 					expect(fileContentElementDisplay.exists()).toBe(true);
 				});
-			});
-
-			describe("when upload throws error", () => {
-				const setup = () => {
-					const element = fileElementResponseFactory.build();
-					document.body.setAttribute("data-app", "true");
 
-					const error = new Error("test");
-					const uploadMock = jest.fn().mockRejectedValueOnce(error);
-					setupFileStorageApiMock({
-						uploadMock,
-					});
+				it("should hand over correct fileProperties to FileContentElementDisplay", async () => {
+					const { wrapper, fileRecordResponse } = setup();
 
-					setupFileRecordMock({
-						isImageMock: false,
-						isBlockedByVirusScanMock: true,
-						urlMock: "",
-					});
-
-					mockedUse.askDeleteConfirmation.mockResolvedValue(true);
+					await wrapper.vm.$nextTick();
 
-					const { wrapper, deleteElementMock } = getWrapper({
-						fileName: "abc.jpg",
-						element,
-						isEditMode: false,
-						isFirstElement: false,
-						isLastElement: false,
-						hasMultipleElements: false,
-					});
+					const fileProperties = wrapper
+						.findComponent(FileContentElementDisplay)
+						.props("fileProperties");
 
-					return {
-						wrapper,
-						deleteElementMock,
+					const expectedFileProperties = {
+						name: fileRecordResponse.name,
+						isDownloadAllowed: true,
+						url: fileRecordResponse.url,
+						previewUrl: undefined,
+						size: fileRecordResponse.size,
 					};
-				};
 
-				it("should not render FileContentElementChips component", async () => {
-					const { wrapper } = setup();
+					expect(fileProperties).toEqual(expectedFileProperties);
+				});
 
+				it("should call fetchFile", async () => {
+					const { wrapper, fetchFile } = setup();
+
+					await wrapper.vm.$nextTick();
 					await wrapper.vm.$nextTick();
 
-					const FileContentElementChip = wrapper.findComponent(
-						FileContentElementChips
-					);
-					expect(FileContentElementChip.exists()).toBe(false);
+					expect(fetchFile).toHaveBeenCalledTimes(1);
 				});
-			});
-
-			describe("when file is uploaded", () => {
-				const setup = () => {
-					const element = fileElementResponseFactory.build();
-					document.body.setAttribute("data-app", "true");
 
-					const fileRecordResponse = fileRecordResponseFactory.build({
-						securityCheckStatus: FileRecordScanStatus.PENDING,
-					});
-					const fetchFileMock = jest.fn().mockImplementationOnce(() => {
-						fileRecord.value = fileRecordResponse;
-					});
-					const { fetchFile, fileRecord } = setupFileStorageApiMock({
-						fetchFileMock,
-					});
+				describe("when file is an image", () => {
+					const setup = () => {
+						const element = fileElementResponseFactory.build();
+						document.body.setAttribute("data-app", "true");
 
-					mockedUse.askDeleteConfirmation.mockResolvedValue(true);
+						const fileRecordResponse = fileRecordResponseFactory.build({
+							securityCheckStatus: FileRecordScanStatus.PENDING,
+							mimeType: "image/png",
+							previewStatus: PreviewStatus.PREVIEW_POSSIBLE,
+						});
+						const fetchFileMock = jest.fn().mockImplementationOnce(() => {
+							fileRecord.value = fileRecordResponse;
+						});
+						const { fetchFile, fileRecord } = setupFileStorageApiMock({
+							fetchFileMock,
+						});
 
-					setupFileRecordMock({ urlMock: fileRecordResponse.url });
+						mockedUse.askDeleteConfirmation.mockResolvedValue(true);
 
-					const { wrapper, deleteElementMock } = getWrapper({
-						fileName: "abc.jpg",
-						element,
-						isEditMode: false,
-						isFirstElement: false,
-						isLastElement: false,
-						hasMultipleElements: false,
-					});
+						const { wrapper, deleteElementMock } = getWrapper({
+							fileName: "abc.jpg",
+							element,
+							isEditMode: false,
+							isFirstElement: false,
+							isLastElement: false,
+							hasMultipleElements: false,
+						});
 
-					return {
-						wrapper,
-						fetchFile,
-						fileRecordResponse,
-						element,
-						deleteElementMock,
+						return {
+							wrapper,
+							fetchFile,
+							fileRecordResponse,
+							element,
+							deleteElementMock,
+						};
 					};
-				};
 
-				describe("when no virus is detected", () => {
-					it("should be found in dom", () => {
-						const { wrapper } = setup();
-
-						const fileContentElement =
-							wrapper.findComponent(FileContentElement);
-						expect(fileContentElement.exists()).toBe(true);
-					});
-
-					it("should render FileContentElementDisplay component", async () => {
+					it("should render ImageFileDisplay component", async () => {
 						const { wrapper } = setup();
 
 						await wrapper.vm.$nextTick();
 						await wrapper.vm.$nextTick();
 
-						const fileContentElementDisplay = wrapper.findComponent(
-							FileContentElementDisplay
-						);
-						expect(fileContentElementDisplay.exists()).toBe(true);
+						const imageFileDisplay = wrapper.findComponent(ImageFileDisplay);
+						expect(imageFileDisplay.exists()).toBe(true);
 					});
 
-					it("should hand over correct file name to FileContentElementDisplay", async () => {
+					it("should hand over correct fileProperties to ImageFileDisplay", async () => {
 						const { wrapper, fileRecordResponse } = setup();
 
 						await wrapper.vm.$nextTick();
 
-						const fileName = wrapper
-							.findComponent(FileContentElementDisplay)
-							.props("fileName");
+						const fileProperties = wrapper
+							.findComponent(ImageFileDisplay)
+							.props("fileProperties");
+
+						const url = fileRecordResponse.url;
+						const expectedFileProperties = {
+							name: fileRecordResponse.name,
+							isDownloadAllowed: true,
+							url,
+							previewUrl: convertDownloadToPreviewUrl(url),
+							size: fileRecordResponse.size,
+						};
 
-						expect(fileName).toBe(fileRecordResponse.name);
+						expect(fileProperties).toEqual(expectedFileProperties);
 					});
 
-					it("should hand over url to FileContentElementDisplay", async () => {
-						const { fileRecordResponse, wrapper } = setup();
+					it("should hand over isFirstElement property to ImageFileDisplay", async () => {
+						const { wrapper } = setup();
 
 						await wrapper.vm.$nextTick();
 
-						const url = wrapper
-							.findComponent(FileContentElementDisplay)
-							.props("url");
+						const isFirstElement = wrapper
+							.findComponent(ImageFileDisplay)
+							.props("isFirstElement");
 
-						expect(url).toBe(fileRecordResponse.url);
+						expect(isFirstElement).toBe(false);
 					});
 
-					it("should hand over isDownloadAllowed property to FileContentElementDisplay", async () => {
+					it("should hand over isLastElement property to ImageFileDisplay", async () => {
 						const { wrapper } = setup();
 
 						await wrapper.vm.$nextTick();
 
-						const isDownloadAllowed = wrapper
-							.findComponent(FileContentElementDisplay)
-							.props("isDownloadAllowed");
+						const isLastElement = wrapper
+							.findComponent(ImageFileDisplay)
+							.props("isLastElement");
 
-						expect(isDownloadAllowed).toBe(true);
+						expect(isLastElement).toBe(false);
 					});
 
-					it("should call fetchFile", async () => {
-						const { wrapper, fetchFile } = setup();
+					it("should hand over hasMultipleElements property to ImageFileDisplay", async () => {
+						const { wrapper } = setup();
 
 						await wrapper.vm.$nextTick();
-						await wrapper.vm.$nextTick();
-
-						expect(fetchFile).toHaveBeenCalledTimes(1);
-					});
-
-					describe("when file is an image", () => {
-						const setup = () => {
-							const element = fileElementResponseFactory.build();
-							document.body.setAttribute("data-app", "true");
-
-							const fileRecordResponse = fileRecordResponseFactory.build({
-								securityCheckStatus: FileRecordScanStatus.PENDING,
-								mimeType: "image/png",
-							});
-							const fetchFileMock = jest.fn().mockImplementationOnce(() => {
-								fileRecord.value = fileRecordResponse;
-							});
-							const { fetchFile, fileRecord } = setupFileStorageApiMock({
-								fetchFileMock,
-							});
-
-							mockedUse.askDeleteConfirmation.mockResolvedValue(true);
-
-							setupFileRecordMock({ isImageMock: true });
-
-							const { wrapper, deleteElementMock } = getWrapper({
-								fileName: "abc.jpg",
-								element,
-								isEditMode: false,
-								isFirstElement: false,
-								isLastElement: false,
-								hasMultipleElements: false,
-							});
-
-							return {
-								wrapper,
-								fetchFile,
-								fileRecordResponse,
-								element,
-								deleteElementMock,
-							};
-						};
-
-						it("should render ImageFileDisplay component", async () => {
-							const { wrapper } = setup();
-
-							await wrapper.vm.$nextTick();
-							await wrapper.vm.$nextTick();
-
-							const imageFileDisplay = wrapper.findComponent(ImageFileDisplay);
-							expect(imageFileDisplay.exists()).toBe(true);
-						});
 
-						it("should hand over correct file name to ImageFileDisplay", async () => {
-							const { wrapper, fileRecordResponse } = setup();
-
-							await wrapper.vm.$nextTick();
-
-							const fileName = wrapper
-								.findComponent(ImageFileDisplay)
-								.props("fileName");
-
-							expect(fileName).toBe(fileRecordResponse.name);
-						});
-
-						it("should hand over empty url to ImageFileDisplay", async () => {
-							const { fileRecordResponse, wrapper } = setup();
-
-							await wrapper.vm.$nextTick();
-
-							const url = wrapper.findComponent(ImageFileDisplay).props("url");
-
-							expect(url).toBe(fileRecordResponse.url);
-						});
-
-						it("should hand over isDownloadAllowed property as false to ImageFileDisplay", async () => {
-							const { wrapper } = setup();
-
-							await wrapper.vm.$nextTick();
-
-							const isDownloadAllowed = wrapper
-								.findComponent(ImageFileDisplay)
-								.props("isDownloadAllowed");
+						const hasMultipleElements = wrapper
+							.findComponent(ImageFileDisplay)
+							.props("hasMultipleElements");
 
-							expect(isDownloadAllowed).toBe(true);
-						});
+						expect(hasMultipleElements).toBe(false);
+					});
+				});
+			});
 
-						it("should hand over isFirstElement property to ImageFileDisplay", async () => {
-							const { wrapper } = setup();
+			describe("when a virus is detected", () => {
+				const setup = () => {
+					const element = fileElementResponseFactory.build();
+					document.body.setAttribute("data-app", "true");
 
-							await wrapper.vm.$nextTick();
+					const fileRecordResponse = fileRecordResponseFactory.build({
+						securityCheckStatus: FileRecordScanStatus.BLOCKED,
+						mimeType: "image/png",
+						previewStatus:
+							PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_BLOCKED,
+					});
+					const fetchFileMock = jest.fn().mockImplementationOnce(() => {
+						fileRecord.value = fileRecordResponse;
+					});
+					const { fetchFile, fileRecord } = setupFileStorageApiMock({
+						fetchFileMock,
+					});
 
-							const isFirstElement = wrapper
-								.findComponent(ImageFileDisplay)
-								.props("isFirstElement");
+					mockedUse.askDeleteConfirmation.mockResolvedValue(true);
 
-							expect(isFirstElement).toBe(false);
-						});
+					const { wrapper, deleteElementMock } = getWrapper({
+						fileName: "abc.jpg",
+						element,
+						isEditMode: false,
+						isFirstElement: false,
+						isLastElement: false,
+						hasMultipleElements: false,
+					});
 
-						it("should hand over isLastElement property to ImageFileDisplay", async () => {
-							const { wrapper } = setup();
+					return {
+						wrapper,
+						fetchFile,
+						fileRecordResponse,
+						element,
+						deleteElementMock,
+					};
+				};
 
-							await wrapper.vm.$nextTick();
+				it("should not render ImageFileDisplay", async () => {
+					const { wrapper } = setup();
 
-							const isLastElement = wrapper
-								.findComponent(ImageFileDisplay)
-								.props("isLastElement");
+					await wrapper.vm.$nextTick();
 
-							expect(isLastElement).toBe(false);
-						});
+					const componentExists = wrapper
+						.findComponent(ImageFileDisplay)
+						.exists();
 
-						it("should hand over hasMultipleElements property to ImageFileDisplay", async () => {
-							const { wrapper } = setup();
+					expect(componentExists).toBe(false);
+				});
 
-							await wrapper.vm.$nextTick();
+				it("should render FileContentElementAlert component", async () => {
+					const { wrapper } = setup();
 
-							const hasMultipleElements = wrapper
-								.findComponent(ImageFileDisplay)
-								.props("hasMultipleElements");
+					await wrapper.vm.$nextTick();
 
-							expect(hasMultipleElements).toBe(false);
-						});
-					});
+					const fileContentElementAlert = wrapper.findComponent(
+						FileContentElementAlert
+					);
+					expect(fileContentElementAlert.exists()).toBe(true);
 				});
 
-				describe("when a virus is detected", () => {
+				describe("when file is an image", () => {
 					const setup = () => {
 						const element = fileElementResponseFactory.build();
 						document.body.setAttribute("data-app", "true");
@@ -401,11 +379,6 @@ describe("FileContentElement", () => {
 
 						mockedUse.askDeleteConfirmation.mockResolvedValue(true);
 
-						setupFileRecordMock({
-							isBlockedByVirusScanMock: true,
-							urlMock: "",
-						});
-
 						const { wrapper, deleteElementMock } = getWrapper({
 							fileName: "abc.jpg",
 							element,
@@ -424,174 +397,16 @@ describe("FileContentElement", () => {
 						};
 					};
 
-					it("should hand over correct file name to FileContentElementDisplay", async () => {
-						const { wrapper, fileRecordResponse } = setup();
-
-						await wrapper.vm.$nextTick();
-
-						const fileName = wrapper
-							.findComponent(FileContentElementDisplay)
-							.props("fileName");
-
-						expect(fileName).toBe(fileRecordResponse.name);
-					});
-
-					it("should hand over empty url to FileContentElementDisplay", async () => {
-						const { wrapper } = setup();
-
-						await wrapper.vm.$nextTick();
-
-						const url = wrapper
-							.findComponent(FileContentElementDisplay)
-							.props("url");
-
-						expect(url).toBe("");
-					});
-
-					it("should hand over isDownloadAllowed property as false", async () => {
-						const { wrapper } = setup();
-
-						await wrapper.vm.$nextTick();
-
-						const isDownloadAllowed = wrapper
-							.findComponent(FileContentElementDisplay)
-							.props("isDownloadAllowed");
-
-						expect(isDownloadAllowed).toBe(false);
-					});
-
-					it("should render FileContentElementAlert component", async () => {
+					it("should not render ImageFileDisplay", async () => {
 						const { wrapper } = setup();
 
 						await wrapper.vm.$nextTick();
 
-						const fileContentElementAlert = wrapper.findComponent(
-							FileContentElementAlert
-						);
-						expect(fileContentElementAlert.exists()).toBe(true);
-					});
-
-					describe("when file is an image", () => {
-						const setup = () => {
-							const element = fileElementResponseFactory.build();
-							document.body.setAttribute("data-app", "true");
-
-							const fileRecordResponse = fileRecordResponseFactory.build({
-								securityCheckStatus: FileRecordScanStatus.BLOCKED,
-								mimeType: "image/png",
-							});
-							const fetchFileMock = jest.fn().mockImplementationOnce(() => {
-								fileRecord.value = fileRecordResponse;
-							});
-							const { fetchFile, fileRecord } = setupFileStorageApiMock({
-								fetchFileMock,
-							});
-
-							mockedUse.askDeleteConfirmation.mockResolvedValue(true);
-
-							setupFileRecordMock({
-								isImageMock: true,
-								isBlockedByVirusScanMock: true,
-								urlMock: "",
-							});
-
-							const { wrapper, deleteElementMock } = getWrapper({
-								fileName: "abc.jpg",
-								element,
-								isEditMode: false,
-								isFirstElement: false,
-								isLastElement: false,
-								hasMultipleElements: false,
-							});
-
-							return {
-								wrapper,
-								fetchFile,
-								fileRecordResponse,
-								element,
-								deleteElementMock,
-							};
-						};
-
-						it("should render ImageFileDisplay component", async () => {
-							const { wrapper } = setup();
-
-							await wrapper.vm.$nextTick();
-							await wrapper.vm.$nextTick();
-
-							const imageFileDisplay = wrapper.findComponent(ImageFileDisplay);
-							expect(imageFileDisplay.exists()).toBe(true);
-						});
-
-						it("should hand over correct file name to ImageFileDisplay", async () => {
-							const { wrapper, fileRecordResponse } = setup();
-
-							await wrapper.vm.$nextTick();
-
-							const fileName = wrapper
-								.findComponent(ImageFileDisplay)
-								.props("fileName");
-
-							expect(fileName).toBe(fileRecordResponse.name);
-						});
-
-						it("should hand over empty url to ImageFileDisplay", async () => {
-							const { fileRecordResponse, wrapper } = setup();
-
-							await wrapper.vm.$nextTick();
-
-							const url = wrapper.findComponent(ImageFileDisplay).props("url");
-
-							expect(url).toBe(fileRecordResponse.url);
-						});
-
-						it("should hand over isDownloadAllowed property as false to ImageFileDisplay", async () => {
-							const { wrapper } = setup();
-
-							await wrapper.vm.$nextTick();
-
-							const isDownloadAllowed = wrapper
-								.findComponent(ImageFileDisplay)
-								.props("isDownloadAllowed");
-
-							expect(isDownloadAllowed).toBe(false);
-						});
-
-						it("should hand over isFirstElement property to ImageFileDisplay", async () => {
-							const { wrapper } = setup();
-
-							await wrapper.vm.$nextTick();
-
-							const isFirstElement = wrapper
-								.findComponent(ImageFileDisplay)
-								.props("isFirstElement");
-
-							expect(isFirstElement).toBe(false);
-						});
-
-						it("should hand over isLastElement property to ImageFileDisplay", async () => {
-							const { wrapper } = setup();
-
-							await wrapper.vm.$nextTick();
-
-							const isLastElement = wrapper
-								.findComponent(ImageFileDisplay)
-								.props("isLastElement");
-
-							expect(isLastElement).toBe(false);
-						});
-
-						it("should hand over hasMultipleElements property to ImageFileDisplay", async () => {
-							const { wrapper } = setup();
-
-							await wrapper.vm.$nextTick();
-
-							const hasMultipleElements = wrapper
-								.findComponent(ImageFileDisplay)
-								.props("hasMultipleElements");
+						const componentExists = wrapper
+							.findComponent(ImageFileDisplay)
+							.exists();
 
-							expect(hasMultipleElements).toBe(false);
-						});
+						expect(componentExists).toBe(false);
 					});
 				});
 			});
@@ -616,8 +431,6 @@ describe("FileContentElement", () => {
 
 					mockedUse.askDeleteConfirmation.mockResolvedValue(true);
 
-					setupFileRecordMock();
-
 					const { wrapper, deleteElementMock } = getWrapper({
 						fileName: "abc.jpg",
 						element,
@@ -723,8 +536,6 @@ describe("FileContentElement", () => {
 
 						mockedUse.askDeleteConfirmation.mockResolvedValue(true);
 
-						setupFileRecordMock();
-
 						const { wrapper, deleteElementMock } = getWrapper({
 							fileName: "abc.jpg",
 							element,
@@ -762,16 +573,24 @@ describe("FileContentElement", () => {
 						expect(fileContentElementEdit.exists()).toBe(true);
 					});
 
-					it("should hand over isDownloadAllowed property as true", async () => {
-						const { wrapper } = setup();
+					it("should hand over fileProperties to FileContentElementEdit", async () => {
+						const { wrapper, fileRecordResponse } = setup();
 
 						await wrapper.vm.$nextTick();
 
-						const isDownloadAllowed = wrapper
+						const fileProperties = wrapper
 							.findComponent(FileContentElementEdit)
-							.props("isDownloadAllowed");
+							.props("fileProperties");
+
+						const expectedFileProperties = {
+							name: fileRecordResponse.name,
+							isDownloadAllowed: true,
+							url: fileRecordResponse.url,
+							previewUrl: undefined,
+							size: fileRecordResponse.size,
+						};
 
-						expect(isDownloadAllowed).toBe(true);
+						expect(fileProperties).toEqual(expectedFileProperties);
 					});
 
 					it("should pass delete:element event from child to parent", async () => {
@@ -838,8 +657,9 @@ describe("FileContentElement", () => {
 							document.body.setAttribute("data-app", "true");
 
 							const fileRecordResponse = fileRecordResponseFactory.build({
-								securityCheckStatus: FileRecordScanStatus.PENDING,
+								securityCheckStatus: FileRecordScanStatus.VERIFIED,
 								mimeType: "image/png",
+								previewStatus: PreviewStatus.PREVIEW_POSSIBLE,
 							});
 							const fetchFileMock = jest.fn().mockImplementationOnce(() => {
 								fileRecord.value = fileRecordResponse;
@@ -850,8 +670,6 @@ describe("FileContentElement", () => {
 
 							mockedUse.askDeleteConfirmation.mockResolvedValue(true);
 
-							setupFileRecordMock({ isImageMock: true });
-
 							const { wrapper, deleteElementMock } = getWrapper({
 								fileName: "abc.jpg",
 								element,
@@ -880,40 +698,6 @@ describe("FileContentElement", () => {
 							expect(imageFileDisplay.exists()).toBe(true);
 						});
 
-						it("should hand over correct file name to ImageFileDisplay", async () => {
-							const { wrapper, fileRecordResponse } = setup();
-
-							await wrapper.vm.$nextTick();
-
-							const fileName = wrapper
-								.findComponent(ImageFileDisplay)
-								.props("fileName");
-
-							expect(fileName).toBe(fileRecordResponse.name);
-						});
-
-						it("should hand over empty url to ImageFileDisplay", async () => {
-							const { fileRecordResponse, wrapper } = setup();
-
-							await wrapper.vm.$nextTick();
-
-							const url = wrapper.findComponent(ImageFileDisplay).props("url");
-
-							expect(url).toBe(fileRecordResponse.url);
-						});
-
-						it("should hand over isDownloadAllowed property as true to ImageFileDisplay", async () => {
-							const { wrapper } = setup();
-
-							await wrapper.vm.$nextTick();
-
-							const isDownloadAllowed = wrapper
-								.findComponent(ImageFileDisplay)
-								.props("isDownloadAllowed");
-
-							expect(isDownloadAllowed).toBe(true);
-						});
-
 						it("should hand over isFirstElement property to ImageFileDisplay", async () => {
 							const { wrapper } = setup();
 
@@ -960,6 +744,8 @@ describe("FileContentElement", () => {
 						const fileRecordResponse = fileRecordResponseFactory.build({
 							securityCheckStatus: FileRecordScanStatus.BLOCKED,
 							mimeType: "image/png",
+							previewStatus:
+								PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_BLOCKED,
 						});
 						const fetchFileMock = jest.fn().mockImplementationOnce(() => {
 							fileRecord.value = fileRecordResponse;
@@ -970,11 +756,6 @@ describe("FileContentElement", () => {
 
 						mockedUse.askDeleteConfirmation.mockResolvedValue(true);
 
-						setupFileRecordMock({
-							isBlockedByVirusScanMock: true,
-							urlMock: "",
-						});
-
 						const { wrapper, deleteElementMock } = getWrapper({
 							fileName: "abc.jpg",
 							element,
@@ -993,40 +774,24 @@ describe("FileContentElement", () => {
 						};
 					};
 
-					it("should hand over correct file name to FileContentElementEdit", async () => {
+					it("should hand over correct file properties to FileContentElementEdit", async () => {
 						const { wrapper, fileRecordResponse } = setup();
 
 						await wrapper.vm.$nextTick();
 
-						const fileName = wrapper
-							.findComponent(FileContentElementEdit)
-							.props("fileName");
-
-						expect(fileName).toBe(fileRecordResponse.name);
-					});
-
-					it("should hand over empty url to FileContentElementEdit", async () => {
-						const { wrapper } = setup();
-
-						await wrapper.vm.$nextTick();
-
-						const url = wrapper
-							.findComponent(FileContentElementEdit)
-							.props("url");
-
-						expect(url).toBe("");
-					});
-
-					it("should hand over isDownloadAllowed property as false to FileContentElementEdit", async () => {
-						const { wrapper } = setup();
-
-						await wrapper.vm.$nextTick();
-
-						const isDownloadAllowed = wrapper
+						const fileProperties = wrapper
 							.findComponent(FileContentElementEdit)
-							.props("isDownloadAllowed");
+							.props("fileProperties");
+
+						const expectedFileProperties = {
+							name: fileRecordResponse.name,
+							isDownloadAllowed: false,
+							url: fileRecordResponse.url,
+							previewUrl: undefined,
+							size: fileRecordResponse.size,
+						};
 
-						expect(isDownloadAllowed).toBe(false);
+						expect(fileProperties).toEqual(expectedFileProperties);
 					});
 
 					it("should hand over isFirstElement property to FileContentElementEdit", async () => {
@@ -1099,6 +864,8 @@ describe("FileContentElement", () => {
 							const fileRecordResponse = fileRecordResponseFactory.build({
 								securityCheckStatus: FileRecordScanStatus.BLOCKED,
 								mimeType: "image/png",
+								previewStatus:
+									PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_BLOCKED,
 							});
 							const fetchFileMock = jest.fn().mockImplementationOnce(() => {
 								fileRecord.value = fileRecordResponse;
@@ -1109,12 +876,6 @@ describe("FileContentElement", () => {
 
 							mockedUse.askDeleteConfirmation.mockResolvedValue(true);
 
-							setupFileRecordMock({
-								isImageMock: true,
-								isBlockedByVirusScanMock: true,
-								urlMock: "",
-							});
-
 							const { wrapper, deleteElementMock } = getWrapper({
 								fileName: "abc.jpg",
 								element,
@@ -1133,84 +894,14 @@ describe("FileContentElement", () => {
 							};
 						};
 
-						it("should render ImageFileDisplay component", async () => {
+						it("should not render ImageFileDisplay component", async () => {
 							const { wrapper } = setup();
 
 							await wrapper.vm.$nextTick();
 							await wrapper.vm.$nextTick();
 
 							const imageFileDisplay = wrapper.findComponent(ImageFileDisplay);
-							expect(imageFileDisplay.exists()).toBe(true);
-						});
-
-						it("should hand over correct file name to ImageFileDisplay", async () => {
-							const { wrapper, fileRecordResponse } = setup();
-
-							await wrapper.vm.$nextTick();
-
-							const fileName = wrapper
-								.findComponent(ImageFileDisplay)
-								.props("fileName");
-
-							expect(fileName).toBe(fileRecordResponse.name);
-						});
-
-						it("should hand over empty url to ImageFileDisplay", async () => {
-							const { fileRecordResponse, wrapper } = setup();
-
-							await wrapper.vm.$nextTick();
-
-							const url = wrapper.findComponent(ImageFileDisplay).props("url");
-
-							expect(url).toBe(fileRecordResponse.url);
-						});
-
-						it("should hand over isDownloadAllowed property as false to ImageFileDisplay", async () => {
-							const { wrapper } = setup();
-
-							await wrapper.vm.$nextTick();
-
-							const isDownloadAllowed = wrapper
-								.findComponent(ImageFileDisplay)
-								.props("isDownloadAllowed");
-
-							expect(isDownloadAllowed).toBe(false);
-						});
-
-						it("should hand over isFirstElement property to ImageFileDisplay", async () => {
-							const { wrapper } = setup();
-
-							await wrapper.vm.$nextTick();
-
-							const isFirstElement = wrapper
-								.findComponent(ImageFileDisplay)
-								.props("isFirstElement");
-
-							expect(isFirstElement).toBe(false);
-						});
-
-						it("should hand over isLastElement property to ImageFileDisplay", async () => {
-							const { wrapper } = setup();
-
-							await wrapper.vm.$nextTick();
-
-							const isLastElement = wrapper
-								.findComponent(ImageFileDisplay)
-								.props("isLastElement");
-
-							expect(isLastElement).toBe(false);
-						});
-
-						it("should hand over hasMultipleElements property to ImageFileDisplay", async () => {
-							const { wrapper } = setup();
-
-							await wrapper.vm.$nextTick();
-
-							const hasMultipleElements = wrapper
-								.findComponent(ImageFileDisplay)
-								.props("hasMultipleElements");
-
-							expect(hasMultipleElements).toBe(false);
+							expect(imageFileDisplay.exists()).toBe(false);
 						});
 					});
 				});
diff --git a/src/components/feature-board-file-element/components/FileContentElementAlert.unit.ts b/src/components/feature-board-file-element/components/FileContentElementAlert.unit.ts
index e811f1aede..98ea7b9c1e 100644
--- a/src/components/feature-board-file-element/components/FileContentElementAlert.unit.ts
+++ b/src/components/feature-board-file-element/components/FileContentElementAlert.unit.ts
@@ -1,12 +1,14 @@
+import { PreviewStatus } from "@/fileStorageApi/v3";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
 import FileContentElementAlert from "./FileContentElementAlert.vue";
 
 describe("FileContentElementAlert", () => {
-	const setup = () => {
+	const mount = (previewStatus: PreviewStatus) => {
 		document.body.setAttribute("data-app", "true");
 
 		const wrapper = shallowMount(FileContentElementAlert, {
+			propsData: { previewStatus },
 			...createComponentMocks({ i18n: true }),
 		});
 
@@ -15,28 +17,202 @@ describe("FileContentElementAlert", () => {
 		};
 	};
 
-	it("should be found in dom", () => {
-		const { wrapper } = setup();
+	describe("When preview status is AWAITING_SCAN_STATUS", () => {
+		const setup = () => {
+			const { wrapper } = mount(PreviewStatus.AWAITING_SCAN_STATUS);
 
-		const fileContentElement = wrapper.findComponent(FileContentElementAlert);
-		expect(fileContentElement.exists()).toBe(true);
+			return {
+				wrapper,
+			};
+		};
+
+		it("should pass correct color to v-alert", () => {
+			const { wrapper } = setup();
+			const color = wrapper.find("v-alert-stub").attributes("color");
+
+			expect(color).toBe("info");
+		});
+
+		it("should pass correct icon to v-alert", () => {
+			const { wrapper } = setup();
+
+			const icon = wrapper.find("v-alert-stub").attributes("icon");
+
+			expect(icon).toBe("$info");
+		});
+
+		it("should display correct text", () => {
+			const { wrapper } = setup();
+
+			const text = wrapper.find("v-alert-stub").text();
+
+			expect(text).toContain(
+				wrapper.vm.$t("components.cardElement.fileElement.awaitingScan")
+			);
+		});
+
+		it("should display correct actionText", () => {
+			const { wrapper } = setup();
+
+			const text = wrapper.find("v-alert-stub").text();
+
+			expect(text).toContain(
+				wrapper.vm.$t("components.cardElement.fileElement.reloadStatus")
+			);
+		});
+
+		describe("When reload is clicked", () => {
+			it("should emit on-status-reload", () => {
+				const { wrapper } = setup();
+
+				wrapper.find("a").trigger("click");
+
+				expect(wrapper.emitted("on-status-reload")).toBeTruthy();
+			});
+		});
+	});
+
+	describe("When preview status is PREVIEW_NOT_POSSIBLE_SCAN_STATUS_ERROR", () => {
+		const setup = () => {
+			const { wrapper } = mount(
+				PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_ERROR
+			);
+
+			return {
+				wrapper,
+			};
+		};
+
+		it("should pass correct color to v-alert", () => {
+			const { wrapper } = setup();
+
+			const color = wrapper.find("v-alert-stub").attributes("color");
+
+			expect(color).toBe("warning");
+		});
+
+		it("should pass correct icon to v-alert", () => {
+			const { wrapper } = setup();
+
+			const icon = wrapper.find("v-alert-stub").attributes("icon");
+
+			expect(icon).toBe("$warning");
+		});
+
+		it("should display correct text", () => {
+			const { wrapper } = setup();
+
+			const text = wrapper.find("v-alert-stub").text();
+
+			expect(text).toContain(
+				wrapper.vm.$t("components.cardElement.fileElement.scanError")
+			);
+		});
+
+		it("should not display reload link", () => {
+			const { wrapper } = setup();
+
+			const text = wrapper.find("v-alert-stub").text();
+
+			expect(text).not.toContain(
+				wrapper.vm.$t("components.cardElement.fileElement.reloadStatus")
+			);
+		});
 	});
 
-	it("should display icon", async () => {
-		const { wrapper } = setup();
+	describe("When preview status is PREVIEW_NOT_POSSIBLE_SCAN_STATUS_WONT_CHECK", () => {
+		const setup = () => {
+			const { wrapper } = mount(
+				PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_WONT_CHECK
+			);
+
+			return {
+				wrapper,
+			};
+		};
+
+		it("should pass correct color to v-alert", () => {
+			const { wrapper } = setup();
+
+			const color = wrapper.find("v-alert-stub").attributes("color");
+
+			expect(color).toBe("info");
+		});
+
+		it("should pass correct icon to v-alert", () => {
+			const { wrapper } = setup();
+
+			const icon = wrapper.find("v-alert-stub").attributes("icon");
+
+			expect(icon).toBe("$info");
+		});
+
+		it("should display correct text", () => {
+			const { wrapper } = setup();
+
+			const text = wrapper.find("v-alert-stub").text();
+
+			expect(text).toContain(
+				wrapper.vm.$t("components.cardElement.fileElement.scanWontCheck")
+			);
+		});
+
+		it("should not display reload link", () => {
+			const { wrapper } = setup();
 
-		const icon = wrapper.find("v-alert-stub").attributes("icon");
+			const text = wrapper.find("v-alert-stub").text();
 
-		expect(icon).toBe("$warning");
+			expect(text).not.toContain(
+				wrapper.vm.$t("components.cardElement.fileElement.reloadStatus")
+			);
+		});
 	});
 
-	it("should find warning", async () => {
-		const { wrapper } = setup();
+	describe("When preview status is PREVIEW_NOT_POSSIBLE_SCAN_STATUS_BLOCKED", () => {
+		const setup = () => {
+			const { wrapper } = mount(
+				PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_BLOCKED
+			);
+
+			return {
+				wrapper,
+			};
+		};
+
+		it("should pass correct color to v-alert", () => {
+			const { wrapper } = setup();
+
+			const color = wrapper.find("v-alert-stub").attributes("color");
+
+			expect(color).toBe("error");
+		});
+
+		it("should pass correct icon to v-alert", () => {
+			const { wrapper } = setup();
 
-		const warning = wrapper.find("v-alert-stub").text();
+			const icon = wrapper.find("v-alert-stub").attributes("icon");
 
-		expect(warning).toBe(
-			wrapper.vm.$t("components.cardElement.fileElement.virusDetected")
-		);
+			expect(icon).toBe("$error");
+		});
+
+		it("should display correct text", () => {
+			const { wrapper } = setup();
+
+			const text = wrapper.find("v-alert-stub").text();
+
+			expect(text).toContain(
+				wrapper.vm.$t("components.cardElement.fileElement.virusDetected")
+			);
+		});
+
+		it("should not display reload link", () => {
+			const { wrapper } = setup();
+
+			const text = wrapper.find("v-alert-stub").text();
+
+			expect(text).not.toContain(
+				wrapper.vm.$t("components.cardElement.fileElement.reloadStatus")
+			);
+		});
 	});
 });
diff --git a/src/components/feature-board-file-element/components/FileContentElementDisplay.unit.ts b/src/components/feature-board-file-element/components/FileContentElementDisplay.unit.ts
index 0e6279a954..c4a478b574 100644
--- a/src/components/feature-board-file-element/components/FileContentElementDisplay.unit.ts
+++ b/src/components/feature-board-file-element/components/FileContentElementDisplay.unit.ts
@@ -4,9 +4,11 @@ import FileContentElementDisplay from "./FileContentElementDisplay.vue";
 
 describe("FileContentElementDisplay", () => {
 	const setupProps = (isDownloadAllowed?: boolean) => ({
-		fileName: "file-record #1.txt",
-		url: "1/file-record #1.txt",
-		isDownloadAllowed: isDownloadAllowed ?? true,
+		fileProperties: {
+			name: "file-record #1.txt",
+			url: "1/file-record #1.txt",
+			isDownloadAllowed: isDownloadAllowed ?? true,
+		},
 	});
 
 	const setup = (isDownloadAllowed?: boolean) => {
@@ -21,8 +23,8 @@ describe("FileContentElementDisplay", () => {
 
 		return {
 			wrapper,
-			fileNameProp: propsData.fileName,
-			urlProp: propsData.url,
+			fileNameProp: propsData.fileProperties.name,
+			urlProp: propsData.fileProperties.url,
 		};
 	};
 
diff --git a/src/components/feature-board-file-element/components/FileContentElementEdit.unit.ts b/src/components/feature-board-file-element/components/FileContentElementEdit.unit.ts
index b7655b64d7..85af9196b8 100644
--- a/src/components/feature-board-file-element/components/FileContentElementEdit.unit.ts
+++ b/src/components/feature-board-file-element/components/FileContentElementEdit.unit.ts
@@ -8,10 +8,12 @@ jest.mock("@/utils/fileHelper");
 
 describe("FileContentElementEdit", () => {
 	const setupProps = (isDownloadAllowed?: boolean) => ({
+		fileProperties: {
+			name: "file-record #1.txt",
+			url: "1/file-record #1.txt",
+			isDownloadAllowed: isDownloadAllowed ?? true,
+		},
 		fileId: "file-id #1",
-		fileName: "file-record #1.txt",
-		url: "1/file-record #1.txt",
-		isDownloadAllowed: isDownloadAllowed ?? true,
 		isFirstElement: false,
 		isLastElement: false,
 		hasMultipleElements: false,
@@ -31,9 +33,9 @@ describe("FileContentElementEdit", () => {
 
 		return {
 			wrapper,
-			fileNameProp: propsData.fileName,
-			isDownloadAllowedProp: propsData.isDownloadAllowed,
-			urlProp: propsData.url,
+			fileNameProp: propsData.fileProperties.name,
+			isDownloadAllowedProp: propsData.fileProperties.isDownloadAllowed,
+			urlProp: propsData.fileProperties.url,
 			isFirstElementProp: propsData.isFirstElement,
 			isLastElementProp: propsData.isLastElement,
 			hasMultipleElementsProp: propsData.hasMultipleElements,
diff --git a/src/components/feature-board-file-element/components/FileContentElementFooter.unit.ts b/src/components/feature-board-file-element/components/FileContentElementFooter.unit.ts
index 46d02f42d2..4efb78bd7b 100644
--- a/src/components/feature-board-file-element/components/FileContentElementFooter.unit.ts
+++ b/src/components/feature-board-file-element/components/FileContentElementFooter.unit.ts
@@ -1,18 +1,20 @@
-import { shallowMount } from "@vue/test-utils";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import FileContentElementFooter from "./FileContentElementFooter.vue";
+import { shallowMount } from "@vue/test-utils";
 import FileContentElementChips from "./FileContentElementChips.vue";
 import FileContentElementDownload from "./FileContentElementDownload.vue";
+import FileContentElementFooter from "./FileContentElementFooter.vue";
 
 describe("FileContentElementFooter", () => {
 	const setup = () => {
 		document.body.setAttribute("data-app", "true");
 
 		const propsData = {
-			fileName: "file-record #1.txt",
-			url: "1/file-record #1.txt",
-			isDownloadAllowed: true,
-			fileSize: 3800,
+			fileProperties: {
+				name: "file-record #1.txt",
+				url: "1/file-record #1.txt",
+				isDownloadAllowed: true,
+				size: 3800,
+			},
 		};
 
 		const wrapper = shallowMount(FileContentElementFooter, {
@@ -22,10 +24,10 @@ describe("FileContentElementFooter", () => {
 
 		return {
 			wrapper,
-			fileNameProp: propsData.fileName,
-			urlProp: propsData.url,
-			isDownloadAllowedProp: propsData.isDownloadAllowed,
-			fileSizeProp: propsData.fileSize,
+			fileNameProp: propsData.fileProperties.name,
+			urlProp: propsData.fileProperties.url,
+			isDownloadAllowedProp: propsData.fileProperties.isDownloadAllowed,
+			fileSizeProp: propsData.fileProperties.size,
 		};
 	};
 
diff --git a/src/components/feature-board-file-element/components/ImageFileDisplay.unit.ts b/src/components/feature-board-file-element/components/ImageFileDisplay.unit.ts
index fa1308c2ee..09c879bf46 100644
--- a/src/components/feature-board-file-element/components/ImageFileDisplay.unit.ts
+++ b/src/components/feature-board-file-element/components/ImageFileDisplay.unit.ts
@@ -4,10 +4,13 @@ import ImageFileDisplay from "./ImageFileDisplay.vue";
 
 describe("ImageFileDisplay", () => {
 	const setupProps = () => ({
+		fileProperties: {
+			name: "file-record #1.txt",
+			url: "1/file-record #1.txt",
+			previewUrl: "preview/1/file-record #1.txt",
+			isDownloadAllowed: true,
+		},
 		fileId: "file-id #1",
-		fileName: "file-record #1.txt",
-		url: "1/file-record #1.txt",
-		isDownloadAllowed: true,
 		isEditMode: false,
 		isFirstElement: true,
 		isLastElement: false,
@@ -25,9 +28,9 @@ describe("ImageFileDisplay", () => {
 
 		return {
 			wrapper,
-			fileNameProp: propsData.fileName,
-			isDownloadAllowedProp: propsData.isDownloadAllowed,
-			urlProp: propsData.url,
+			fileNameProp: propsData.fileProperties.name,
+			isDownloadAllowedProp: propsData.fileProperties.isDownloadAllowed,
+			previewUrl: propsData.fileProperties.previewUrl,
 			isFirstElementProp: propsData.isFirstElement,
 			isLastElementProp: propsData.isLastElement,
 			hasMultipleElementsProp: propsData.hasMultipleElements,
@@ -51,11 +54,11 @@ describe("ImageFileDisplay", () => {
 	});
 
 	it("should have set src correctly", () => {
-		const { wrapper, urlProp } = setup();
+		const { wrapper, previewUrl } = setup();
 
 		const src = wrapper.find("v-img").attributes("src");
 
-		expect(src).toBe(urlProp);
+		expect(src).toBe(previewUrl);
 	});
 
 	it("should have set alt correctly", () => {
@@ -95,14 +98,6 @@ describe("ImageFileDisplay", () => {
 			expect(fileName).toBe(fileNameProp);
 		});
 
-		it("should hand over url prop correctly to FileContentElementMenu", () => {
-			const { wrapper, urlProp } = setup(true);
-
-			const url = wrapper.findComponent(FileContentElementMenu).props("url");
-
-			expect(url).toBe(urlProp);
-		});
-
 		it("should hand over isFirstElement prop correctly to FileContentElementMenu", () => {
 			const { wrapper, isFirstElementProp } = setup(true);
 

From 76060d1ac98397620256a050d9d9fee954af0223 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Wed, 30 Aug 2023 16:21:43 +0200
Subject: [PATCH 16/89] Refactor file content element with new structure

---
 ...enu.unit.ts => ContentElementMenu.unit.ts} |   0
 .../components/ContentElementMenu.vue         |  95 +++++++++++
 .../components/DefaultDisplay.unit.ts         |   0
 .../components/DefaultDisplay.vue             |  42 +++++
 .../components/FileContent.unit.ts            |   0
 .../components/FileContent.vue                |  42 +++++
 .../components/FileContentElement.unit.ts     |  18 +--
 .../components/FileContentElement.vue         |  95 +++++------
 .../FileContentElementDisplay.unit.ts         |  53 -------
 .../components/FileContentElementDisplay.vue  |  61 -------
 .../components/FileContentElementEdit.unit.ts | 150 ------------------
 .../components/FileContentElementEdit.vue     | 122 --------------
 .../components/FileContentElementMenu.vue     |  87 ----------
 .../components/FileDisplay.unit.ts            |   0
 .../components/FileDisplay.vue                |  30 ++++
 ...ElementInit.unit.ts => FileUpload.unit.ts} |  14 +-
 ...eContentElementInit.vue => FileUpload.vue} |   2 +-
 ...leDisplay.unit.ts => ImageDisplay.unit.ts} |   0
 .../components/ImageDisplay.vue               |  30 ++++
 .../components/ImageFileDisplay.vue           |  82 ----------
 .../types/element-position-props.ts           |   8 +
 .../components/types/file-properties.ts       |   3 +
 22 files changed, 303 insertions(+), 631 deletions(-)
 rename src/components/feature-board-file-element/components/{FileContentElementMenu.unit.ts => ContentElementMenu.unit.ts} (100%)
 create mode 100644 src/components/feature-board-file-element/components/ContentElementMenu.vue
 create mode 100644 src/components/feature-board-file-element/components/DefaultDisplay.unit.ts
 create mode 100644 src/components/feature-board-file-element/components/DefaultDisplay.vue
 create mode 100644 src/components/feature-board-file-element/components/FileContent.unit.ts
 create mode 100644 src/components/feature-board-file-element/components/FileContent.vue
 delete mode 100644 src/components/feature-board-file-element/components/FileContentElementDisplay.unit.ts
 delete mode 100644 src/components/feature-board-file-element/components/FileContentElementDisplay.vue
 delete mode 100644 src/components/feature-board-file-element/components/FileContentElementEdit.unit.ts
 delete mode 100644 src/components/feature-board-file-element/components/FileContentElementEdit.vue
 delete mode 100644 src/components/feature-board-file-element/components/FileContentElementMenu.vue
 create mode 100644 src/components/feature-board-file-element/components/FileDisplay.unit.ts
 create mode 100644 src/components/feature-board-file-element/components/FileDisplay.vue
 rename src/components/feature-board-file-element/components/{FileContentElementInit.unit.ts => FileUpload.unit.ts} (88%)
 rename src/components/feature-board-file-element/components/{FileContentElementInit.vue => FileUpload.vue} (97%)
 rename src/components/feature-board-file-element/components/{ImageFileDisplay.unit.ts => ImageDisplay.unit.ts} (100%)
 create mode 100644 src/components/feature-board-file-element/components/ImageDisplay.vue
 delete mode 100644 src/components/feature-board-file-element/components/ImageFileDisplay.vue
 create mode 100644 src/components/feature-board-file-element/components/types/element-position-props.ts

diff --git a/src/components/feature-board-file-element/components/FileContentElementMenu.unit.ts b/src/components/feature-board-file-element/components/ContentElementMenu.unit.ts
similarity index 100%
rename from src/components/feature-board-file-element/components/FileContentElementMenu.unit.ts
rename to src/components/feature-board-file-element/components/ContentElementMenu.unit.ts
diff --git a/src/components/feature-board-file-element/components/ContentElementMenu.vue b/src/components/feature-board-file-element/components/ContentElementMenu.vue
new file mode 100644
index 0000000000..4fbd1f6fca
--- /dev/null
+++ b/src/components/feature-board-file-element/components/ContentElementMenu.vue
@@ -0,0 +1,95 @@
+<template>
+	<div class="menu">
+		<BoardMenu scope="element">
+			<BoardMenuAction
+				v-if="hasMultipleElements && !isFirstElement"
+				data-testid="board-file-element-edit-menu-move-up"
+				@click="onMoveElementUp"
+			>
+				<template #icon>
+					<VIcon>
+						{{ mdiArrowCollapseUp }}
+					</VIcon>
+				</template>
+				{{ $t("components.board.action.moveUp") }}
+			</BoardMenuAction>
+			<BoardMenuAction
+				v-if="hasMultipleElements && !isLastElement"
+				data-testid="board-file-element-edit-menu-move-down"
+				@click="onMoveElementDown"
+			>
+				<template #icon>
+					<VIcon>
+						{{ mdiArrowCollapseDown }}
+					</VIcon>
+				</template>
+				{{ $t("components.board.action.moveDown") }}
+			</BoardMenuAction>
+			<BoardMenuAction
+				data-testid="board-file-element-edit-menu-delete"
+				@click="onDelete"
+			>
+				<template #icon>
+					<VIcon>
+						{{ mdiTrashCanOutline }}
+					</VIcon>
+				</template>
+				{{ $t("components.board.action.delete") }}
+			</BoardMenuAction>
+		</BoardMenu>
+	</div>
+</template>
+
+<script lang="ts">
+import {
+	mdiAlertCircle,
+	mdiArrowCollapseDown,
+	mdiArrowCollapseUp,
+	mdiFileDocumentOutline,
+	mdiTrashCanOutline,
+	mdiTrayArrowDown,
+} from "@mdi/js";
+import { BoardMenu, BoardMenuAction } from "@ui-board";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	name: "ContentElementMenu",
+	components: { BoardMenu, BoardMenuAction },
+	props: {
+		isFirstElement: { type: Boolean, required: true },
+		isLastElement: { type: Boolean, required: true },
+		hasMultipleElements: { type: Boolean, required: true },
+	},
+	emits: ["delete:element", "move-down:element", "move-up:element"],
+	setup(props, { emit }) {
+		const onDelete = () => {
+			emit("delete:element");
+		};
+		const onMoveElementDown = () => {
+			emit("move-down:element");
+		};
+		const onMoveElementUp = () => {
+			emit("move-up:element");
+		};
+		return {
+			mdiAlertCircle,
+			mdiFileDocumentOutline,
+			mdiArrowCollapseUp,
+			mdiArrowCollapseDown,
+			mdiTrashCanOutline,
+			mdiTrayArrowDown,
+			onDelete,
+			onMoveElementDown,
+			onMoveElementUp,
+		};
+	},
+});
+</script>
+
+<style scoped>
+.menu {
+	position: absolute;
+	top: 0.5rem;
+	right: 0.5rem;
+}
+</style>
diff --git a/src/components/feature-board-file-element/components/DefaultDisplay.unit.ts b/src/components/feature-board-file-element/components/DefaultDisplay.unit.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/feature-board-file-element/components/DefaultDisplay.vue b/src/components/feature-board-file-element/components/DefaultDisplay.vue
new file mode 100644
index 0000000000..710b738c78
--- /dev/null
+++ b/src/components/feature-board-file-element/components/DefaultDisplay.vue
@@ -0,0 +1,42 @@
+<template>
+	<v-list-item
+		class="grey lighten-3 px-2 rounded-t-sm"
+		data-testid="board-file-element-display"
+		inactive
+		:ripple="false"
+	>
+		<v-list-item-icon class="my-2 mr-2">
+			<v-icon
+				class="grey--text"
+				data-testid="board-file-element-display-file-icon"
+				large
+				>{{ mdiFileDocumentOutline }}</v-icon
+			>
+		</v-list-item-icon>
+
+		<v-list-item-content class="mr-9">
+			<span
+				class="subtitle-1 d-inline-block text-truncate"
+				data-testid="board-file-element-display-file-name"
+				>{{ name }}</span
+			>
+		</v-list-item-content>
+	</v-list-item>
+</template>
+
+<script lang="ts">
+import { mdiFileDocumentOutline } from "@mdi/js";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	name: "DefaultDisplay",
+	props: {
+		name: { type: String, required: true },
+	},
+	setup() {
+		return {
+			mdiFileDocumentOutline,
+		};
+	},
+});
+</script>
diff --git a/src/components/feature-board-file-element/components/FileContent.unit.ts b/src/components/feature-board-file-element/components/FileContent.unit.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/feature-board-file-element/components/FileContent.vue b/src/components/feature-board-file-element/components/FileContent.vue
new file mode 100644
index 0000000000..3803c4350e
--- /dev/null
+++ b/src/components/feature-board-file-element/components/FileContent.vue
@@ -0,0 +1,42 @@
+<template>
+	<div>
+		<FileDisplay :file-properties="fileProperties" :is-edit-mode="isEditMode" />
+		<FileContentElementFooter :fileProperties="fileProperties" />
+		<FileContentElementAlert
+			:previewStatus="fileProperties.previewStatus"
+			@on-status-reload="onFetchFile"
+		/>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+import FileContentElementAlert from "./FileContentElementAlert.vue";
+import FileContentElementFooter from "./FileContentElementFooter.vue";
+import FileDisplay from "./FileDisplay.vue";
+import { FileProperties } from "./types/file-properties";
+
+export default defineComponent({
+	name: "FileContent",
+	components: {
+		FileDisplay,
+		FileContentElementFooter,
+		FileContentElementAlert,
+	},
+	props: {
+		fileProperties: {
+			type: Object as PropType<FileProperties>,
+			required: true,
+		},
+		isEditMode: { type: Boolean, required: true },
+	},
+
+	setup(props, { emit }) {
+		const onFetchFile = () => {
+			emit("fetch:file");
+		};
+
+		return { onFetchFile };
+	},
+});
+</script>
diff --git a/src/components/feature-board-file-element/components/FileContentElement.unit.ts b/src/components/feature-board-file-element/components/FileContentElement.unit.ts
index a3894b7fec..a699d474bc 100644
--- a/src/components/feature-board-file-element/components/FileContentElement.unit.ts
+++ b/src/components/feature-board-file-element/components/FileContentElement.unit.ts
@@ -17,7 +17,7 @@ import FileContentElementAlert from "./FileContentElementAlert.vue";
 import FileContentElementChips from "./FileContentElementChips.vue";
 import FileContentElementDisplay from "./FileContentElementDisplay.vue";
 import FileContentElementEdit from "./FileContentElementEdit.vue";
-import FileContentElementInit from "./FileContentElementInit.vue";
+import FileUpload from "./FileUpload.vue";
 import ImageFileDisplay from "./ImageFileDisplay.vue";
 
 jest.mock("@data-board", () => {
@@ -103,10 +103,8 @@ describe("FileContentElement", () => {
 
 				await wrapper.vm.$nextTick();
 
-				const fileContentElementInit = wrapper.findComponent(
-					FileContentElementInit
-				);
-				expect(fileContentElementInit.exists()).toBe(false);
+				const fileUpload = wrapper.findComponent(FileUpload);
+				expect(fileUpload.exists()).toBe(false);
 			});
 		});
 
@@ -453,17 +451,15 @@ describe("FileContentElement", () => {
 					expect(wrapper.findComponent(FileContentElement).exists()).toBe(true);
 				});
 
-				it("should render fileContentElementInit component", async () => {
+				it("should render FileUpload component", async () => {
 					const { wrapper } = setup();
 
 					await wrapper.vm.$nextTick();
 					await wrapper.vm.$nextTick();
 					await wrapper.vm.$nextTick();
 
-					const fileContentElementInit = wrapper.findComponent(
-						FileContentElementInit
-					);
-					expect(fileContentElementInit.exists()).toBe(true);
+					const fileUpload = wrapper.findComponent(FileUpload);
+					expect(fileUpload.exists()).toBe(true);
 				});
 			});
 
@@ -496,7 +492,7 @@ describe("FileContentElement", () => {
 				it("should emit delete:element", async () => {
 					const { wrapper } = setup();
 
-					const initComponent = wrapper.findComponent(FileContentElementInit);
+					const initComponent = wrapper.findComponent(FileUpload);
 					initComponent.vm.$emit("upload:file", { fileName: "mysample.txt" });
 
 					await wrapper.vm.$nextTick();
diff --git a/src/components/feature-board-file-element/components/FileContentElement.vue b/src/components/feature-board-file-element/components/FileContentElement.vue
index cb9be07002..9d8acee6e9 100644
--- a/src/components/feature-board-file-element/components/FileContentElement.vue
+++ b/src/components/feature-board-file-element/components/FileContentElement.vue
@@ -10,49 +10,24 @@
 		tabindex="0"
 		@keydown.up.down="onKeydownArrow"
 	>
-		<template v-if="fileProperties && fileRecord">
-			<div v-if="fileProperties.previewUrl">
-				<ImageFileDisplay
-					:fileProperties="fileProperties"
-					:isEditMode="isEditMode"
-					:isFirstElement="isFirstElement"
-					:isLastElement="isLastElement"
-					:hasMultipleElements="hasMultipleElements"
-					@move-down:element="onMoveFileEditDown"
-					@move-up:element="onMoveFileEditUp"
-					@delete:element="onDeleteElement"
-				/>
-			</div>
-			<div v-else>
-				<FileContentElementDisplay
-					v-if="!isEditMode"
-					:fileProperties="fileProperties"
-				/>
-				<FileContentElementEdit
-					v-if="isEditMode && fileRecord"
-					:fileProperties="fileProperties"
-					:elementId="element.id"
-					:isFirstElement="isFirstElement"
-					:isLastElement="isLastElement"
-					:hasMultipleElements="hasMultipleElements"
-					:needsFileUpload="needsFileUpload"
-					@move-down:element="onMoveFileEditDown"
-					@move-up:element="onMoveFileEditUp"
-					@delete:element="onDeleteElement"
-				/>
-			</div>
-			<FileContentElementAlert
-				:previewStatus="fileRecord.previewStatus"
-				@on-status-reload="onFetchFile"
-			/>
-		</template>
-		<template v-else>
-			<FileContentElementInit
-				v-if="isEditMode && fileRecord === undefined"
-				:elementId="element.id"
-				@upload:file="onUploadFile"
-			/>
-		</template>
+		<FileContent
+			v-if="fileProperties"
+			:file-properties="fileProperties"
+			@fetch:file="onFetchFile"
+			:is-edit-mode="isEditMode"
+		/>
+		<FileUpload
+			v-else-if="isEditMode"
+			:elementId="element.id"
+			@upload:file="onUploadFile"
+		/>
+		<ContentElementMenu
+			v-if="isEditMode"
+			v-bind="elementPositionProps"
+			@move-down:element="onMoveElementDown"
+			@move-up:element="onMoveElementUp"
+			@delete:element="onDeleteElement"
+		/>
 	</v-card>
 </template>
 
@@ -68,20 +43,16 @@ import { useBoardFocusHandler, useContentElementState } from "@data-board";
 import { useDeleteConfirmationDialog } from "@ui-confirmation-dialog";
 import { computed, defineComponent, onMounted, PropType, ref } from "vue";
 import { useFileStorageApi } from "../FileStorageApi.composable";
-import FileContentElementAlert from "./FileContentElementAlert.vue";
-import FileContentElementDisplay from "./FileContentElementDisplay.vue";
-import FileContentElementEdit from "./FileContentElementEdit.vue";
-import FileContentElementInit from "./FileContentElementInit.vue";
-import ImageFileDisplay from "./ImageFileDisplay.vue";
+import ContentElementMenu from "./ContentElementMenu.vue";
+import FileContent from "./FileContent.vue";
+import FileUpload from "./FileUpload.vue";
 
 export default defineComponent({
 	name: "FileContentElement",
 	components: {
-		FileContentElementAlert,
-		FileContentElementDisplay,
-		FileContentElementEdit,
-		FileContentElementInit,
-		ImageFileDisplay,
+		FileUpload,
+		FileContent,
+		ContentElementMenu,
 	},
 	props: {
 		element: { type: Object as PropType<FileElementResponse>, required: true },
@@ -123,6 +94,7 @@ export default defineComponent({
 				name: fileRecord.value.name,
 				url: fileRecord.value.url,
 				previewUrl,
+				previewStatus: fileRecord.value.previewStatus,
 				isDownloadAllowed: isDownloadAllowed(
 					fileRecord.value.securityCheckStatus
 				),
@@ -143,6 +115,14 @@ export default defineComponent({
 			return fileRecord.value !== undefined || props.isEditMode === true;
 		});
 
+		const elementPositionProps = computed(() => {
+			return {
+				isFirstElement: props.isFirstElement,
+				isLastElement: props.isLastElement,
+				hasMultipleElements: props.hasMultipleElements,
+			};
+		});
+
 		onMounted(() => {
 			(async () => {
 				await fetchFile();
@@ -157,11 +137,11 @@ export default defineComponent({
 			}
 		};
 
-		const onMoveFileEditDown = () => {
+		const onMoveElementDown = () => {
 			emit("move-down:edit");
 		};
 
-		const onMoveFileEditUp = () => {
+		const onMoveElementUp = () => {
 			emit("move-up:edit");
 		};
 
@@ -204,11 +184,12 @@ export default defineComponent({
 			modelValue,
 			needsFileUpload,
 			onDeleteElement,
+			onMoveElementDown,
+			onMoveElementUp,
 			onKeydownArrow,
-			onMoveFileEditDown,
-			onMoveFileEditUp,
 			onUploadFile,
 			onFetchFile,
+			elementPositionProps,
 		};
 	},
 });
diff --git a/src/components/feature-board-file-element/components/FileContentElementDisplay.unit.ts b/src/components/feature-board-file-element/components/FileContentElementDisplay.unit.ts
deleted file mode 100644
index c4a478b574..0000000000
--- a/src/components/feature-board-file-element/components/FileContentElementDisplay.unit.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { shallowMount } from "@vue/test-utils";
-import FileContentElementDisplay from "./FileContentElementDisplay.vue";
-
-describe("FileContentElementDisplay", () => {
-	const setupProps = (isDownloadAllowed?: boolean) => ({
-		fileProperties: {
-			name: "file-record #1.txt",
-			url: "1/file-record #1.txt",
-			isDownloadAllowed: isDownloadAllowed ?? true,
-		},
-	});
-
-	const setup = (isDownloadAllowed?: boolean) => {
-		document.body.setAttribute("data-app", "true");
-
-		const propsData = setupProps(isDownloadAllowed);
-
-		const wrapper = shallowMount(FileContentElementDisplay, {
-			...createComponentMocks({ i18n: true }),
-			propsData,
-		});
-
-		return {
-			wrapper,
-			fileNameProp: propsData.fileProperties.name,
-			urlProp: propsData.fileProperties.url,
-		};
-	};
-
-	it("should be found in dom", () => {
-		const { wrapper } = setup();
-
-		const fileContentElement = wrapper.findComponent(FileContentElementDisplay);
-		expect(fileContentElement.exists()).toBe(true);
-	});
-
-	it("should display icon", () => {
-		const { wrapper } = setup();
-
-		const fileIcon = wrapper.find("v-icon-stub");
-
-		expect(fileIcon.exists()).toBe(true);
-	});
-
-	it("should find file name", () => {
-		const { wrapper, fileNameProp } = setup();
-
-		const fileName = wrapper.find("span").text();
-
-		expect(fileName).toBe(fileNameProp);
-	});
-});
diff --git a/src/components/feature-board-file-element/components/FileContentElementDisplay.vue b/src/components/feature-board-file-element/components/FileContentElementDisplay.vue
deleted file mode 100644
index 2b7cc08c10..0000000000
--- a/src/components/feature-board-file-element/components/FileContentElementDisplay.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-	<div v-if="fileProperties.name !== ''">
-		<v-list-item
-			class="grey lighten-3 px-2 rounded-t-sm"
-			data-testid="board-file-element-display"
-			inactive
-			:ripple="false"
-		>
-			<v-list-item-icon class="my-2 mr-2">
-				<v-icon
-					class="grey--text"
-					data-testid="board-file-element-display-file-icon"
-					large
-					>{{ mdiFileDocumentOutline }}</v-icon
-				>
-			</v-list-item-icon>
-
-			<v-list-item-content>
-				<span
-					class="subtitle-1 d-inline-block text-truncate"
-					data-testid="board-file-element-display-file-name"
-					>{{ fileProperties.name }}</span
-				>
-			</v-list-item-content>
-		</v-list-item>
-		<FileContentElementFooter
-			:fileProperties="fileProperties"
-		></FileContentElementFooter>
-	</div>
-</template>
-
-<script lang="ts">
-import { mdiFileDocumentOutline } from "@mdi/js";
-import { defineComponent, PropType } from "vue";
-import FileContentElementFooter from "./FileContentElementFooter.vue";
-import { FileProperties } from "./types/file-properties";
-
-export default defineComponent({
-	name: "FileContentElementDisplay",
-	components: {
-		FileContentElementFooter,
-	},
-	props: {
-		fileProperties: {
-			type: Object as PropType<FileProperties>,
-			required: true,
-		},
-	},
-	setup() {
-		return {
-			mdiFileDocumentOutline,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-a:focus {
-	outline: none;
-}
-</style>
diff --git a/src/components/feature-board-file-element/components/FileContentElementEdit.unit.ts b/src/components/feature-board-file-element/components/FileContentElementEdit.unit.ts
deleted file mode 100644
index 85af9196b8..0000000000
--- a/src/components/feature-board-file-element/components/FileContentElementEdit.unit.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import { I18N_KEY } from "@/utils/inject";
-import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { shallowMount } from "@vue/test-utils";
-import FileContentElementEdit from "./FileContentElementEdit.vue";
-import FileContentElementMenu from "./FileContentElementMenu.vue";
-
-jest.mock("@/utils/fileHelper");
-
-describe("FileContentElementEdit", () => {
-	const setupProps = (isDownloadAllowed?: boolean) => ({
-		fileProperties: {
-			name: "file-record #1.txt",
-			url: "1/file-record #1.txt",
-			isDownloadAllowed: isDownloadAllowed ?? true,
-		},
-		fileId: "file-id #1",
-		isFirstElement: false,
-		isLastElement: false,
-		hasMultipleElements: false,
-	});
-
-	const setup = (isDownloadAllowed?: boolean) => {
-		document.body.setAttribute("data-app", "true");
-
-		const propsData = setupProps(isDownloadAllowed);
-		const wrapper = shallowMount(FileContentElementEdit, {
-			...createComponentMocks({ i18n: true }),
-			propsData,
-			provide: {
-				[I18N_KEY.valueOf()]: { t: (key: string) => key },
-			},
-		});
-
-		return {
-			wrapper,
-			fileNameProp: propsData.fileProperties.name,
-			isDownloadAllowedProp: propsData.fileProperties.isDownloadAllowed,
-			urlProp: propsData.fileProperties.url,
-			isFirstElementProp: propsData.isFirstElement,
-			isLastElementProp: propsData.isLastElement,
-			hasMultipleElementsProp: propsData.hasMultipleElements,
-		};
-	};
-
-	it("should be found in dom", () => {
-		const { wrapper } = setup();
-
-		const fileContentElement = wrapper.findComponent(FileContentElementEdit);
-		expect(fileContentElement.exists()).toBe(true);
-	});
-
-	it("should display icon", async () => {
-		const { wrapper } = setup();
-
-		const fileIcon = wrapper.find("v-icon-stub");
-
-		expect(fileIcon.exists()).toBe(true);
-	});
-
-	it("should find file name", async () => {
-		const { wrapper, fileNameProp } = setup();
-
-		const fileName = wrapper.find("span").text();
-		await wrapper.vm.$nextTick();
-		expect(fileName).toBe(fileNameProp);
-	});
-
-	it("should render the FileContentElementMenu", () => {
-		const { wrapper } = setup(true);
-
-		const menu = wrapper.findComponent(FileContentElementMenu);
-
-		expect(menu.exists()).toBe(true);
-	});
-
-	it("should hand over fileName prop correctly to FileContentElementMenu", () => {
-		const { wrapper, fileNameProp } = setup(true);
-
-		const fileName = wrapper
-			.findComponent(FileContentElementMenu)
-			.props("fileName");
-
-		expect(fileName).toBe(fileNameProp);
-	});
-
-	it("should hand over url prop correctly to FileContentElementMenu", () => {
-		const { wrapper, urlProp } = setup(true);
-
-		const url = wrapper.findComponent(FileContentElementMenu).props("url");
-
-		expect(url).toBe(urlProp);
-	});
-
-	it("should hand over isFirstElement prop correctly to FileContentElementMenu", () => {
-		const { wrapper, isFirstElementProp } = setup(true);
-
-		const isFirstElement = wrapper
-			.findComponent(FileContentElementMenu)
-			.props("isFirstElement");
-
-		expect(isFirstElement).toBe(isFirstElementProp);
-	});
-
-	it("should hand over isLastElement prop correctly to FileContentElementMenu", () => {
-		const { wrapper, isLastElementProp } = setup(true);
-
-		const isLastElement = wrapper
-			.findComponent(FileContentElementMenu)
-			.props("isLastElement");
-
-		expect(isLastElement).toBe(isLastElementProp);
-	});
-
-	it("should hand over hasMultipleElements prop correctly to FileContentElementMenu", () => {
-		const { wrapper, hasMultipleElementsProp } = setup(true);
-
-		const hasMultipleElements = wrapper
-			.findComponent(FileContentElementMenu)
-			.props("hasMultipleElements");
-
-		expect(hasMultipleElements).toBe(hasMultipleElementsProp);
-	});
-
-	it("should forward delete:element from FileContentElementMenu", () => {
-		const { wrapper } = setup(true);
-		const menu = wrapper.findComponent(FileContentElementMenu);
-
-		menu.vm.$emit("delete:element");
-
-		expect(wrapper.emitted("delete:element")).toHaveLength(1);
-	});
-
-	it("should forward move-down:element from FileContentElementMenu", () => {
-		const { wrapper } = setup(true);
-		const menu = wrapper.findComponent(FileContentElementMenu);
-
-		menu.vm.$emit("move-down:element");
-
-		expect(wrapper.emitted("move-down:element")).toHaveLength(1);
-	});
-
-	it("should forward move-down:up from FileContentElementMenu", () => {
-		const { wrapper } = setup(true);
-		const menu = wrapper.findComponent(FileContentElementMenu);
-
-		menu.vm.$emit("move-up:element");
-
-		expect(wrapper.emitted("move-up:element")).toHaveLength(1);
-	});
-});
diff --git a/src/components/feature-board-file-element/components/FileContentElementEdit.vue b/src/components/feature-board-file-element/components/FileContentElementEdit.vue
deleted file mode 100644
index cfb98705a4..0000000000
--- a/src/components/feature-board-file-element/components/FileContentElementEdit.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-	<div>
-		<v-list-item
-			background-color="grey lighten-3 px-2 rounded-t-sm"
-			data-testid="board-file-element-edit"
-			inactive
-			:ripple="false"
-		>
-			<v-list-item-icon class="my-2 mr-2">
-				<v-icon
-					class="grey--text"
-					data-testid="board-file-element-edit-file-icon"
-					large
-					>{{ mdiFileDocumentOutline }}</v-icon
-				>
-			</v-list-item-icon>
-
-			<v-list-item-content>
-				<span
-					class="subtitle-1 d-inline-block text-truncate"
-					data-testid="board-file-element-edit-file-name"
-					>{{ fileProperties.name }}</span
-				>
-			</v-list-item-content>
-
-			<FileContentElementMenu
-				:fileName="fileProperties.name"
-				:isDownloadAllowed="fileProperties.isDownloadAllowed"
-				:url="fileProperties.url"
-				:isFirstElement="isFirstElement"
-				:isLastElement="isLastElement"
-				:hasMultipleElements="hasMultipleElements"
-				@move-down:element="onMoveElementDown"
-				@move-up:element="onMoveElementUp"
-				@delete:element="onDeleteElement"
-			/>
-		</v-list-item>
-		<FileContentElementFooter
-			:fileProperties="fileProperties"
-		></FileContentElementFooter>
-	</div>
-</template>
-
-<script lang="ts">
-import { mdiClose, mdiFileDocumentOutline } from "@mdi/js";
-import { useSharedLastCreatedElement } from "@util-board";
-import { defineComponent, PropType, ref, watch } from "vue";
-import FileContentElementFooter from "./FileContentElementFooter.vue";
-import FileContentElementMenu from "./FileContentElementMenu.vue";
-import { FileProperties } from "./types/file-properties";
-
-export default defineComponent({
-	name: "FileContentElementEdit",
-	components: { FileContentElementMenu, FileContentElementFooter },
-	props: {
-		fileProperties: {
-			type: Object as PropType<FileProperties>,
-			required: true,
-		},
-		elementId: { type: String, required: true },
-		isFirstElement: { type: Boolean, required: true },
-		isLastElement: { type: Boolean, required: true },
-		hasMultipleElements: { type: Boolean, required: true },
-		needsFileUpload: { type: Boolean, required: true },
-	},
-	emits: [
-		"delete:element",
-		"move-down:element",
-		"move-up:element",
-		"upload:file",
-	],
-	setup(props, { emit }) {
-		const isFilePickerOpen = ref(false);
-		const { lastCreatedElementId, resetLastCreatedElementId } =
-			useSharedLastCreatedElement();
-
-		watch(lastCreatedElementId, (newValue) => {
-			if (newValue !== undefined && newValue === props.elementId) {
-				isFilePickerOpen.value = true;
-				resetLastCreatedElementId();
-			}
-		});
-
-		const onUploadClick = () => {
-			isFilePickerOpen.value = true;
-		};
-
-		const onMoveElementDown = () => {
-			emit("move-down:element");
-		};
-
-		const onMoveElementUp = () => {
-			emit("move-up:element");
-		};
-
-		const onDeleteElement = () => {
-			emit("delete:element");
-		};
-
-		const onDeleteElementWithoutAsking = () => {
-			emit("delete:element", true);
-		};
-
-		const onFileSelect = async (file: File) => {
-			emit("upload:file", file);
-		};
-
-		return {
-			isFilePickerOpen,
-			lastCreatedElementId,
-			mdiFileDocumentOutline,
-			mdiClose,
-			onMoveElementDown,
-			onMoveElementUp,
-			onDeleteElement,
-			onDeleteElementWithoutAsking,
-			onFileSelect,
-			onUploadClick,
-		};
-	},
-});
-</script>
diff --git a/src/components/feature-board-file-element/components/FileContentElementMenu.vue b/src/components/feature-board-file-element/components/FileContentElementMenu.vue
deleted file mode 100644
index 07d3434b7c..0000000000
--- a/src/components/feature-board-file-element/components/FileContentElementMenu.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-	<BoardMenu scope="element">
-		<BoardMenuAction
-			v-if="hasMultipleElements && !isFirstElement"
-			data-testid="board-file-element-edit-menu-move-up"
-			@click="onMoveElementUp"
-		>
-			<template #icon>
-				<VIcon>
-					{{ mdiArrowCollapseUp }}
-				</VIcon>
-			</template>
-			{{ $t("components.board.action.moveUp") }}
-		</BoardMenuAction>
-		<BoardMenuAction
-			v-if="hasMultipleElements && !isLastElement"
-			data-testid="board-file-element-edit-menu-move-down"
-			@click="onMoveElementDown"
-		>
-			<template #icon>
-				<VIcon>
-					{{ mdiArrowCollapseDown }}
-				</VIcon>
-			</template>
-			{{ $t("components.board.action.moveDown") }}
-		</BoardMenuAction>
-		<BoardMenuAction
-			data-testid="board-file-element-edit-menu-delete"
-			@click="onDelete"
-		>
-			<template #icon>
-				<VIcon>
-					{{ mdiTrashCanOutline }}
-				</VIcon>
-			</template>
-			{{ $t("components.board.action.delete") }}
-		</BoardMenuAction>
-	</BoardMenu>
-</template>
-
-<script lang="ts">
-import {
-	mdiAlertCircle,
-	mdiArrowCollapseDown,
-	mdiArrowCollapseUp,
-	mdiFileDocumentOutline,
-	mdiTrashCanOutline,
-	mdiTrayArrowDown,
-} from "@mdi/js";
-import { BoardMenu, BoardMenuAction } from "@ui-board";
-import { defineComponent } from "vue";
-
-export default defineComponent({
-	name: "FileContentElementMenu",
-	components: { BoardMenu, BoardMenuAction },
-	props: {
-		fileName: { type: String, required: true },
-		url: { type: String, required: true },
-		isFirstElement: { type: Boolean, required: true },
-		isLastElement: { type: Boolean, required: true },
-		hasMultipleElements: { type: Boolean, required: true },
-	},
-	emits: ["delete:element", "move-down:element", "move-up:element"],
-	setup(props, { emit }) {
-		const onDelete = () => {
-			emit("delete:element");
-		};
-		const onMoveElementDown = () => {
-			emit("move-down:element");
-		};
-		const onMoveElementUp = () => {
-			emit("move-up:element");
-		};
-		return {
-			mdiAlertCircle,
-			mdiFileDocumentOutline,
-			mdiArrowCollapseUp,
-			mdiArrowCollapseDown,
-			mdiTrashCanOutline,
-			mdiTrayArrowDown,
-			onDelete,
-			onMoveElementDown,
-			onMoveElementUp,
-		};
-	},
-});
-</script>
diff --git a/src/components/feature-board-file-element/components/FileDisplay.unit.ts b/src/components/feature-board-file-element/components/FileDisplay.unit.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/feature-board-file-element/components/FileDisplay.vue b/src/components/feature-board-file-element/components/FileDisplay.vue
new file mode 100644
index 0000000000..77a4d0eae6
--- /dev/null
+++ b/src/components/feature-board-file-element/components/FileDisplay.vue
@@ -0,0 +1,30 @@
+<template>
+	<div>
+		<ImageDisplay
+			v-if="fileProperties?.previewUrl"
+			:preview-url="fileProperties?.previewUrl"
+			:name="fileProperties.name"
+			:is-edit-mode="isEditMode"
+		/>
+		<DefaultDisplay :name="fileProperties.name" />
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+import DefaultDisplay from "./DefaultDisplay.vue";
+import ImageDisplay from "./ImageDisplay.vue";
+import { FileProperties } from "./types/file-properties";
+
+export default defineComponent({
+	name: "FileDisplay",
+	components: { ImageDisplay, DefaultDisplay },
+	props: {
+		fileProperties: {
+			type: Object as PropType<FileProperties>,
+			required: true,
+		},
+		isEditMode: { type: Boolean, required: true },
+	},
+});
+</script>
diff --git a/src/components/feature-board-file-element/components/FileContentElementInit.unit.ts b/src/components/feature-board-file-element/components/FileUpload.unit.ts
similarity index 88%
rename from src/components/feature-board-file-element/components/FileContentElementInit.unit.ts
rename to src/components/feature-board-file-element/components/FileUpload.unit.ts
index 52aef7ae05..fd5c639fc2 100644
--- a/src/components/feature-board-file-element/components/FileContentElementInit.unit.ts
+++ b/src/components/feature-board-file-element/components/FileUpload.unit.ts
@@ -1,10 +1,10 @@
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
-import { shallowMount } from "@vue/test-utils";
-import FileContentElementInit from "./FileContentElementInit.vue";
-import FilePicker from "./FilePicker.vue";
-import { useSharedLastCreatedElement } from "@util-board";
 import { createMock } from "@golevelup/ts-jest";
+import { useSharedLastCreatedElement } from "@util-board";
+import { shallowMount } from "@vue/test-utils";
 import { nextTick } from "vue";
+import FilePicker from "./FilePicker.vue";
+import FileUpload from "./FileUpload.vue";
 
 jest.mock("@util-board");
 const mockedUse = createMock<ReturnType<typeof useSharedLastCreatedElement>>();
@@ -13,7 +13,7 @@ const useSharedLastCreatedElementMock = jest.mocked(
 );
 useSharedLastCreatedElementMock.mockReturnValue(mockedUse);
 
-describe(FileContentElementInit.name, () => {
+describe(FileUpload.name, () => {
 	const setupProps = (fileName: string) => ({
 		fileName,
 		elementId: "element 123",
@@ -25,7 +25,7 @@ describe(FileContentElementInit.name, () => {
 
 		const propsData = setupProps(fileName);
 
-		const wrapper = shallowMount(FileContentElementInit, {
+		const wrapper = shallowMount(FileUpload, {
 			...createComponentMocks({ i18n: true }),
 			propsData,
 		});
@@ -41,7 +41,7 @@ describe(FileContentElementInit.name, () => {
 	it("should be found in dom", () => {
 		const { wrapper } = setup();
 
-		const component = wrapper.findComponent(FileContentElementInit);
+		const component = wrapper.findComponent(FileUpload);
 		expect(component.exists()).toBe(true);
 	});
 
diff --git a/src/components/feature-board-file-element/components/FileContentElementInit.vue b/src/components/feature-board-file-element/components/FileUpload.vue
similarity index 97%
rename from src/components/feature-board-file-element/components/FileContentElementInit.vue
rename to src/components/feature-board-file-element/components/FileUpload.vue
index 25e95cf87b..85a343992f 100644
--- a/src/components/feature-board-file-element/components/FileContentElementInit.vue
+++ b/src/components/feature-board-file-element/components/FileUpload.vue
@@ -21,7 +21,7 @@ import { defineComponent, ref, watch } from "vue";
 import FilePicker from "./FilePicker.vue";
 
 export default defineComponent({
-	name: "FileContentElementInit",
+	name: "FileUpload",
 	props: {
 		elementId: { type: String, required: true },
 	},
diff --git a/src/components/feature-board-file-element/components/ImageFileDisplay.unit.ts b/src/components/feature-board-file-element/components/ImageDisplay.unit.ts
similarity index 100%
rename from src/components/feature-board-file-element/components/ImageFileDisplay.unit.ts
rename to src/components/feature-board-file-element/components/ImageDisplay.unit.ts
diff --git a/src/components/feature-board-file-element/components/ImageDisplay.vue b/src/components/feature-board-file-element/components/ImageDisplay.vue
new file mode 100644
index 0000000000..efeeb6c9cc
--- /dev/null
+++ b/src/components/feature-board-file-element/components/ImageDisplay.vue
@@ -0,0 +1,30 @@
+<template>
+	<div>
+		<v-img class="rounded-t-sm" :src="previewUrl" :alt="name">
+			<div v-if="isEditMode" class="menu-background"></div>
+		</v-img>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	name: "ImageDisplay",
+	props: {
+		previewUrl: { type: String, required: true },
+		name: { type: String, required: true },
+		isEditMode: { type: Boolean, required: true },
+	},
+});
+</script>
+
+<style scoped>
+.menu-background {
+	position: absolute;
+	width: 100%;
+	height: 52px;
+	background-color: var(--v-white-base);
+	opacity: 80%;
+}
+</style>
diff --git a/src/components/feature-board-file-element/components/ImageFileDisplay.vue b/src/components/feature-board-file-element/components/ImageFileDisplay.vue
deleted file mode 100644
index 273536849a..0000000000
--- a/src/components/feature-board-file-element/components/ImageFileDisplay.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-	<div>
-		<v-img
-			class="rounded-t-sm"
-			:src="fileProperties.previewUrl"
-			:alt="fileProperties.name"
-		/>
-		<div v-if="isEditMode" class="menu">
-			<FileContentElementMenu
-				:fileName="fileProperties.name"
-				:isDownloadAllowed="fileProperties.isDownloadAllowed"
-				:url="fileProperties.url"
-				:isFirstElement="isFirstElement"
-				:isLastElement="isLastElement"
-				:hasMultipleElements="hasMultipleElements"
-				@move-down:element="onMoveElementDown"
-				@move-up:element="onMoveElementUp"
-				@delete:element="onDeleteElement"
-			/>
-		</div>
-		<FileContentElementFooter
-			:fileProperties="fileProperties"
-		></FileContentElementFooter>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from "vue";
-import FileContentElementFooter from "./FileContentElementFooter.vue";
-import FileContentElementMenu from "./FileContentElementMenu.vue";
-import { FileProperties } from "./types/file-properties";
-
-export default defineComponent({
-	name: "ImageFileDisplay",
-	components: { FileContentElementMenu, FileContentElementFooter },
-	props: {
-		fileProperties: {
-			type: Object as PropType<FileProperties>,
-			required: true,
-		},
-		isEditMode: { type: Boolean, required: true },
-		isFirstElement: { type: Boolean, required: true },
-		isLastElement: { type: Boolean, required: true },
-		hasMultipleElements: { type: Boolean, required: true },
-	},
-	emits: [
-		"delete:element",
-		"move-down:element",
-		"move-up:element",
-		"update:caption",
-	],
-	setup(props, { emit }) {
-		const onMoveElementDown = () => {
-			emit("move-down:element");
-		};
-
-		const onMoveElementUp = () => {
-			emit("move-up:element");
-		};
-
-		const onDeleteElement = () => {
-			emit("delete:element");
-		};
-
-		return {
-			onMoveElementDown,
-			onMoveElementUp,
-			onDeleteElement,
-		};
-	},
-});
-</script>
-
-<style scoped>
-.menu {
-	position: absolute;
-	border-radius: 50%;
-	background: rgba(255, 255, 255, 0.8);
-	top: 0.5rem;
-	right: 0.5rem;
-}
-</style>
diff --git a/src/components/feature-board-file-element/components/types/element-position-props.ts b/src/components/feature-board-file-element/components/types/element-position-props.ts
new file mode 100644
index 0000000000..38bb8cd5d8
--- /dev/null
+++ b/src/components/feature-board-file-element/components/types/element-position-props.ts
@@ -0,0 +1,8 @@
+export interface ElementPositionProps {
+	isFirstElement: boolean;
+	isLastElement: boolean;
+	hasMultipleElements: boolean;
+	"@move-down:element": () => void;
+	"@move-up:element": () => void;
+	"@delete:element": (deleteDirectly: true | undefined) => Promise<void>;
+}
diff --git a/src/components/feature-board-file-element/components/types/file-properties.ts b/src/components/feature-board-file-element/components/types/file-properties.ts
index 9cdc6f4ba0..2873a4f7d9 100644
--- a/src/components/feature-board-file-element/components/types/file-properties.ts
+++ b/src/components/feature-board-file-element/components/types/file-properties.ts
@@ -1,7 +1,10 @@
+import { PreviewStatus } from "@/fileStorageApi/v3";
+
 export interface FileProperties {
 	name: string;
 	size: number;
 	url: string;
 	previewUrl?: string;
+	previewStatus: PreviewStatus;
 	isDownloadAllowed: boolean;
 }

From 9f22d1923be4a69377a7a55d60bbc338625a5b27 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Thu, 31 Aug 2023 11:51:57 +0200
Subject: [PATCH 17/89] Fix german translation

---
 src/locales/de.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/locales/de.json b/src/locales/de.json
index 4aea51fd08..e38a394300 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -783,7 +783,7 @@
 	"components.cardElement.deleteElement": "löschen",
 	"components.cardElement.dragElement": "verschieben",
 	"components.cardElement.fileElement.virusDetected": "Datei wurde aufgrund eines Virenverdachts gesperrt.",
-	"components.cardElement.fileElement.awaitingScan": "Vorschau wird nach erfolgreicher Virenprüfung angezeigt. Aktuell wird die Datei gescannt. Status aktualisieren",
+	"components.cardElement.fileElement.awaitingScan": "Vorschau wird nach erfolgreicher Virenprüfung angezeigt. Aktuell wird die Datei gescannt.",
 	"components.cardElement.fileElement.scanError": "Fehler bei der Virenprüfung. Vorschau kann nicht erstellt werden. Datei bitte erneut hochladen.",
 	"components.cardElement.fileElement.scanWontCheck": "Aufgrund der Größe kann keine Vorschau generiert werden.",
 	"components.cardElement.fileElement.reloadStatus": "Status aktualisieren",

From d842356e38831a5fa57501b16633f8cc57b80cf5 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Thu, 31 Aug 2023 13:19:59 +0200
Subject: [PATCH 18/89] Add margin right to progress bar to prevent conflict
 with 3dotmenu

---
 .../components/FileUpload.vue                      | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/feature-board-file-element/components/FileUpload.vue b/src/components/feature-board-file-element/components/FileUpload.vue
index 85a343992f..13233d2ab9 100644
--- a/src/components/feature-board-file-element/components/FileUpload.vue
+++ b/src/components/feature-board-file-element/components/FileUpload.vue
@@ -6,12 +6,12 @@
 				:isFilePickerOpen.sync="isFilePickerOpen"
 			/>
 		</div>
-		<v-card-text v-else>
+		<div class="progress-bar" v-else>
 			<v-progress-linear
 				data-testid="board-file-element-progress-bar"
 				indeterminate
-			></v-progress-linear>
-		</v-card-text>
+			/>
+		</div>
 	</div>
 </template>
 
@@ -60,3 +60,11 @@ export default defineComponent({
 	},
 });
 </script>
+<style scoped>
+.progress-bar {
+	min-height: 52px;
+	margin: 0px 48px 0px 16px;
+	display: flex;
+	align-items: center;
+}
+</style>

From d4f0ca26eb9e6c8b1a61ad7743914f738f4fd28a Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Thu, 31 Aug 2023 13:25:20 +0200
Subject: [PATCH 19/89] Add margin right to filepicker

---
 .../feature-board-file-element/components/FileUpload.vue         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/feature-board-file-element/components/FileUpload.vue b/src/components/feature-board-file-element/components/FileUpload.vue
index 13233d2ab9..a5f0010061 100644
--- a/src/components/feature-board-file-element/components/FileUpload.vue
+++ b/src/components/feature-board-file-element/components/FileUpload.vue
@@ -2,6 +2,7 @@
 	<div>
 		<div v-if="!fileWasPicked" class="grey lighten-3">
 			<FilePicker
+				class="mr-12"
 				@update:file="onFileSelect"
 				:isFilePickerOpen.sync="isFilePickerOpen"
 			/>

From b8b93d0282f44b53d8daf7db4425a12bdfb37765 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Thu, 31 Aug 2023 13:34:05 +0200
Subject: [PATCH 20/89] Hide Details on v-file-input

---
 .../feature-board-file-element/components/FilePicker.vue     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/feature-board-file-element/components/FilePicker.vue b/src/components/feature-board-file-element/components/FilePicker.vue
index 54bbe32f93..0e199f793e 100644
--- a/src/components/feature-board-file-element/components/FilePicker.vue
+++ b/src/components/feature-board-file-element/components/FilePicker.vue
@@ -1,19 +1,20 @@
 <template>
-	<div class="grey lighten-3">
+	<div class="grey lighten-3 pb-3">
 		<v-file-input
 			class="px-5 mt-0"
 			ref="inputRef"
 			@change="onFileChange"
 			prepend-icon="$mdiTrayArrowUp"
 			:placeholder="$t('feature-board-file-element.placeholder.uploadFile')"
+			hide-details="true"
 		/>
 	</div>
 </template>
 
 <script lang="ts">
+import { mdiTrayArrowUp } from "@mdi/js";
 import { useVModel } from "@vueuse/core";
 import { defineComponent, onMounted, ref, watch } from "vue";
-import { mdiTrayArrowUp } from "@mdi/js";
 
 export default defineComponent({
 	name: "FilePicker",

From 8400bbcdd28b5410251a0c224fd456626f5dc114 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Thu, 31 Aug 2023 14:18:05 +0200
Subject: [PATCH 21/89] Adjust Image Display tests

---
 .../components/ImageDisplay.unit.ts           | 96 +------------------
 1 file changed, 4 insertions(+), 92 deletions(-)

diff --git a/src/components/feature-board-file-element/components/ImageDisplay.unit.ts b/src/components/feature-board-file-element/components/ImageDisplay.unit.ts
index 09c879bf46..d52d2eb0dd 100644
--- a/src/components/feature-board-file-element/components/ImageDisplay.unit.ts
+++ b/src/components/feature-board-file-element/components/ImageDisplay.unit.ts
@@ -1,8 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
-import FileContentElementMenu from "./FileContentElementMenu.vue";
-import ImageFileDisplay from "./ImageFileDisplay.vue";
+import ImageDisplay from "./ImageDisplay.vue";
 
-describe("ImageFileDisplay", () => {
+describe("ImageDisplay", () => {
 	const setupProps = () => ({
 		fileProperties: {
 			name: "file-record #1.txt",
@@ -22,7 +21,7 @@ describe("ImageFileDisplay", () => {
 
 		const propsData = setupProps();
 
-		const wrapper = shallowMount(ImageFileDisplay, {
+		const wrapper = shallowMount(ImageDisplay, {
 			propsData: { ...propsData, isEditMode },
 		});
 
@@ -40,7 +39,7 @@ describe("ImageFileDisplay", () => {
 	it("should be found in dom", () => {
 		const { wrapper } = setup();
 
-		const fileContentElement = wrapper.findComponent(ImageFileDisplay);
+		const fileContentElement = wrapper.findComponent(ImageDisplay);
 
 		expect(fileContentElement.exists()).toBe(true);
 	});
@@ -68,91 +67,4 @@ describe("ImageFileDisplay", () => {
 
 		expect(alt).toBe(fileNameProp);
 	});
-
-	describe("when component is not in edit mode", () => {
-		it("should NOT render the FileContentElementMenu", () => {
-			const { wrapper } = setup();
-
-			const menu = wrapper.findComponent(FileContentElementMenu);
-
-			expect(menu.exists()).toBe(false);
-		});
-	});
-
-	describe("when component is in edit mode", () => {
-		it("should render the FileContentElementMenu", () => {
-			const { wrapper } = setup(true);
-
-			const menu = wrapper.findComponent(FileContentElementMenu);
-
-			expect(menu.exists()).toBe(true);
-		});
-
-		it("should hand over fileName prop correctly to FileContentElementMenu", () => {
-			const { wrapper, fileNameProp } = setup(true);
-
-			const fileName = wrapper
-				.findComponent(FileContentElementMenu)
-				.props("fileName");
-
-			expect(fileName).toBe(fileNameProp);
-		});
-
-		it("should hand over isFirstElement prop correctly to FileContentElementMenu", () => {
-			const { wrapper, isFirstElementProp } = setup(true);
-
-			const isFirstElement = wrapper
-				.findComponent(FileContentElementMenu)
-				.props("isFirstElement");
-
-			expect(isFirstElement).toBe(isFirstElementProp);
-		});
-
-		it("should hand over isLastElement prop correctly to FileContentElementMenu", () => {
-			const { wrapper, isLastElementProp } = setup(true);
-
-			const isLastElement = wrapper
-				.findComponent(FileContentElementMenu)
-				.props("isLastElement");
-
-			expect(isLastElement).toBe(isLastElementProp);
-		});
-
-		it("should hand over hasMultipleElements prop correctly to FileContentElementMenu", () => {
-			const { wrapper, hasMultipleElementsProp } = setup(true);
-
-			const hasMultipleElements = wrapper
-				.findComponent(FileContentElementMenu)
-				.props("hasMultipleElements");
-
-			expect(hasMultipleElements).toBe(hasMultipleElementsProp);
-		});
-
-		it("should forward delete:element from FileContentElementMenu", () => {
-			const { wrapper } = setup(true);
-			const menu = wrapper.findComponent(FileContentElementMenu);
-
-			menu.vm.$emit("delete:element");
-
-			expect(wrapper.emitted("delete:element")).toHaveLength(1);
-		});
-
-		it("should forward move-down:element from FileContentElementMenu", () => {
-			const { wrapper } = setup(true);
-			const menu = wrapper.findComponent(FileContentElementMenu);
-
-			menu.vm.$emit("move-down:element");
-
-			expect(wrapper.emitted("move-down:element")).toHaveLength(1);
-		});
-
-		it("should forward move-down:up from FileContentElementMenu", () => {
-			const { wrapper } = setup(true);
-			const menu = wrapper.findComponent(FileContentElementMenu);
-
-			menu.vm.$emit("move-up:element");
-
-			expect(wrapper.emitted("move-up:element")).toHaveLength(1);
-		});
-	});
 });

From bd53f1d2580e8a9169ef4ba65cdd5292ddac4749 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Thu, 31 Aug 2023 14:42:12 +0200
Subject: [PATCH 22/89] align icons under each other

---
 .../components/FileContentElementDownload.vue            | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/feature-board-file-element/components/FileContentElementDownload.vue b/src/components/feature-board-file-element/components/FileContentElementDownload.vue
index d395e90608..7f83652a66 100644
--- a/src/components/feature-board-file-element/components/FileContentElementDownload.vue
+++ b/src/components/feature-board-file-element/components/FileContentElementDownload.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="pa-2 mr-2 mt-1">
+	<div class="download-btn">
 		<v-icon
 			data-testid="board-file-element-edit-menu-download"
 			@click="onDownload"
@@ -34,3 +34,10 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style scoped>
+.download-btn {
+	margin: 10px 14px 0px 0px;
+	padding: 0px;
+}
+</style>

From c214cf9221e403145de6caded5214fbbc01ab0a0 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Fri, 1 Sep 2023 12:06:38 +0200
Subject: [PATCH 23/89] fix test fileDisplay

---
 .../components/ImageDisplay.unit.ts           | 20 ++++---------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/src/components/feature-board-file-element/components/ImageDisplay.unit.ts b/src/components/feature-board-file-element/components/ImageDisplay.unit.ts
index d52d2eb0dd..6d47fcf63f 100644
--- a/src/components/feature-board-file-element/components/ImageDisplay.unit.ts
+++ b/src/components/feature-board-file-element/components/ImageDisplay.unit.ts
@@ -3,17 +3,9 @@ import ImageDisplay from "./ImageDisplay.vue";
 
 describe("ImageDisplay", () => {
 	const setupProps = () => ({
-		fileProperties: {
-			name: "file-record #1.txt",
-			url: "1/file-record #1.txt",
-			previewUrl: "preview/1/file-record #1.txt",
-			isDownloadAllowed: true,
-		},
-		fileId: "file-id #1",
+		name: "file-record #1.txt",
+		previewUrl: "preview/1/file-record #1.txt",
 		isEditMode: false,
-		isFirstElement: true,
-		isLastElement: false,
-		hasMultipleElements: false,
 	});
 
 	const setup = (isEditMode = false) => {
@@ -27,12 +19,8 @@ describe("ImageDisplay", () => {
 
 		return {
 			wrapper,
-			fileNameProp: propsData.fileProperties.name,
-			isDownloadAllowedProp: propsData.fileProperties.isDownloadAllowed,
-			previewUrl: propsData.fileProperties.previewUrl,
-			isFirstElementProp: propsData.isFirstElement,
-			isLastElementProp: propsData.isLastElement,
-			hasMultipleElementsProp: propsData.hasMultipleElements,
+			fileNameProp: propsData.name,
+			previewUrl: propsData.previewUrl,
 		};
 	};
 

From efda07d0ff874dd41c77e15320684c890e0e93a6 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Fri, 1 Sep 2023 14:26:02 +0200
Subject: [PATCH 24/89] test for fileDisplay component

---
 .../components/FileDisplay.unit.ts            | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/src/components/feature-board-file-element/components/FileDisplay.unit.ts b/src/components/feature-board-file-element/components/FileDisplay.unit.ts
index e69de29bb2..24fbc42169 100644
--- a/src/components/feature-board-file-element/components/FileDisplay.unit.ts
+++ b/src/components/feature-board-file-element/components/FileDisplay.unit.ts
@@ -0,0 +1,55 @@
+import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { shallowMount } from "@vue/test-utils";
+import DefaultDisplay from "./DefaultDisplay.vue";
+import FileDisplay from "./FileDisplay.vue";
+import ImageDisplay from "./ImageDisplay.vue";
+
+describe("FileDisplay", () => {
+	const setup = () => {
+		document.body.setAttribute("data-app", "true");
+
+		const propsData = {
+			name: "file-record #1.txt",
+			previewUrl: "preview/1/file-record #1.txt",
+			isEditMode: false,
+		};
+
+		const wrapper = shallowMount(FileDisplay, {
+			propsData,
+			...createComponentMocks({}),
+		});
+
+		return {
+			wrapper,
+			fileNameProp: propsData.name,
+			previewUrlProp: propsData.previewUrl,
+			editModeProp: propsData.isEditMode,
+		};
+	};
+
+	it("should be found in dom", () => {
+		const { wrapper } = setup();
+
+		const fileDisplay = wrapper.findComponent(FileDisplay);
+
+		expect(fileDisplay.exists()).toBe(true);
+	});
+
+	it("should render image display component with proper props", () => {
+		const { wrapper, fileNameProp, previewUrlProp, editModeProp } = setup();
+
+		const props = wrapper.findComponent(ImageDisplay).attributes();
+
+		expect(props.filename).toBe(fileNameProp);
+		expect(props.previewUrl).toBe(previewUrlProp);
+		expect(props.editMode).toBe(editModeProp);
+	});
+
+	it("should render default display component with proper props", () => {
+		const { wrapper, fileNameProp } = setup();
+
+		const props = wrapper.findComponent(DefaultDisplay).attributes();
+
+		expect(props.filename).toBe(fileNameProp);
+	});
+});

From c7bf757a40fa9cd17fba9c3ff21f91921bccc399 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Mon, 4 Sep 2023 08:54:49 +0200
Subject: [PATCH 25/89] Add Default Display test

---
 .../components/DefaultDisplay.unit.ts         | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/src/components/feature-board-file-element/components/DefaultDisplay.unit.ts b/src/components/feature-board-file-element/components/DefaultDisplay.unit.ts
index e69de29bb2..2db35a8724 100644
--- a/src/components/feature-board-file-element/components/DefaultDisplay.unit.ts
+++ b/src/components/feature-board-file-element/components/DefaultDisplay.unit.ts
@@ -0,0 +1,45 @@
+import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { mdiFileDocumentOutline } from "@mdi/js";
+import { shallowMount } from "@vue/test-utils";
+import DefaultDisplay from "./DefaultDisplay.vue";
+
+describe("DefaultDisplay", () => {
+	const setup = () => {
+		document.body.setAttribute("data-app", "true");
+
+		const propsData = { name: "test-name" };
+		const wrapper = shallowMount(DefaultDisplay, {
+			propsData,
+			...createComponentMocks({}),
+		});
+
+		return {
+			wrapper,
+			name: propsData.name,
+		};
+	};
+
+	it("should be found in dom", () => {
+		const { wrapper } = setup();
+
+		const defaultDisplay = wrapper.findComponent(DefaultDisplay);
+
+		expect(defaultDisplay.exists()).toBe(true);
+	});
+
+	it("should render name prop", () => {
+		const { wrapper, name } = setup();
+
+		const text = wrapper.text();
+
+		expect(text).toContain(name);
+	});
+
+	it("should render icon", () => {
+		const { wrapper } = setup();
+
+		const icon = wrapper.find("v-icon-stub").text();
+
+		expect(icon).toBe(mdiFileDocumentOutline);
+	});
+});

From 15543f8bc1ac8a417f5f04d8337efe2a53c1b491 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Mon, 4 Sep 2023 11:56:23 +0200
Subject: [PATCH 26/89] Remove unecessary questions marks

---
 .../feature-board-file-element/components/FileDisplay.vue     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/feature-board-file-element/components/FileDisplay.vue b/src/components/feature-board-file-element/components/FileDisplay.vue
index 77a4d0eae6..32df1cb735 100644
--- a/src/components/feature-board-file-element/components/FileDisplay.vue
+++ b/src/components/feature-board-file-element/components/FileDisplay.vue
@@ -1,8 +1,8 @@
 <template>
 	<div>
 		<ImageDisplay
-			v-if="fileProperties?.previewUrl"
-			:preview-url="fileProperties?.previewUrl"
+			v-if="fileProperties.previewUrl"
+			:preview-url="fileProperties.previewUrl"
 			:name="fileProperties.name"
 			:is-edit-mode="isEditMode"
 		/>

From ba8ba62264b0e276b967b1bb7e8b17acc5985ac4 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Mon, 4 Sep 2023 13:11:36 +0200
Subject: [PATCH 27/89] Add file content test

---
 .../components/FileContent.unit.ts            | 80 +++++++++++++++++++
 .../components/FileContent.vue                |  8 +-
 2 files changed, 85 insertions(+), 3 deletions(-)

diff --git a/src/components/feature-board-file-element/components/FileContent.unit.ts b/src/components/feature-board-file-element/components/FileContent.unit.ts
index e69de29bb2..3ab1c589dc 100644
--- a/src/components/feature-board-file-element/components/FileContent.unit.ts
+++ b/src/components/feature-board-file-element/components/FileContent.unit.ts
@@ -0,0 +1,80 @@
+import { PreviewStatus } from "@/fileStorageApi/v3";
+import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { shallowMount } from "@vue/test-utils";
+import FileContent from "./FileContent.vue";
+import FileContentElementAlert from "./FileContentElementAlert.vue";
+import FileContentElementFooter from "./FileContentElementFooter.vue";
+
+describe("FileContent", () => {
+	const setup = () => {
+		document.body.setAttribute("data-app", "true");
+
+		const fileProperties = {
+			name: "test",
+			size: 100,
+			url: "test",
+			previewUrl: "test",
+			previewStatus: PreviewStatus.PREVIEW_POSSIBLE,
+			isDownloadAllowed: true,
+		};
+		const wrapper = shallowMount(FileContent, {
+			propsData: {
+				fileProperties,
+				isEditMode: true,
+			},
+			...createComponentMocks({}),
+		});
+
+		return {
+			wrapper,
+			fileProperties,
+		};
+	};
+
+	it("should pass props to FileDisplay", () => {
+		const { wrapper, fileProperties } = setup();
+
+		const fileDisplay = wrapper.findComponent(FileContent);
+
+		expect(fileDisplay.props()).toEqual({
+			fileProperties,
+			isEditMode: true,
+		});
+	});
+
+	it("should pass props to FileContentElementFooter", () => {
+		const { wrapper, fileProperties } = setup();
+
+		const fileContentElementFooter = wrapper.findComponent(
+			FileContentElementFooter
+		);
+
+		expect(fileContentElementFooter.props()).toEqual({
+			fileProperties,
+		});
+	});
+
+	it("Should pass props to FileContentElementAlert", () => {
+		const { wrapper, fileProperties } = setup();
+
+		const fileContentElementAlert = wrapper.findComponent(
+			FileContentElementAlert
+		);
+
+		expect(fileContentElementAlert.props()).toEqual({
+			previewStatus: fileProperties.previewStatus,
+		});
+	});
+
+	it("should emit delete event when alter emits on status reload", async () => {
+		const { wrapper } = setup();
+
+		const fileContentElementAlert = wrapper.findComponent(
+			FileContentElementAlert
+		);
+
+		await fileContentElementAlert.vm.$emit("on-status-reload");
+
+		expect(wrapper.emitted("fetch:file")).toBeTruthy();
+	});
+});
diff --git a/src/components/feature-board-file-element/components/FileContent.vue b/src/components/feature-board-file-element/components/FileContent.vue
index 3803c4350e..b514ec9085 100644
--- a/src/components/feature-board-file-element/components/FileContent.vue
+++ b/src/components/feature-board-file-element/components/FileContent.vue
@@ -3,14 +3,14 @@
 		<FileDisplay :file-properties="fileProperties" :is-edit-mode="isEditMode" />
 		<FileContentElementFooter :fileProperties="fileProperties" />
 		<FileContentElementAlert
-			:previewStatus="fileProperties.previewStatus"
+			:previewStatus="previewStatus"
 			@on-status-reload="onFetchFile"
 		/>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 import FileContentElementAlert from "./FileContentElementAlert.vue";
 import FileContentElementFooter from "./FileContentElementFooter.vue";
 import FileDisplay from "./FileDisplay.vue";
@@ -36,7 +36,9 @@ export default defineComponent({
 			emit("fetch:file");
 		};
 
-		return { onFetchFile };
+		const previewStatus = computed(() => props.fileProperties.previewStatus);
+
+		return { onFetchFile, previewStatus };
 	},
 });
 </script>

From 13ecca0e7dfe061022936ed49c6a4c88d29cf2e5 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Mon, 4 Sep 2023 16:11:54 +0200
Subject: [PATCH 28/89] Adjust tests for file content element

---
 .../components/FileContentElement.unit.ts     | 995 +++++++-----------
 1 file changed, 400 insertions(+), 595 deletions(-)

diff --git a/src/components/feature-board-file-element/components/FileContentElement.unit.ts b/src/components/feature-board-file-element/components/FileContentElement.unit.ts
index a699d474bc..6381155a29 100644
--- a/src/components/feature-board-file-element/components/FileContentElement.unit.ts
+++ b/src/components/feature-board-file-element/components/FileContentElement.unit.ts
@@ -11,14 +11,12 @@ import { fileRecordResponseFactory } from "@@/tests/test-utils/factory/filerecor
 import { createMock } from "@golevelup/ts-jest";
 import { useDeleteConfirmationDialog } from "@ui-confirmation-dialog";
 import { MountOptions, shallowMount } from "@vue/test-utils";
-import Vue, { nextTick } from "vue";
+import Vue from "vue";
+import ContentElementMenu from "./ContentElementMenu.vue";
+import FileContent from "./FileContent.vue";
 import FileContentElement from "./FileContentElement.vue";
-import FileContentElementAlert from "./FileContentElementAlert.vue";
-import FileContentElementChips from "./FileContentElementChips.vue";
-import FileContentElementDisplay from "./FileContentElementDisplay.vue";
-import FileContentElementEdit from "./FileContentElementEdit.vue";
 import FileUpload from "./FileUpload.vue";
-import ImageFileDisplay from "./ImageFileDisplay.vue";
+import { FileProperties } from "./types/file-properties";
 
 jest.mock("@data-board", () => {
 	return {
@@ -28,13 +26,12 @@ jest.mock("@data-board", () => {
 });
 jest.mock("@feature-board");
 jest.mock("../FileStorageApi.composable");
-
 jest.mock("@ui-confirmation-dialog");
-const mockedUse = createMock<ReturnType<typeof useDeleteConfirmationDialog>>();
-mockedUse.askDeleteConfirmation.mockResolvedValue(true);
+
 const useDeleteConfirmationDialogMock = jest.mocked(
 	useDeleteConfirmationDialog
 );
+const mockedUse = createMock<ReturnType<typeof useDeleteConfirmationDialog>>();
 useDeleteConfirmationDialogMock.mockReturnValue(mockedUse);
 
 describe("FileContentElement", () => {
@@ -61,20 +58,13 @@ describe("FileContentElement", () => {
 		return { wrapper, deleteElementMock };
 	};
 
-	describe("when component is in view mode", () => {
-		describe("when file needs to be uploaded", () => {
+	describe("when component is not in edit mode", () => {
+		describe("when file record is not available", () => {
 			const setup = () => {
 				const element = fileElementResponseFactory.build();
 				document.body.setAttribute("data-app", "true");
 
-				const fileRecordResponse = fileRecordResponseFactory.build({});
-
-				const uploadMock = jest.fn().mockImplementationOnce(() => {
-					fileRecord.value = fileRecordResponse;
-				});
-				const { upload, fileRecord } = setupFileStorageApiMock({
-					uploadMock,
-				});
+				setupFileStorageApiMock({});
 
 				const { wrapper, deleteElementMock } = getWrapper({
 					fileName: "myfile",
@@ -87,9 +77,9 @@ describe("FileContentElement", () => {
 
 				return {
 					wrapper,
-					upload,
-					fileRecord,
 					deleteElementMock,
+					element,
+					mockedUse,
 				};
 			};
 
@@ -98,7 +88,25 @@ describe("FileContentElement", () => {
 				expect(wrapper.findComponent(FileContentElement).exists()).toBe(true);
 			});
 
-			it("should not render Init component", async () => {
+			it("should pass isOutlined prop to v-card", () => {
+				const { wrapper } = setup();
+
+				const card = wrapper.findComponent({ ref: "fileContentElement" });
+
+				expect(card.props("outlined")).toBe(false);
+			});
+
+			it("should not render FileContent component", async () => {
+				const { wrapper } = setup();
+				wrapper.overview();
+
+				await wrapper.vm.$nextTick();
+				const fileContent = wrapper.findComponent(FileContent);
+
+				expect(fileContent.exists()).toBe(false);
+			});
+
+			it("should not render FileUpload component", async () => {
 				const { wrapper } = setup();
 
 				await wrapper.vm.$nextTick();
@@ -106,15 +114,30 @@ describe("FileContentElement", () => {
 				const fileUpload = wrapper.findComponent(FileUpload);
 				expect(fileUpload.exists()).toBe(false);
 			});
+
+			it("should not render ContentElementMenu component", async () => {
+				const { wrapper } = setup();
+
+				await wrapper.vm.$nextTick();
+
+				const contentElementMenu = wrapper.findComponent(ContentElementMenu);
+
+				expect(contentElementMenu.exists()).toBe(false);
+			});
 		});
 
-		describe("when file is uploaded", () => {
-			const setup = () => {
+		describe("when file record is available", () => {
+			const setup = (props?: {
+				scanStatus?: FileRecordScanStatus;
+				previewStatus?: PreviewStatus;
+			}) => {
 				const element = fileElementResponseFactory.build();
 				document.body.setAttribute("data-app", "true");
 
 				const fileRecordResponse = fileRecordResponseFactory.build({
-					securityCheckStatus: FileRecordScanStatus.PENDING,
+					securityCheckStatus:
+						props?.scanStatus ?? FileRecordScanStatus.PENDING,
+					previewStatus: props?.previewStatus ?? PreviewStatus.PREVIEW_POSSIBLE,
 				});
 				const fetchFileMock = jest.fn().mockImplementationOnce(() => {
 					fileRecord.value = fileRecordResponse;
@@ -123,7 +146,14 @@ describe("FileContentElement", () => {
 					fetchFileMock,
 				});
 
-				mockedUse.askDeleteConfirmation.mockResolvedValue(true);
+				const expectedFileProperties: FileProperties = {
+					name: fileRecordResponse.name,
+					isDownloadAllowed: true,
+					url: fileRecordResponse.url,
+					previewUrl: convertDownloadToPreviewUrl(fileRecordResponse.url),
+					size: fileRecordResponse.size,
+					previewStatus: fileRecordResponse.previewStatus,
+				};
 
 				const { wrapper, deleteElementMock } = getWrapper({
 					fileName: "abc.jpg",
@@ -140,47 +170,37 @@ describe("FileContentElement", () => {
 					fileRecordResponse,
 					element,
 					deleteElementMock,
+					expectedFileProperties,
 				};
 			};
 
-			describe("when no virus is detected", () => {
-				it("should be found in dom", () => {
-					const { wrapper } = setup();
-
-					const fileContentElement = wrapper.findComponent(FileContentElement);
-					expect(fileContentElement.exists()).toBe(true);
-				});
+			it("should pass isOutlined prop to v-card", () => {
+				const { wrapper } = setup();
 
-				it("should render FileContentElementDisplay component", async () => {
-					const { wrapper } = setup();
+				const card = wrapper.findComponent({ ref: "fileContentElement" });
 
-					await wrapper.vm.$nextTick();
-					await wrapper.vm.$nextTick();
+				expect(card.props("outlined")).toBe(false);
+			});
 
-					const fileContentElementDisplay = wrapper.findComponent(
-						FileContentElementDisplay
-					);
-					expect(fileContentElementDisplay.exists()).toBe(true);
-				});
+			describe("when v-card emits keydown.up.down event", () => {
+				it("should not emit move-keyboard:edit event", async () => {
+					const { wrapper } = setup();
 
-				it("should hand over correct fileProperties to FileContentElementDisplay", async () => {
-					const { wrapper, fileRecordResponse } = setup();
+					const card = wrapper.findComponent({ ref: "fileContentElement" });
+					card.vm.$emit("keydown.up.down");
 
 					await wrapper.vm.$nextTick();
 
-					const fileProperties = wrapper
-						.findComponent(FileContentElementDisplay)
-						.props("fileProperties");
+					expect(wrapper.emitted("move-keyboard:edit")).toBeUndefined();
+				});
+			});
 
-					const expectedFileProperties = {
-						name: fileRecordResponse.name,
-						isDownloadAllowed: true,
-						url: fileRecordResponse.url,
-						previewUrl: undefined,
-						size: fileRecordResponse.size,
-					};
+			describe("when no virus is detected", () => {
+				it("should be found in dom", () => {
+					const { wrapper } = setup();
 
-					expect(fileProperties).toEqual(expectedFileProperties);
+					const fileContentElement = wrapper.findComponent(FileContentElement);
+					expect(fileContentElement.exists()).toBe(true);
 				});
 
 				it("should call fetchFile", async () => {
@@ -192,257 +212,107 @@ describe("FileContentElement", () => {
 					expect(fetchFile).toHaveBeenCalledTimes(1);
 				});
 
-				describe("when file is an image", () => {
-					const setup = () => {
-						const element = fileElementResponseFactory.build();
-						document.body.setAttribute("data-app", "true");
-
-						const fileRecordResponse = fileRecordResponseFactory.build({
-							securityCheckStatus: FileRecordScanStatus.PENDING,
-							mimeType: "image/png",
-							previewStatus: PreviewStatus.PREVIEW_POSSIBLE,
-						});
-						const fetchFileMock = jest.fn().mockImplementationOnce(() => {
-							fileRecord.value = fileRecordResponse;
-						});
-						const { fetchFile, fileRecord } = setupFileStorageApiMock({
-							fetchFileMock,
-						});
-
-						mockedUse.askDeleteConfirmation.mockResolvedValue(true);
-
-						const { wrapper, deleteElementMock } = getWrapper({
-							fileName: "abc.jpg",
-							element,
-							isEditMode: false,
-							isFirstElement: false,
-							isLastElement: false,
-							hasMultipleElements: false,
-						});
-
-						return {
-							wrapper,
-							fetchFile,
-							fileRecordResponse,
-							element,
-							deleteElementMock,
-						};
-					};
-
-					it("should render ImageFileDisplay component", async () => {
-						const { wrapper } = setup();
-
-						await wrapper.vm.$nextTick();
-						await wrapper.vm.$nextTick();
-
-						const imageFileDisplay = wrapper.findComponent(ImageFileDisplay);
-						expect(imageFileDisplay.exists()).toBe(true);
-					});
-
-					it("should hand over correct fileProperties to ImageFileDisplay", async () => {
-						const { wrapper, fileRecordResponse } = setup();
+				it("should render FileContent component", async () => {
+					const { wrapper } = setup();
+					await wrapper.vm.$nextTick();
 
-						await wrapper.vm.$nextTick();
+					const fileContent = wrapper.findComponent(FileContent);
 
-						const fileProperties = wrapper
-							.findComponent(ImageFileDisplay)
-							.props("fileProperties");
+					expect(fileContent.exists()).toBe(true);
+				});
 
-						const url = fileRecordResponse.url;
-						const expectedFileProperties = {
-							name: fileRecordResponse.name,
-							isDownloadAllowed: true,
-							url,
-							previewUrl: convertDownloadToPreviewUrl(url),
-							size: fileRecordResponse.size,
-						};
+				it("should pass correct fileProperties to FileContent", async () => {
+					const { wrapper, expectedFileProperties } = setup();
+					await wrapper.vm.$nextTick();
 
-						expect(fileProperties).toEqual(expectedFileProperties);
-					});
+					const fileProperties = wrapper
+						.findComponent(FileContent)
+						.props("fileProperties");
 
-					it("should hand over isFirstElement property to ImageFileDisplay", async () => {
-						const { wrapper } = setup();
+					expect(fileProperties).toEqual(expectedFileProperties);
+				});
 
-						await wrapper.vm.$nextTick();
+				it("should call fetchFile when FileContent emits fetch:file event", async () => {
+					const { wrapper, fetchFile } = setup();
 
-						const isFirstElement = wrapper
-							.findComponent(ImageFileDisplay)
-							.props("isFirstElement");
+					await wrapper.vm.$nextTick();
 
-						expect(isFirstElement).toBe(false);
-					});
+					expect(fetchFile).toHaveBeenCalledTimes(1);
 
-					it("should hand over isLastElement property to ImageFileDisplay", async () => {
-						const { wrapper } = setup();
+					const fileContent = wrapper.findComponent(FileContent);
+					fileContent.vm.$emit("fetch:file");
 
-						await wrapper.vm.$nextTick();
+					await wrapper.vm.$nextTick();
 
-						const isLastElement = wrapper
-							.findComponent(ImageFileDisplay)
-							.props("isLastElement");
+					expect(fetchFile).toHaveBeenCalledTimes(2);
+				});
 
-						expect(isLastElement).toBe(false);
-					});
+				it("should not render File Upload component", async () => {
+					const { wrapper } = setup();
+					await wrapper.vm.$nextTick();
 
-					it("should hand over hasMultipleElements property to ImageFileDisplay", async () => {
-						const { wrapper } = setup();
+					const fileUpload = wrapper.findComponent(FileUpload);
+					expect(fileUpload.exists()).toBe(false);
+				});
 
-						await wrapper.vm.$nextTick();
+				it("should not render ContentElementMenu component", async () => {
+					const { wrapper } = setup();
+					await wrapper.vm.$nextTick();
 
-						const hasMultipleElements = wrapper
-							.findComponent(ImageFileDisplay)
-							.props("hasMultipleElements");
+					const contentElementMenu = wrapper.findComponent(ContentElementMenu);
 
-						expect(hasMultipleElements).toBe(false);
-					});
+					expect(contentElementMenu.exists()).toBe(false);
 				});
 			});
 
 			describe("when a virus is detected", () => {
-				const setup = () => {
-					const element = fileElementResponseFactory.build();
-					document.body.setAttribute("data-app", "true");
-
-					const fileRecordResponse = fileRecordResponseFactory.build({
-						securityCheckStatus: FileRecordScanStatus.BLOCKED,
-						mimeType: "image/png",
+				it("should pass correct props to FileContent component", async () => {
+					const { wrapper, expectedFileProperties } = setup({
+						scanStatus: FileRecordScanStatus.BLOCKED,
 						previewStatus:
 							PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_BLOCKED,
 					});
-					const fetchFileMock = jest.fn().mockImplementationOnce(() => {
-						fileRecord.value = fileRecordResponse;
-					});
-					const { fetchFile, fileRecord } = setupFileStorageApiMock({
-						fetchFileMock,
-					});
-
-					mockedUse.askDeleteConfirmation.mockResolvedValue(true);
-
-					const { wrapper, deleteElementMock } = getWrapper({
-						fileName: "abc.jpg",
-						element,
-						isEditMode: false,
-						isFirstElement: false,
-						isLastElement: false,
-						hasMultipleElements: false,
-					});
-
-					return {
-						wrapper,
-						fetchFile,
-						fileRecordResponse,
-						element,
-						deleteElementMock,
-					};
-				};
-
-				it("should not render ImageFileDisplay", async () => {
-					const { wrapper } = setup();
-
 					await wrapper.vm.$nextTick();
 
-					const componentExists = wrapper
-						.findComponent(ImageFileDisplay)
-						.exists();
-
-					expect(componentExists).toBe(false);
-				});
-
-				it("should render FileContentElementAlert component", async () => {
-					const { wrapper } = setup();
-
-					await wrapper.vm.$nextTick();
-
-					const fileContentElementAlert = wrapper.findComponent(
-						FileContentElementAlert
-					);
-					expect(fileContentElementAlert.exists()).toBe(true);
-				});
-
-				describe("when file is an image", () => {
-					const setup = () => {
-						const element = fileElementResponseFactory.build();
-						document.body.setAttribute("data-app", "true");
-
-						const fileRecordResponse = fileRecordResponseFactory.build({
-							securityCheckStatus: FileRecordScanStatus.BLOCKED,
-							mimeType: "image/png",
-						});
-						const fetchFileMock = jest.fn().mockImplementationOnce(() => {
-							fileRecord.value = fileRecordResponse;
-						});
-						const { fetchFile, fileRecord } = setupFileStorageApiMock({
-							fetchFileMock,
-						});
-
-						mockedUse.askDeleteConfirmation.mockResolvedValue(true);
-
-						const { wrapper, deleteElementMock } = getWrapper({
-							fileName: "abc.jpg",
-							element,
-							isEditMode: false,
-							isFirstElement: false,
-							isLastElement: false,
-							hasMultipleElements: false,
-						});
-
-						return {
-							wrapper,
-							fetchFile,
-							fileRecordResponse,
-							element,
-							deleteElementMock,
-						};
-					};
-
-					it("should not render ImageFileDisplay", async () => {
-						const { wrapper } = setup();
-
-						await wrapper.vm.$nextTick();
-
-						const componentExists = wrapper
-							.findComponent(ImageFileDisplay)
-							.exists();
+					const fileProperties = wrapper
+						.findComponent(FileContent)
+						.props("fileProperties");
 
-						expect(componentExists).toBe(false);
-					});
+					expectedFileProperties.isDownloadAllowed = false;
+					expectedFileProperties.previewUrl = undefined;
+					expect(fileProperties).toEqual(expectedFileProperties);
 				});
 			});
 		});
 	});
 
 	describe("when component is in edit mode", () => {
-		describe("when file needs to be uploaded", () => {
+		describe("when file record is not available", () => {
 			describe("when upload is successful", () => {
 				const setup = () => {
 					const element = fileElementResponseFactory.build();
 					document.body.setAttribute("data-app", "true");
 
-					const fileRecordResponse = fileRecordResponseFactory.build();
-
-					const uploadMock = jest.fn().mockImplementationOnce(() => {
-						fileRecord.value = fileRecordResponse;
-					});
-					const { upload, fileRecord } = setupFileStorageApiMock({
-						uploadMock,
-					});
-
-					mockedUse.askDeleteConfirmation.mockResolvedValue(true);
+					const { upload } = setupFileStorageApiMock({});
 
+					const elementPositionProps = {
+						isFirstElement: false,
+						isLastElement: true,
+						hasMultipleElements: false,
+					};
 					const { wrapper, deleteElementMock } = getWrapper({
-						fileName: "abc.jpg",
+						fileName: "myfile",
 						element,
 						isEditMode: true,
-						isFirstElement: false,
-						isLastElement: false,
-						hasMultipleElements: false,
+						...elementPositionProps,
 					});
 
 					return {
 						wrapper,
-						upload,
-						fileRecord,
 						deleteElementMock,
+						upload,
+						element,
+						elementPositionProps,
 					};
 				};
 
@@ -451,455 +321,390 @@ describe("FileContentElement", () => {
 					expect(wrapper.findComponent(FileContentElement).exists()).toBe(true);
 				});
 
-				it("should render FileUpload component", async () => {
+				it("should pass isOutlined prop to v-card", () => {
 					const { wrapper } = setup();
 
-					await wrapper.vm.$nextTick();
-					await wrapper.vm.$nextTick();
-					await wrapper.vm.$nextTick();
+					const card = wrapper.findComponent({ ref: "fileContentElement" });
 
-					const fileUpload = wrapper.findComponent(FileUpload);
-					expect(fileUpload.exists()).toBe(true);
+					expect(card.props("outlined")).toBe(true);
 				});
-			});
 
-			describe("when upload throws error", () => {
-				const setup = () => {
-					const element = fileElementResponseFactory.build();
-					document.body.setAttribute("data-app", "true");
-
-					const error = new Error("test");
-					const uploadMock = jest.fn().mockRejectedValueOnce(error);
-					setupFileStorageApiMock({ uploadMock });
-
-					mockedUse.askDeleteConfirmation.mockResolvedValue(true);
-
-					const { wrapper, deleteElementMock } = getWrapper({
-						fileName: "abc.jpg",
-						element,
-						isEditMode: true,
-						isFirstElement: false,
-						isLastElement: false,
-						hasMultipleElements: false,
-					});
-
-					return {
-						wrapper,
-						deleteElementMock,
-					};
-				};
-
-				it("should emit delete:element", async () => {
+				it("should not render FileContent component", async () => {
 					const { wrapper } = setup();
-
-					const initComponent = wrapper.findComponent(FileUpload);
-					initComponent.vm.$emit("upload:file", { fileName: "mysample.txt" });
+					wrapper.overview();
 
 					await wrapper.vm.$nextTick();
-					await wrapper.vm.$nextTick();
+					const fileContent = wrapper.findComponent(FileContent);
 
-					expect(wrapper.emitted("delete:element")).toHaveLength(1);
+					expect(fileContent.exists()).toBe(false);
 				});
 
-				it("should not render FileContentElementChips component", async () => {
+				it("should render FileUpload component", async () => {
 					const { wrapper } = setup();
 
 					await wrapper.vm.$nextTick();
 
-					const FileContentElementChip = wrapper.findComponent(
-						FileContentElementChips
-					);
-					expect(FileContentElementChip.exists()).toBe(false);
+					const fileUpload = wrapper.findComponent(FileUpload);
+					expect(fileUpload.exists()).toBe(true);
 				});
-			});
 
-			describe("when file is uploaded", () => {
-				describe("when no virus is detected", () => {
-					const setup = () => {
-						const element = fileElementResponseFactory.build();
-						document.body.setAttribute("data-app", "true");
+				it("should pass correct props to FileUpload component", async () => {
+					const { wrapper, element } = setup();
 
-						const fileRecordResponse = fileRecordResponseFactory.build({
-							securityCheckStatus: FileRecordScanStatus.PENDING,
-							mimeType: "image/png",
-						});
-						const fetchFileMock = jest.fn().mockImplementationOnce(() => {
-							fileRecord.value = fileRecordResponse;
-						});
-						const { fetchFile, fileRecord } = setupFileStorageApiMock({
-							fetchFileMock,
-						});
+					await wrapper.vm.$nextTick();
 
-						mockedUse.askDeleteConfirmation.mockResolvedValue(true);
+					const props = wrapper.findComponent(FileUpload).props();
 
-						const { wrapper, deleteElementMock } = getWrapper({
-							fileName: "abc.jpg",
-							element,
-							isEditMode: true,
-							isFirstElement: false,
-							isLastElement: false,
-							hasMultipleElements: false,
-						});
+					expect(props.elementId).toEqual(element.id);
+				});
 
-						return {
-							wrapper,
-							fetchFile,
-							fileRecordResponse,
-							element,
-							deleteElementMock,
-						};
-					};
+				describe("when FileUpload emits upload:file event", () => {
+					it("should call upload when FileUpload emits upload:file event", async () => {
+						const { wrapper, upload } = setup();
 
-					it("should be found in dom", () => {
-						const { wrapper } = setup();
-						expect(wrapper.findComponent(FileContentElement).exists()).toBe(
-							true
-						);
-					});
+						await wrapper.vm.$nextTick();
 
-					it("should render FileContentElementEdit component", async () => {
-						const { wrapper } = setup();
+						const fileUpload = wrapper.findComponent(FileUpload);
+						fileUpload.vm.$emit("upload:file", { fileName: "mysample.txt" });
 
-						await wrapper.vm.$nextTick();
 						await wrapper.vm.$nextTick();
 
-						const fileContentElementEdit = wrapper.findComponent(
-							FileContentElementEdit
-						);
-						expect(fileContentElementEdit.exists()).toBe(true);
+						expect(upload).toHaveBeenCalledTimes(1);
 					});
+				});
 
-					it("should hand over fileProperties to FileContentElementEdit", async () => {
-						const { wrapper, fileRecordResponse } = setup();
-
-						await wrapper.vm.$nextTick();
-
-						const fileProperties = wrapper
-							.findComponent(FileContentElementEdit)
-							.props("fileProperties");
+				it("should render ContentElementMenu component", async () => {
+					const { wrapper } = setup();
 
-						const expectedFileProperties = {
-							name: fileRecordResponse.name,
-							isDownloadAllowed: true,
-							url: fileRecordResponse.url,
-							previewUrl: undefined,
-							size: fileRecordResponse.size,
-						};
+					await wrapper.vm.$nextTick();
 
-						expect(fileProperties).toEqual(expectedFileProperties);
-					});
+					const contentElementMenu = wrapper.findComponent(ContentElementMenu);
 
-					it("should pass delete:element event from child to parent", async () => {
-						const { wrapper } = setup();
+					expect(contentElementMenu.exists()).toBe(true);
+				});
 
-						await nextTick();
-						await nextTick();
+				it("should pass correct props to ContentElementMenu component", async () => {
+					const { wrapper } = setup();
 
-						const child = wrapper.findComponent(FileContentElementEdit);
-						child.vm.$emit("delete:element");
+					await wrapper.vm.$nextTick();
 
-						await nextTick();
-						await nextTick();
+					const props = wrapper.findComponent(ContentElementMenu).props();
 
-						expect(wrapper.emitted("delete:element")).toHaveLength(1);
-					});
+					expect(props.isFirstElement).toBe(false);
+					expect(props.isLastElement).toBe(true);
+					expect(props.hasMultipleElements).toBe(false);
+				});
 
-					it("should emit 'move-down:edit' when it receives move-down:element event from child", async () => {
+				describe("when ContentElementMenu emits move-down:element event", () => {
+					it("should emit move-down:edit event", async () => {
 						const { wrapper } = setup();
 
 						await wrapper.vm.$nextTick();
 
-						const fileContentElementEdit = wrapper.findComponent(
-							FileContentElementEdit
-						);
-						fileContentElementEdit.vm.$emit("move-down:element");
+						const contentElementMenu =
+							wrapper.findComponent(ContentElementMenu);
+						contentElementMenu.vm.$emit("move-down:element");
 
-						const emitted = wrapper.emitted();
-						expect(emitted["move-down:edit"]).toBeDefined();
+						await wrapper.vm.$nextTick();
+
+						expect(wrapper.emitted("move-down:edit")).toHaveLength(1);
 					});
+				});
 
-					it("should emit 'move-up:edit' when it receives move-up:element event from child", async () => {
+				describe("when ContentElementMenu emits move-up:element event", () => {
+					it("should emit move-up:edit event", async () => {
 						const { wrapper } = setup();
 
 						await wrapper.vm.$nextTick();
 
-						const fileContentElementEdit = wrapper.findComponent(
-							FileContentElementEdit
-						);
-						fileContentElementEdit.vm.$emit("move-up:element");
+						const contentElementMenu =
+							wrapper.findComponent(ContentElementMenu);
+						contentElementMenu.vm.$emit("move-up:element");
 
-						const emitted = wrapper.emitted();
-						expect(emitted["move-up:edit"]).toBeDefined();
+						await wrapper.vm.$nextTick();
+
+						expect(wrapper.emitted("move-up:edit")).toHaveLength(1);
 					});
+				});
 
-					// currently blocked as v-card blocks correct usage of keydown event (works when its a div)
-					it.todo(
-						"should emit 'move-keyboard:edit' when arrow key up or is pressed"
-					);
-					/* async () => {
+				describe("when ContentElementMenu emits delete:element event with deleteDirectly prop = true", () => {
+					it("should emit delete:element event", async () => {
 						const { wrapper } = setup();
 
 						await wrapper.vm.$nextTick();
 
-						await wrapper.trigger("keydown.up");
-
-						const emitted = wrapper.emitted();
-						expect(emitted["move-keyboard:edit"]).toBeDefined();
-					}; */
-
-					describe("when file is an image", () => {
-						const setup = () => {
-							const element = fileElementResponseFactory.build();
-							document.body.setAttribute("data-app", "true");
-
-							const fileRecordResponse = fileRecordResponseFactory.build({
-								securityCheckStatus: FileRecordScanStatus.VERIFIED,
-								mimeType: "image/png",
-								previewStatus: PreviewStatus.PREVIEW_POSSIBLE,
-							});
-							const fetchFileMock = jest.fn().mockImplementationOnce(() => {
-								fileRecord.value = fileRecordResponse;
-							});
-							const { fetchFile, fileRecord } = setupFileStorageApiMock({
-								fetchFileMock,
-							});
+						const contentElementMenu =
+							wrapper.findComponent(ContentElementMenu);
+						contentElementMenu.vm.$emit("delete:element", true);
 
-							mockedUse.askDeleteConfirmation.mockResolvedValue(true);
+						await wrapper.vm.$nextTick();
 
-							const { wrapper, deleteElementMock } = getWrapper({
-								fileName: "abc.jpg",
-								element,
-								isEditMode: true,
-								isFirstElement: false,
-								isLastElement: false,
-								hasMultipleElements: false,
-							});
-
-							return {
-								wrapper,
-								fetchFile,
-								fileRecordResponse,
-								element,
-								deleteElementMock,
-							};
-						};
-
-						it("should render ImageFileDisplay component", async () => {
+						expect(wrapper.emitted("delete:element")).toHaveLength(1);
+					});
+				});
+
+				describe("when ContentElementMenu emits delete:element event with deleteDirectly prop = false", () => {
+					describe("when askDeleteConfirmation returns true", () => {
+						it("should emit delete:element event", async () => {
 							const { wrapper } = setup();
 
+							mockedUse.askDeleteConfirmation.mockReset();
+							mockedUse.askDeleteConfirmation.mockResolvedValue(true);
+							useDeleteConfirmationDialogMock.mockReturnValue(mockedUse);
+
+							await wrapper.vm.$nextTick();
+
+							const contentElementMenu =
+								wrapper.findComponent(ContentElementMenu);
+							contentElementMenu.vm.$emit("delete:element");
+
 							await wrapper.vm.$nextTick();
 							await wrapper.vm.$nextTick();
 
-							const imageFileDisplay = wrapper.findComponent(ImageFileDisplay);
-							expect(imageFileDisplay.exists()).toBe(true);
+							expect(mockedUse.askDeleteConfirmation).toHaveBeenCalledTimes(1);
+							expect(mockedUse.askDeleteConfirmation).toHaveBeenCalledWith(
+								undefined,
+								"boardElement"
+							);
+							expect(wrapper.emitted("delete:element")).toHaveLength(1);
 						});
+					});
 
-						it("should hand over isFirstElement property to ImageFileDisplay", async () => {
+					describe("when askDeleteConfirmation returns false", () => {
+						it("should emit delete:element event", async () => {
 							const { wrapper } = setup();
 
+							mockedUse.askDeleteConfirmation.mockReset();
+							mockedUse.askDeleteConfirmation.mockResolvedValue(false);
+							useDeleteConfirmationDialogMock.mockReturnValue(mockedUse);
+
+							await wrapper.vm.$nextTick();
+
+							const contentElementMenu =
+								wrapper.findComponent(ContentElementMenu);
+							contentElementMenu.vm.$emit("delete:element");
+
+							await wrapper.vm.$nextTick();
 							await wrapper.vm.$nextTick();
 
-							const isFirstElement = wrapper
-								.findComponent(ImageFileDisplay)
-								.props("isFirstElement");
+							expect(mockedUse.askDeleteConfirmation).toHaveBeenCalledTimes(1);
+							expect(mockedUse.askDeleteConfirmation).toHaveBeenCalledWith(
+								undefined,
+								"boardElement"
+							);
 
-							expect(isFirstElement).toBe(false);
+							expect(wrapper.emitted("delete:element")).toBeUndefined();
 						});
+					});
+				});
+			});
 
-						it("should hand over isLastElement property to ImageFileDisplay", async () => {
-							const { wrapper } = setup();
+			describe("when upload returns error", () => {
+				const setup = () => {
+					const element = fileElementResponseFactory.build();
+					document.body.setAttribute("data-app", "true");
 
-							await wrapper.vm.$nextTick();
+					const uploadMock = jest.fn().mockRejectedValueOnce(new Error("test"));
+					setupFileStorageApiMock({
+						uploadMock,
+					});
 
-							const isLastElement = wrapper
-								.findComponent(ImageFileDisplay)
-								.props("isLastElement");
+					const { wrapper, deleteElementMock } = getWrapper({
+						fileName: "myfile",
+						element,
+						isEditMode: true,
+						isFirstElement: false,
+						isLastElement: false,
+						hasMultipleElements: false,
+					});
 
-							expect(isLastElement).toBe(false);
-						});
+					return {
+						wrapper,
+						deleteElementMock,
+						element,
+					};
+				};
 
-						it("should hand over hasMultipleElements property to ImageFileDisplay", async () => {
-							const { wrapper } = setup();
+				it("should render FileUpload component", async () => {
+					const { wrapper } = setup();
 
-							await wrapper.vm.$nextTick();
+					await wrapper.vm.$nextTick();
 
-							const hasMultipleElements = wrapper
-								.findComponent(ImageFileDisplay)
-								.props("hasMultipleElements");
+					const fileUpload = wrapper.findComponent(FileUpload);
+					expect(fileUpload.exists()).toBe(true);
+				});
 
-							expect(hasMultipleElements).toBe(false);
-						});
-					});
+				it("should emit delete:element on upload", async () => {
+					const { wrapper } = setup();
+
+					const initComponent = wrapper.findComponent(FileUpload);
+					initComponent.vm.$emit("upload:file", { fileName: "mysample.txt" });
+
+					await wrapper.vm.$nextTick();
+					await wrapper.vm.$nextTick();
+
+					expect(wrapper.emitted("delete:element")).toHaveLength(1);
 				});
+			});
+		});
 
-				describe("when a virus is detected", () => {
-					const setup = () => {
-						const element = fileElementResponseFactory.build();
-						document.body.setAttribute("data-app", "true");
+		describe("when file record is available", () => {
+			const setup = (props?: {
+				scanStatus?: FileRecordScanStatus;
+				previewStatus?: PreviewStatus;
+			}) => {
+				const element = fileElementResponseFactory.build();
+				document.body.setAttribute("data-app", "true");
 
-						const fileRecordResponse = fileRecordResponseFactory.build({
-							securityCheckStatus: FileRecordScanStatus.BLOCKED,
-							mimeType: "image/png",
-							previewStatus:
-								PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_BLOCKED,
-						});
-						const fetchFileMock = jest.fn().mockImplementationOnce(() => {
-							fileRecord.value = fileRecordResponse;
-						});
-						const { fetchFile, fileRecord } = setupFileStorageApiMock({
-							fetchFileMock,
-						});
+				const fileRecordResponse = fileRecordResponseFactory.build({
+					securityCheckStatus:
+						props?.scanStatus ?? FileRecordScanStatus.PENDING,
+					previewStatus: props?.previewStatus ?? PreviewStatus.PREVIEW_POSSIBLE,
+				});
+				const fetchFileMock = jest.fn().mockImplementationOnce(() => {
+					fileRecord.value = fileRecordResponse;
+				});
+				const { fetchFile, fileRecord } = setupFileStorageApiMock({
+					fetchFileMock,
+				});
 
-						mockedUse.askDeleteConfirmation.mockResolvedValue(true);
+				const expectedFileProperties: FileProperties = {
+					name: fileRecordResponse.name,
+					isDownloadAllowed: true,
+					url: fileRecordResponse.url,
+					previewUrl: convertDownloadToPreviewUrl(fileRecordResponse.url),
+					size: fileRecordResponse.size,
+					previewStatus: fileRecordResponse.previewStatus,
+				};
 
-						const { wrapper, deleteElementMock } = getWrapper({
-							fileName: "abc.jpg",
-							element,
-							isEditMode: true,
-							isFirstElement: false,
-							isLastElement: false,
-							hasMultipleElements: false,
-						});
+				const { wrapper, deleteElementMock } = getWrapper({
+					fileName: "abc.jpg",
+					element,
+					isEditMode: true,
+					isFirstElement: false,
+					isLastElement: false,
+					hasMultipleElements: false,
+				});
 
-						return {
-							wrapper,
-							fetchFile,
-							fileRecordResponse,
-							element,
-							deleteElementMock,
-						};
-					};
+				return {
+					wrapper,
+					fetchFile,
+					fileRecordResponse,
+					element,
+					deleteElementMock,
+					expectedFileProperties,
+				};
+			};
 
-					it("should hand over correct file properties to FileContentElementEdit", async () => {
-						const { wrapper, fileRecordResponse } = setup();
+			it("should pass isOutlined prop to v-card", () => {
+				const { wrapper } = setup();
 
-						await wrapper.vm.$nextTick();
+				const card = wrapper.findComponent({ ref: "fileContentElement" });
 
-						const fileProperties = wrapper
-							.findComponent(FileContentElementEdit)
-							.props("fileProperties");
+				expect(card.props("outlined")).toBe(true);
+			});
 
-						const expectedFileProperties = {
-							name: fileRecordResponse.name,
-							isDownloadAllowed: false,
-							url: fileRecordResponse.url,
-							previewUrl: undefined,
-							size: fileRecordResponse.size,
-						};
+			describe("when v-card emits keydown.up.down event", () => {
+				it("should emit move-keyboard:edit event", async () => {
+					const { wrapper } = setup();
 
-						expect(fileProperties).toEqual(expectedFileProperties);
-					});
+					const card = wrapper.findComponent({ ref: "fileContentElement" });
+					card.vm.$emit("keydown.up.down");
 
-					it("should hand over isFirstElement property to FileContentElementEdit", async () => {
-						const { wrapper } = setup();
+					await wrapper.vm.$nextTick();
+					await wrapper.vm.$nextTick();
 
-						await wrapper.vm.$nextTick();
+					expect(card.emitted("keydown.up.down")).toHaveLength(1);
+					expect(wrapper.emitted("move-keyboard:edit")).toHaveLength(1);
+				});
+			});
 
-						const isFirstElement = wrapper
-							.findComponent(FileContentElementEdit)
-							.props("isFirstElement");
+			describe("when no virus is detected", () => {
+				it("should be found in dom", () => {
+					const { wrapper } = setup();
 
-						expect(isFirstElement).toBe(false);
-					});
+					const fileContentElement = wrapper.findComponent(FileContentElement);
+					expect(fileContentElement.exists()).toBe(true);
+				});
 
-					it("should hand over isLastElement property to FileContentElementEdit", async () => {
-						const { wrapper } = setup();
+				it("should call fetchFile", async () => {
+					const { wrapper, fetchFile } = setup();
 
-						await wrapper.vm.$nextTick();
+					await wrapper.vm.$nextTick();
+					await wrapper.vm.$nextTick();
 
-						const isLastElement = wrapper
-							.findComponent(FileContentElementEdit)
-							.props("isLastElement");
+					expect(fetchFile).toHaveBeenCalledTimes(1);
+				});
 
-						expect(isLastElement).toBe(false);
-					});
+				it("should render FileContent component", async () => {
+					const { wrapper } = setup();
+					await wrapper.vm.$nextTick();
 
-					it("should hand over hasMultipleElements property to FileContentElementEdit", async () => {
-						const { wrapper } = setup();
+					const fileContent = wrapper.findComponent(FileContent);
 
-						await wrapper.vm.$nextTick();
+					expect(fileContent.exists()).toBe(true);
+				});
 
-						const hasMultipleElements = wrapper
-							.findComponent(FileContentElementEdit)
-							.props("hasMultipleElements");
+				it("should pass correct fileProperties to FileContent", async () => {
+					const { wrapper, expectedFileProperties } = setup();
+					await wrapper.vm.$nextTick();
 
-						expect(hasMultipleElements).toBe(false);
-					});
+					const fileProperties = wrapper
+						.findComponent(FileContent)
+						.props("fileProperties");
 
-					it("should render FileContentElementAlert component", async () => {
-						const { wrapper } = setup();
+					expect(fileProperties).toEqual(expectedFileProperties);
+				});
 
-						await wrapper.vm.$nextTick();
+				it("should call fetchFile when FileContent emits fetch:file event", async () => {
+					const { wrapper, fetchFile } = setup();
 
-						const fileContentElementAlert = wrapper.findComponent(
-							FileContentElementAlert
-						);
-						expect(fileContentElementAlert.exists()).toBe(true);
-					});
+					await wrapper.vm.$nextTick();
 
-					it("should pass delete:element event from child to parent", async () => {
-						const { wrapper } = setup();
+					expect(fetchFile).toHaveBeenCalledTimes(1);
 
-						await nextTick();
-						await nextTick();
+					const fileContent = wrapper.findComponent(FileContent);
+					fileContent.vm.$emit("fetch:file");
 
-						const child = wrapper.findComponent(FileContentElementEdit);
-						child.vm.$emit("delete:element");
+					await wrapper.vm.$nextTick();
 
-						await nextTick();
-						await nextTick();
+					expect(fetchFile).toHaveBeenCalledTimes(2);
+				});
 
-						expect(wrapper.emitted("delete:element")).toHaveLength(1);
-					});
+				it("should not render File Upload component", async () => {
+					const { wrapper } = setup();
+					await wrapper.vm.$nextTick();
 
-					describe("when file is an image", () => {
-						const setup = () => {
-							const element = fileElementResponseFactory.build();
-							document.body.setAttribute("data-app", "true");
-
-							const fileRecordResponse = fileRecordResponseFactory.build({
-								securityCheckStatus: FileRecordScanStatus.BLOCKED,
-								mimeType: "image/png",
-								previewStatus:
-									PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_BLOCKED,
-							});
-							const fetchFileMock = jest.fn().mockImplementationOnce(() => {
-								fileRecord.value = fileRecordResponse;
-							});
-							const { fetchFile, fileRecord } = setupFileStorageApiMock({
-								fetchFileMock,
-							});
+					const fileUpload = wrapper.findComponent(FileUpload);
+					expect(fileUpload.exists()).toBe(false);
+				});
 
-							mockedUse.askDeleteConfirmation.mockResolvedValue(true);
+				it("should not render ContentElementMenu component", async () => {
+					const { wrapper } = setup();
+					await wrapper.vm.$nextTick();
 
-							const { wrapper, deleteElementMock } = getWrapper({
-								fileName: "abc.jpg",
-								element,
-								isEditMode: true,
-								isFirstElement: false,
-								isLastElement: false,
-								hasMultipleElements: false,
-							});
-
-							return {
-								wrapper,
-								fetchFile,
-								fileRecordResponse,
-								element,
-								deleteElementMock,
-							};
-						};
-
-						it("should not render ImageFileDisplay component", async () => {
-							const { wrapper } = setup();
+					const contentElementMenu = wrapper.findComponent(ContentElementMenu);
 
-							await wrapper.vm.$nextTick();
-							await wrapper.vm.$nextTick();
+					expect(contentElementMenu.exists()).toBe(true);
+				});
+			});
 
-							const imageFileDisplay = wrapper.findComponent(ImageFileDisplay);
-							expect(imageFileDisplay.exists()).toBe(false);
-						});
+			describe("when a virus is detected", () => {
+				it("should pass correct props to FileContent component", async () => {
+					const { wrapper, expectedFileProperties } = setup({
+						scanStatus: FileRecordScanStatus.BLOCKED,
+						previewStatus:
+							PreviewStatus.PREVIEW_NOT_POSSIBLE_SCAN_STATUS_BLOCKED,
 					});
+					await wrapper.vm.$nextTick();
+
+					const fileProperties = wrapper
+						.findComponent(FileContent)
+						.props("fileProperties");
+
+					expectedFileProperties.isDownloadAllowed = false;
+					expectedFileProperties.previewUrl = undefined;
+					expect(fileProperties).toEqual(expectedFileProperties);
 				});
 			});
 		});

From d98c24a53b520c323a8e248f1d60461aeb96f7e7 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Mon, 4 Sep 2023 16:12:36 +0200
Subject: [PATCH 29/89] Fix file and image display tests

---
 .../components/FileDisplay.unit.ts            | 20 +++++++++++--------
 .../components/ImageDisplay.unit.ts           |  2 ++
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/feature-board-file-element/components/FileDisplay.unit.ts b/src/components/feature-board-file-element/components/FileDisplay.unit.ts
index 24fbc42169..b2ea76f263 100644
--- a/src/components/feature-board-file-element/components/FileDisplay.unit.ts
+++ b/src/components/feature-board-file-element/components/FileDisplay.unit.ts
@@ -9,9 +9,15 @@ describe("FileDisplay", () => {
 		document.body.setAttribute("data-app", "true");
 
 		const propsData = {
-			name: "file-record #1.txt",
-			previewUrl: "preview/1/file-record #1.txt",
-			isEditMode: false,
+			fileProperties: {
+				name: "test",
+				size: 100,
+				url: "test",
+				previewUrl: "test",
+				previewStatus: "test",
+				isDownloadAllowed: true,
+			},
+			isEditMode: true,
 		};
 
 		const wrapper = shallowMount(FileDisplay, {
@@ -21,9 +27,8 @@ describe("FileDisplay", () => {
 
 		return {
 			wrapper,
-			fileNameProp: propsData.name,
-			previewUrlProp: propsData.previewUrl,
-			editModeProp: propsData.isEditMode,
+			fileNameProp: propsData.fileProperties.name,
+			previewUrlProp: propsData.fileProperties.previewUrl,
 		};
 	};
 
@@ -36,13 +41,12 @@ describe("FileDisplay", () => {
 	});
 
 	it("should render image display component with proper props", () => {
-		const { wrapper, fileNameProp, previewUrlProp, editModeProp } = setup();
+		const { wrapper, fileNameProp, previewUrlProp } = setup();
 
 		const props = wrapper.findComponent(ImageDisplay).attributes();
 
 		expect(props.filename).toBe(fileNameProp);
 		expect(props.previewUrl).toBe(previewUrlProp);
-		expect(props.editMode).toBe(editModeProp);
 	});
 
 	it("should render default display component with proper props", () => {
diff --git a/src/components/feature-board-file-element/components/ImageDisplay.unit.ts b/src/components/feature-board-file-element/components/ImageDisplay.unit.ts
index 6d47fcf63f..d92647f5eb 100644
--- a/src/components/feature-board-file-element/components/ImageDisplay.unit.ts
+++ b/src/components/feature-board-file-element/components/ImageDisplay.unit.ts
@@ -1,3 +1,4 @@
+import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
 import ImageDisplay from "./ImageDisplay.vue";
 
@@ -15,6 +16,7 @@ describe("ImageDisplay", () => {
 
 		const wrapper = shallowMount(ImageDisplay, {
 			propsData: { ...propsData, isEditMode },
+			...createComponentMocks({}),
 		});
 
 		return {

From bb44f3d0834388e8dd13c80172940c62e4266fde Mon Sep 17 00:00:00 2001
From: Constantin Bergatt <constantin.bergatt@dataport.de>
Date: Wed, 6 Sep 2023 09:13:41 +0200
Subject: [PATCH 30/89] BC-4590 - remove not needed `wrapper.overview`s

---
 .../components/FileContentElement.unit.ts                       | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/feature-board-file-element/components/FileContentElement.unit.ts b/src/components/feature-board-file-element/components/FileContentElement.unit.ts
index 6381155a29..2a266291bb 100644
--- a/src/components/feature-board-file-element/components/FileContentElement.unit.ts
+++ b/src/components/feature-board-file-element/components/FileContentElement.unit.ts
@@ -98,7 +98,6 @@ describe("FileContentElement", () => {
 
 			it("should not render FileContent component", async () => {
 				const { wrapper } = setup();
-				wrapper.overview();
 
 				await wrapper.vm.$nextTick();
 				const fileContent = wrapper.findComponent(FileContent);
@@ -331,7 +330,6 @@ describe("FileContentElement", () => {
 
 				it("should not render FileContent component", async () => {
 					const { wrapper } = setup();
-					wrapper.overview();
 
 					await wrapper.vm.$nextTick();
 					const fileContent = wrapper.findComponent(FileContent);

From 180002e1cbfb7de44f7aeffb74159615a14ff444 Mon Sep 17 00:00:00 2001
From: Constantin Bergatt <constantin.bergatt@dataport.de>
Date: Wed, 6 Sep 2023 11:00:58 +0200
Subject: [PATCH 31/89] BC-4590 - fix unit test for `move-keyboard:edit` event

---
 .../components/FileContentElement.unit.ts     | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/feature-board-file-element/components/FileContentElement.unit.ts b/src/components/feature-board-file-element/components/FileContentElement.unit.ts
index 2a266291bb..8b43c86511 100644
--- a/src/components/feature-board-file-element/components/FileContentElement.unit.ts
+++ b/src/components/feature-board-file-element/components/FileContentElement.unit.ts
@@ -607,12 +607,31 @@ describe("FileContentElement", () => {
 					const { wrapper } = setup();
 
 					const card = wrapper.findComponent({ ref: "fileContentElement" });
-					card.vm.$emit("keydown.up.down");
+					card.vm.$emit(
+						"keydown",
+						new KeyboardEvent("keydown", {
+							altKey: false,
+							bubbles: true,
+							cancelable: true,
+							charCode: 0,
+							code: "ArrowDown",
+							composed: true,
+							ctrlKey: false,
+							detail: 0,
+							isComposing: false,
+							key: "ArrowDown",
+							keyCode: 40,
+							location: 0,
+							metaKey: false,
+							repeat: false,
+							shiftKey: false,
+							which: 40,
+						})
+					);
 
 					await wrapper.vm.$nextTick();
 					await wrapper.vm.$nextTick();
 
-					expect(card.emitted("keydown.up.down")).toHaveLength(1);
 					expect(wrapper.emitted("move-keyboard:edit")).toHaveLength(1);
 				});
 			});

From 7ef2e17af4a8395d36972e736f0772a2579bfce4 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Wed, 6 Sep 2023 11:09:09 +0200
Subject: [PATCH 32/89] Fix key down and up test

---
 .../components/FileContentElement.unit.ts     | 64 +++++++++++++++++--
 1 file changed, 58 insertions(+), 6 deletions(-)

diff --git a/src/components/feature-board-file-element/components/FileContentElement.unit.ts b/src/components/feature-board-file-element/components/FileContentElement.unit.ts
index 6381155a29..e46ec4ec17 100644
--- a/src/components/feature-board-file-element/components/FileContentElement.unit.ts
+++ b/src/components/feature-board-file-element/components/FileContentElement.unit.ts
@@ -182,13 +182,40 @@ describe("FileContentElement", () => {
 				expect(card.props("outlined")).toBe(false);
 			});
 
-			describe("when v-card emits keydown.up.down event", () => {
-				it("should not emit move-keyboard:edit event", async () => {
+			describe("when v-card emits keydown.down event", () => {
+				it("should emit move-keyboard:edit event", async () => {
+					const { wrapper } = setup();
+
+					const card = wrapper.findComponent({ ref: "fileContentElement" });
+					card.vm.$emit(
+						"keydown",
+						new KeyboardEvent("keydown", {
+							key: "ArrowDown",
+							keyCode: 40,
+						})
+					);
+
+					await wrapper.vm.$nextTick();
+					await wrapper.vm.$nextTick();
+
+					expect(wrapper.emitted("move-keyboard:edit")).toBeUndefined();
+				});
+			});
+
+			describe("when v-card emits keydown.up event", () => {
+				it("should emit move-keyboard:edit event", async () => {
 					const { wrapper } = setup();
 
 					const card = wrapper.findComponent({ ref: "fileContentElement" });
-					card.vm.$emit("keydown.up.down");
+					card.vm.$emit(
+						"keydown",
+						new KeyboardEvent("keydown", {
+							key: "ArrowUp",
+							keyCode: 38,
+						})
+					);
 
+					await wrapper.vm.$nextTick();
 					await wrapper.vm.$nextTick();
 
 					expect(wrapper.emitted("move-keyboard:edit")).toBeUndefined();
@@ -604,17 +631,42 @@ describe("FileContentElement", () => {
 				expect(card.props("outlined")).toBe(true);
 			});
 
-			describe("when v-card emits keydown.up.down event", () => {
+			describe("when v-card emits keydown.down event", () => {
+				it("should emit move-keyboard:edit event", async () => {
+					const { wrapper } = setup();
+
+					const card = wrapper.findComponent({ ref: "fileContentElement" });
+					card.vm.$emit(
+						"keydown",
+						new KeyboardEvent("keydown", {
+							key: "ArrowDown",
+							keyCode: 40,
+						})
+					);
+
+					await wrapper.vm.$nextTick();
+					await wrapper.vm.$nextTick();
+
+					expect(wrapper.emitted("move-keyboard:edit")).toHaveLength(1);
+				});
+			});
+
+			describe("when v-card emits keydown.up event", () => {
 				it("should emit move-keyboard:edit event", async () => {
 					const { wrapper } = setup();
 
 					const card = wrapper.findComponent({ ref: "fileContentElement" });
-					card.vm.$emit("keydown.up.down");
+					card.vm.$emit(
+						"keydown",
+						new KeyboardEvent("keydown", {
+							key: "ArrowUp",
+							keyCode: 38,
+						})
+					);
 
 					await wrapper.vm.$nextTick();
 					await wrapper.vm.$nextTick();
 
-					expect(card.emitted("keydown.up.down")).toHaveLength(1);
 					expect(wrapper.emitted("move-keyboard:edit")).toHaveLength(1);
 				});
 			});

From 6bed97065d8bfe7efe68deeba9a7d96e061e969e Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Wed, 6 Sep 2023 11:15:24 +0200
Subject: [PATCH 33/89] Remove unecessary computed value needsFileUpload

---
 .../components/FileContentElement.vue                      | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/feature-board-file-element/components/FileContentElement.vue b/src/components/feature-board-file-element/components/FileContentElement.vue
index 9d8acee6e9..b4d37ea64f 100644
--- a/src/components/feature-board-file-element/components/FileContentElement.vue
+++ b/src/components/feature-board-file-element/components/FileContentElement.vue
@@ -105,12 +105,6 @@ export default defineComponent({
 			return fileRecord.value !== undefined;
 		});
 
-		const needsFileUpload = computed(() => {
-			return (
-				isLoadingFileRecord.value === false && hasFileRecord.value === false
-			);
-		});
-
 		const isOutlined = computed(() => {
 			return fileRecord.value !== undefined || props.isEditMode === true;
 		});
@@ -182,7 +176,6 @@ export default defineComponent({
 			hasFileRecord,
 			isOutlined,
 			modelValue,
-			needsFileUpload,
 			onDeleteElement,
 			onMoveElementDown,
 			onMoveElementUp,

From b1ee349f8c6714c84a2c06449318f53c2d0b1449 Mon Sep 17 00:00:00 2001
From: Constantin Bergatt <constantin.bergatt@dataport.de>
Date: Wed, 6 Sep 2023 11:45:40 +0200
Subject: [PATCH 34/89] BC-4590 - add / fix `move-keyboard:edit` event unit
 tests for `SubmissionContentElement`

---
 .../SubmissionContentElement.unit.ts          | 45 ++++++++++++++-----
 1 file changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/components/feature-board-submission-element/SubmissionContentElement.unit.ts b/src/components/feature-board-submission-element/SubmissionContentElement.unit.ts
index cd04eef32d..93908b4bf1 100644
--- a/src/components/feature-board-submission-element/SubmissionContentElement.unit.ts
+++ b/src/components/feature-board-submission-element/SubmissionContentElement.unit.ts
@@ -1,16 +1,16 @@
 import NotifierModule from "@/store/notifier";
+import { AnyContentElement } from "@/types/board/ContentElement";
 import { I18N_KEY, NOTIFIER_MODULE_KEY } from "@/utils/inject";
 import { createModuleMocks } from "@/utils/mock-store-module";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { submissionContainerElementResponseFactory } from "@@/tests/test-utils/factory/submissionContainerElementResponseFactory";
+import { createMock } from "@golevelup/ts-jest";
 import { useDeleteConfirmationDialog } from "@ui-confirmation-dialog";
-import { AnyContentElement } from "@/types/board/ContentElement";
 import { MountOptions, shallowMount } from "@vue/test-utils";
 import Vue, { nextTick } from "vue";
 import SubmissionContentElement from "./SubmissionContentElement.vue";
 import SubmissionContentElementDisplay from "./SubmissionContentElementDisplay.vue";
 import SubmissionContentElementEdit from "./SubmissionContentElementEdit.vue";
-import { submissionContainerElementResponseFactory } from "@@/tests/test-utils/factory/submissionContainerElementResponseFactory";
-import { createMock } from "@golevelup/ts-jest";
 
 jest.mock("@data-board", () => {
 	return {
@@ -212,15 +212,40 @@ describe("SubmissionContentElement", () => {
 			expect(wrapper.emitted("delete:element")).toHaveLength(1);
 		});
 
-		// currently blocked as v-card blocks correct usage of keydown event (works when its a div)
-		it.todo("should emit 'move-keyboard:edit' when arrow key up or is pressed");
-		/* async () => {
+		it("should emit 'move-keyboard:edit' when arrow key down is pressed", async () => {
 			const { wrapper } = setup();
 
-			await wrapper.trigger("keydown.up");
+			const card = wrapper.findComponent({ ref: "submissionContentElement" });
+			card.vm.$emit(
+				"keydown",
+				new KeyboardEvent("keydown", {
+					key: "ArrowDown",
+					keyCode: 40,
+				})
+			);
+
+			await wrapper.vm.$nextTick();
+			await wrapper.vm.$nextTick();
 
-			const emitted = wrapper.emitted();
-			expect(emitted["move-keyboard:edit"]).toBeDefined();
-		}; */
+			expect(wrapper.emitted("move-keyboard:edit")).toHaveLength(1);
+		});
+
+		it("should emit 'move-keyboard:edit' when arrow key up is pressed", async () => {
+			const { wrapper } = setup();
+
+			const card = wrapper.findComponent({ ref: "submissionContentElement" });
+			card.vm.$emit(
+				"keydown",
+				new KeyboardEvent("keydown", {
+					key: "ArrowUp",
+					keyCode: 38,
+				})
+			);
+
+			await wrapper.vm.$nextTick();
+			await wrapper.vm.$nextTick();
+
+			expect(wrapper.emitted("move-keyboard:edit")).toHaveLength(1);
+		});
 	});
 });

From da90ed07fdae569f8cbc6ec0d11c3c42e7702992 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Wed, 6 Sep 2023 13:39:17 +0200
Subject: [PATCH 35/89] Only show default display when preview url is undefined

---
 .../components/FileDisplay.unit.ts            | 120 ++++++++++++------
 .../components/FileDisplay.vue                |   2 +-
 2 files changed, 85 insertions(+), 37 deletions(-)

diff --git a/src/components/feature-board-file-element/components/FileDisplay.unit.ts b/src/components/feature-board-file-element/components/FileDisplay.unit.ts
index b2ea76f263..fbf72f99bc 100644
--- a/src/components/feature-board-file-element/components/FileDisplay.unit.ts
+++ b/src/components/feature-board-file-element/components/FileDisplay.unit.ts
@@ -5,55 +5,103 @@ import FileDisplay from "./FileDisplay.vue";
 import ImageDisplay from "./ImageDisplay.vue";
 
 describe("FileDisplay", () => {
-	const setup = () => {
-		document.body.setAttribute("data-app", "true");
-
-		const propsData = {
-			fileProperties: {
-				name: "test",
-				size: 100,
-				url: "test",
-				previewUrl: "test",
-				previewStatus: "test",
-				isDownloadAllowed: true,
-			},
-			isEditMode: true,
+	describe("when previewUrl is defined", () => {
+		const setup = () => {
+			document.body.setAttribute("data-app", "true");
+
+			const propsData = {
+				fileProperties: {
+					name: "test",
+					size: 100,
+					url: "test",
+					previewUrl: "test",
+					previewStatus: "test",
+					isDownloadAllowed: true,
+				},
+				isEditMode: true,
+			};
+
+			const wrapper = shallowMount(FileDisplay, {
+				propsData,
+				...createComponentMocks({}),
+			});
+
+			return {
+				wrapper,
+				fileNameProp: propsData.fileProperties.name,
+				previewUrlProp: propsData.fileProperties.previewUrl,
+			};
 		};
 
-		const wrapper = shallowMount(FileDisplay, {
-			propsData,
-			...createComponentMocks({}),
+		it("should be found in dom", () => {
+			const { wrapper } = setup();
+
+			const fileDisplay = wrapper.findComponent(FileDisplay);
+
+			expect(fileDisplay.exists()).toBe(true);
 		});
 
-		return {
-			wrapper,
-			fileNameProp: propsData.fileProperties.name,
-			previewUrlProp: propsData.fileProperties.previewUrl,
-		};
-	};
+		it("should render image display component with proper props", () => {
+			const { wrapper, fileNameProp, previewUrlProp } = setup();
+
+			const props = wrapper.findComponent(ImageDisplay).attributes();
+			console.log(props);
+			expect(props.name).toBe(fileNameProp);
+			expect(props.previewurl).toBe(previewUrlProp);
+			expect(props.iseditmode).toBe("true");
+		});
 
-	it("should be found in dom", () => {
-		const { wrapper } = setup();
+		it("should not render default display component", () => {
+			const { wrapper } = setup();
 
-		const fileDisplay = wrapper.findComponent(FileDisplay);
+			const defaultDisplay = wrapper.findComponent(DefaultDisplay);
 
-		expect(fileDisplay.exists()).toBe(true);
+			expect(defaultDisplay.exists()).toBe(false);
+		});
 	});
 
-	it("should render image display component with proper props", () => {
-		const { wrapper, fileNameProp, previewUrlProp } = setup();
+	describe("when previewUrl is undefined", () => {
+		const setup = () => {
+			document.body.setAttribute("data-app", "true");
 
-		const props = wrapper.findComponent(ImageDisplay).attributes();
+			const propsData = {
+				fileProperties: {
+					name: "test",
+					size: 100,
+					url: "test",
+					previewUrl: undefined,
+					previewStatus: "test",
+					isDownloadAllowed: true,
+				},
+				isEditMode: true,
+			};
 
-		expect(props.filename).toBe(fileNameProp);
-		expect(props.previewUrl).toBe(previewUrlProp);
-	});
+			const wrapper = shallowMount(FileDisplay, {
+				propsData,
+				...createComponentMocks({}),
+			});
+
+			return {
+				wrapper,
+				fileNameProp: propsData.fileProperties.name,
+				previewUrlProp: propsData.fileProperties.previewUrl,
+			};
+		};
+
+		it("should render default display component with proper props", () => {
+			const { wrapper, fileNameProp } = setup();
 
-	it("should render default display component with proper props", () => {
-		const { wrapper, fileNameProp } = setup();
+			const props = wrapper.findComponent(DefaultDisplay).attributes();
 
-		const props = wrapper.findComponent(DefaultDisplay).attributes();
+			expect(props.name).toBe(fileNameProp);
+		});
+
+		it("should not render image display component", () => {
+			const { wrapper } = setup();
 
-		expect(props.filename).toBe(fileNameProp);
+			const imageDisplay = wrapper.findComponent(ImageDisplay);
+
+			expect(imageDisplay.exists()).toBe(false);
+		});
 	});
 });
diff --git a/src/components/feature-board-file-element/components/FileDisplay.vue b/src/components/feature-board-file-element/components/FileDisplay.vue
index 32df1cb735..b65b8f614c 100644
--- a/src/components/feature-board-file-element/components/FileDisplay.vue
+++ b/src/components/feature-board-file-element/components/FileDisplay.vue
@@ -6,7 +6,7 @@
 			:name="fileProperties.name"
 			:is-edit-mode="isEditMode"
 		/>
-		<DefaultDisplay :name="fileProperties.name" />
+		<DefaultDisplay v-else :name="fileProperties.name" />
 	</div>
 </template>
 

From c1296b470997037d009362b1b81f98567479c1cf Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Wed, 6 Sep 2023 14:47:02 +0200
Subject: [PATCH 36/89] Fix Image Display Tests

---
 .../components/ImageDisplay.unit.ts           | 106 +++++++++++++-----
 1 file changed, 79 insertions(+), 27 deletions(-)

diff --git a/src/components/feature-board-file-element/components/ImageDisplay.unit.ts b/src/components/feature-board-file-element/components/ImageDisplay.unit.ts
index d92647f5eb..d35ecc54f5 100644
--- a/src/components/feature-board-file-element/components/ImageDisplay.unit.ts
+++ b/src/components/feature-board-file-element/components/ImageDisplay.unit.ts
@@ -3,19 +3,17 @@ import { shallowMount } from "@vue/test-utils";
 import ImageDisplay from "./ImageDisplay.vue";
 
 describe("ImageDisplay", () => {
-	const setupProps = () => ({
-		name: "file-record #1.txt",
-		previewUrl: "preview/1/file-record #1.txt",
-		isEditMode: false,
-	});
-
-	const setup = (isEditMode = false) => {
+	const setup = (isEditMode: boolean) => {
 		document.body.setAttribute("data-app", "true");
 
-		const propsData = setupProps();
+		const propsData = {
+			name: "file-record #1.txt",
+			previewUrl: "preview/1/file-record #1.txt",
+			isEditMode,
+		};
 
 		const wrapper = shallowMount(ImageDisplay, {
-			propsData: { ...propsData, isEditMode },
+			propsData,
 			...createComponentMocks({}),
 		});
 
@@ -25,36 +23,90 @@ describe("ImageDisplay", () => {
 			previewUrl: propsData.previewUrl,
 		};
 	};
+	const vImageSelektor = "v-img-stub";
 
-	it("should be found in dom", () => {
-		const { wrapper } = setup();
+	describe("when isEditMode is false", () => {
+		it("should be found in dom", () => {
+			const { wrapper } = setup(false);
 
-		const fileContentElement = wrapper.findComponent(ImageDisplay);
+			const fileContentElement = wrapper.findComponent(ImageDisplay);
 
-		expect(fileContentElement.exists()).toBe(true);
-	});
+			expect(fileContentElement.exists()).toBe(true);
+		});
 
-	it("should display image", () => {
-		const { wrapper } = setup();
+		it("should display image", () => {
+			const { wrapper } = setup(false);
 
-		const image = wrapper.find("v-img");
+			const image = wrapper.find(vImageSelektor);
 
-		expect(image.exists()).toBe(true);
-	});
+			expect(image.exists()).toBe(true);
+		});
 
-	it("should have set src correctly", () => {
-		const { wrapper, previewUrl } = setup();
+		it("should have set src correctly", () => {
+			const { wrapper, previewUrl } = setup(false);
 
-		const src = wrapper.find("v-img").attributes("src");
+			const src = wrapper.find(vImageSelektor).attributes("src");
+
+			expect(src).toBe(previewUrl);
+		});
 
-		expect(src).toBe(previewUrl);
+		it("should have set alt correctly", () => {
+			const { wrapper, fileNameProp } = setup(false);
+
+			const alt = wrapper.find(vImageSelektor).attributes("alt");
+
+			expect(alt).toBe(fileNameProp);
+		});
+
+		it("should not display div with class 'menu-background'", () => {
+			const { wrapper } = setup(false);
+
+			const div = wrapper.find(".menu-background");
+			console.log(wrapper.props());
+
+			expect(div.exists()).toBe(false);
+		});
 	});
 
-	it("should have set alt correctly", () => {
-		const { wrapper, fileNameProp } = setup();
+	describe("when isEditMode is true", () => {
+		it("should be found in dom", () => {
+			const { wrapper } = setup(true);
 
-		const alt = wrapper.find("v-img").attributes("alt");
+			const fileContentElement = wrapper.findComponent(ImageDisplay);
 
-		expect(alt).toBe(fileNameProp);
+			expect(fileContentElement.exists()).toBe(true);
+		});
+
+		it("should display image", () => {
+			const { wrapper } = setup(true);
+
+			const image = wrapper.find(vImageSelektor);
+
+			expect(image.exists()).toBe(true);
+		});
+
+		it("should have set src correctly", () => {
+			const { wrapper, previewUrl } = setup(true);
+
+			const src = wrapper.find(vImageSelektor).attributes("src");
+
+			expect(src).toBe(previewUrl);
+		});
+
+		it("should have set alt correctly", () => {
+			const { wrapper, fileNameProp } = setup(true);
+
+			const alt = wrapper.find(vImageSelektor).attributes("alt");
+
+			expect(alt).toBe(fileNameProp);
+		});
+
+		it("should display div with class 'menu-background'", () => {
+			const { wrapper } = setup(true);
+
+			const div = wrapper.find(".menu-background");
+
+			expect(div.exists()).toBe(true);
+		});
 	});
 });

From 387841e15d07c6f54309626ece0a803df195c7e5 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Wed, 6 Sep 2023 15:00:06 +0200
Subject: [PATCH 37/89] Use v-card components in stead of list components in
 default display

---
 .../components/DefaultDisplay.vue             | 34 ++++++-------------
 1 file changed, 11 insertions(+), 23 deletions(-)

diff --git a/src/components/feature-board-file-element/components/DefaultDisplay.vue b/src/components/feature-board-file-element/components/DefaultDisplay.vue
index 710b738c78..7813435e06 100644
--- a/src/components/feature-board-file-element/components/DefaultDisplay.vue
+++ b/src/components/feature-board-file-element/components/DefaultDisplay.vue
@@ -1,27 +1,15 @@
 <template>
-	<v-list-item
-		class="grey lighten-3 px-2 rounded-t-sm"
-		data-testid="board-file-element-display"
-		inactive
-		:ripple="false"
-	>
-		<v-list-item-icon class="my-2 mr-2">
-			<v-icon
-				class="grey--text"
-				data-testid="board-file-element-display-file-icon"
-				large
-				>{{ mdiFileDocumentOutline }}</v-icon
-			>
-		</v-list-item-icon>
-
-		<v-list-item-content class="mr-9">
-			<span
-				class="subtitle-1 d-inline-block text-truncate"
-				data-testid="board-file-element-display-file-name"
-				>{{ name }}</span
-			>
-		</v-list-item-content>
-	</v-list-item>
+	<v-card-item>
+		<v-icon
+			class="grey--text"
+			data-testid="board-file-element-display-file-icon"
+			large
+			>{{ mdiFileDocumentOutline }}</v-icon
+		>
+		<v-card-subtitle data-testid="board-file-element-display-file-name">{{
+			name
+		}}</v-card-subtitle>
+	</v-card-item>
 </template>
 
 <script lang="ts">

From 1ce11fab76e34d87486723be699099280977fe90 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Wed, 6 Sep 2023 15:33:16 +0200
Subject: [PATCH 38/89] Revert "Use v-card components in stead of list
 components in default display"

This reverts commit 387841e15d07c6f54309626ece0a803df195c7e5.
---
 .../components/DefaultDisplay.vue             | 34 +++++++++++++------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/feature-board-file-element/components/DefaultDisplay.vue b/src/components/feature-board-file-element/components/DefaultDisplay.vue
index 7813435e06..710b738c78 100644
--- a/src/components/feature-board-file-element/components/DefaultDisplay.vue
+++ b/src/components/feature-board-file-element/components/DefaultDisplay.vue
@@ -1,15 +1,27 @@
 <template>
-	<v-card-item>
-		<v-icon
-			class="grey--text"
-			data-testid="board-file-element-display-file-icon"
-			large
-			>{{ mdiFileDocumentOutline }}</v-icon
-		>
-		<v-card-subtitle data-testid="board-file-element-display-file-name">{{
-			name
-		}}</v-card-subtitle>
-	</v-card-item>
+	<v-list-item
+		class="grey lighten-3 px-2 rounded-t-sm"
+		data-testid="board-file-element-display"
+		inactive
+		:ripple="false"
+	>
+		<v-list-item-icon class="my-2 mr-2">
+			<v-icon
+				class="grey--text"
+				data-testid="board-file-element-display-file-icon"
+				large
+				>{{ mdiFileDocumentOutline }}</v-icon
+			>
+		</v-list-item-icon>
+
+		<v-list-item-content class="mr-9">
+			<span
+				class="subtitle-1 d-inline-block text-truncate"
+				data-testid="board-file-element-display-file-name"
+				>{{ name }}</span
+			>
+		</v-list-item-content>
+	</v-list-item>
 </template>
 
 <script lang="ts">

From 99e9769e8a17403e0d441c047f42d411b1c70268 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Thu, 7 Sep 2023 08:52:22 +0200
Subject: [PATCH 39/89] Change folder structure of file content element

---
 .../{components => }/FileContentElement.unit.ts           | 8 ++++----
 .../{components => }/FileContentElement.vue               | 8 ++++----
 .../{components => content}/FileContent.unit.ts           | 4 ++--
 .../{components => content}/FileContent.vue               | 8 ++++----
 .../alert}/FileContentElementAlert.unit.ts                | 0
 .../alert}/FileContentElementAlert.vue                    | 0
 .../{components => content/display}/FileDisplay.unit.ts   | 4 ++--
 .../{components => content/display}/FileDisplay.vue       | 6 +++---
 .../display/default-display}/DefaultDisplay.unit.ts       | 0
 .../display/default-display}/DefaultDisplay.vue           | 0
 .../display/image-display}/ImageDisplay.unit.ts           | 0
 .../display/image-display}/ImageDisplay.vue               | 0
 .../footer}/FileContentElementFooter.unit.ts              | 4 ++--
 .../footer}/FileContentElementFooter.vue                  | 6 +++---
 .../footer/chips}/FileContentElementChips.unit.ts         | 0
 .../footer/chips}/FileContentElementChips.vue             | 0
 .../footer/download}/FileContentElementDownload.unit.ts   | 0
 .../footer/download}/FileContentElementDownload.vue       | 0
 src/components/feature-board-file-element/index.ts        | 4 ++--
 .../{components => menu}/ContentElementMenu.unit.ts       | 0
 .../{components => menu}/ContentElementMenu.vue           | 0
 .../{ => shared/composables}/FileStorageApi.composable.ts | 0
 .../composables}/FileStorageApi.composable.unit.ts        | 2 +-
 .../composables}/FileStorageNotifications.composable.ts   | 0
 .../FileStorageNotifications.composable.unit.ts           | 0
 .../{ => shared}/test-utils/fileStorageNotifier.ts        | 2 +-
 .../types/element-position-props.ts                       | 0
 .../{components => shared}/types/file-properties.ts       | 0
 .../{components => upload}/FileUpload.unit.ts             | 2 +-
 .../{components => upload}/FileUpload.vue                 | 2 +-
 .../{components => upload/file-picker}/FilePicker.unit.ts | 0
 .../{components => upload/file-picker}/FilePicker.vue     | 0
 32 files changed, 30 insertions(+), 30 deletions(-)
 rename src/components/feature-board-file-element/{components => }/FileContentElement.unit.ts (98%)
 rename src/components/feature-board-file-element/{components => }/FileContentElement.vue (94%)
 rename src/components/feature-board-file-element/{components => content}/FileContent.unit.ts (92%)
 rename src/components/feature-board-file-element/{components => content}/FileContent.vue (75%)
 rename src/components/feature-board-file-element/{components => content/alert}/FileContentElementAlert.unit.ts (100%)
 rename src/components/feature-board-file-element/{components => content/alert}/FileContentElementAlert.vue (100%)
 rename src/components/feature-board-file-element/{components => content/display}/FileDisplay.unit.ts (95%)
 rename src/components/feature-board-file-element/{components => content/display}/FileDisplay.vue (75%)
 rename src/components/feature-board-file-element/{components => content/display/default-display}/DefaultDisplay.unit.ts (100%)
 rename src/components/feature-board-file-element/{components => content/display/default-display}/DefaultDisplay.vue (100%)
 rename src/components/feature-board-file-element/{components => content/display/image-display}/ImageDisplay.unit.ts (100%)
 rename src/components/feature-board-file-element/{components => content/display/image-display}/ImageDisplay.vue (100%)
 rename src/components/feature-board-file-element/{components => content/footer}/FileContentElementFooter.unit.ts (91%)
 rename src/components/feature-board-file-element/{components => content/footer}/FileContentElementFooter.vue (77%)
 rename src/components/feature-board-file-element/{components => content/footer/chips}/FileContentElementChips.unit.ts (100%)
 rename src/components/feature-board-file-element/{components => content/footer/chips}/FileContentElementChips.vue (100%)
 rename src/components/feature-board-file-element/{components => content/footer/download}/FileContentElementDownload.unit.ts (100%)
 rename src/components/feature-board-file-element/{components => content/footer/download}/FileContentElementDownload.vue (100%)
 rename src/components/feature-board-file-element/{components => menu}/ContentElementMenu.unit.ts (100%)
 rename src/components/feature-board-file-element/{components => menu}/ContentElementMenu.vue (100%)
 rename src/components/feature-board-file-element/{ => shared/composables}/FileStorageApi.composable.ts (100%)
 rename src/components/feature-board-file-element/{ => shared/composables}/FileStorageApi.composable.unit.ts (99%)
 rename src/components/feature-board-file-element/{ => shared/composables}/FileStorageNotifications.composable.ts (100%)
 rename src/components/feature-board-file-element/{ => shared/composables}/FileStorageNotifications.composable.unit.ts (100%)
 rename src/components/feature-board-file-element/{ => shared}/test-utils/fileStorageNotifier.ts (92%)
 rename src/components/feature-board-file-element/{components => shared}/types/element-position-props.ts (100%)
 rename src/components/feature-board-file-element/{components => shared}/types/file-properties.ts (100%)
 rename src/components/feature-board-file-element/{components => upload}/FileUpload.unit.ts (97%)
 rename src/components/feature-board-file-element/{components => upload}/FileUpload.vue (96%)
 rename src/components/feature-board-file-element/{components => upload/file-picker}/FilePicker.unit.ts (100%)
 rename src/components/feature-board-file-element/{components => upload/file-picker}/FilePicker.vue (100%)

diff --git a/src/components/feature-board-file-element/components/FileContentElement.unit.ts b/src/components/feature-board-file-element/FileContentElement.unit.ts
similarity index 98%
rename from src/components/feature-board-file-element/components/FileContentElement.unit.ts
rename to src/components/feature-board-file-element/FileContentElement.unit.ts
index 8bc44bba35..5e3cef2cde 100644
--- a/src/components/feature-board-file-element/components/FileContentElement.unit.ts
+++ b/src/components/feature-board-file-element/FileContentElement.unit.ts
@@ -12,11 +12,11 @@ import { createMock } from "@golevelup/ts-jest";
 import { useDeleteConfirmationDialog } from "@ui-confirmation-dialog";
 import { MountOptions, shallowMount } from "@vue/test-utils";
 import Vue from "vue";
-import ContentElementMenu from "./ContentElementMenu.vue";
-import FileContent from "./FileContent.vue";
+import FileContent from "./content/FileContent.vue";
 import FileContentElement from "./FileContentElement.vue";
-import FileUpload from "./FileUpload.vue";
-import { FileProperties } from "./types/file-properties";
+import ContentElementMenu from "./menu/ContentElementMenu.vue";
+import { FileProperties } from "./shared/types/file-properties";
+import FileUpload from "./upload/FileUpload.vue";
 
 jest.mock("@data-board", () => {
 	return {
diff --git a/src/components/feature-board-file-element/components/FileContentElement.vue b/src/components/feature-board-file-element/FileContentElement.vue
similarity index 94%
rename from src/components/feature-board-file-element/components/FileContentElement.vue
rename to src/components/feature-board-file-element/FileContentElement.vue
index b4d37ea64f..41fd4fc916 100644
--- a/src/components/feature-board-file-element/components/FileContentElement.vue
+++ b/src/components/feature-board-file-element/FileContentElement.vue
@@ -42,10 +42,10 @@ import {
 import { useBoardFocusHandler, useContentElementState } from "@data-board";
 import { useDeleteConfirmationDialog } from "@ui-confirmation-dialog";
 import { computed, defineComponent, onMounted, PropType, ref } from "vue";
-import { useFileStorageApi } from "../FileStorageApi.composable";
-import ContentElementMenu from "./ContentElementMenu.vue";
-import FileContent from "./FileContent.vue";
-import FileUpload from "./FileUpload.vue";
+import FileContent from "./content/FileContent.vue";
+import ContentElementMenu from "./menu/ContentElementMenu.vue";
+import { useFileStorageApi } from "./shared/composables/FileStorageApi.composable";
+import FileUpload from "./upload/FileUpload.vue";
 
 export default defineComponent({
 	name: "FileContentElement",
diff --git a/src/components/feature-board-file-element/components/FileContent.unit.ts b/src/components/feature-board-file-element/content/FileContent.unit.ts
similarity index 92%
rename from src/components/feature-board-file-element/components/FileContent.unit.ts
rename to src/components/feature-board-file-element/content/FileContent.unit.ts
index 3ab1c589dc..eaa0bb754e 100644
--- a/src/components/feature-board-file-element/components/FileContent.unit.ts
+++ b/src/components/feature-board-file-element/content/FileContent.unit.ts
@@ -1,9 +1,9 @@
 import { PreviewStatus } from "@/fileStorageApi/v3";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
+import FileContentElementAlert from "./alert/FileContentElementAlert.vue";
 import FileContent from "./FileContent.vue";
-import FileContentElementAlert from "./FileContentElementAlert.vue";
-import FileContentElementFooter from "./FileContentElementFooter.vue";
+import FileContentElementFooter from "./footer/FileContentElementFooter.vue";
 
 describe("FileContent", () => {
 	const setup = () => {
diff --git a/src/components/feature-board-file-element/components/FileContent.vue b/src/components/feature-board-file-element/content/FileContent.vue
similarity index 75%
rename from src/components/feature-board-file-element/components/FileContent.vue
rename to src/components/feature-board-file-element/content/FileContent.vue
index b514ec9085..87eb02a1b2 100644
--- a/src/components/feature-board-file-element/components/FileContent.vue
+++ b/src/components/feature-board-file-element/content/FileContent.vue
@@ -11,10 +11,10 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
-import FileContentElementAlert from "./FileContentElementAlert.vue";
-import FileContentElementFooter from "./FileContentElementFooter.vue";
-import FileDisplay from "./FileDisplay.vue";
-import { FileProperties } from "./types/file-properties";
+import FileContentElementAlert from "../content/alert/FileContentElementAlert.vue";
+import FileDisplay from "../content/display/FileDisplay.vue";
+import { FileProperties } from "../shared/types/file-properties";
+import FileContentElementFooter from "./footer/FileContentElementFooter.vue";
 
 export default defineComponent({
 	name: "FileContent",
diff --git a/src/components/feature-board-file-element/components/FileContentElementAlert.unit.ts b/src/components/feature-board-file-element/content/alert/FileContentElementAlert.unit.ts
similarity index 100%
rename from src/components/feature-board-file-element/components/FileContentElementAlert.unit.ts
rename to src/components/feature-board-file-element/content/alert/FileContentElementAlert.unit.ts
diff --git a/src/components/feature-board-file-element/components/FileContentElementAlert.vue b/src/components/feature-board-file-element/content/alert/FileContentElementAlert.vue
similarity index 100%
rename from src/components/feature-board-file-element/components/FileContentElementAlert.vue
rename to src/components/feature-board-file-element/content/alert/FileContentElementAlert.vue
diff --git a/src/components/feature-board-file-element/components/FileDisplay.unit.ts b/src/components/feature-board-file-element/content/display/FileDisplay.unit.ts
similarity index 95%
rename from src/components/feature-board-file-element/components/FileDisplay.unit.ts
rename to src/components/feature-board-file-element/content/display/FileDisplay.unit.ts
index fbf72f99bc..e1aabe6f8b 100644
--- a/src/components/feature-board-file-element/components/FileDisplay.unit.ts
+++ b/src/components/feature-board-file-element/content/display/FileDisplay.unit.ts
@@ -1,8 +1,8 @@
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
-import DefaultDisplay from "./DefaultDisplay.vue";
+import DefaultDisplay from "./default-display/DefaultDisplay.vue";
 import FileDisplay from "./FileDisplay.vue";
-import ImageDisplay from "./ImageDisplay.vue";
+import ImageDisplay from "./image-display/ImageDisplay.vue";
 
 describe("FileDisplay", () => {
 	describe("when previewUrl is defined", () => {
diff --git a/src/components/feature-board-file-element/components/FileDisplay.vue b/src/components/feature-board-file-element/content/display/FileDisplay.vue
similarity index 75%
rename from src/components/feature-board-file-element/components/FileDisplay.vue
rename to src/components/feature-board-file-element/content/display/FileDisplay.vue
index b65b8f614c..a71f2fc02d 100644
--- a/src/components/feature-board-file-element/components/FileDisplay.vue
+++ b/src/components/feature-board-file-element/content/display/FileDisplay.vue
@@ -12,9 +12,9 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import DefaultDisplay from "./DefaultDisplay.vue";
-import ImageDisplay from "./ImageDisplay.vue";
-import { FileProperties } from "./types/file-properties";
+import { FileProperties } from "../../shared/types/file-properties";
+import DefaultDisplay from "./default-display/DefaultDisplay.vue";
+import ImageDisplay from "./image-display/ImageDisplay.vue";
 
 export default defineComponent({
 	name: "FileDisplay",
diff --git a/src/components/feature-board-file-element/components/DefaultDisplay.unit.ts b/src/components/feature-board-file-element/content/display/default-display/DefaultDisplay.unit.ts
similarity index 100%
rename from src/components/feature-board-file-element/components/DefaultDisplay.unit.ts
rename to src/components/feature-board-file-element/content/display/default-display/DefaultDisplay.unit.ts
diff --git a/src/components/feature-board-file-element/components/DefaultDisplay.vue b/src/components/feature-board-file-element/content/display/default-display/DefaultDisplay.vue
similarity index 100%
rename from src/components/feature-board-file-element/components/DefaultDisplay.vue
rename to src/components/feature-board-file-element/content/display/default-display/DefaultDisplay.vue
diff --git a/src/components/feature-board-file-element/components/ImageDisplay.unit.ts b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
similarity index 100%
rename from src/components/feature-board-file-element/components/ImageDisplay.unit.ts
rename to src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
diff --git a/src/components/feature-board-file-element/components/ImageDisplay.vue b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
similarity index 100%
rename from src/components/feature-board-file-element/components/ImageDisplay.vue
rename to src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
diff --git a/src/components/feature-board-file-element/components/FileContentElementFooter.unit.ts b/src/components/feature-board-file-element/content/footer/FileContentElementFooter.unit.ts
similarity index 91%
rename from src/components/feature-board-file-element/components/FileContentElementFooter.unit.ts
rename to src/components/feature-board-file-element/content/footer/FileContentElementFooter.unit.ts
index 4efb78bd7b..daba4f5251 100644
--- a/src/components/feature-board-file-element/components/FileContentElementFooter.unit.ts
+++ b/src/components/feature-board-file-element/content/footer/FileContentElementFooter.unit.ts
@@ -1,7 +1,7 @@
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
-import FileContentElementChips from "./FileContentElementChips.vue";
-import FileContentElementDownload from "./FileContentElementDownload.vue";
+import FileContentElementChips from "./chips/FileContentElementChips.vue";
+import FileContentElementDownload from "./download/FileContentElementDownload.vue";
 import FileContentElementFooter from "./FileContentElementFooter.vue";
 
 describe("FileContentElementFooter", () => {
diff --git a/src/components/feature-board-file-element/components/FileContentElementFooter.vue b/src/components/feature-board-file-element/content/footer/FileContentElementFooter.vue
similarity index 77%
rename from src/components/feature-board-file-element/components/FileContentElementFooter.vue
rename to src/components/feature-board-file-element/content/footer/FileContentElementFooter.vue
index 839c8c26c0..e8445dd0e3 100644
--- a/src/components/feature-board-file-element/components/FileContentElementFooter.vue
+++ b/src/components/feature-board-file-element/content/footer/FileContentElementFooter.vue
@@ -21,9 +21,9 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import FileContentElementChips from "./FileContentElementChips.vue";
-import FileContentElementDownload from "./FileContentElementDownload.vue";
-import { FileProperties } from "./types/file-properties";
+import { FileProperties } from "../../shared/types/file-properties";
+import FileContentElementChips from "./chips/FileContentElementChips.vue";
+import FileContentElementDownload from "./download/FileContentElementDownload.vue";
 
 export default defineComponent({
 	name: "FileContentElementFooter",
diff --git a/src/components/feature-board-file-element/components/FileContentElementChips.unit.ts b/src/components/feature-board-file-element/content/footer/chips/FileContentElementChips.unit.ts
similarity index 100%
rename from src/components/feature-board-file-element/components/FileContentElementChips.unit.ts
rename to src/components/feature-board-file-element/content/footer/chips/FileContentElementChips.unit.ts
diff --git a/src/components/feature-board-file-element/components/FileContentElementChips.vue b/src/components/feature-board-file-element/content/footer/chips/FileContentElementChips.vue
similarity index 100%
rename from src/components/feature-board-file-element/components/FileContentElementChips.vue
rename to src/components/feature-board-file-element/content/footer/chips/FileContentElementChips.vue
diff --git a/src/components/feature-board-file-element/components/FileContentElementDownload.unit.ts b/src/components/feature-board-file-element/content/footer/download/FileContentElementDownload.unit.ts
similarity index 100%
rename from src/components/feature-board-file-element/components/FileContentElementDownload.unit.ts
rename to src/components/feature-board-file-element/content/footer/download/FileContentElementDownload.unit.ts
diff --git a/src/components/feature-board-file-element/components/FileContentElementDownload.vue b/src/components/feature-board-file-element/content/footer/download/FileContentElementDownload.vue
similarity index 100%
rename from src/components/feature-board-file-element/components/FileContentElementDownload.vue
rename to src/components/feature-board-file-element/content/footer/download/FileContentElementDownload.vue
diff --git a/src/components/feature-board-file-element/index.ts b/src/components/feature-board-file-element/index.ts
index 43a3fb9686..ecb57c7bb7 100644
--- a/src/components/feature-board-file-element/index.ts
+++ b/src/components/feature-board-file-element/index.ts
@@ -1,4 +1,4 @@
-import FileContentElement from "./components/FileContentElement.vue";
-import { useFileStorageApi } from "./FileStorageApi.composable";
+import FileContentElement from "./FileContentElement.vue";
+import { useFileStorageApi } from "./shared/composables/FileStorageApi.composable";
 
 export { FileContentElement, useFileStorageApi };
diff --git a/src/components/feature-board-file-element/components/ContentElementMenu.unit.ts b/src/components/feature-board-file-element/menu/ContentElementMenu.unit.ts
similarity index 100%
rename from src/components/feature-board-file-element/components/ContentElementMenu.unit.ts
rename to src/components/feature-board-file-element/menu/ContentElementMenu.unit.ts
diff --git a/src/components/feature-board-file-element/components/ContentElementMenu.vue b/src/components/feature-board-file-element/menu/ContentElementMenu.vue
similarity index 100%
rename from src/components/feature-board-file-element/components/ContentElementMenu.vue
rename to src/components/feature-board-file-element/menu/ContentElementMenu.vue
diff --git a/src/components/feature-board-file-element/FileStorageApi.composable.ts b/src/components/feature-board-file-element/shared/composables/FileStorageApi.composable.ts
similarity index 100%
rename from src/components/feature-board-file-element/FileStorageApi.composable.ts
rename to src/components/feature-board-file-element/shared/composables/FileStorageApi.composable.ts
diff --git a/src/components/feature-board-file-element/FileStorageApi.composable.unit.ts b/src/components/feature-board-file-element/shared/composables/FileStorageApi.composable.unit.ts
similarity index 99%
rename from src/components/feature-board-file-element/FileStorageApi.composable.unit.ts
rename to src/components/feature-board-file-element/shared/composables/FileStorageApi.composable.unit.ts
index cc4563c6db..5fd145e27b 100644
--- a/src/components/feature-board-file-element/FileStorageApi.composable.unit.ts
+++ b/src/components/feature-board-file-element/shared/composables/FileStorageApi.composable.unit.ts
@@ -5,8 +5,8 @@ import { apiResponseErrorFactory } from "@@/tests/test-utils/factory/apiResponse
 import { axiosErrorFactory } from "@@/tests/test-utils/factory/axiosErrorFactory";
 import { fileRecordResponseFactory } from "@@/tests/test-utils/factory/filerecordResponse.factory";
 import { ObjectIdMock } from "@@/tests/test-utils/ObjectIdMock";
+import { setupFileStorageNotifier } from "../../shared/test-utils/fileStorageNotifier";
 import { ErrorType, useFileStorageApi } from "./FileStorageApi.composable";
-import { setupFileStorageNotifier } from "./test-utils/fileStorageNotifier";
 jest.mock("./FileStorageNotifications.composable");
 
 jest.mock("@/utils/helpers");
diff --git a/src/components/feature-board-file-element/FileStorageNotifications.composable.ts b/src/components/feature-board-file-element/shared/composables/FileStorageNotifications.composable.ts
similarity index 100%
rename from src/components/feature-board-file-element/FileStorageNotifications.composable.ts
rename to src/components/feature-board-file-element/shared/composables/FileStorageNotifications.composable.ts
diff --git a/src/components/feature-board-file-element/FileStorageNotifications.composable.unit.ts b/src/components/feature-board-file-element/shared/composables/FileStorageNotifications.composable.unit.ts
similarity index 100%
rename from src/components/feature-board-file-element/FileStorageNotifications.composable.unit.ts
rename to src/components/feature-board-file-element/shared/composables/FileStorageNotifications.composable.unit.ts
diff --git a/src/components/feature-board-file-element/test-utils/fileStorageNotifier.ts b/src/components/feature-board-file-element/shared/test-utils/fileStorageNotifier.ts
similarity index 92%
rename from src/components/feature-board-file-element/test-utils/fileStorageNotifier.ts
rename to src/components/feature-board-file-element/shared/test-utils/fileStorageNotifier.ts
index 3baf7a2c28..448b1ee323 100644
--- a/src/components/feature-board-file-element/test-utils/fileStorageNotifier.ts
+++ b/src/components/feature-board-file-element/shared/test-utils/fileStorageNotifier.ts
@@ -1,5 +1,5 @@
 import { jest } from "@jest/globals";
-import { useFileStorageNotifier } from "../FileStorageNotifications.composable";
+import { useFileStorageNotifier } from "../composables/FileStorageNotifications.composable";
 
 interface Props {
 	showFileTooBigErrorMock?: () => void;
diff --git a/src/components/feature-board-file-element/components/types/element-position-props.ts b/src/components/feature-board-file-element/shared/types/element-position-props.ts
similarity index 100%
rename from src/components/feature-board-file-element/components/types/element-position-props.ts
rename to src/components/feature-board-file-element/shared/types/element-position-props.ts
diff --git a/src/components/feature-board-file-element/components/types/file-properties.ts b/src/components/feature-board-file-element/shared/types/file-properties.ts
similarity index 100%
rename from src/components/feature-board-file-element/components/types/file-properties.ts
rename to src/components/feature-board-file-element/shared/types/file-properties.ts
diff --git a/src/components/feature-board-file-element/components/FileUpload.unit.ts b/src/components/feature-board-file-element/upload/FileUpload.unit.ts
similarity index 97%
rename from src/components/feature-board-file-element/components/FileUpload.unit.ts
rename to src/components/feature-board-file-element/upload/FileUpload.unit.ts
index fd5c639fc2..353793434b 100644
--- a/src/components/feature-board-file-element/components/FileUpload.unit.ts
+++ b/src/components/feature-board-file-element/upload/FileUpload.unit.ts
@@ -3,7 +3,7 @@ import { createMock } from "@golevelup/ts-jest";
 import { useSharedLastCreatedElement } from "@util-board";
 import { shallowMount } from "@vue/test-utils";
 import { nextTick } from "vue";
-import FilePicker from "./FilePicker.vue";
+import FilePicker from "./file-picker/FilePicker.vue";
 import FileUpload from "./FileUpload.vue";
 
 jest.mock("@util-board");
diff --git a/src/components/feature-board-file-element/components/FileUpload.vue b/src/components/feature-board-file-element/upload/FileUpload.vue
similarity index 96%
rename from src/components/feature-board-file-element/components/FileUpload.vue
rename to src/components/feature-board-file-element/upload/FileUpload.vue
index a5f0010061..2ae7802f7d 100644
--- a/src/components/feature-board-file-element/components/FileUpload.vue
+++ b/src/components/feature-board-file-element/upload/FileUpload.vue
@@ -19,7 +19,7 @@
 <script lang="ts">
 import { useSharedLastCreatedElement } from "@util-board";
 import { defineComponent, ref, watch } from "vue";
-import FilePicker from "./FilePicker.vue";
+import FilePicker from "./file-picker/FilePicker.vue";
 
 export default defineComponent({
 	name: "FileUpload",
diff --git a/src/components/feature-board-file-element/components/FilePicker.unit.ts b/src/components/feature-board-file-element/upload/file-picker/FilePicker.unit.ts
similarity index 100%
rename from src/components/feature-board-file-element/components/FilePicker.unit.ts
rename to src/components/feature-board-file-element/upload/file-picker/FilePicker.unit.ts
diff --git a/src/components/feature-board-file-element/components/FilePicker.vue b/src/components/feature-board-file-element/upload/file-picker/FilePicker.vue
similarity index 100%
rename from src/components/feature-board-file-element/components/FilePicker.vue
rename to src/components/feature-board-file-element/upload/file-picker/FilePicker.vue

From c08cdada83b7957a72739c358a68a64deec24c88 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Thu, 7 Sep 2023 09:00:07 +0200
Subject: [PATCH 40/89] Rename FileContentElementAlert

---
 .../content/FileContent.unit.ts                  | 16 ++++++----------
 .../content/FileContent.vue                      |  9 +++------
 ...entElementAlert.unit.ts => FileAlert.unit.ts} |  6 +++---
 ...FileContentElementAlert.vue => FileAlert.vue} |  2 +-
 4 files changed, 13 insertions(+), 20 deletions(-)
 rename src/components/feature-board-file-element/content/alert/{FileContentElementAlert.unit.ts => FileAlert.unit.ts} (96%)
 rename src/components/feature-board-file-element/content/alert/{FileContentElementAlert.vue => FileAlert.vue} (98%)

diff --git a/src/components/feature-board-file-element/content/FileContent.unit.ts b/src/components/feature-board-file-element/content/FileContent.unit.ts
index eaa0bb754e..c266914b19 100644
--- a/src/components/feature-board-file-element/content/FileContent.unit.ts
+++ b/src/components/feature-board-file-element/content/FileContent.unit.ts
@@ -1,7 +1,7 @@
 import { PreviewStatus } from "@/fileStorageApi/v3";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
-import FileContentElementAlert from "./alert/FileContentElementAlert.vue";
+import FileAlert from "./alert/FileAlert.vue";
 import FileContent from "./FileContent.vue";
 import FileContentElementFooter from "./footer/FileContentElementFooter.vue";
 
@@ -54,14 +54,12 @@ describe("FileContent", () => {
 		});
 	});
 
-	it("Should pass props to FileContentElementAlert", () => {
+	it("Should pass props to FileAlert", () => {
 		const { wrapper, fileProperties } = setup();
 
-		const fileContentElementAlert = wrapper.findComponent(
-			FileContentElementAlert
-		);
+		const fileAlert = wrapper.findComponent(FileAlert);
 
-		expect(fileContentElementAlert.props()).toEqual({
+		expect(fileAlert.props()).toEqual({
 			previewStatus: fileProperties.previewStatus,
 		});
 	});
@@ -69,11 +67,9 @@ describe("FileContent", () => {
 	it("should emit delete event when alter emits on status reload", async () => {
 		const { wrapper } = setup();
 
-		const fileContentElementAlert = wrapper.findComponent(
-			FileContentElementAlert
-		);
+		const fileAlert = wrapper.findComponent(FileAlert);
 
-		await fileContentElementAlert.vm.$emit("on-status-reload");
+		await fileAlert.vm.$emit("on-status-reload");
 
 		expect(wrapper.emitted("fetch:file")).toBeTruthy();
 	});
diff --git a/src/components/feature-board-file-element/content/FileContent.vue b/src/components/feature-board-file-element/content/FileContent.vue
index 87eb02a1b2..e013a2ecb7 100644
--- a/src/components/feature-board-file-element/content/FileContent.vue
+++ b/src/components/feature-board-file-element/content/FileContent.vue
@@ -2,16 +2,13 @@
 	<div>
 		<FileDisplay :file-properties="fileProperties" :is-edit-mode="isEditMode" />
 		<FileContentElementFooter :fileProperties="fileProperties" />
-		<FileContentElementAlert
-			:previewStatus="previewStatus"
-			@on-status-reload="onFetchFile"
-		/>
+		<FileAlert :previewStatus="previewStatus" @on-status-reload="onFetchFile" />
 	</div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
-import FileContentElementAlert from "../content/alert/FileContentElementAlert.vue";
+import FileAlert from "../content/alert/FileAlert.vue";
 import FileDisplay from "../content/display/FileDisplay.vue";
 import { FileProperties } from "../shared/types/file-properties";
 import FileContentElementFooter from "./footer/FileContentElementFooter.vue";
@@ -21,7 +18,7 @@ export default defineComponent({
 	components: {
 		FileDisplay,
 		FileContentElementFooter,
-		FileContentElementAlert,
+		FileAlert,
 	},
 	props: {
 		fileProperties: {
diff --git a/src/components/feature-board-file-element/content/alert/FileContentElementAlert.unit.ts b/src/components/feature-board-file-element/content/alert/FileAlert.unit.ts
similarity index 96%
rename from src/components/feature-board-file-element/content/alert/FileContentElementAlert.unit.ts
rename to src/components/feature-board-file-element/content/alert/FileAlert.unit.ts
index 98ea7b9c1e..e699db8daa 100644
--- a/src/components/feature-board-file-element/content/alert/FileContentElementAlert.unit.ts
+++ b/src/components/feature-board-file-element/content/alert/FileAlert.unit.ts
@@ -1,13 +1,13 @@
 import { PreviewStatus } from "@/fileStorageApi/v3";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
-import FileContentElementAlert from "./FileContentElementAlert.vue";
+import FileAlert from "./FileAlert.vue";
 
-describe("FileContentElementAlert", () => {
+describe("FileAlert", () => {
 	const mount = (previewStatus: PreviewStatus) => {
 		document.body.setAttribute("data-app", "true");
 
-		const wrapper = shallowMount(FileContentElementAlert, {
+		const wrapper = shallowMount(FileAlert, {
 			propsData: { previewStatus },
 			...createComponentMocks({ i18n: true }),
 		});
diff --git a/src/components/feature-board-file-element/content/alert/FileContentElementAlert.vue b/src/components/feature-board-file-element/content/alert/FileAlert.vue
similarity index 98%
rename from src/components/feature-board-file-element/content/alert/FileContentElementAlert.vue
rename to src/components/feature-board-file-element/content/alert/FileAlert.vue
index 4cfb1c86dd..8ab7e66bf0 100644
--- a/src/components/feature-board-file-element/content/alert/FileContentElementAlert.vue
+++ b/src/components/feature-board-file-element/content/alert/FileAlert.vue
@@ -34,7 +34,7 @@ interface Props {
 }
 
 export default defineComponent({
-	name: "FileContentElementAlert",
+	name: "FileAlert",
 	props: {
 		previewStatus: {
 			type: String as PropType<PreviewStatus>,

From 1b4b0ec9599f008329a2caf72f4e6a8cfad1e4de Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Thu, 7 Sep 2023 09:04:04 +0200
Subject: [PATCH 41/89] Rename FileContentElementChips

---
 .../content/footer/FileContentElementFooter.unit.ts       | 4 ++--
 .../content/footer/FileContentElementFooter.vue           | 6 +++---
 ...ntElementChips.unit.ts => ContentElementChips.unit.ts} | 8 ++++----
 ...ileContentElementChips.vue => ContentElementChips.vue} | 2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)
 rename src/components/feature-board-file-element/content/footer/chips/{FileContentElementChips.unit.ts => ContentElementChips.unit.ts} (89%)
 rename src/components/feature-board-file-element/content/footer/chips/{FileContentElementChips.vue => ContentElementChips.vue} (97%)

diff --git a/src/components/feature-board-file-element/content/footer/FileContentElementFooter.unit.ts b/src/components/feature-board-file-element/content/footer/FileContentElementFooter.unit.ts
index daba4f5251..61431552a8 100644
--- a/src/components/feature-board-file-element/content/footer/FileContentElementFooter.unit.ts
+++ b/src/components/feature-board-file-element/content/footer/FileContentElementFooter.unit.ts
@@ -1,6 +1,6 @@
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
-import FileContentElementChips from "./chips/FileContentElementChips.vue";
+import ContentElementChips from "./chips/ContentElementChips.vue";
 import FileContentElementDownload from "./download/FileContentElementDownload.vue";
 import FileContentElementFooter from "./FileContentElementFooter.vue";
 
@@ -42,7 +42,7 @@ describe("FileContentElementFooter", () => {
 	it("should render chips component with proper props", () => {
 		const { wrapper, fileNameProp, fileSizeProp } = setup();
 
-		const props = wrapper.findComponent(FileContentElementChips).attributes();
+		const props = wrapper.findComponent(ContentElementChips).attributes();
 
 		expect(props.filename).toEqual(fileNameProp);
 		expect(props.filesize).toBe(fileSizeProp.toString());
diff --git a/src/components/feature-board-file-element/content/footer/FileContentElementFooter.vue b/src/components/feature-board-file-element/content/footer/FileContentElementFooter.vue
index e8445dd0e3..71bb45f68c 100644
--- a/src/components/feature-board-file-element/content/footer/FileContentElementFooter.vue
+++ b/src/components/feature-board-file-element/content/footer/FileContentElementFooter.vue
@@ -2,7 +2,7 @@
 	<v-container class="ma-0 pa-0">
 		<v-row>
 			<v-col cols="10">
-				<FileContentElementChips
+				<ContentElementChips
 					:fileSize="fileProperties.size"
 					:fileName="fileProperties.name"
 				/>
@@ -22,13 +22,13 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 import { FileProperties } from "../../shared/types/file-properties";
-import FileContentElementChips from "./chips/FileContentElementChips.vue";
+import ContentElementChips from "./chips/ContentElementChips.vue";
 import FileContentElementDownload from "./download/FileContentElementDownload.vue";
 
 export default defineComponent({
 	name: "FileContentElementFooter",
 	components: {
-		FileContentElementChips,
+		ContentElementChips,
 		FileContentElementDownload,
 	},
 	props: {
diff --git a/src/components/feature-board-file-element/content/footer/chips/FileContentElementChips.unit.ts b/src/components/feature-board-file-element/content/footer/chips/ContentElementChips.unit.ts
similarity index 89%
rename from src/components/feature-board-file-element/content/footer/chips/FileContentElementChips.unit.ts
rename to src/components/feature-board-file-element/content/footer/chips/ContentElementChips.unit.ts
index e0f32ef202..4db431c645 100644
--- a/src/components/feature-board-file-element/content/footer/chips/FileContentElementChips.unit.ts
+++ b/src/components/feature-board-file-element/content/footer/chips/ContentElementChips.unit.ts
@@ -2,11 +2,11 @@ import { convertFileSize, getFileExtension } from "@/utils/fileHelper";
 import { I18N_KEY } from "@/utils/inject";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { mount } from "@vue/test-utils";
-import FileContentElementChips from "./FileContentElementChips.vue";
+import ContentElementChips from "./ContentElementChips.vue";
 
 jest.mock("@/utils/fileHelper");
 
-describe("FileContentElementChips", () => {
+describe("ContentElementChips", () => {
 	const setup = () => {
 		const fileSize = 3800;
 		const fileName = "pic.jpeg";
@@ -18,7 +18,7 @@ describe("FileContentElementChips", () => {
 		const getFileExtensionMock = jest
 			.mocked(getFileExtension)
 			.mockReturnValueOnce("ext");
-		const wrapper = mount(FileContentElementChips, {
+		const wrapper = mount(ContentElementChips, {
 			...createComponentMocks({
 				i18n: true,
 			}),
@@ -50,7 +50,7 @@ describe("FileContentElementChips", () => {
 	it("should be found in dom", () => {
 		const { wrapper } = setup();
 
-		const chipsComponent = wrapper.findComponent(FileContentElementChips);
+		const chipsComponent = wrapper.findComponent(ContentElementChips);
 
 		expect(chipsComponent.exists()).toBe(true);
 	});
diff --git a/src/components/feature-board-file-element/content/footer/chips/FileContentElementChips.vue b/src/components/feature-board-file-element/content/footer/chips/ContentElementChips.vue
similarity index 97%
rename from src/components/feature-board-file-element/content/footer/chips/FileContentElementChips.vue
rename to src/components/feature-board-file-element/content/footer/chips/ContentElementChips.vue
index 1c21990068..5a39a203fb 100644
--- a/src/components/feature-board-file-element/content/footer/chips/FileContentElementChips.vue
+++ b/src/components/feature-board-file-element/content/footer/chips/ContentElementChips.vue
@@ -15,7 +15,7 @@ import { I18N_KEY, injectStrict } from "@/utils/inject";
 import { computed, defineComponent } from "vue";
 
 export default defineComponent({
-	name: "FileContentElementChips",
+	name: "ContentElementChips",
 	props: {
 		fileSize: {
 			type: Number,

From 9426b74f22940a47ba9c4e66477f4b672735c2c4 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Thu, 7 Sep 2023 09:08:15 +0200
Subject: [PATCH 42/89] Fix imports

---
 .../feature-board-file-element/FileContentElement.unit.ts       | 2 +-
 .../feature-board-file-element/menu/ContentElementMenu.unit.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/feature-board-file-element/FileContentElement.unit.ts b/src/components/feature-board-file-element/FileContentElement.unit.ts
index 5e3cef2cde..c9ff419eb2 100644
--- a/src/components/feature-board-file-element/FileContentElement.unit.ts
+++ b/src/components/feature-board-file-element/FileContentElement.unit.ts
@@ -25,7 +25,7 @@ jest.mock("@data-board", () => {
 	};
 });
 jest.mock("@feature-board");
-jest.mock("../FileStorageApi.composable");
+jest.mock("./shared/composables/FileStorageApi.composable");
 jest.mock("@ui-confirmation-dialog");
 
 const useDeleteConfirmationDialogMock = jest.mocked(
diff --git a/src/components/feature-board-file-element/menu/ContentElementMenu.unit.ts b/src/components/feature-board-file-element/menu/ContentElementMenu.unit.ts
index 22b45e2fad..b3a0d84efe 100644
--- a/src/components/feature-board-file-element/menu/ContentElementMenu.unit.ts
+++ b/src/components/feature-board-file-element/menu/ContentElementMenu.unit.ts
@@ -2,7 +2,7 @@ import { I18N_KEY } from "@/utils/inject";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { BoardMenuAction } from "@ui-board";
 import { shallowMount } from "@vue/test-utils";
-import FileContentElementMenu from "./FileContentElementMenu.vue";
+import FileContentElementMenu from "./ContentElementMenu.vue";
 
 jest.mock("@/utils/fileHelper");
 

From eb145038fb7ea8a92376297c80f5947ae2b6cfa7 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Thu, 7 Sep 2023 09:12:58 +0200
Subject: [PATCH 43/89] rename filecontentelementdownload

---
 .../footer/FileContentElementFooter.unit.ts        |  6 ++----
 .../content/footer/FileContentElementFooter.vue    |  8 ++++----
 ...lementDownload.unit.ts => FileDownload.unit.ts} | 14 ++++++--------
 ...ContentElementDownload.vue => FileDownload.vue} |  2 +-
 4 files changed, 13 insertions(+), 17 deletions(-)
 rename src/components/feature-board-file-element/content/footer/download/{FileContentElementDownload.unit.ts => FileDownload.unit.ts} (85%)
 rename src/components/feature-board-file-element/content/footer/download/{FileContentElementDownload.vue => FileDownload.vue} (95%)

diff --git a/src/components/feature-board-file-element/content/footer/FileContentElementFooter.unit.ts b/src/components/feature-board-file-element/content/footer/FileContentElementFooter.unit.ts
index 61431552a8..d0d2d61dd3 100644
--- a/src/components/feature-board-file-element/content/footer/FileContentElementFooter.unit.ts
+++ b/src/components/feature-board-file-element/content/footer/FileContentElementFooter.unit.ts
@@ -1,7 +1,7 @@
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
 import ContentElementChips from "./chips/ContentElementChips.vue";
-import FileContentElementDownload from "./download/FileContentElementDownload.vue";
+import FileDownload from "./download/FileDownload.vue";
 import FileContentElementFooter from "./FileContentElementFooter.vue";
 
 describe("FileContentElementFooter", () => {
@@ -51,9 +51,7 @@ describe("FileContentElementFooter", () => {
 	it("should render download component with proper props", () => {
 		const { wrapper, fileNameProp, urlProp, isDownloadAllowedProp } = setup();
 
-		const props = wrapper
-			.findComponent(FileContentElementDownload)
-			.attributes();
+		const props = wrapper.findComponent(FileDownload).attributes();
 
 		expect(props.filename).toEqual(fileNameProp);
 		expect(props.url).toEqual(urlProp);
diff --git a/src/components/feature-board-file-element/content/footer/FileContentElementFooter.vue b/src/components/feature-board-file-element/content/footer/FileContentElementFooter.vue
index 71bb45f68c..9f55a42d47 100644
--- a/src/components/feature-board-file-element/content/footer/FileContentElementFooter.vue
+++ b/src/components/feature-board-file-element/content/footer/FileContentElementFooter.vue
@@ -9,11 +9,11 @@
 			</v-col>
 
 			<v-col cols="2">
-				<FileContentElementDownload
+				<FileDownload
 					:fileName="fileProperties.name"
 					:isDownloadAllowed="fileProperties.isDownloadAllowed"
 					:url="fileProperties.url"
-				></FileContentElementDownload>
+				></FileDownload>
 			</v-col>
 		</v-row>
 	</v-container>
@@ -23,13 +23,13 @@
 import { defineComponent, PropType } from "vue";
 import { FileProperties } from "../../shared/types/file-properties";
 import ContentElementChips from "./chips/ContentElementChips.vue";
-import FileContentElementDownload from "./download/FileContentElementDownload.vue";
+import FileDownload from "./download/FileDownload.vue";
 
 export default defineComponent({
 	name: "FileContentElementFooter",
 	components: {
 		ContentElementChips,
-		FileContentElementDownload,
+		FileDownload,
 	},
 	props: {
 		fileProperties: {
diff --git a/src/components/feature-board-file-element/content/footer/download/FileContentElementDownload.unit.ts b/src/components/feature-board-file-element/content/footer/download/FileDownload.unit.ts
similarity index 85%
rename from src/components/feature-board-file-element/content/footer/download/FileContentElementDownload.unit.ts
rename to src/components/feature-board-file-element/content/footer/download/FileDownload.unit.ts
index f48c32420e..b845ead857 100644
--- a/src/components/feature-board-file-element/content/footer/download/FileContentElementDownload.unit.ts
+++ b/src/components/feature-board-file-element/content/footer/download/FileDownload.unit.ts
@@ -1,11 +1,11 @@
 import { downloadFile } from "@/utils/fileHelper";
 import { mdiTrayArrowDown } from "@mdi/js";
 import { shallowMount } from "@vue/test-utils";
-import FileContentElementDownload from "./FileContentElementDownload.vue";
+import FileDownload from "./FileDownload.vue";
 
 jest.mock("@/utils/fileHelper");
 
-describe("FileContentElementDownload", () => {
+describe("FileDownload", () => {
 	beforeEach(() => {
 		jest.resetAllMocks();
 	});
@@ -13,7 +13,7 @@ describe("FileContentElementDownload", () => {
 	const setup = () => {
 		document.body.setAttribute("data-app", "true");
 
-		const wrapper = shallowMount(FileContentElementDownload);
+		const wrapper = shallowMount(FileDownload);
 
 		return {
 			wrapper,
@@ -23,9 +23,7 @@ describe("FileContentElementDownload", () => {
 	it("should be found in dom", () => {
 		const { wrapper } = setup();
 
-		const fileContentElement = wrapper.findComponent(
-			FileContentElementDownload
-		);
+		const fileContentElement = wrapper.findComponent(FileDownload);
 		expect(fileContentElement.exists()).toBe(true);
 	});
 
@@ -52,7 +50,7 @@ describe("FileContentElementDownload", () => {
 					.mocked(downloadFile)
 					.mockReturnValueOnce();
 
-				const wrapper = shallowMount(FileContentElementDownload, {
+				const wrapper = shallowMount(FileDownload, {
 					propsData,
 				});
 
@@ -97,7 +95,7 @@ describe("FileContentElementDownload", () => {
 
 			const downloadFileMock = jest.mocked(downloadFile).mockReturnValueOnce();
 
-			const wrapper = shallowMount(FileContentElementDownload, {
+			const wrapper = shallowMount(FileDownload, {
 				propsData,
 			});
 
diff --git a/src/components/feature-board-file-element/content/footer/download/FileContentElementDownload.vue b/src/components/feature-board-file-element/content/footer/download/FileDownload.vue
similarity index 95%
rename from src/components/feature-board-file-element/content/footer/download/FileContentElementDownload.vue
rename to src/components/feature-board-file-element/content/footer/download/FileDownload.vue
index 7f83652a66..132db9a1ce 100644
--- a/src/components/feature-board-file-element/content/footer/download/FileContentElementDownload.vue
+++ b/src/components/feature-board-file-element/content/footer/download/FileDownload.vue
@@ -16,7 +16,7 @@ import { mdiTrayArrowDown } from "@mdi/js";
 import { defineComponent } from "vue";
 
 export default defineComponent({
-	name: "FileContentElementDownload",
+	name: "FileDownload",
 	props: {
 		fileName: { type: String, required: true },
 		isDownloadAllowed: { type: Boolean, required: true },

From 7e92da82c8d855dcbe2f8f68c881b0c73cce31d7 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Thu, 7 Sep 2023 09:16:27 +0200
Subject: [PATCH 44/89] Rename FileContentElementFooter

---
 .../content/FileContent.unit.ts                        | 10 ++++------
 .../feature-board-file-element/content/FileContent.vue |  6 +++---
 ...mentFooter.unit.ts => ContentElementFooter.unit.ts} |  8 ++++----
 ...ntentElementFooter.vue => ContentElementFooter.vue} |  2 +-
 4 files changed, 12 insertions(+), 14 deletions(-)
 rename src/components/feature-board-file-element/content/footer/{FileContentElementFooter.unit.ts => ContentElementFooter.unit.ts} (86%)
 rename src/components/feature-board-file-element/content/footer/{FileContentElementFooter.vue => ContentElementFooter.vue} (96%)

diff --git a/src/components/feature-board-file-element/content/FileContent.unit.ts b/src/components/feature-board-file-element/content/FileContent.unit.ts
index c266914b19..4f65071b8a 100644
--- a/src/components/feature-board-file-element/content/FileContent.unit.ts
+++ b/src/components/feature-board-file-element/content/FileContent.unit.ts
@@ -3,7 +3,7 @@ import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
 import FileAlert from "./alert/FileAlert.vue";
 import FileContent from "./FileContent.vue";
-import FileContentElementFooter from "./footer/FileContentElementFooter.vue";
+import ContentElementFooter from "./footer/ContentElementFooter.vue";
 
 describe("FileContent", () => {
 	const setup = () => {
@@ -42,14 +42,12 @@ describe("FileContent", () => {
 		});
 	});
 
-	it("should pass props to FileContentElementFooter", () => {
+	it("should pass props to ContentElementFooter", () => {
 		const { wrapper, fileProperties } = setup();
 
-		const fileContentElementFooter = wrapper.findComponent(
-			FileContentElementFooter
-		);
+		const contentElementFooter = wrapper.findComponent(ContentElementFooter);
 
-		expect(fileContentElementFooter.props()).toEqual({
+		expect(contentElementFooter.props()).toEqual({
 			fileProperties,
 		});
 	});
diff --git a/src/components/feature-board-file-element/content/FileContent.vue b/src/components/feature-board-file-element/content/FileContent.vue
index e013a2ecb7..e86c291eef 100644
--- a/src/components/feature-board-file-element/content/FileContent.vue
+++ b/src/components/feature-board-file-element/content/FileContent.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<FileDisplay :file-properties="fileProperties" :is-edit-mode="isEditMode" />
-		<FileContentElementFooter :fileProperties="fileProperties" />
+		<ContentElementFooter :fileProperties="fileProperties" />
 		<FileAlert :previewStatus="previewStatus" @on-status-reload="onFetchFile" />
 	</div>
 </template>
@@ -11,13 +11,13 @@ import { computed, defineComponent, PropType } from "vue";
 import FileAlert from "../content/alert/FileAlert.vue";
 import FileDisplay from "../content/display/FileDisplay.vue";
 import { FileProperties } from "../shared/types/file-properties";
-import FileContentElementFooter from "./footer/FileContentElementFooter.vue";
+import ContentElementFooter from "./footer/ContentElementFooter.vue";
 
 export default defineComponent({
 	name: "FileContent",
 	components: {
 		FileDisplay,
-		FileContentElementFooter,
+		ContentElementFooter,
 		FileAlert,
 	},
 	props: {
diff --git a/src/components/feature-board-file-element/content/footer/FileContentElementFooter.unit.ts b/src/components/feature-board-file-element/content/footer/ContentElementFooter.unit.ts
similarity index 86%
rename from src/components/feature-board-file-element/content/footer/FileContentElementFooter.unit.ts
rename to src/components/feature-board-file-element/content/footer/ContentElementFooter.unit.ts
index d0d2d61dd3..11ffcfa225 100644
--- a/src/components/feature-board-file-element/content/footer/FileContentElementFooter.unit.ts
+++ b/src/components/feature-board-file-element/content/footer/ContentElementFooter.unit.ts
@@ -1,10 +1,10 @@
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
 import ContentElementChips from "./chips/ContentElementChips.vue";
+import ContentElementFooter from "./ContentElementFooter.vue";
 import FileDownload from "./download/FileDownload.vue";
-import FileContentElementFooter from "./FileContentElementFooter.vue";
 
-describe("FileContentElementFooter", () => {
+describe("ContentElementFooter", () => {
 	const setup = () => {
 		document.body.setAttribute("data-app", "true");
 
@@ -17,7 +17,7 @@ describe("FileContentElementFooter", () => {
 			},
 		};
 
-		const wrapper = shallowMount(FileContentElementFooter, {
+		const wrapper = shallowMount(ContentElementFooter, {
 			propsData,
 			...createComponentMocks({}),
 		});
@@ -34,7 +34,7 @@ describe("FileContentElementFooter", () => {
 	it("should be found in dom", () => {
 		const { wrapper } = setup();
 
-		const fileContentElement = wrapper.findComponent(FileContentElementFooter);
+		const fileContentElement = wrapper.findComponent(ContentElementFooter);
 
 		expect(fileContentElement.exists()).toBe(true);
 	});
diff --git a/src/components/feature-board-file-element/content/footer/FileContentElementFooter.vue b/src/components/feature-board-file-element/content/footer/ContentElementFooter.vue
similarity index 96%
rename from src/components/feature-board-file-element/content/footer/FileContentElementFooter.vue
rename to src/components/feature-board-file-element/content/footer/ContentElementFooter.vue
index 9f55a42d47..cdf885284b 100644
--- a/src/components/feature-board-file-element/content/footer/FileContentElementFooter.vue
+++ b/src/components/feature-board-file-element/content/footer/ContentElementFooter.vue
@@ -26,7 +26,7 @@ import ContentElementChips from "./chips/ContentElementChips.vue";
 import FileDownload from "./download/FileDownload.vue";
 
 export default defineComponent({
-	name: "FileContentElementFooter",
+	name: "ContentElementFooter",
 	components: {
 		ContentElementChips,
 		FileDownload,

From c6e3a01c1710b412cd93ef04f34d1cd1a355cf98 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Thu, 7 Sep 2023 10:35:27 +0200
Subject: [PATCH 45/89] Fix test descriptions

---
 .../feature-board-file-element/content/FileContent.unit.ts  | 6 +++---
 .../content/display/FileDisplay.unit.ts                     | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/feature-board-file-element/content/FileContent.unit.ts b/src/components/feature-board-file-element/content/FileContent.unit.ts
index 4f65071b8a..eee9396d58 100644
--- a/src/components/feature-board-file-element/content/FileContent.unit.ts
+++ b/src/components/feature-board-file-element/content/FileContent.unit.ts
@@ -31,12 +31,12 @@ describe("FileContent", () => {
 		};
 	};
 
-	it("should pass props to FileDisplay", () => {
+	it("should pass props to FileContent", () => {
 		const { wrapper, fileProperties } = setup();
 
-		const fileDisplay = wrapper.findComponent(FileContent);
+		const fileContent = wrapper.findComponent(FileContent);
 
-		expect(fileDisplay.props()).toEqual({
+		expect(fileContent.props()).toEqual({
 			fileProperties,
 			isEditMode: true,
 		});
diff --git a/src/components/feature-board-file-element/content/display/FileDisplay.unit.ts b/src/components/feature-board-file-element/content/display/FileDisplay.unit.ts
index e1aabe6f8b..32364722e4 100644
--- a/src/components/feature-board-file-element/content/display/FileDisplay.unit.ts
+++ b/src/components/feature-board-file-element/content/display/FileDisplay.unit.ts
@@ -41,7 +41,7 @@ describe("FileDisplay", () => {
 			expect(fileDisplay.exists()).toBe(true);
 		});
 
-		it("should render image display component with proper props", () => {
+		it("should pass correct props to image display component", () => {
 			const { wrapper, fileNameProp, previewUrlProp } = setup();
 
 			const props = wrapper.findComponent(ImageDisplay).attributes();
@@ -88,7 +88,7 @@ describe("FileDisplay", () => {
 			};
 		};
 
-		it("should render default display component with proper props", () => {
+		it("should pass correct props to default display component", () => {
 			const { wrapper, fileNameProp } = setup();
 
 			const props = wrapper.findComponent(DefaultDisplay).attributes();

From fdb7d995cd90d6fa2871a571eee527bd31211787 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Thu, 7 Sep 2023 10:36:39 +0200
Subject: [PATCH 46/89] Fix naming in test

---
 .../feature-board-file-element/FileContentElement.unit.ts     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/feature-board-file-element/FileContentElement.unit.ts b/src/components/feature-board-file-element/FileContentElement.unit.ts
index c9ff419eb2..bdf4b91591 100644
--- a/src/components/feature-board-file-element/FileContentElement.unit.ts
+++ b/src/components/feature-board-file-element/FileContentElement.unit.ts
@@ -562,8 +562,8 @@ describe("FileContentElement", () => {
 				it("should emit delete:element on upload", async () => {
 					const { wrapper } = setup();
 
-					const initComponent = wrapper.findComponent(FileUpload);
-					initComponent.vm.$emit("upload:file", { fileName: "mysample.txt" });
+					const fileUpload = wrapper.findComponent(FileUpload);
+					fileUpload.vm.$emit("upload:file", { fileName: "mysample.txt" });
 
 					await wrapper.vm.$nextTick();
 					await wrapper.vm.$nextTick();

From 063c1bc2b39f0321fef782bdb58bd22312dc303f Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Thu, 7 Sep 2023 15:03:49 +0200
Subject: [PATCH 47/89] created alternativetext component

---
 .../display/image-display/AlternativeText.vue | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue

diff --git a/src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue b/src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue
new file mode 100644
index 0000000000..dae8746fba
--- /dev/null
+++ b/src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue
@@ -0,0 +1,38 @@
+<template>
+	<div>
+		<VTextarea
+			class="pa-0 ma-0 v-secondary-lighten1"
+			rows="1"
+			:label="$t('common.labels.alternativeText')"
+			ref="alternativeText"
+			@keyup.enter="onEnterAlternativeText"
+		></VTextarea>
+		<span class="pa-0 mt-n4 v-secondary-darken1">{{
+			$t("common.labels.altDescription")
+		}}</span>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import { VTextarea } from "vuetify/lib";
+
+export default defineComponent({
+	name: "AlternativeText",
+	props: {
+		text: { type: String, required: false },
+	},
+	emits: ["update:alternativeText"],
+	setup(props, { emit }) {
+		const alternativeText = ref<InstanceType<typeof VTextarea> | null>(null);
+
+		const onEnterAlternativeText = ($event: KeyboardEvent) => {
+			console.log(alternativeText);
+		};
+
+		return {
+			onEnterAlternativeText,
+		};
+	},
+});
+</script>

From c0c99fc4a2ae7ea30261718454f24f04cf478ac5 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Thu, 7 Sep 2023 15:04:21 +0200
Subject: [PATCH 48/89] added translations for alternative text

---
 src/locales/de.json | 2 ++
 src/locales/en.json | 2 ++
 src/locales/es.json | 2 ++
 src/locales/uk.json | 2 ++
 4 files changed, 8 insertions(+)

diff --git a/src/locales/de.json b/src/locales/de.json
index 8a75eb9d9b..91b9636339 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -23,6 +23,8 @@
 	"common.actions.download.v1.3": "Herunterladen (CC v1.3)",
 	"common.actions.logout": "Abmelden",
 	"common.labels.admin": "Admin(s)",
+	"common.labels.alternativeText": "Alternativtext",
+	"common.labels.altDescription": "Beschreiben Sie dieses Bild für Personen mit Sehbehinderung.",
 	"common.labels.updateAt": "Aktualisiert:",
 	"common.labels.createAt": "Erstellt:",
 	"common.labels.birthdate": "Geburtsdatum",
diff --git a/src/locales/en.json b/src/locales/en.json
index 16e1d38b9b..977472a7ca 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -23,6 +23,8 @@
 	"common.actions.download.v1.3": "Download (CC v1.3)",
 	"common.actions.logout": "Logout",
 	"common.labels.admin": "",
+	"common.labels.alternativeText": "Alternative Text",
+	"common.labels.altDescription": "Describe this picture for people with visual impairments.",
 	"common.labels.updateAt": "Updated:",
 	"common.labels.createAt": "Created:",
 	"common.labels.birthdate": "Date of birth",
diff --git a/src/locales/es.json b/src/locales/es.json
index 3d5e526bac..bfeeb10560 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -23,6 +23,8 @@
 	"common.actions.shareCourse": "Compartir copia de la cotización",
 	"common.actions.scrollToTop": "Desplazarse hacia arriba",
 	"common.labels.admin": "Admin(s)",
+	"common.labels.alternativeText": "Texto alternativo",
+	"common.labels.altDescription": "Describe esta imagen para personas con discapacidad visual.",
 	"common.labels.updateAt": "Actualizado:",
 	"common.labels.createAt": "Creado:",
 	"common.labels.birthdate": "Fecha de nacimiento",
diff --git a/src/locales/uk.json b/src/locales/uk.json
index 58980b6b53..e287d7e0b7 100644
--- a/src/locales/uk.json
+++ b/src/locales/uk.json
@@ -23,6 +23,8 @@
 	"common.actions.download.v1.3": "Завантажити (CC v1.3)",
 	"common.actions.logout": "Вийти з аккаунта",
 	"common.labels.admin": "адміністратор(и)",
+	"common.labels.alternativeText": "альтернативний текст",
+	"common.labels.altDescription": "Опишіть цю картинку для людей з вадами зору.",
 	"common.labels.birthdate": "Дата народження",
 	"common.labels.updateAt": "Оновлено:",
 	"common.labels.createAt": "Створено:",

From 54dfdedb44fb47590955e708420f20032f4e80fc Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Thu, 7 Sep 2023 15:06:04 +0200
Subject: [PATCH 49/89] add alternative text component to imagedisplay

---
 .../FileContentElement.vue                           |  1 +
 .../content/display/FileDisplay.vue                  |  1 +
 .../content/display/image-display/ImageDisplay.vue   |  9 +++++++++
 .../shared/types/file-properties.ts                  |  1 +
 src/serverApi/v3/api.ts                              | 12 ++++++++++++
 .../test-utils/factory/fileElementContentFactory.ts  |  1 +
 6 files changed, 25 insertions(+)

diff --git a/src/components/feature-board-file-element/FileContentElement.vue b/src/components/feature-board-file-element/FileContentElement.vue
index 41fd4fc916..67cb936318 100644
--- a/src/components/feature-board-file-element/FileContentElement.vue
+++ b/src/components/feature-board-file-element/FileContentElement.vue
@@ -98,6 +98,7 @@ export default defineComponent({
 				isDownloadAllowed: isDownloadAllowed(
 					fileRecord.value.securityCheckStatus
 				),
+				alternativeText: props.element.content.alternativeText,
 			};
 		});
 
diff --git a/src/components/feature-board-file-element/content/display/FileDisplay.vue b/src/components/feature-board-file-element/content/display/FileDisplay.vue
index a71f2fc02d..1c8e93757e 100644
--- a/src/components/feature-board-file-element/content/display/FileDisplay.vue
+++ b/src/components/feature-board-file-element/content/display/FileDisplay.vue
@@ -5,6 +5,7 @@
 			:preview-url="fileProperties.previewUrl"
 			:name="fileProperties.name"
 			:is-edit-mode="isEditMode"
+			:alternativeText="fileProperties.alternativeText"
 		/>
 		<DefaultDisplay v-else :name="fileProperties.name" />
 	</div>
diff --git a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
index efeeb6c9cc..fcc475d34b 100644
--- a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
+++ b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
@@ -3,18 +3,27 @@
 		<v-img class="rounded-t-sm" :src="previewUrl" :alt="name">
 			<div v-if="isEditMode" class="menu-background"></div>
 		</v-img>
+		<AlternativeText
+			v-if="isEditMode"
+			:text="alternativeText"
+		></AlternativeText>
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import AlternativeText from "./AlternativeText.vue";
 
 export default defineComponent({
 	name: "ImageDisplay",
+	components: {
+		AlternativeText,
+	},
 	props: {
 		previewUrl: { type: String, required: true },
 		name: { type: String, required: true },
 		isEditMode: { type: Boolean, required: true },
+		alternativeText: { type: String, required: false },
 	},
 });
 </script>
diff --git a/src/components/feature-board-file-element/shared/types/file-properties.ts b/src/components/feature-board-file-element/shared/types/file-properties.ts
index 2873a4f7d9..a62138b1c1 100644
--- a/src/components/feature-board-file-element/shared/types/file-properties.ts
+++ b/src/components/feature-board-file-element/shared/types/file-properties.ts
@@ -7,4 +7,5 @@ export interface FileProperties {
 	previewUrl?: string;
 	previewStatus: PreviewStatus;
 	isDownloadAllowed: boolean;
+	alternativeText?: string;
 }
diff --git a/src/serverApi/v3/api.ts b/src/serverApi/v3/api.ts
index 48c7346b1b..4830164f12 100644
--- a/src/serverApi/v3/api.ts
+++ b/src/serverApi/v3/api.ts
@@ -1573,6 +1573,12 @@ export interface FileContentBody {
      * @memberof FileContentBody
      */
     caption: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof FileContentBody
+     */
+    alternativeText?: string;
 }
 /**
  * 
@@ -1586,6 +1592,12 @@ export interface FileElementContent {
      * @memberof FileElementContent
      */
     caption: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof FileElementContent
+     */
+    alternativeText: string;
 }
 /**
  * 
diff --git a/tests/test-utils/factory/fileElementContentFactory.ts b/tests/test-utils/factory/fileElementContentFactory.ts
index f9a9c927c0..27b04029b8 100644
--- a/tests/test-utils/factory/fileElementContentFactory.ts
+++ b/tests/test-utils/factory/fileElementContentFactory.ts
@@ -4,5 +4,6 @@ import { Factory } from "fishery";
 export const fileElementContent = Factory.define<FileElementContent>(
 	({ sequence }) => ({
 		caption: "caption",
+		alternativeText: "alternativeText",
 	})
 );

From b392836008e316a6960918576645d39762030632 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Fri, 8 Sep 2023 10:14:21 +0200
Subject: [PATCH 50/89] added fileelementresponse

---
 .../FileContentElement.vue                    |  2 +-
 .../content/display/FileDisplay.vue           |  2 +-
 .../display/image-display/AlternativeText.vue | 26 +++++++++----------
 .../display/image-display/ImageDisplay.vue    | 10 +++----
 .../shared/types/file-properties.ts           |  3 ++-
 5 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/components/feature-board-file-element/FileContentElement.vue b/src/components/feature-board-file-element/FileContentElement.vue
index 67cb936318..4122d0879d 100644
--- a/src/components/feature-board-file-element/FileContentElement.vue
+++ b/src/components/feature-board-file-element/FileContentElement.vue
@@ -98,7 +98,7 @@ export default defineComponent({
 				isDownloadAllowed: isDownloadAllowed(
 					fileRecord.value.securityCheckStatus
 				),
-				alternativeText: props.element.content.alternativeText,
+				element: props.element,
 			};
 		});
 
diff --git a/src/components/feature-board-file-element/content/display/FileDisplay.vue b/src/components/feature-board-file-element/content/display/FileDisplay.vue
index 1c8e93757e..219ef68acf 100644
--- a/src/components/feature-board-file-element/content/display/FileDisplay.vue
+++ b/src/components/feature-board-file-element/content/display/FileDisplay.vue
@@ -5,7 +5,7 @@
 			:preview-url="fileProperties.previewUrl"
 			:name="fileProperties.name"
 			:is-edit-mode="isEditMode"
-			:alternativeText="fileProperties.alternativeText"
+			:element="fileProperties.element"
 		/>
 		<DefaultDisplay v-else :name="fileProperties.name" />
 	</div>
diff --git a/src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue b/src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue
index dae8746fba..8b28158fa5 100644
--- a/src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue
+++ b/src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue
@@ -1,12 +1,11 @@
 <template>
 	<div>
-		<VTextarea
+		<v-textarea
+			v-model="modelValue.alternativeText"
 			class="pa-0 ma-0 v-secondary-lighten1"
 			rows="1"
 			:label="$t('common.labels.alternativeText')"
-			ref="alternativeText"
-			@keyup.enter="onEnterAlternativeText"
-		></VTextarea>
+		></v-textarea>
 		<span class="pa-0 mt-n4 v-secondary-darken1">{{
 			$t("common.labels.altDescription")
 		}}</span>
@@ -14,24 +13,23 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
-import { VTextarea } from "vuetify/lib";
+import { FileElementResponse } from "@/serverApi/v3";
+import { useContentElementState } from "@data-board";
+import { defineComponent, PropType } from "vue";
 
 export default defineComponent({
 	name: "AlternativeText",
 	props: {
-		text: { type: String, required: false },
+		element: { type: Object as PropType<FileElementResponse>, required: true },
 	},
-	emits: ["update:alternativeText"],
 	setup(props, { emit }) {
-		const alternativeText = ref<InstanceType<typeof VTextarea> | null>(null);
-
-		const onEnterAlternativeText = ($event: KeyboardEvent) => {
-			console.log(alternativeText);
-		};
+		const { modelValue } = useContentElementState({
+			element: props.element,
+			isEditMode: true,
+		});
 
 		return {
-			onEnterAlternativeText,
+			modelValue,
 		};
 	},
 });
diff --git a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
index fcc475d34b..8065fc6971 100644
--- a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
+++ b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
@@ -3,15 +3,13 @@
 		<v-img class="rounded-t-sm" :src="previewUrl" :alt="name">
 			<div v-if="isEditMode" class="menu-background"></div>
 		</v-img>
-		<AlternativeText
-			v-if="isEditMode"
-			:text="alternativeText"
-		></AlternativeText>
+		<AlternativeText v-if="isEditMode" :element="element"></AlternativeText>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { FileElementResponse } from "@/serverApi/v3";
+import { defineComponent, PropType } from "vue";
 import AlternativeText from "./AlternativeText.vue";
 
 export default defineComponent({
@@ -23,7 +21,7 @@ export default defineComponent({
 		previewUrl: { type: String, required: true },
 		name: { type: String, required: true },
 		isEditMode: { type: Boolean, required: true },
-		alternativeText: { type: String, required: false },
+		element: { type: Object as PropType<FileElementResponse>, required: true },
 	},
 });
 </script>
diff --git a/src/components/feature-board-file-element/shared/types/file-properties.ts b/src/components/feature-board-file-element/shared/types/file-properties.ts
index a62138b1c1..98f903fc1f 100644
--- a/src/components/feature-board-file-element/shared/types/file-properties.ts
+++ b/src/components/feature-board-file-element/shared/types/file-properties.ts
@@ -1,4 +1,5 @@
 import { PreviewStatus } from "@/fileStorageApi/v3";
+import { FileElementResponse } from "@/serverApi/v3";
 
 export interface FileProperties {
 	name: string;
@@ -7,5 +8,5 @@ export interface FileProperties {
 	previewUrl?: string;
 	previewStatus: PreviewStatus;
 	isDownloadAllowed: boolean;
-	alternativeText?: string;
+	element: FileElementResponse;
 }

From 9201ec0b81ce256a989c4e61ee6e60fe4172f4f7 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Fri, 8 Sep 2023 11:53:07 +0200
Subject: [PATCH 51/89] rename translation names

---
 src/locales/de.json | 4 ++--
 src/locales/en.json | 4 ++--
 src/locales/es.json | 4 ++--
 src/locales/uk.json | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/locales/de.json b/src/locales/de.json
index 91b9636339..4d64ab02f5 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -23,8 +23,6 @@
 	"common.actions.download.v1.3": "Herunterladen (CC v1.3)",
 	"common.actions.logout": "Abmelden",
 	"common.labels.admin": "Admin(s)",
-	"common.labels.alternativeText": "Alternativtext",
-	"common.labels.altDescription": "Beschreiben Sie dieses Bild für Personen mit Sehbehinderung.",
 	"common.labels.updateAt": "Aktualisiert:",
 	"common.labels.createAt": "Erstellt:",
 	"common.labels.birthdate": "Geburtsdatum",
@@ -784,6 +782,8 @@
 	"components.molecules.TaskItemMenu.labels.createdAt": "Erstellt",
 	"components.cardElement.deleteElement": "löschen",
 	"components.cardElement.dragElement": "verschieben",
+	"components.cardElement.fileElement.alternativeText": "Alternativtext",
+	"components.cardElement.fileElement.altDescription": "Beschreiben Sie dieses Bild für Personen mit Sehbehinderung.",
 	"components.cardElement.fileElement.virusDetected": "Datei wurde aufgrund eines Virenverdachts gesperrt.",
 	"components.cardElement.fileElement.awaitingScan": "Vorschau wird nach erfolgreicher Virenprüfung angezeigt. Aktuell wird die Datei gescannt.",
 	"components.cardElement.fileElement.scanError": "Fehler bei der Virenprüfung. Vorschau kann nicht erstellt werden. Datei bitte erneut hochladen.",
diff --git a/src/locales/en.json b/src/locales/en.json
index 977472a7ca..7974e7a4e8 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -23,8 +23,6 @@
 	"common.actions.download.v1.3": "Download (CC v1.3)",
 	"common.actions.logout": "Logout",
 	"common.labels.admin": "",
-	"common.labels.alternativeText": "Alternative Text",
-	"common.labels.altDescription": "Describe this picture for people with visual impairments.",
 	"common.labels.updateAt": "Updated:",
 	"common.labels.createAt": "Created:",
 	"common.labels.birthdate": "Date of birth",
@@ -782,6 +780,8 @@
 	"components.molecules.TaskItemMenu.labels.createdAt": "Created",
 	"components.cardElement.deleteElement": "Delete element",
 	"components.cardElement.dragElement": "Move element",
+	"components.cardElement.fileElement.alternativeText": "Alternative Text",
+	"components.cardElement.fileElement.altDescription": "Describe this picture for people with visual impairments.",
 	"components.cardElement.fileElement.virusDetected": "File has been locked due to a suspected virus.",
 	"components.cardElement.fileElement.awaitingScan": "Preview is displayed after a successful virus scan. The file is currently being scanned.",
 	"components.cardElement.fileElement.scanError": "Error during virus check. Preview cannot be created. Please upload the file again.",
diff --git a/src/locales/es.json b/src/locales/es.json
index bfeeb10560..5259341704 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -23,8 +23,6 @@
 	"common.actions.shareCourse": "Compartir copia de la cotización",
 	"common.actions.scrollToTop": "Desplazarse hacia arriba",
 	"common.labels.admin": "Admin(s)",
-	"common.labels.alternativeText": "Texto alternativo",
-	"common.labels.altDescription": "Describe esta imagen para personas con discapacidad visual.",
 	"common.labels.updateAt": "Actualizado:",
 	"common.labels.createAt": "Creado:",
 	"common.labels.birthdate": "Fecha de nacimiento",
@@ -792,6 +790,8 @@
 	"components.molecules.TaskItemMenu.labels.createdAt": "Creado",
 	"components.cardElement.deleteElement": "Suprimir elemento",
 	"components.cardElement.dragElement": "Mover elemento",
+	"components.cardElement.fileElement.alternativeText": "Texto alternativo",
+	"components.cardElement.fileElement.altDescription": "Describe esta imagen para personas con discapacidad visual.",
 	"components.cardElement.fileElement.virusDetected": "Se ha bloqueado el archivo debido a un virus sospechoso.",
 	"components.cardElement.fileElement.awaitingScan": "La vista previa se muestra después de una comprobación de virus correcta. El fichero se está analizando actualmente.",
 	"components.cardElement.fileElement.scanError": "Error durante la comprobación de virus. No se puede crear la vista previa. Vuelva a cargar el archivo.",
diff --git a/src/locales/uk.json b/src/locales/uk.json
index e287d7e0b7..b504825561 100644
--- a/src/locales/uk.json
+++ b/src/locales/uk.json
@@ -23,8 +23,6 @@
 	"common.actions.download.v1.3": "Завантажити (CC v1.3)",
 	"common.actions.logout": "Вийти з аккаунта",
 	"common.labels.admin": "адміністратор(и)",
-	"common.labels.alternativeText": "альтернативний текст",
-	"common.labels.altDescription": "Опишіть цю картинку для людей з вадами зору.",
 	"common.labels.birthdate": "Дата народження",
 	"common.labels.updateAt": "Оновлено:",
 	"common.labels.createAt": "Створено:",
@@ -311,6 +309,8 @@
 	"components.molecules.VCustomChipTimeRemaining.hintMinutes": "",
 	"components.cardElement.deleteElement": "Видалити елемент",
 	"components.cardElement.dragElement": "Перемістити елемент",
+	"components.cardElement.fileElement.alternativeText": "альтернативний текст",
+	"components.cardElement.fileElement.altDescription": "Опишіть цю картинку для людей з вадами зору.",
 	"components.cardElement.fileElement.virusDetected": "Файл було заблоковано через підозру на вірус.",
 	"components.cardElement.fileElement.awaitingScan": "Попередній перегляд відображається після успішної перевірки на віруси. Наразі відбувається перевірка файлу.",
 	"components.cardElement.fileElement.scanError": "Помилка під час перевірки на віруси. Неможливо створити попередній перегляд. Будь ласка, завантажте файл ще раз.",

From 7d3d84f1423094d93d19b43c7b2ca1b3b97aff0d Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Fri, 8 Sep 2023 11:55:01 +0200
Subject: [PATCH 52/89] add text for empty alt

---
 .../display/image-display/AlternativeText.vue     |  8 +++-----
 .../display/image-display/ImageDisplay.vue        | 15 +++++++++++++--
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue b/src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue
index 8b28158fa5..d1a52540b8 100644
--- a/src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue
+++ b/src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue
@@ -4,11 +4,9 @@
 			v-model="modelValue.alternativeText"
 			class="pa-0 ma-0 v-secondary-lighten1"
 			rows="1"
-			:label="$t('common.labels.alternativeText')"
+			:label="$t('components.cardElement.fileElement.altDescription')"
+			:placeholder="$t('components.cardElement.fileElement.alternativeText')"
 		></v-textarea>
-		<span class="pa-0 mt-n4 v-secondary-darken1">{{
-			$t("common.labels.altDescription")
-		}}</span>
 	</div>
 </template>
 
@@ -22,7 +20,7 @@ export default defineComponent({
 	props: {
 		element: { type: Object as PropType<FileElementResponse>, required: true },
 	},
-	setup(props, { emit }) {
+	setup(props) {
 		const { modelValue } = useContentElementState({
 			element: props.element,
 			isEditMode: true,
diff --git a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
index 8065fc6971..59456d4f76 100644
--- a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
+++ b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<v-img class="rounded-t-sm" :src="previewUrl" :alt="name">
+		<v-img class="rounded-t-sm" :src="previewUrl" :alt="alternativeText">
 			<div v-if="isEditMode" class="menu-background"></div>
 		</v-img>
 		<AlternativeText v-if="isEditMode" :element="element"></AlternativeText>
@@ -9,7 +9,7 @@
 
 <script lang="ts">
 import { FileElementResponse } from "@/serverApi/v3";
-import { defineComponent, PropType } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 import AlternativeText from "./AlternativeText.vue";
 
 export default defineComponent({
@@ -23,6 +23,17 @@ export default defineComponent({
 		isEditMode: { type: Boolean, required: true },
 		element: { type: Object as PropType<FileElementResponse>, required: true },
 	},
+	setup(props) {
+		const alternativeText = computed(() => {
+			return props.element.content.alternativeText
+				? props.element.content.alternativeText
+				: `Hier ist ein Bild mit folgendem Namen ${props.name}`;
+		});
+
+		return {
+			alternativeText,
+		};
+	},
 });
 </script>
 

From ba5267eb85dc63c635d88eaebe6b24c72f428970 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Fri, 8 Sep 2023 12:52:42 +0200
Subject: [PATCH 53/89] check for empty alt

---
 .../content/display/image-display/ImageDisplay.vue   | 12 ++++++++++--
 src/locales/de.json                                  |  1 +
 src/locales/en.json                                  |  1 +
 src/locales/es.json                                  |  1 +
 src/locales/uk.json                                  |  1 +
 5 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
index 59456d4f76..860ee3ff67 100644
--- a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
+++ b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
@@ -9,6 +9,7 @@
 
 <script lang="ts">
 import { FileElementResponse } from "@/serverApi/v3";
+import { I18N_KEY, injectStrict } from "@/utils/inject";
 import { computed, defineComponent, PropType } from "vue";
 import AlternativeText from "./AlternativeText.vue";
 
@@ -24,10 +25,17 @@ export default defineComponent({
 		element: { type: Object as PropType<FileElementResponse>, required: true },
 	},
 	setup(props) {
+		const i18n = injectStrict(I18N_KEY);
+
 		const alternativeText = computed(() => {
-			return props.element.content.alternativeText
+			const altTranslation = i18n.t(
+				"components.cardElement.fileElement.emptyAlt"
+			);
+			const altText = props.element.content.alternativeText
 				? props.element.content.alternativeText
-				: `Hier ist ein Bild mit folgendem Namen ${props.name}`;
+				: `${altTranslation} ${props.name}`;
+
+			return altText;
 		});
 
 		return {
diff --git a/src/locales/de.json b/src/locales/de.json
index 4d64ab02f5..c350bcdc46 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -784,6 +784,7 @@
 	"components.cardElement.dragElement": "verschieben",
 	"components.cardElement.fileElement.alternativeText": "Alternativtext",
 	"components.cardElement.fileElement.altDescription": "Beschreiben Sie dieses Bild für Personen mit Sehbehinderung.",
+	"components.cardElement.fileElement.emptyAlt": "Hier ist ein Bild mit folgendem Namen",
 	"components.cardElement.fileElement.virusDetected": "Datei wurde aufgrund eines Virenverdachts gesperrt.",
 	"components.cardElement.fileElement.awaitingScan": "Vorschau wird nach erfolgreicher Virenprüfung angezeigt. Aktuell wird die Datei gescannt.",
 	"components.cardElement.fileElement.scanError": "Fehler bei der Virenprüfung. Vorschau kann nicht erstellt werden. Datei bitte erneut hochladen.",
diff --git a/src/locales/en.json b/src/locales/en.json
index 7974e7a4e8..75f1269583 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -782,6 +782,7 @@
 	"components.cardElement.dragElement": "Move element",
 	"components.cardElement.fileElement.alternativeText": "Alternative Text",
 	"components.cardElement.fileElement.altDescription": "Describe this picture for people with visual impairments.",
+	"components.cardElement.fileElement.emptyAlt": "Here is an image with the following name",
 	"components.cardElement.fileElement.virusDetected": "File has been locked due to a suspected virus.",
 	"components.cardElement.fileElement.awaitingScan": "Preview is displayed after a successful virus scan. The file is currently being scanned.",
 	"components.cardElement.fileElement.scanError": "Error during virus check. Preview cannot be created. Please upload the file again.",
diff --git a/src/locales/es.json b/src/locales/es.json
index 5259341704..b76c66d3c4 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -792,6 +792,7 @@
 	"components.cardElement.dragElement": "Mover elemento",
 	"components.cardElement.fileElement.alternativeText": "Texto alternativo",
 	"components.cardElement.fileElement.altDescription": "Describe esta imagen para personas con discapacidad visual.",
+	"components.cardElement.fileElement.emptyAlt": "Aquí tenéis una imagen con el siguiente nombre",
 	"components.cardElement.fileElement.virusDetected": "Se ha bloqueado el archivo debido a un virus sospechoso.",
 	"components.cardElement.fileElement.awaitingScan": "La vista previa se muestra después de una comprobación de virus correcta. El fichero se está analizando actualmente.",
 	"components.cardElement.fileElement.scanError": "Error durante la comprobación de virus. No se puede crear la vista previa. Vuelva a cargar el archivo.",
diff --git a/src/locales/uk.json b/src/locales/uk.json
index b504825561..052763ce8e 100644
--- a/src/locales/uk.json
+++ b/src/locales/uk.json
@@ -311,6 +311,7 @@
 	"components.cardElement.dragElement": "Перемістити елемент",
 	"components.cardElement.fileElement.alternativeText": "альтернативний текст",
 	"components.cardElement.fileElement.altDescription": "Опишіть цю картинку для людей з вадами зору.",
+	"components.cardElement.fileElement.emptyAlt": "Ось зображення з такою назвою",
 	"components.cardElement.fileElement.virusDetected": "Файл було заблоковано через підозру на вірус.",
 	"components.cardElement.fileElement.awaitingScan": "Попередній перегляд відображається після успішної перевірки на віруси. Наразі відбувається перевірка файлу.",
 	"components.cardElement.fileElement.scanError": "Помилка під час перевірки на віруси. Неможливо створити попередній перегляд. Будь ласка, завантажте файл ще раз.",

From 65fe479f9f8ac23e64f7caa9d8233a0e2d30569f Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Fri, 8 Sep 2023 13:20:06 +0200
Subject: [PATCH 54/89] move alt text component in filecontent

---
 .../feature-board-file-element/content/FileContent.vue |  6 ++++++
 .../content/display/image-display/AlternativeText.vue  | 10 +++++-----
 .../content/display/image-display/ImageDisplay.vue     |  5 -----
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/feature-board-file-element/content/FileContent.vue b/src/components/feature-board-file-element/content/FileContent.vue
index e86c291eef..a673ef70d5 100644
--- a/src/components/feature-board-file-element/content/FileContent.vue
+++ b/src/components/feature-board-file-element/content/FileContent.vue
@@ -1,6 +1,10 @@
 <template>
 	<div>
 		<FileDisplay :file-properties="fileProperties" :is-edit-mode="isEditMode" />
+		<AlternativeText
+			v-if="isEditMode && fileProperties.previewUrl"
+			:element="fileProperties.element"
+		></AlternativeText>
 		<ContentElementFooter :fileProperties="fileProperties" />
 		<FileAlert :previewStatus="previewStatus" @on-status-reload="onFetchFile" />
 	</div>
@@ -11,6 +15,7 @@ import { computed, defineComponent, PropType } from "vue";
 import FileAlert from "../content/alert/FileAlert.vue";
 import FileDisplay from "../content/display/FileDisplay.vue";
 import { FileProperties } from "../shared/types/file-properties";
+import AlternativeText from "./display/image-display/AlternativeText.vue";
 import ContentElementFooter from "./footer/ContentElementFooter.vue";
 
 export default defineComponent({
@@ -19,6 +24,7 @@ export default defineComponent({
 		FileDisplay,
 		ContentElementFooter,
 		FileAlert,
+		AlternativeText,
 	},
 	props: {
 		fileProperties: {
diff --git a/src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue b/src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue
index d1a52540b8..d824224d39 100644
--- a/src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue
+++ b/src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue
@@ -1,13 +1,13 @@
 <template>
-	<div>
+	<v-container class="grey lighten-3">
 		<v-textarea
 			v-model="modelValue.alternativeText"
-			class="pa-0 ma-0 v-secondary-lighten1"
+			class="pt-2 ma-0 v-secondary-lighten1"
 			rows="1"
-			:label="$t('components.cardElement.fileElement.altDescription')"
-			:placeholder="$t('components.cardElement.fileElement.alternativeText')"
+			:placeholder="$t('components.cardElement.fileElement.altDescription')"
+			:label="$t('components.cardElement.fileElement.alternativeText')"
 		></v-textarea>
-	</div>
+	</v-container>
 </template>
 
 <script lang="ts">
diff --git a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
index 860ee3ff67..6d2caeff34 100644
--- a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
+++ b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
@@ -3,7 +3,6 @@
 		<v-img class="rounded-t-sm" :src="previewUrl" :alt="alternativeText">
 			<div v-if="isEditMode" class="menu-background"></div>
 		</v-img>
-		<AlternativeText v-if="isEditMode" :element="element"></AlternativeText>
 	</div>
 </template>
 
@@ -11,13 +10,9 @@
 import { FileElementResponse } from "@/serverApi/v3";
 import { I18N_KEY, injectStrict } from "@/utils/inject";
 import { computed, defineComponent, PropType } from "vue";
-import AlternativeText from "./AlternativeText.vue";
 
 export default defineComponent({
 	name: "ImageDisplay",
-	components: {
-		AlternativeText,
-	},
 	props: {
 		previewUrl: { type: String, required: true },
 		name: { type: String, required: true },

From 48f8ad3b0a4680fd91911528f54795f99d94ad02 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Fri, 8 Sep 2023 14:26:44 +0200
Subject: [PATCH 55/89] add test for alternativetext component

---
 .../image-display/AlternativeText.unit.ts     | 37 +++++++++++++++++++
 .../display/image-display/AlternativeText.vue |  2 +-
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 src/components/feature-board-file-element/content/display/image-display/AlternativeText.unit.ts

diff --git a/src/components/feature-board-file-element/content/display/image-display/AlternativeText.unit.ts b/src/components/feature-board-file-element/content/display/image-display/AlternativeText.unit.ts
new file mode 100644
index 0000000000..597efcaa2b
--- /dev/null
+++ b/src/components/feature-board-file-element/content/display/image-display/AlternativeText.unit.ts
@@ -0,0 +1,37 @@
+import { fileElementResponseFactory } from "@@/tests/test-utils";
+import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { shallowMount } from "@vue/test-utils";
+import AlternativeText from "./AlternativeText.vue";
+
+jest.mock("@data-board", () => {
+	return {
+		useContentElementState: jest.fn(() => ({
+			modelValue: { alternativeText: "alt text" },
+		})),
+	};
+});
+
+describe("AlternativeText", () => {
+	const setup = () => {
+		document.body.setAttribute("data-app", "true");
+
+		const propsData = { element: fileElementResponseFactory.build() };
+
+		const wrapper = shallowMount(AlternativeText, {
+			propsData,
+			...createComponentMocks({}),
+		});
+
+		return {
+			wrapper,
+		};
+	};
+
+	it("should be found in dom", () => {
+		const { wrapper } = setup();
+
+		const fileContentElement = wrapper.findComponent(AlternativeText);
+
+		expect(fileContentElement.exists()).toBe(true);
+	});
+});
diff --git a/src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue b/src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue
index d824224d39..aff43d11f2 100644
--- a/src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue
+++ b/src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue
@@ -4,7 +4,7 @@
 			v-model="modelValue.alternativeText"
 			class="pt-2 ma-0 v-secondary-lighten1"
 			rows="1"
-			:placeholder="$t('components.cardElement.fileElement.altDescription')"
+			:hint="$t('components.cardElement.fileElement.altDescription')"
 			:label="$t('components.cardElement.fileElement.alternativeText')"
 		></v-textarea>
 	</v-container>

From 2a1996613964a67a8ca58912715ac13f511ec756 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Fri, 8 Sep 2023 14:37:16 +0200
Subject: [PATCH 56/89] fix test

---
 .../feature-board-file-element/FileContentElement.unit.ts       | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/feature-board-file-element/FileContentElement.unit.ts b/src/components/feature-board-file-element/FileContentElement.unit.ts
index bdf4b91591..861c263d74 100644
--- a/src/components/feature-board-file-element/FileContentElement.unit.ts
+++ b/src/components/feature-board-file-element/FileContentElement.unit.ts
@@ -152,6 +152,7 @@ describe("FileContentElement", () => {
 					previewUrl: convertDownloadToPreviewUrl(fileRecordResponse.url),
 					size: fileRecordResponse.size,
 					previewStatus: fileRecordResponse.previewStatus,
+					element,
 				};
 
 				const { wrapper, deleteElementMock } = getWrapper({
@@ -600,6 +601,7 @@ describe("FileContentElement", () => {
 					previewUrl: convertDownloadToPreviewUrl(fileRecordResponse.url),
 					size: fileRecordResponse.size,
 					previewStatus: fileRecordResponse.previewStatus,
+					element,
 				};
 
 				const { wrapper, deleteElementMock } = getWrapper({

From ac7415dc7e17c59d1589f85f5a1150697944d9f1 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Fri, 8 Sep 2023 14:56:08 +0200
Subject: [PATCH 57/89] test for imagedisplay

---
 .../image-display/ImageDisplay.unit.ts        | 40 ++++++++++++++-----
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
index d35ecc54f5..e7722e545f 100644
--- a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
+++ b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
@@ -1,26 +1,34 @@
+import { I18N_KEY } from "@/utils/inject";
+import { fileElementResponseFactory, i18nMock } from "@@/tests/test-utils";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
 import ImageDisplay from "./ImageDisplay.vue";
 
 describe("ImageDisplay", () => {
-	const setup = (isEditMode: boolean) => {
+	const setup = (isEditMode: boolean, alternativeText?: string) => {
 		document.body.setAttribute("data-app", "true");
 
+		const element = fileElementResponseFactory.build();
 		const propsData = {
 			name: "file-record #1.txt",
 			previewUrl: "preview/1/file-record #1.txt",
 			isEditMode,
+			element,
 		};
 
 		const wrapper = shallowMount(ImageDisplay, {
 			propsData,
-			...createComponentMocks({}),
+			...createComponentMocks({ i18n: true }),
+			provide: {
+				[I18N_KEY.valueOf()]: i18nMock,
+			},
 		});
 
 		return {
 			wrapper,
 			fileNameProp: propsData.name,
 			previewUrl: propsData.previewUrl,
+			element,
 		};
 	};
 	const vImageSelektor = "v-img-stub";
@@ -50,14 +58,6 @@ describe("ImageDisplay", () => {
 			expect(src).toBe(previewUrl);
 		});
 
-		it("should have set alt correctly", () => {
-			const { wrapper, fileNameProp } = setup(false);
-
-			const alt = wrapper.find(vImageSelektor).attributes("alt");
-
-			expect(alt).toBe(fileNameProp);
-		});
-
 		it("should not display div with class 'menu-background'", () => {
 			const { wrapper } = setup(false);
 
@@ -66,6 +66,26 @@ describe("ImageDisplay", () => {
 
 			expect(div.exists()).toBe(false);
 		});
+
+		describe("When alternative text is defined", () => {
+			it("should have set alt correctly", () => {
+				const { wrapper, element } = setup(false);
+
+				const alt = wrapper.find(vImageSelektor).attributes("alt");
+
+				expect(alt).toBe(element.content.alternativeText);
+			});
+		});
+
+		describe("When alternative text is undefined", () => {
+			it("should have set alt correctly", () => {
+				const { wrapper, element } = setup(false);
+
+				const alt = wrapper.find(vImageSelektor).attributes("alt");
+
+				expect(alt).toBe(element.content.alternativeText);
+			});
+		});
 	});
 
 	describe("when isEditMode is true", () => {

From 25efee9723bfb8156ba98f2c25f494b39d38b773 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Mon, 11 Sep 2023 08:02:58 +0200
Subject: [PATCH 58/89] Add tests for alternative text

---
 .../image-display/AlternativeText.unit.ts     | 41 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/components/feature-board-file-element/content/display/image-display/AlternativeText.unit.ts b/src/components/feature-board-file-element/content/display/image-display/AlternativeText.unit.ts
index 597efcaa2b..3b3aa59fcf 100644
--- a/src/components/feature-board-file-element/content/display/image-display/AlternativeText.unit.ts
+++ b/src/components/feature-board-file-element/content/display/image-display/AlternativeText.unit.ts
@@ -3,10 +3,11 @@ import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
 import AlternativeText from "./AlternativeText.vue";
 
+const alternativeText = "alt text";
 jest.mock("@data-board", () => {
 	return {
 		useContentElementState: jest.fn(() => ({
-			modelValue: { alternativeText: "alt text" },
+			modelValue: { alternativeText },
 		})),
 	};
 });
@@ -34,4 +35,42 @@ describe("AlternativeText", () => {
 
 		expect(fileContentElement.exists()).toBe(true);
 	});
+
+	it("should have the modelValue as value", async () => {
+		const { wrapper } = setup();
+
+		const textarea = wrapper.find("v-textarea-stub");
+
+		const valueAttribute = textarea.attributes("value");
+
+		expect(valueAttribute).toBe(alternativeText);
+	});
+
+	it("should have a hint translation", async () => {
+		const { wrapper } = setup();
+
+		const textarea = wrapper.find("v-textarea-stub");
+
+		const hint = textarea.attributes("hint");
+
+		expect(hint).toBe(
+			wrapper.vm.$i18n
+				.t("components.cardElement.fileElement.altDescription")
+				.toString()
+		);
+	});
+
+	it("should have a label translation", async () => {
+		const { wrapper } = setup();
+
+		const textarea = wrapper.find("v-textarea-stub");
+
+		const label = textarea.attributes("label");
+
+		expect(label).toBe(
+			wrapper.vm.$i18n
+				.t("components.cardElement.fileElement.alternativeText")
+				.toString()
+		);
+	});
 });

From 4a4ea7074fe1db2b75a8f306f036f2d97c85af7c Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Mon, 11 Sep 2023 08:16:45 +0200
Subject: [PATCH 59/89] Add alternativeText to ImageDisplay test setup

---
 .../image-display/ImageDisplay.unit.ts        | 60 ++++++++++++++-----
 1 file changed, 45 insertions(+), 15 deletions(-)

diff --git a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
index e7722e545f..df6feca7db 100644
--- a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
+++ b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
@@ -5,14 +5,16 @@ import { shallowMount } from "@vue/test-utils";
 import ImageDisplay from "./ImageDisplay.vue";
 
 describe("ImageDisplay", () => {
-	const setup = (isEditMode: boolean, alternativeText?: string) => {
+	const setup = (props: { isEditMode: boolean; alternativeText?: string }) => {
 		document.body.setAttribute("data-app", "true");
 
-		const element = fileElementResponseFactory.build();
+		const element = fileElementResponseFactory.build({
+			content: { alternativeText: props.alternativeText },
+		});
 		const propsData = {
 			name: "file-record #1.txt",
 			previewUrl: "preview/1/file-record #1.txt",
-			isEditMode,
+			isEditMode: props.isEditMode,
 			element,
 		};
 
@@ -35,7 +37,7 @@ describe("ImageDisplay", () => {
 
 	describe("when isEditMode is false", () => {
 		it("should be found in dom", () => {
-			const { wrapper } = setup(false);
+			const { wrapper } = setup({ isEditMode: false });
 
 			const fileContentElement = wrapper.findComponent(ImageDisplay);
 
@@ -43,7 +45,7 @@ describe("ImageDisplay", () => {
 		});
 
 		it("should display image", () => {
-			const { wrapper } = setup(false);
+			const { wrapper } = setup({ isEditMode: false });
 
 			const image = wrapper.find(vImageSelektor);
 
@@ -51,7 +53,7 @@ describe("ImageDisplay", () => {
 		});
 
 		it("should have set src correctly", () => {
-			const { wrapper, previewUrl } = setup(false);
+			const { wrapper, previewUrl } = setup({ isEditMode: false });
 
 			const src = wrapper.find(vImageSelektor).attributes("src");
 
@@ -59,7 +61,7 @@ describe("ImageDisplay", () => {
 		});
 
 		it("should not display div with class 'menu-background'", () => {
-			const { wrapper } = setup(false);
+			const { wrapper } = setup({ isEditMode: false });
 
 			const div = wrapper.find(".menu-background");
 			console.log(wrapper.props());
@@ -69,17 +71,21 @@ describe("ImageDisplay", () => {
 
 		describe("When alternative text is defined", () => {
 			it("should have set alt correctly", () => {
-				const { wrapper, element } = setup(false);
+				const alternativeText = "alternative text";
+				const { wrapper } = setup({
+					isEditMode: false,
+					alternativeText,
+				});
 
 				const alt = wrapper.find(vImageSelektor).attributes("alt");
 
-				expect(alt).toBe(element.content.alternativeText);
+				expect(alt).toBe(alternativeText);
 			});
 		});
 
 		describe("When alternative text is undefined", () => {
 			it("should have set alt correctly", () => {
-				const { wrapper, element } = setup(false);
+				const { wrapper, element } = setup({ isEditMode: false });
 
 				const alt = wrapper.find(vImageSelektor).attributes("alt");
 
@@ -90,7 +96,7 @@ describe("ImageDisplay", () => {
 
 	describe("when isEditMode is true", () => {
 		it("should be found in dom", () => {
-			const { wrapper } = setup(true);
+			const { wrapper } = setup({ isEditMode: true });
 
 			const fileContentElement = wrapper.findComponent(ImageDisplay);
 
@@ -98,7 +104,7 @@ describe("ImageDisplay", () => {
 		});
 
 		it("should display image", () => {
-			const { wrapper } = setup(true);
+			const { wrapper } = setup({ isEditMode: true });
 
 			const image = wrapper.find(vImageSelektor);
 
@@ -106,7 +112,7 @@ describe("ImageDisplay", () => {
 		});
 
 		it("should have set src correctly", () => {
-			const { wrapper, previewUrl } = setup(true);
+			const { wrapper, previewUrl } = setup({ isEditMode: true });
 
 			const src = wrapper.find(vImageSelektor).attributes("src");
 
@@ -114,7 +120,7 @@ describe("ImageDisplay", () => {
 		});
 
 		it("should have set alt correctly", () => {
-			const { wrapper, fileNameProp } = setup(true);
+			const { wrapper, fileNameProp } = setup({ isEditMode: true });
 
 			const alt = wrapper.find(vImageSelektor).attributes("alt");
 
@@ -122,11 +128,35 @@ describe("ImageDisplay", () => {
 		});
 
 		it("should display div with class 'menu-background'", () => {
-			const { wrapper } = setup(true);
+			const { wrapper } = setup({ isEditMode: true });
 
 			const div = wrapper.find(".menu-background");
 
 			expect(div.exists()).toBe(true);
 		});
+
+		describe("When alternative text is defined", () => {
+			it("should have set alt correctly", () => {
+				const alternativeText = "alternative text";
+				const { wrapper } = setup({
+					isEditMode: true,
+					alternativeText,
+				});
+
+				const alt = wrapper.find(vImageSelektor).attributes("alt");
+
+				expect(alt).toBe(alternativeText);
+			});
+		});
+
+		describe("When alternative text is undefined", () => {
+			it("should have set alt correctly", () => {
+				const { wrapper, element } = setup({ isEditMode: true });
+
+				const alt = wrapper.find(vImageSelektor).attributes("alt");
+
+				expect(alt).toBe(element.content.alternativeText);
+			});
+		});
 	});
 });

From 781a4b4dddaea9bf95da63f43bbe1abd539e7090 Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Mon, 11 Sep 2023 08:30:10 +0200
Subject: [PATCH 60/89] Remove div in image-display

---
 .../content/display/image-display/ImageDisplay.vue        | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
index 6d2caeff34..4134668092 100644
--- a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
+++ b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
@@ -1,9 +1,7 @@
 <template>
-	<div>
-		<v-img class="rounded-t-sm" :src="previewUrl" :alt="alternativeText">
-			<div v-if="isEditMode" class="menu-background"></div>
-		</v-img>
-	</div>
+	<v-img class="rounded-t-sm" :src="previewUrl" :alt="alternativeText">
+		<div v-if="isEditMode" class="menu-background"></div>
+	</v-img>
 </template>
 
 <script lang="ts">

From 014e4ba9047854c7da5e6ffb8dd546aaa1976aac Mon Sep 17 00:00:00 2001
From: Max Bischof <maximilian.bischof@dataport.de>
Date: Mon, 11 Sep 2023 08:30:59 +0200
Subject: [PATCH 61/89] Remove css from filedownload

---
 .../content/footer/download/FileDownload.vue               | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/feature-board-file-element/content/footer/download/FileDownload.vue b/src/components/feature-board-file-element/content/footer/download/FileDownload.vue
index 5fde2a486b..a2bbb1b86d 100644
--- a/src/components/feature-board-file-element/content/footer/download/FileDownload.vue
+++ b/src/components/feature-board-file-element/content/footer/download/FileDownload.vue
@@ -32,10 +32,3 @@ export default defineComponent({
 	},
 });
 </script>
-
-<style scoped>
-.download-btn {
-	margin: 10px 14px 0px 0px;
-	padding: 0px;
-}
-</style>

From de3085f3556c22253c3118de12c496174874813c Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Mon, 11 Sep 2023 10:49:36 +0200
Subject: [PATCH 62/89] fix imagedisplay test

---
 .../image-display/ImageDisplay.unit.ts        | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
index df6feca7db..4d5a4d1fb5 100644
--- a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
+++ b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
@@ -85,11 +85,13 @@ describe("ImageDisplay", () => {
 
 		describe("When alternative text is undefined", () => {
 			it("should have set alt correctly", () => {
-				const { wrapper, element } = setup({ isEditMode: false });
+				const { wrapper, fileNameProp } = setup({ isEditMode: false });
 
 				const alt = wrapper.find(vImageSelektor).attributes("alt");
 
-				expect(alt).toBe(element.content.alternativeText);
+				expect(alt).toBe(
+					"components.cardElement.fileElement.emptyAlt" + " " + fileNameProp
+				);
 			});
 		});
 	});
@@ -119,14 +121,6 @@ describe("ImageDisplay", () => {
 			expect(src).toBe(previewUrl);
 		});
 
-		it("should have set alt correctly", () => {
-			const { wrapper, fileNameProp } = setup({ isEditMode: true });
-
-			const alt = wrapper.find(vImageSelektor).attributes("alt");
-
-			expect(alt).toBe(fileNameProp);
-		});
-
 		it("should display div with class 'menu-background'", () => {
 			const { wrapper } = setup({ isEditMode: true });
 
@@ -151,11 +145,13 @@ describe("ImageDisplay", () => {
 
 		describe("When alternative text is undefined", () => {
 			it("should have set alt correctly", () => {
-				const { wrapper, element } = setup({ isEditMode: true });
+				const { wrapper, fileNameProp } = setup({ isEditMode: true });
 
 				const alt = wrapper.find(vImageSelektor).attributes("alt");
 
-				expect(alt).toBe(element.content.alternativeText);
+				expect(alt).toBe(
+					"components.cardElement.fileElement.emptyAlt" + " " + fileNameProp
+				);
 			});
 		});
 	});

From 4c86459ccded7bf2955cfc0e935c2ac9dbe18f89 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Mon, 11 Sep 2023 10:59:48 +0200
Subject: [PATCH 63/89] added test for alt in filecontent

---
 .../content/FileContent.unit.ts                     | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/components/feature-board-file-element/content/FileContent.unit.ts b/src/components/feature-board-file-element/content/FileContent.unit.ts
index 13158baa50..27c4e091ae 100644
--- a/src/components/feature-board-file-element/content/FileContent.unit.ts
+++ b/src/components/feature-board-file-element/content/FileContent.unit.ts
@@ -1,7 +1,9 @@
 import { PreviewStatus } from "@/fileStorageApi/v3";
+import { fileElementResponseFactory } from "@@/tests/test-utils";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
 import FileAlert from "./alert/FileAlert.vue";
+import AlternativeText from "./display/image-display/AlternativeText.vue";
 import FileContent from "./FileContent.vue";
 import ContentElementFooter from "./footer/ContentElementFooter.vue";
 
@@ -9,6 +11,8 @@ describe("FileContent", () => {
 	const setup = () => {
 		document.body.setAttribute("data-app", "true");
 
+		const element = fileElementResponseFactory.build();
+
 		const fileProperties = {
 			name: "test",
 			size: 100,
@@ -16,6 +20,7 @@ describe("FileContent", () => {
 			previewUrl: "test",
 			previewStatus: PreviewStatus.PREVIEW_POSSIBLE,
 			isDownloadAllowed: true,
+			element,
 		};
 		const wrapper = shallowMount(FileContent, {
 			propsData: {
@@ -62,6 +67,14 @@ describe("FileContent", () => {
 		});
 	});
 
+	it("Should pass element to alternative text", () => {
+		const { wrapper } = setup();
+
+		const alternativeText = wrapper.findComponent(AlternativeText);
+
+		expect(alternativeText.exists()).toBe(true);
+	});
+
 	describe("when alert emits on-status-reload", () => {
 		it("should emit delete event", async () => {
 			const { wrapper } = setup();

From 6d9708923c6c59ecca7445ddbceae094ccc9fb31 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Mon, 11 Sep 2023 12:09:29 +0200
Subject: [PATCH 64/89] added tests for filecontent component

---
 .../content/FileContent.unit.ts               | 234 +++++++++++++-----
 1 file changed, 175 insertions(+), 59 deletions(-)

diff --git a/src/components/feature-board-file-element/content/FileContent.unit.ts b/src/components/feature-board-file-element/content/FileContent.unit.ts
index 27c4e091ae..7294b04506 100644
--- a/src/components/feature-board-file-element/content/FileContent.unit.ts
+++ b/src/components/feature-board-file-element/content/FileContent.unit.ts
@@ -8,82 +8,198 @@ import FileContent from "./FileContent.vue";
 import ContentElementFooter from "./footer/ContentElementFooter.vue";
 
 describe("FileContent", () => {
-	const setup = () => {
-		document.body.setAttribute("data-app", "true");
-
-		const element = fileElementResponseFactory.build();
-
-		const fileProperties = {
-			name: "test",
-			size: 100,
-			url: "test",
-			previewUrl: "test",
-			previewStatus: PreviewStatus.PREVIEW_POSSIBLE,
-			isDownloadAllowed: true,
-			element,
-		};
-		const wrapper = shallowMount(FileContent, {
-			propsData: {
-				fileProperties,
-				isEditMode: true,
-			},
-			...createComponentMocks({}),
-		});
+	describe("When EditMode is true", () => {
+		describe("When PreviewUrl is defined", () => {
+			const setup = () => {
+				document.body.setAttribute("data-app", "true");
 
-		return {
-			wrapper,
-			fileProperties,
-		};
-	};
+				const element = fileElementResponseFactory.build();
 
-	it("should pass props to FileContent", () => {
-		const { wrapper, fileProperties } = setup();
+				const fileProperties = {
+					name: "test",
+					size: 100,
+					url: "test",
+					previewUrl: "test",
+					previewStatus: PreviewStatus.PREVIEW_POSSIBLE,
+					isDownloadAllowed: true,
+					element,
+				};
+				const wrapper = shallowMount(FileContent, {
+					propsData: {
+						fileProperties,
+						isEditMode: true,
+					},
+					...createComponentMocks({}),
+				});
 
-		const fileContent = wrapper.findComponent(FileContent);
+				return {
+					wrapper,
+					fileProperties,
+				};
+			};
 
-		expect(fileContent.props()).toEqual({
-			fileProperties,
-			isEditMode: true,
-		});
-	});
+			it("should pass props to FileContent", () => {
+				const { wrapper, fileProperties } = setup();
 
-	it("should pass props to ContentElementFooter", () => {
-		const { wrapper, fileProperties } = setup();
+				const fileContent = wrapper.findComponent(FileContent);
 
-		const contentElementFooter = wrapper.findComponent(ContentElementFooter);
+				expect(fileContent.props()).toEqual({
+					fileProperties,
+					isEditMode: true,
+				});
+			});
 
-		expect(contentElementFooter.props()).toEqual({
-			fileProperties,
-		});
-	});
+			it("should pass props to ContentElementFooter", () => {
+				const { wrapper, fileProperties } = setup();
 
-	it("Should pass props to FileAlert", () => {
-		const { wrapper, fileProperties } = setup();
+				const contentElementFooter =
+					wrapper.findComponent(ContentElementFooter);
 
-		const fileAlert = wrapper.findComponent(FileAlert);
+				expect(contentElementFooter.props()).toEqual({
+					fileProperties,
+				});
+			});
 
-		expect(fileAlert.props()).toEqual({
-			previewStatus: fileProperties.previewStatus,
-		});
-	});
+			it("Should pass props to FileAlert", () => {
+				const { wrapper, fileProperties } = setup();
 
-	it("Should pass element to alternative text", () => {
-		const { wrapper } = setup();
+				const fileAlert = wrapper.findComponent(FileAlert);
 
-		const alternativeText = wrapper.findComponent(AlternativeText);
+				expect(fileAlert.props()).toEqual({
+					previewStatus: fileProperties.previewStatus,
+				});
+			});
 
-		expect(alternativeText.exists()).toBe(true);
-	});
+			it("Should be in dom", () => {
+				const { wrapper } = setup();
+
+				const alternativeText = wrapper.findComponent(AlternativeText);
+
+				expect(alternativeText.exists()).toBe(true);
+			});
 
-	describe("when alert emits on-status-reload", () => {
-		it("should emit delete event", async () => {
-			const { wrapper } = setup();
+			it("Should pass element to alterantive text", () => {
+				const { wrapper, fileProperties } = setup();
 
-			const fileAlert = wrapper.findComponent(FileAlert);
+				const alternativeText = wrapper.findComponent(AlternativeText);
 
-			await fileAlert.vm.$emit("on-status-reload");
+				expect(alternativeText.props()).toEqual({
+					element: fileProperties.element,
+				});
+			});
+
+			describe("when alert emits on-status-reload", () => {
+				it("should emit delete event", async () => {
+					const { wrapper } = setup();
+
+					const fileAlert = wrapper.findComponent(FileAlert);
+
+					await fileAlert.vm.$emit("on-status-reload");
+
+					expect(wrapper.emitted("fetch:file")).toBeTruthy();
+				});
+			});
+		});
+
+		describe("When PreviewUrl is undefined", () => {
+			const setup = () => {
+				document.body.setAttribute("data-app", "true");
+
+				const element = fileElementResponseFactory.build();
+
+				const fileProperties = {
+					previewUrl: undefined,
+					element,
+				};
+				const wrapper = shallowMount(FileContent, {
+					propsData: {
+						fileProperties,
+						isEditMode: true,
+					},
+					...createComponentMocks({}),
+				});
+
+				return {
+					wrapper,
+					fileProperties,
+				};
+			};
+
+			it("Should not be in dom", () => {
+				const { wrapper } = setup();
+
+				const alternativeText = wrapper.findComponent(AlternativeText);
+
+				expect(alternativeText.exists()).toBe(false);
+			});
+		});
+	});
+
+	describe("When EditMode is false", () => {
+		describe("When PreviewUrl is defined", () => {
+			const setup = () => {
+				document.body.setAttribute("data-app", "true");
+
+				const element = fileElementResponseFactory.build();
+
+				const fileProperties = {
+					previewUrl: "test",
+					element,
+				};
+				const wrapper = shallowMount(FileContent, {
+					propsData: {
+						fileProperties,
+						isEditMode: false,
+					},
+					...createComponentMocks({}),
+				});
+
+				return {
+					wrapper,
+					fileProperties,
+				};
+			};
+
+			it("Should not be in dom", () => {
+				const { wrapper } = setup();
+
+				const alternativeText = wrapper.findComponent(AlternativeText);
+
+				expect(alternativeText.exists()).toBe(false);
+			});
+		});
 
-			expect(wrapper.emitted("fetch:file")).toBeTruthy();
+		describe("When PreviewUrl is undefined", () => {
+			const setup = () => {
+				document.body.setAttribute("data-app", "true");
+
+				const element = fileElementResponseFactory.build();
+
+				const fileProperties = {
+					previewUrl: undefined,
+					element,
+				};
+				const wrapper = shallowMount(FileContent, {
+					propsData: {
+						fileProperties,
+						isEditMode: false,
+					},
+					...createComponentMocks({}),
+				});
+
+				return {
+					wrapper,
+					fileProperties,
+				};
+			};
+
+			it("Should not be in dom", () => {
+				const { wrapper } = setup();
+
+				const alternativeText = wrapper.findComponent(AlternativeText);
+
+				expect(alternativeText.exists()).toBe(false);
+			});
 		});
 	});
 });

From 6a4d83a435d26dd298e0b6d45d69f4d35e613b88 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Mon, 11 Sep 2023 12:27:12 +0200
Subject: [PATCH 65/89] move to alternative-text folder

---
 .../feature-board-file-element/content/FileContent.unit.ts      | 2 +-
 .../feature-board-file-element/content/FileContent.vue          | 2 +-
 .../image-display => alternative-text}/AlternativeText.unit.ts  | 2 +-
 .../image-display => alternative-text}/AlternativeText.vue      | 0
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename src/components/feature-board-file-element/content/{display/image-display => alternative-text}/AlternativeText.unit.ts (97%)
 rename src/components/feature-board-file-element/content/{display/image-display => alternative-text}/AlternativeText.vue (100%)

diff --git a/src/components/feature-board-file-element/content/FileContent.unit.ts b/src/components/feature-board-file-element/content/FileContent.unit.ts
index 7294b04506..bfb42c6f4e 100644
--- a/src/components/feature-board-file-element/content/FileContent.unit.ts
+++ b/src/components/feature-board-file-element/content/FileContent.unit.ts
@@ -3,7 +3,7 @@ import { fileElementResponseFactory } from "@@/tests/test-utils";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
 import FileAlert from "./alert/FileAlert.vue";
-import AlternativeText from "./display/image-display/AlternativeText.vue";
+import AlternativeText from "./alternative-text/AlternativeText.vue";
 import FileContent from "./FileContent.vue";
 import ContentElementFooter from "./footer/ContentElementFooter.vue";
 
diff --git a/src/components/feature-board-file-element/content/FileContent.vue b/src/components/feature-board-file-element/content/FileContent.vue
index a673ef70d5..6dda24b639 100644
--- a/src/components/feature-board-file-element/content/FileContent.vue
+++ b/src/components/feature-board-file-element/content/FileContent.vue
@@ -15,7 +15,7 @@ import { computed, defineComponent, PropType } from "vue";
 import FileAlert from "../content/alert/FileAlert.vue";
 import FileDisplay from "../content/display/FileDisplay.vue";
 import { FileProperties } from "../shared/types/file-properties";
-import AlternativeText from "./display/image-display/AlternativeText.vue";
+import AlternativeText from "./alternative-text/AlternativeText.vue";
 import ContentElementFooter from "./footer/ContentElementFooter.vue";
 
 export default defineComponent({
diff --git a/src/components/feature-board-file-element/content/display/image-display/AlternativeText.unit.ts b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.unit.ts
similarity index 97%
rename from src/components/feature-board-file-element/content/display/image-display/AlternativeText.unit.ts
rename to src/components/feature-board-file-element/content/alternative-text/AlternativeText.unit.ts
index 3b3aa59fcf..c0de32cb01 100644
--- a/src/components/feature-board-file-element/content/display/image-display/AlternativeText.unit.ts
+++ b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.unit.ts
@@ -1,7 +1,7 @@
 import { fileElementResponseFactory } from "@@/tests/test-utils";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
-import AlternativeText from "./AlternativeText.vue";
+import AlternativeText from ".//AlternativeText.vue";
 
 const alternativeText = "alt text";
 jest.mock("@data-board", () => {
diff --git a/src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
similarity index 100%
rename from src/components/feature-board-file-element/content/display/image-display/AlternativeText.vue
rename to src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue

From 1155df6b7555498f95a4903a0d190f721d9011ba Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Mon, 11 Sep 2023 12:32:54 +0200
Subject: [PATCH 66/89] fix path

---
 .../content/alternative-text/AlternativeText.unit.ts            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.unit.ts b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.unit.ts
index c0de32cb01..3b3aa59fcf 100644
--- a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.unit.ts
+++ b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.unit.ts
@@ -1,7 +1,7 @@
 import { fileElementResponseFactory } from "@@/tests/test-utils";
 import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
-import AlternativeText from ".//AlternativeText.vue";
+import AlternativeText from "./AlternativeText.vue";
 
 const alternativeText = "alt text";
 jest.mock("@data-board", () => {

From cdc2f2793d70e64418d3a0b0050ab414e1ee1044 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Mon, 11 Sep 2023 15:09:57 +0200
Subject: [PATCH 67/89] change to v-text-field

---
 .../content/alternative-text/AlternativeText.vue            | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
index aff43d11f2..06c2da98ec 100644
--- a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
+++ b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
@@ -1,12 +1,12 @@
 <template>
 	<v-container class="grey lighten-3">
-		<v-textarea
+		<v-text-field
 			v-model="modelValue.alternativeText"
-			class="pt-2 ma-0 v-secondary-lighten1"
+			class="v-secondary-lighten1"
 			rows="1"
 			:hint="$t('components.cardElement.fileElement.altDescription')"
 			:label="$t('components.cardElement.fileElement.alternativeText')"
-		></v-textarea>
+		></v-text-field>
 	</v-container>
 </template>
 

From ef3cc5f82896e377db61608de401f12977f2de5d Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Mon, 11 Sep 2023 15:10:15 +0200
Subject: [PATCH 68/89] fix test for v-text-field

---
 .../content/alternative-text/AlternativeText.unit.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.unit.ts b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.unit.ts
index 3b3aa59fcf..2030af91fd 100644
--- a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.unit.ts
+++ b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.unit.ts
@@ -39,9 +39,9 @@ describe("AlternativeText", () => {
 	it("should have the modelValue as value", async () => {
 		const { wrapper } = setup();
 
-		const textarea = wrapper.find("v-textarea-stub");
+		const textfield = wrapper.find("v-text-field-stub");
 
-		const valueAttribute = textarea.attributes("value");
+		const valueAttribute = textfield.attributes("value");
 
 		expect(valueAttribute).toBe(alternativeText);
 	});
@@ -49,9 +49,9 @@ describe("AlternativeText", () => {
 	it("should have a hint translation", async () => {
 		const { wrapper } = setup();
 
-		const textarea = wrapper.find("v-textarea-stub");
+		const textfield = wrapper.find("v-text-field-stub");
 
-		const hint = textarea.attributes("hint");
+		const hint = textfield.attributes("hint");
 
 		expect(hint).toBe(
 			wrapper.vm.$i18n
@@ -63,9 +63,9 @@ describe("AlternativeText", () => {
 	it("should have a label translation", async () => {
 		const { wrapper } = setup();
 
-		const textarea = wrapper.find("v-textarea-stub");
+		const textfield = wrapper.find("v-text-field-stub");
 
-		const label = textarea.attributes("label");
+		const label = textfield.attributes("label");
 
 		expect(label).toBe(
 			wrapper.vm.$i18n

From d3411e2e1102ba1d1fd9d3b79ceb04ec18a0b7af Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Mon, 11 Sep 2023 15:19:31 +0200
Subject: [PATCH 69/89] change to v-card-text

---
 .../content/alternative-text/AlternativeText.vue              | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
index 06c2da98ec..84c12c5b34 100644
--- a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
+++ b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-container class="grey lighten-3">
+	<v-card-text class="grey lighten-3">
 		<v-text-field
 			v-model="modelValue.alternativeText"
 			class="v-secondary-lighten1"
@@ -7,7 +7,7 @@
 			:hint="$t('components.cardElement.fileElement.altDescription')"
 			:label="$t('components.cardElement.fileElement.alternativeText')"
 		></v-text-field>
-	</v-container>
+	</v-card-text>
 </template>
 
 <script lang="ts">

From 1cf0c61b7b69c4aa6c6786ced8b8fa1bc3ff6bb8 Mon Sep 17 00:00:00 2001
From: SevenWaysDP <sergej.hoffmann@dataport.de>
Date: Mon, 11 Sep 2023 15:53:49 +0200
Subject: [PATCH 70/89] BC-3475 - add panding

---
 .../content/alternative-text/AlternativeText.vue               | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
index 84c12c5b34..bba0b6aab0 100644
--- a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
+++ b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
@@ -1,9 +1,8 @@
 <template>
-	<v-card-text class="grey lighten-3">
+	<v-card-text class="grey lighten-3 pa-2">
 		<v-text-field
 			v-model="modelValue.alternativeText"
 			class="v-secondary-lighten1"
-			rows="1"
 			:hint="$t('components.cardElement.fileElement.altDescription')"
 			:label="$t('components.cardElement.fileElement.alternativeText')"
 		></v-text-field>

From c244bbfc70102d7ee890edd206f3ac4aaf22dfcd Mon Sep 17 00:00:00 2001
From: Constantin Bergatt <constantin.bergatt@dataport.de>
Date: Tue, 12 Sep 2023 09:13:35 +0200
Subject: [PATCH 71/89] BC-3475 - fix unit tests

---
 src/components/data-board/BoardApi.composable.unit.ts  |  1 +
 .../content/display/image-display/ImageDisplay.unit.ts | 10 ++++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/data-board/BoardApi.composable.unit.ts b/src/components/data-board/BoardApi.composable.unit.ts
index 69e04b6fe2..7ece0e7977 100644
--- a/src/components/data-board/BoardApi.composable.unit.ts
+++ b/src/components/data-board/BoardApi.composable.unit.ts
@@ -147,6 +147,7 @@ describe("BoardApi.composable", () => {
 				type: ContentElementType.File,
 				content: {
 					caption: "caption",
+					dueDate: new Date().toISOString(),
 				},
 				timestamps: timestampsResponseFactory.build(),
 			};
diff --git a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
index f4c7cf0915..3b1d674e60 100644
--- a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
+++ b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
@@ -66,7 +66,7 @@ describe("ImageDisplay", () => {
 			const { wrapper, fileNameProp } = setup({ isEditMode: false });
 
 			const renderedImageTag = wrapper.find(imageSelektor).html();
-			const expectedHtml = `<img loading="lazy" src="preview/1/${fileNameProp}" alt="${fileNameProp}" class="rounded-t-sm image">`;
+			const expectedHtml = `<img loading="lazy" src="preview/1/${fileNameProp}" alt="components.cardElement.fileElement.emptyAlt ${fileNameProp}" class="rounded-t-sm image">`;
 
 			expect(renderedImageTag).toBe(expectedHtml);
 		});
@@ -84,7 +84,9 @@ describe("ImageDisplay", () => {
 
 			const alt = wrapper.find(imageSelektor).attributes("alt");
 
-			expect(alt).toBe(fileNameProp);
+			expect(alt).toBe(
+				"components.cardElement.fileElement.emptyAlt " + fileNameProp
+			);
 		});
 
 		it("should not display div with class 'menu-background'", () => {
@@ -117,7 +119,7 @@ describe("ImageDisplay", () => {
 				const alt = wrapper.find(imageSelektor).attributes("alt");
 
 				expect(alt).toBe(
-					"components.cardElement.fileElement.emptyAlt" + " " + fileNameProp
+					"components.cardElement.fileElement.emptyAlt " + fileNameProp
 				);
 			});
 		});
@@ -177,7 +179,7 @@ describe("ImageDisplay", () => {
 				const alt = wrapper.find(imageSelektor).attributes("alt");
 
 				expect(alt).toBe(
-					"components.cardElement.fileElement.emptyAlt" + " " + fileNameProp
+					"components.cardElement.fileElement.emptyAlt " + fileNameProp
 				);
 			});
 		});

From a46d4e0262fffb086a12a84689949eba244b9290 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Tue, 12 Sep 2023 10:04:48 +0200
Subject: [PATCH 72/89] fix tests

---
 .../content/FileContent.unit.ts                           | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/feature-board-file-element/content/FileContent.unit.ts b/src/components/feature-board-file-element/content/FileContent.unit.ts
index bfb42c6f4e..aa21d76337 100644
--- a/src/components/feature-board-file-element/content/FileContent.unit.ts
+++ b/src/components/feature-board-file-element/content/FileContent.unit.ts
@@ -70,7 +70,7 @@ describe("FileContent", () => {
 				});
 			});
 
-			it("Should be in dom", () => {
+			it("Should AlternativeText component be in dom", () => {
 				const { wrapper } = setup();
 
 				const alternativeText = wrapper.findComponent(AlternativeText);
@@ -125,7 +125,7 @@ describe("FileContent", () => {
 				};
 			};
 
-			it("Should not be in dom", () => {
+			it("Should AlternativeText component not be in dom", () => {
 				const { wrapper } = setup();
 
 				const alternativeText = wrapper.findComponent(AlternativeText);
@@ -160,7 +160,7 @@ describe("FileContent", () => {
 				};
 			};
 
-			it("Should not be in dom", () => {
+			it("Should AlternativeText component not be in dom", () => {
 				const { wrapper } = setup();
 
 				const alternativeText = wrapper.findComponent(AlternativeText);
@@ -193,7 +193,7 @@ describe("FileContent", () => {
 				};
 			};
 
-			it("Should not be in dom", () => {
+			it("Should AlternativeText component not be in dom", () => {
 				const { wrapper } = setup();
 
 				const alternativeText = wrapper.findComponent(AlternativeText);

From 490c4f2a9cccd626561fd7bdacf01d5308c38a8e Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Tue, 12 Sep 2023 10:07:41 +0200
Subject: [PATCH 73/89] fix typo

---
 .../feature-board-file-element/content/FileContent.unit.ts      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/feature-board-file-element/content/FileContent.unit.ts b/src/components/feature-board-file-element/content/FileContent.unit.ts
index aa21d76337..e86012c910 100644
--- a/src/components/feature-board-file-element/content/FileContent.unit.ts
+++ b/src/components/feature-board-file-element/content/FileContent.unit.ts
@@ -78,7 +78,7 @@ describe("FileContent", () => {
 				expect(alternativeText.exists()).toBe(true);
 			});
 
-			it("Should pass element to alterantive text", () => {
+			it("Should pass element to alternative text", () => {
 				const { wrapper, fileProperties } = setup();
 
 				const alternativeText = wrapper.findComponent(AlternativeText);

From 0919ebe5c5cd069c0e1d89b6e7810d5c76a41dd5 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Tue, 12 Sep 2023 10:09:18 +0200
Subject: [PATCH 74/89] fix tag

---
 .../feature-board-file-element/content/FileContent.vue          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/feature-board-file-element/content/FileContent.vue b/src/components/feature-board-file-element/content/FileContent.vue
index 6dda24b639..e7b9b4642b 100644
--- a/src/components/feature-board-file-element/content/FileContent.vue
+++ b/src/components/feature-board-file-element/content/FileContent.vue
@@ -4,7 +4,7 @@
 		<AlternativeText
 			v-if="isEditMode && fileProperties.previewUrl"
 			:element="fileProperties.element"
-		></AlternativeText>
+		/>
 		<ContentElementFooter :fileProperties="fileProperties" />
 		<FileAlert :previewStatus="previewStatus" @on-status-reload="onFetchFile" />
 	</div>

From cd8f1de13288c9d770813486b6f893a185eb632f Mon Sep 17 00:00:00 2001
From: SevenWaysDP <sergej.hoffmann@dataport.de>
Date: Tue, 12 Sep 2023 13:08:32 +0200
Subject: [PATCH 75/89] BC-3475 - fix lint errors

---
 .../content/alternative-text/AlternativeText.vue             | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
index bba0b6aab0..bf1963ab24 100644
--- a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
+++ b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
@@ -12,7 +12,7 @@
 <script lang="ts">
 import { FileElementResponse } from "@/serverApi/v3";
 import { useContentElementState } from "@data-board";
-import { defineComponent, PropType } from "vue";
+import { defineComponent, PropType, toRef } from "vue";
 
 export default defineComponent({
 	name: "AlternativeText",
@@ -20,8 +20,9 @@ export default defineComponent({
 		element: { type: Object as PropType<FileElementResponse>, required: true },
 	},
 	setup(props) {
+		const element = toRef(props, "element");
 		const { modelValue } = useContentElementState({
-			element: props.element,
+			element: element.value,
 			isEditMode: true,
 		});
 

From 5d11523c8009a55f99ecae8913849050d72fe2cd Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Wed, 13 Sep 2023 11:31:18 +0200
Subject: [PATCH 76/89] use v-textarea

---
 .../content/alternative-text/AlternativeText.vue            | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
index bf1963ab24..7f596f19af 100644
--- a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
+++ b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
@@ -1,11 +1,13 @@
 <template>
 	<v-card-text class="grey lighten-3 pa-2">
-		<v-text-field
+		<v-textarea
+			rows="1"
+			auto-grow
 			v-model="modelValue.alternativeText"
 			class="v-secondary-lighten1"
 			:hint="$t('components.cardElement.fileElement.altDescription')"
 			:label="$t('components.cardElement.fileElement.alternativeText')"
-		></v-text-field>
+		/>
 	</v-card-text>
 </template>
 

From 0528206271bdb77295f14699487e098c21e99ae6 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Wed, 13 Sep 2023 11:32:01 +0200
Subject: [PATCH 77/89] change translation texts for hint

---
 src/locales/de.json | 2 +-
 src/locales/en.json | 2 +-
 src/locales/es.json | 2 +-
 src/locales/uk.json | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/locales/de.json b/src/locales/de.json
index b8031d7c33..11c0a0b18c 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -785,7 +785,7 @@
 	"components.cardElement.deleteElement": "löschen",
 	"components.cardElement.dragElement": "verschieben",
 	"components.cardElement.fileElement.alternativeText": "Alternativtext",
-	"components.cardElement.fileElement.altDescription": "Beschreiben Sie dieses Bild für Personen mit Sehbehinderung.",
+	"components.cardElement.fileElement.altDescription": "Bitte beschreiben Sie das Bild, um eine barrierefreie Betrachtung zu ermöglichen.",
 	"components.cardElement.fileElement.emptyAlt": "Hier ist ein Bild mit folgendem Namen",
 	"components.cardElement.fileElement.virusDetected": "Datei wurde aufgrund eines Virenverdachts gesperrt.",
 	"components.cardElement.fileElement.awaitingScan": "Vorschau wird nach erfolgreicher Virenprüfung angezeigt. Aktuell wird die Datei gescannt.",
diff --git a/src/locales/en.json b/src/locales/en.json
index ec660772a5..f67c5a9fde 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -783,7 +783,7 @@
 	"components.cardElement.deleteElement": "Delete element",
 	"components.cardElement.dragElement": "Move element",
 	"components.cardElement.fileElement.alternativeText": "Alternative Text",
-	"components.cardElement.fileElement.altDescription": "Describe this picture for people with visual impairments.",
+	"components.cardElement.fileElement.altDescription": "Please describe the picture to enable barrier-free viewing.",
 	"components.cardElement.fileElement.emptyAlt": "Here is an image with the following name",
 	"components.cardElement.fileElement.virusDetected": "File has been locked due to a suspected virus.",
 	"components.cardElement.fileElement.awaitingScan": "Preview is displayed after a successful virus scan. The file is currently being scanned.",
diff --git a/src/locales/es.json b/src/locales/es.json
index 3305608518..d937503f85 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -793,7 +793,7 @@
 	"components.cardElement.deleteElement": "Suprimir elemento",
 	"components.cardElement.dragElement": "Mover elemento",
 	"components.cardElement.fileElement.alternativeText": "Texto alternativo",
-	"components.cardElement.fileElement.altDescription": "Describe esta imagen para personas con discapacidad visual.",
+	"components.cardElement.fileElement.altDescription": "Describe la imagen para permitar una visualización sin barreras.",
 	"components.cardElement.fileElement.emptyAlt": "Aquí tenéis una imagen con el siguiente nombre",
 	"components.cardElement.fileElement.virusDetected": "Se ha bloqueado el archivo debido a un virus sospechoso.",
 	"components.cardElement.fileElement.awaitingScan": "La vista previa se muestra después de una comprobación de virus correcta. El fichero se está analizando actualmente.",
diff --git a/src/locales/uk.json b/src/locales/uk.json
index b064c83c6d..3607a3da40 100644
--- a/src/locales/uk.json
+++ b/src/locales/uk.json
@@ -311,7 +311,7 @@
 	"components.cardElement.deleteElement": "Видалити елемент",
 	"components.cardElement.dragElement": "Перемістити елемент",
 	"components.cardElement.fileElement.alternativeText": "альтернативний текст",
-	"components.cardElement.fileElement.altDescription": "Опишіть цю картинку для людей з вадами зору.",
+	"components.cardElement.fileElement.altDescription": "Будь ласка, опишіть зображення, щоб забезпечити безперешкодний перегляд.",
 	"components.cardElement.fileElement.emptyAlt": "Ось зображення з такою назвою",
 	"components.cardElement.fileElement.virusDetected": "Файл було заблоковано через підозру на вірус.",
 	"components.cardElement.fileElement.awaitingScan": "Попередній перегляд відображається після успішної перевірки на віруси. Наразі відбувається перевірка файлу.",

From 9b67a3604b27cb328c1ed8da23b861c020af577d Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Wed, 13 Sep 2023 11:35:51 +0200
Subject: [PATCH 78/89] fix unit test

---
 .../content/alternative-text/AlternativeText.unit.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.unit.ts b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.unit.ts
index 2030af91fd..3b3aa59fcf 100644
--- a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.unit.ts
+++ b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.unit.ts
@@ -39,9 +39,9 @@ describe("AlternativeText", () => {
 	it("should have the modelValue as value", async () => {
 		const { wrapper } = setup();
 
-		const textfield = wrapper.find("v-text-field-stub");
+		const textarea = wrapper.find("v-textarea-stub");
 
-		const valueAttribute = textfield.attributes("value");
+		const valueAttribute = textarea.attributes("value");
 
 		expect(valueAttribute).toBe(alternativeText);
 	});
@@ -49,9 +49,9 @@ describe("AlternativeText", () => {
 	it("should have a hint translation", async () => {
 		const { wrapper } = setup();
 
-		const textfield = wrapper.find("v-text-field-stub");
+		const textarea = wrapper.find("v-textarea-stub");
 
-		const hint = textfield.attributes("hint");
+		const hint = textarea.attributes("hint");
 
 		expect(hint).toBe(
 			wrapper.vm.$i18n
@@ -63,9 +63,9 @@ describe("AlternativeText", () => {
 	it("should have a label translation", async () => {
 		const { wrapper } = setup();
 
-		const textfield = wrapper.find("v-text-field-stub");
+		const textarea = wrapper.find("v-textarea-stub");
 
-		const label = textfield.attributes("label");
+		const label = textarea.attributes("label");
 
 		expect(label).toBe(
 			wrapper.vm.$i18n

From e4a0ca0e6b956b27a1272a1063f846367054a26d Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Wed, 13 Sep 2023 11:56:38 +0200
Subject: [PATCH 79/89] fix translations

---
 src/locales/en.json | 2 +-
 src/locales/es.json | 2 +-
 src/locales/uk.json | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index f67c5a9fde..16ab0a322d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -783,7 +783,7 @@
 	"components.cardElement.deleteElement": "Delete element",
 	"components.cardElement.dragElement": "Move element",
 	"components.cardElement.fileElement.alternativeText": "Alternative Text",
-	"components.cardElement.fileElement.altDescription": "Please describe the picture to enable barrier-free viewing.",
+	"components.cardElement.fileElement.altDescription": "Please describe the picture to enable accessible viewing.",
 	"components.cardElement.fileElement.emptyAlt": "Here is an image with the following name",
 	"components.cardElement.fileElement.virusDetected": "File has been locked due to a suspected virus.",
 	"components.cardElement.fileElement.awaitingScan": "Preview is displayed after a successful virus scan. The file is currently being scanned.",
diff --git a/src/locales/es.json b/src/locales/es.json
index d937503f85..1b8e30b02e 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -793,7 +793,7 @@
 	"components.cardElement.deleteElement": "Suprimir elemento",
 	"components.cardElement.dragElement": "Mover elemento",
 	"components.cardElement.fileElement.alternativeText": "Texto alternativo",
-	"components.cardElement.fileElement.altDescription": "Describe la imagen para permitar una visualización sin barreras.",
+	"components.cardElement.fileElement.altDescription": "Describa la imagen para permitir una visualización sin barreras.",
 	"components.cardElement.fileElement.emptyAlt": "Aquí tenéis una imagen con el siguiente nombre",
 	"components.cardElement.fileElement.virusDetected": "Se ha bloqueado el archivo debido a un virus sospechoso.",
 	"components.cardElement.fileElement.awaitingScan": "La vista previa se muestra después de una comprobación de virus correcta. El fichero se está analizando actualmente.",
diff --git a/src/locales/uk.json b/src/locales/uk.json
index 3607a3da40..2646dea0d1 100644
--- a/src/locales/uk.json
+++ b/src/locales/uk.json
@@ -311,7 +311,7 @@
 	"components.cardElement.deleteElement": "Видалити елемент",
 	"components.cardElement.dragElement": "Перемістити елемент",
 	"components.cardElement.fileElement.alternativeText": "альтернативний текст",
-	"components.cardElement.fileElement.altDescription": "Будь ласка, опишіть зображення, щоб забезпечити безперешкодний перегляд.",
+	"components.cardElement.fileElement.altDescription": "Будь ласка, опишіть зображення, щоб уможливити його безбар'єрний перегляд.",
 	"components.cardElement.fileElement.emptyAlt": "Ось зображення з такою назвою",
 	"components.cardElement.fileElement.virusDetected": "Файл було заблоковано через підозру на вірус.",
 	"components.cardElement.fileElement.awaitingScan": "Попередній перегляд відображається після успішної перевірки на віруси. Наразі відбувається перевірка файлу.",

From ac20547bbac2c13624d8ff4007bd834f3d436f7d Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Wed, 13 Sep 2023 12:44:28 +0200
Subject: [PATCH 80/89] added persistent hint

---
 .../content/alternative-text/AlternativeText.vue                 | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
index 7f596f19af..618efedd14 100644
--- a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
+++ b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
@@ -5,6 +5,7 @@
 			auto-grow
 			v-model="modelValue.alternativeText"
 			class="v-secondary-lighten1"
+			persistent-hint="true"
 			:hint="$t('components.cardElement.fileElement.altDescription')"
 			:label="$t('components.cardElement.fileElement.alternativeText')"
 		/>

From 7dfe5c02c247b7d866e05e87e19a1a0f024ca317 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Thu, 14 Sep 2023 09:12:57 +0200
Subject: [PATCH 81/89] fix unit test

---
 src/components/data-board/BoardApi.composable.unit.ts | 2 +-
 src/serverApi/v3/api.ts                               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/data-board/BoardApi.composable.unit.ts b/src/components/data-board/BoardApi.composable.unit.ts
index 7ece0e7977..1d6701f9e9 100644
--- a/src/components/data-board/BoardApi.composable.unit.ts
+++ b/src/components/data-board/BoardApi.composable.unit.ts
@@ -147,7 +147,7 @@ describe("BoardApi.composable", () => {
 				type: ContentElementType.File,
 				content: {
 					caption: "caption",
-					dueDate: new Date().toISOString(),
+					alternativeText: "alternative text",
 				},
 				timestamps: timestampsResponseFactory.build(),
 			};
diff --git a/src/serverApi/v3/api.ts b/src/serverApi/v3/api.ts
index 64dd91ed36..6df394ac33 100644
--- a/src/serverApi/v3/api.ts
+++ b/src/serverApi/v3/api.ts
@@ -1597,7 +1597,7 @@ export interface FileElementContent {
      * @type {string}
      * @memberof FileElementContent
      */
-    alternativeText: string;
+    alternativeText?: string;
 }
 /**
  * 

From c47014a6476f1545723c85c0f2eb7c6518c575f1 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Thu, 14 Sep 2023 11:26:51 +0200
Subject: [PATCH 82/89] removed grey background

---
 .../content/alternative-text/AlternativeText.vue                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
index 618efedd14..9b4581c1a5 100644
--- a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
+++ b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-card-text class="grey lighten-3 pa-2">
+	<v-card-text class="pa-2">
 		<v-textarea
 			rows="1"
 			auto-grow

From e1131fb18fff500f42dd25fd934dc137bc3c0947 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Fri, 15 Sep 2023 11:55:49 +0200
Subject: [PATCH 83/89] emit alternative text

---
 .../FileContentElement.vue                    |  1 +
 .../content/FileContent.vue                   | 10 +++++----
 .../alternative-text/AlternativeText.vue      | 21 +++++++++----------
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/feature-board-file-element/FileContentElement.vue b/src/components/feature-board-file-element/FileContentElement.vue
index c53ba2f650..4f352027a6 100644
--- a/src/components/feature-board-file-element/FileContentElement.vue
+++ b/src/components/feature-board-file-element/FileContentElement.vue
@@ -15,6 +15,7 @@
 			:file-properties="fileProperties"
 			@fetch:file="onFetchFile"
 			:is-edit-mode="isEditMode"
+			@update:alternativeText="(value) => (modelValue.alternativeText = value)"
 		/>
 		<FileUpload
 			v-else-if="isEditMode"
diff --git a/src/components/feature-board-file-element/content/FileContent.vue b/src/components/feature-board-file-element/content/FileContent.vue
index e7b9b4642b..07f7e1a5f3 100644
--- a/src/components/feature-board-file-element/content/FileContent.vue
+++ b/src/components/feature-board-file-element/content/FileContent.vue
@@ -3,7 +3,8 @@
 		<FileDisplay :file-properties="fileProperties" :is-edit-mode="isEditMode" />
 		<AlternativeText
 			v-if="isEditMode && fileProperties.previewUrl"
-			:element="fileProperties.element"
+			:text="fileProperties.element.content.alternativeText"
+			@update:text="onUpdateText"
 		/>
 		<ContentElementFooter :fileProperties="fileProperties" />
 		<FileAlert :previewStatus="previewStatus" @on-status-reload="onFetchFile" />
@@ -33,15 +34,16 @@ export default defineComponent({
 		},
 		isEditMode: { type: Boolean, required: true },
 	},
-
+	emits: ["fetch:file", "update:alternativeText"],
 	setup(props, { emit }) {
 		const onFetchFile = () => {
 			emit("fetch:file");
 		};
-
+		const onUpdateText = (value: string) =>
+			emit("update:alternativeText", value);
 		const previewStatus = computed(() => props.fileProperties.previewStatus);
 
-		return { onFetchFile, previewStatus };
+		return { onFetchFile, previewStatus, onUpdateText };
 	},
 });
 </script>
diff --git a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
index 9b4581c1a5..4153ae4c74 100644
--- a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
+++ b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
@@ -3,7 +3,7 @@
 		<v-textarea
 			rows="1"
 			auto-grow
-			v-model="modelValue.alternativeText"
+			v-model="modelValue"
 			class="v-secondary-lighten1"
 			persistent-hint="true"
 			:hint="$t('components.cardElement.fileElement.altDescription')"
@@ -13,21 +13,20 @@
 </template>
 
 <script lang="ts">
-import { FileElementResponse } from "@/serverApi/v3";
-import { useContentElementState } from "@data-board";
-import { defineComponent, PropType, toRef } from "vue";
+import { useVModel } from "@vueuse/core";
+import { defineComponent } from "vue";
 
 export default defineComponent({
 	name: "AlternativeText",
 	props: {
-		element: { type: Object as PropType<FileElementResponse>, required: true },
+		text: {
+			type: String,
+			required: false,
+		},
 	},
-	setup(props) {
-		const element = toRef(props, "element");
-		const { modelValue } = useContentElementState({
-			element: element.value,
-			isEditMode: true,
-		});
+	emits: ["update:text"],
+	setup(props, { emit }) {
+		const modelValue = useVModel(props, "text", emit);
 
 		return {
 			modelValue,

From 0cedcbf8523f34f62b8802ee9a0d0bff6b481a99 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Fri, 15 Sep 2023 11:58:48 +0200
Subject: [PATCH 84/89] fix persistent hint error

---
 .../content/alternative-text/AlternativeText.vue                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
index 4153ae4c74..eaf593cc76 100644
--- a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
+++ b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
@@ -5,7 +5,7 @@
 			auto-grow
 			v-model="modelValue"
 			class="v-secondary-lighten1"
-			persistent-hint="true"
+			:persistent-hint="true"
 			:hint="$t('components.cardElement.fileElement.altDescription')"
 			:label="$t('components.cardElement.fileElement.alternativeText')"
 		/>

From a61d8a2d70078a1d4bab0c61774fc65491dc20f4 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Fri, 15 Sep 2023 13:36:14 +0200
Subject: [PATCH 85/89] fix unit tests

---
 .../content/FileContent.unit.ts                     | 12 +++++++-----
 .../alternative-text/AlternativeText.unit.ts        | 13 +++++++++----
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/feature-board-file-element/content/FileContent.unit.ts b/src/components/feature-board-file-element/content/FileContent.unit.ts
index e86012c910..1ff1996fc0 100644
--- a/src/components/feature-board-file-element/content/FileContent.unit.ts
+++ b/src/components/feature-board-file-element/content/FileContent.unit.ts
@@ -78,14 +78,16 @@ describe("FileContent", () => {
 				expect(alternativeText.exists()).toBe(true);
 			});
 
-			it("Should pass element to alternative text", () => {
-				const { wrapper, fileProperties } = setup();
+			it("Should call onUpdateText when it receives update:text event from alternative text component", async () => {
+				const { wrapper } = setup();
 
 				const alternativeText = wrapper.findComponent(AlternativeText);
 
-				expect(alternativeText.props()).toEqual({
-					element: fileProperties.element,
-				});
+				alternativeText.vm.$emit("update:text");
+				await wrapper.vm.$nextTick();
+				const emitted = wrapper.emitted()["update:text"] ?? ["new text"];
+
+				expect(emitted).toHaveLength(1);
 			});
 
 			describe("when alert emits on-status-reload", () => {
diff --git a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.unit.ts b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.unit.ts
index 3b3aa59fcf..eaf885ff6b 100644
--- a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.unit.ts
+++ b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.unit.ts
@@ -3,7 +3,7 @@ import createComponentMocks from "@@/tests/test-utils/componentMocks";
 import { shallowMount } from "@vue/test-utils";
 import AlternativeText from "./AlternativeText.vue";
 
-const alternativeText = "alt text";
+const alternativeText = "text";
 jest.mock("@data-board", () => {
 	return {
 		useContentElementState: jest.fn(() => ({
@@ -36,14 +36,19 @@ describe("AlternativeText", () => {
 		expect(fileContentElement.exists()).toBe(true);
 	});
 
-	it("should have the modelValue as value", async () => {
+	it("should emit if text changes", async () => {
 		const { wrapper } = setup();
 
 		const textarea = wrapper.find("v-textarea-stub");
+		const newText = "new text";
+		textarea.vm.$emit("input", "new text");
+		const emitted = wrapper.emitted();
 
-		const valueAttribute = textarea.attributes("value");
+		if (emitted["update:text"] === undefined) {
+			throw new Error("Emitted should be defined");
+		}
 
-		expect(valueAttribute).toBe(alternativeText);
+		expect(emitted["update:text"][0][0]).toContain(newText);
 	});
 
 	it("should have a hint translation", async () => {

From 0053a4e997b6bba82fd153079405ae0ac7c43145 Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Tue, 19 Sep 2023 10:28:10 +0200
Subject: [PATCH 86/89] added onUpdateAlternativeText function

---
 .../feature-board-file-element/FileContentElement.vue      | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/feature-board-file-element/FileContentElement.vue b/src/components/feature-board-file-element/FileContentElement.vue
index 4f352027a6..5cd0b02039 100644
--- a/src/components/feature-board-file-element/FileContentElement.vue
+++ b/src/components/feature-board-file-element/FileContentElement.vue
@@ -15,7 +15,7 @@
 			:file-properties="fileProperties"
 			@fetch:file="onFetchFile"
 			:is-edit-mode="isEditMode"
-			@update:alternativeText="(value) => (modelValue.alternativeText = value)"
+			@update:alternativeText="onUpdateAlternativeText"
 		/>
 		<FileUpload
 			v-else-if="isEditMode"
@@ -178,6 +178,10 @@ export default defineComponent({
 			await fetchFile();
 		};
 
+		const onUpdateAlternativeText = (value: string) => {
+			modelValue.value.alternativeText = value;
+		};
+
 		return {
 			fileContentElement,
 			fileProperties,
@@ -191,6 +195,7 @@ export default defineComponent({
 			onKeydownArrow,
 			onUploadFile,
 			onFetchFile,
+			onUpdateAlternativeText,
 			elementPositionProps,
 		};
 	},

From 0b14bf1f7c53af4b3d176a601a05429eb0cecedc Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Tue, 19 Sep 2023 10:49:20 +0200
Subject: [PATCH 87/89] added data-testid

---
 .../content/alternative-text/AlternativeText.vue                 | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
index eaf593cc76..1e2868a513 100644
--- a/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
+++ b/src/components/feature-board-file-element/content/alternative-text/AlternativeText.vue
@@ -1,6 +1,7 @@
 <template>
 	<v-card-text class="pa-2">
 		<v-textarea
+			data-testid="file-alttext-input"
 			rows="1"
 			auto-grow
 			v-model="modelValue"

From bb50ed372762fd2c73ec9b429e014a4ec545c1cc Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Wed, 20 Sep 2023 15:02:18 +0200
Subject: [PATCH 88/89] fix conflict

---
 .../content/display/image-display/ImageDisplay.vue              | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
index 3a9783eb63..5e901c7ce8 100644
--- a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
+++ b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.vue
@@ -6,8 +6,6 @@
 			:src="previewUrl"
 			:alt="alternativeText"
 		/>
-
-		<div v-if="isEditMode" class="menu-background"></div>
 	</div>
 </template>
 

From 2ed020e617592982e9500304a46bc8dbaa2b3e8b Mon Sep 17 00:00:00 2001
From: KalliSfak <kalliopi.sfakianaki@dataport.de>
Date: Wed, 20 Sep 2023 15:23:01 +0200
Subject: [PATCH 89/89] fix test

---
 .../display/image-display/ImageDisplay.unit.ts  | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
index 3b1d674e60..5600b633e0 100644
--- a/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
+++ b/src/components/feature-board-file-element/content/display/image-display/ImageDisplay.unit.ts
@@ -89,15 +89,6 @@ describe("ImageDisplay", () => {
 			);
 		});
 
-		it("should not display div with class 'menu-background'", () => {
-			const { wrapper } = setup({ isEditMode: false });
-
-			const div = wrapper.find(".menu-background");
-			console.log(wrapper.props());
-
-			expect(div.exists()).toBe(false);
-		});
-
 		describe("When alternative text is defined", () => {
 			it("should have set alt correctly", () => {
 				const alternativeText = "alternative text";
@@ -150,14 +141,6 @@ describe("ImageDisplay", () => {
 			expect(src).toBe(previewUrl);
 		});
 
-		it("should display div with class 'menu-background'", () => {
-			const { wrapper } = setup({ isEditMode: true });
-
-			const div = wrapper.find(".menu-background");
-
-			expect(div.exists()).toBe(true);
-		});
-
 		describe("When alternative text is defined", () => {
 			it("should have set alt correctly", () => {
 				const alternativeText = "alternative text";