BC-10467 - Open Collabora from file folder (#3969)

* Show content last modified info in file table

* Add chip if file status too large for collabora online editing

Author: cdarsow

src/components/icons/material/index.ts

@@ -18,6 +18,7 @@ import {
 	mdiAccountSwitchOutline,
 	mdiAlert,
 	mdiAlertCircle,
+	mdiAlertCircleOutline,
 	mdiApplicationBracketsOutline,
 	mdiArchiveOutline,
 	mdiArrowCollapse,
@@ -48,6 +49,7 @@ import {
 	mdiCircleOutline,
 	mdiClockOutline,
 	mdiClockTimeFour,
+	mdiClockTimeFourOutline,
 	mdiClose,
 	mdiCloseCircle,
 	mdiCloudDownload,
@@ -94,6 +96,7 @@ import {
 	mdiImageOff,
 	mdiImport,
 	mdiInformation,
+	mdiInformationOutline,
 	mdiKeyboardReturn,
 	mdiLightbulbOnOutline,
 	mdiLink,
@@ -118,6 +121,7 @@ import {
 	mdiOpenInNew,
 	mdiPalette,
 	mdiPause,
+	mdiPencilOffOutline,
 	mdiPencilOutline,
 	mdiPencilPlusOutline,
 	mdiPhone,
@@ -179,6 +183,7 @@ export {
 	mdiAccountSwitchOutline,
 	mdiAlert,
 	mdiAlertCircle,
+	mdiAlertCircleOutline,
 	mdiApplicationBracketsOutline,
 	mdiArchiveOutline,
 	mdiArrowCollapse,
@@ -209,6 +214,7 @@ export {
 	mdiCircleOutline,
 	mdiClockOutline,
 	mdiClockTimeFour,
+	mdiClockTimeFourOutline,
 	mdiClose,
 	mdiCloseCircle,
 	mdiCloudDownload,
@@ -255,6 +261,7 @@ export {
 	mdiImageOff,
 	mdiImport,
 	mdiInformation,
+	mdiInformationOutline,
 	mdiKeyboardReturn,
 	mdiLightbulbOnOutline,
 	mdiLink,
@@ -279,6 +286,7 @@ export {
 	mdiOpenInNew,
 	mdiPalette,
 	mdiPause,
+	mdiPencilOffOutline,
 	mdiPencilOutline,
 	mdiPencilPlusOutline,
 	mdiPhone,

src/fileStorageApi/v3/models/file-record-response.ts

@@ -119,6 +119,12 @@ export interface FileRecordResponse {
      * @memberof FileRecordResponse
      */
     updatedAt?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof FileRecordResponse
+     */
+    contentLastModifiedAt?: string;
 }
 
 

src/locales/de.ts

@@ -45,6 +45,7 @@ export default {
 	"common.file": "Datei",
 	"common.file.exceedsCollaboraEditableFileSize":
 		"Dokumente größer als {sizeInMb} können online nicht bearbeitet werden.",
+	"common.file.exceedsCollaboraEditableFileSize.short": "Online Bearbeitung nicht möglich",
 	"common.files": "Dateien",
 	"common.instructions.orderBy.arrowKeys": "Die Elemente dieser Liste können per Pfeiltaste verschoben werden.",
 	"common.labels.admin": "Admin(s)",
@@ -1994,6 +1995,7 @@ export default {
 	"pages.folder.title": "Ordner",
 	"pages.folder.columns.name": "Name",
 	"pages.folder.columns.createdat": "Erstellt am",
+	"pages.folder.columns.lastModifiedAt": "Zuletzt geändert",
 	"pages.folder.columns.size": "Größe",
 	"pages.folder.ariaLabels.menu": "Ordner Menü",
 	"pages.folder.ariaLabels.menu.action.edit": "Ordner umbenennen",

src/locales/en.ts

@@ -43,6 +43,7 @@ export default {
 	"common.file.virusDetected.short": "Virus suspected",
 	"common.file": "file",
 	"common.file.exceedsCollaboraEditableFileSize": "Documents larger than {sizeInMb} cannot be edited online.",
+	"common.file.exceedsCollaboraEditableFileSize.short": "Online editing not possible",
 	"common.files": "files",
 	"common.instructions.orderBy.arrowKeys": "The items in this list can be moved using the arrow keys.",
 	"common.labels.admin": "",
@@ -1959,6 +1960,7 @@ export default {
 	"pages.folder.title": "Folder",
 	"pages.folder.columns.name": "Name",
 	"pages.folder.columns.createdat": "Created on",
+	"pages.folder.columns.lastModifiedAt": "Last updated",
 	"pages.folder.columns.size": "Size",
 	"pages.folder.ariaLabels.menu": "Folder menu",
 	"pages.folder.ariaLabels.menu.action.edit": "Rename folder",

src/locales/es.ts

@@ -45,6 +45,7 @@ export default {
 	"common.file": "Archivo",
 	"common.file.exceedsCollaboraEditableFileSize":
 		"Los documentos que superen los {sizeInMb} no se pueden editar en línea.",
+	"common.file.exceedsCollaboraEditableFileSize.short": "Edición en línea no posible",
 	"common.files": "Archivos",
 	"common.instructions.orderBy.arrowKeys": "Los elementos de esta lista se pueden mover con las teclas de flecha.",
 	"common.labels.admin": "Admin(s)",
@@ -2009,6 +2010,7 @@ export default {
 	"pages.folder.title": "Carpeta",
 	"pages.folder.columns.name": "Nombre",
 	"pages.folder.columns.createdat": "Creado el",
+	"pages.folder.columns.lastModifiedAt": "Última actualización",
 	"pages.folder.columns.size": "Talla",
 	"pages.folder.ariaLabels.menu": "Menú carpeta",
 	"pages.folder.ariaLabels.menu.action.edit": "Renombrar carpeta",

src/locales/uk.ts

@@ -45,6 +45,7 @@ export default {
 	"common.file": "Файл",
 	"common.file.exceedsCollaboraEditableFileSize":
 		"Документи розміром більше {sizeInMb} не можуть бути оброблені онлайн.",
+	"common.file.exceedsCollaboraEditableFileSize.short": "Онлайн редагування неможливе",
 	"common.instructions.orderBy.arrowKeys": "Елементи цього списку можна переміщати за допомогою клавіш зі стрілками.",
 	"common.files": "Файли",
 	"common.labels.admin": "адміністратор(и)",
@@ -1979,6 +1980,7 @@ export default {
 	"pages.folder.title": "Папка",
 	"pages.folder.columns.name": "Ім'я",
 	"pages.folder.columns.createdat": "Створено на",
+	"pages.folder.columns.lastModifiedAt": "Останнє оновлення",
 	"pages.folder.columns.size": "Розмір",
 	"pages.folder.ariaLabels.menu": "Меню Папки",
 	"pages.folder.ariaLabels.menu.action.edit": "Перейменувати папку",

src/modules/feature/board-file-element/FileContentElement.vue

@@ -57,7 +57,6 @@
 <script setup lang="ts">
 import { useFileAlerts } from "./content/alert/useFileAlerts.composable";
 import FileContent from "./content/FileContent.vue";
-import { mapEditBoardPermissionToEditorMode } from "./mapper";
 import { FileAlert } from "./shared/types/FileAlert.enum";
 import FileUpload from "./upload/FileUpload.vue";
 import { FileRecordParentType, PreviewWidth } from "@/fileStorageApi/v3";
@@ -70,6 +69,7 @@ import { useEnvConfig } from "@data-env";
 import { useFileStorageApi } from "@data-file";
 import { BoardMenuScope } from "@ui-board";
 import { KebabMenuActionDelete, KebabMenuActionMoveDown, KebabMenuActionMoveUp } from "@ui-kebab-menu";
+import { mapEditBoardPermissionToEditorMode } from "@util-board";
 import { useDebounceFn } from "@vueuse/core";
 import { computed, onMounted, ref, toRef, watch } from "vue";
 import { useI18n } from "vue-i18n";

src/modules/feature/board-file-element/mapper/index.ts

@@ -10,7 +10,12 @@ import { useBoardStore } from "@/modules/data/board/Board.store";
 import { ParentNodeInfo, ParentNodeType } from "@/types/board/ContentElement";
 import { FileRecordParent } from "@/types/file/File";
 import * as FileHelper from "@/utils/fileHelper";
-import { fileRecordFactory, mockedPiniaStoreTyping, parentNodeInfoFactory } from "@@/tests/test-utils";
+import {
+	boardResponseFactory,
+	fileRecordFactory,
+	mockedPiniaStoreTyping,
+	parentNodeInfoFactory,
+} from "@@/tests/test-utils";
 import { createTestingI18n, createTestingVuetify } from "@@/tests/test-utils/setup";
 import * as BoardApi from "@data-board";
 import * as FileStorageApi from "@data-file";
@@ -76,7 +81,7 @@ describe("Folder.vue", () => {
 	describe("when user has board edit permission", () => {
 		describe("when folder contains no files", () => {
 			describe("when component is loaded", () => {
-				const setup = async () => {
+				const setup = async (boardInStoreUndefined = false, boardInStoreIsParent = true) => {
 					const folderStateMock = createMock<ReturnType<typeof FolderState.useFolderState>>();
 					vi.spyOn(FolderState, "useFolderState").mockReturnValueOnce(folderStateMock);
 
@@ -107,6 +112,10 @@ describe("Folder.vue", () => {
 
 					const { wrapper } = setupWrapper();
 					const useBoardStoreMock = mockedPiniaStoreTyping(useBoardStore);
+					const board = boardResponseFactory.build({
+						id: boardInStoreIsParent ? parent.id : "different-board-id",
+					});
+					useBoardStoreMock.board = boardInStoreUndefined ? undefined : board;
 
 					await nextTick();
 					await nextTick();
@@ -135,14 +144,6 @@ describe("Folder.vue", () => {
 					expect(fileStorageApiMock.fetchFiles).toHaveBeenCalled();
 				});
 
-				it("should call fetchBoardRequest", async () => {
-					const { useBoardStoreMock, parent } = await setup();
-
-					expect(useBoardStoreMock.fetchBoardRequest).toHaveBeenCalledWith({
-						boardId: parent.id,
-					});
-				});
-
 				it("should not show the loading spinner", async () => {
 					const { wrapper } = await setup();
 
@@ -164,6 +165,31 @@ describe("Folder.vue", () => {
 					expect(includesFolderName).toBe(true);
 				});
 
+				describe("when board is not in store", () => {
+					it("should call fetchBoardRequest", async () => {
+						const { useBoardStoreMock, parent } = await setup(true);
+
+						expect(useBoardStoreMock.fetchBoardRequest).toHaveBeenCalledWith({
+							boardId: parent.id,
+						});
+					});
+				});
+				describe("when board in store is not the same as parent", () => {
+					it("should call fetchBoardRequest", async () => {
+						const { useBoardStoreMock, parent } = await setup(false, false);
+
+						expect(useBoardStoreMock.fetchBoardRequest).toHaveBeenCalledWith({
+							boardId: parent.id,
+						});
+					});
+				});
+				describe("when board in store is the same as parent", () => {
+					it("should not call fetchBoardRequest", async () => {
+						const { useBoardStoreMock } = await setup(false, true);
+
+						expect(useBoardStoreMock.fetchBoardRequest).not.toHaveBeenCalled();
+					});
+				});
 				describe("when folder is board", () => {
 					it("should call createPageInformation with the correct parentId", async () => {
 						const { boardState, parent } = await setup();

src/modules/feature/folder/Folder.unit.ts

@@ -224,7 +224,7 @@ onMounted(async () => {
 
 	await fetchFileFolderElement(props.folderId);
 	await fetchFiles(folderId.value, FileRecordParent.BOARDNODES);
-	if (!boardStore.board) {
+	if (!boardStore.board || boardStore.board.id !== parent.value.id) {
 		await boardStore.fetchBoardRequest({ boardId: parent.value.id });
 	}