feat: integrate Collabora using iframe [WPB-21650]

package.json

@@ -16,7 +16,7 @@
     "@wireapp/avs": "10.2.19",
     "@wireapp/avs-debugger": "0.0.7",
     "@wireapp/commons": "5.4.9",
-    "@wireapp/core": "^46.46.6-beta.9.457c85ad6",
+    "@wireapp/core": "46.46.8",
     "@wireapp/kalium-backup": "0.0.4",
     "@wireapp/promise-queue": "2.4.9",
     "@wireapp/react-ui-kit": "9.69.6",

src/i18n/en-US.json

@@ -437,6 +437,7 @@
   "cells.options.restore": "Restore",
   "cells.options.share": "Share",
   "cells.options.tags": "Add or Remove Tags",
+  "cells.options.edit": "Edit",
   "cells.pagination.loadMoreResults": "Load More Items",
   "cells.pagination.nextPage": "Next Page",
   "cells.pagination.previousPage": "Previous Page",
@@ -981,6 +982,8 @@
   "federationConnectionRemove": "The backends [bold]{backendUrlOne}[/bold] and [bold]{backendUrlTwo}[/bold] stopped federating.",
   "federationDelete": "[bold]Your backend[/bold] stopped federating with [bold]{backendUrl}.[/bold]",
   "fileCardDefaultCloseButtonLabel": "Close",
+  "fileFullscreenModal.editor.error": "Failed to load edit preview",
+  "fileFullscreenModal.editor.iframeTitle": "Document editor",
   "fileFullscreenModal.noPreviewAvailable.callToAction": "Download File",
   "fileFullscreenModal.noPreviewAvailable.description": "There is no preview available for this file. Download the file instead.",
   "fileFullscreenModal.noPreviewAvailable.title": "File without preview",
@@ -2047,4 +2050,4 @@
   "wireMacos": "{brandName} for macOS",
   "wireWindows": "{brandName} for Windows",
   "wire_for_web": "{brandName} for Web"
-}
+}

src/script/components/CellsGlobalView/CellsTable/CellsFilePreviewModal/CellsFilePreviewModal.tsx

@@ -25,7 +25,7 @@ import {useCellsFilePreviewModal} from '../common/CellsFilePreviewModalContext/C
 // This component is duplicated across global view and conversation view
 // TODO: Abstract when it starts to grow / feels right
 export const CellsFilePreviewModal = () => {
-  const {id, selectedFile, handleCloseFile} = useCellsFilePreviewModal();
+  const {selectedFile, handleCloseFile, isEditMode} = useCellsFilePreviewModal();
 
   if (!selectedFile) {
     return null;
@@ -49,7 +49,7 @@ export const CellsFilePreviewModal = () => {
 
   return (
     <FileFullscreenModal
-      id={id}
+      id={selectedFile.id}
       isOpen={!!selectedFile}
       onClose={handleCloseFile}
       filePreviewUrl={getFileUrl()}
@@ -60,6 +60,7 @@ export const CellsFilePreviewModal = () => {
       senderName={owner}
       timestamp={uploadedAtTimestamp}
       badges={tags}
+      isEditMode={isEditMode}
     />
   );
 };

src/script/components/CellsGlobalView/CellsTable/CellsTable.tsx

@@ -20,6 +20,7 @@
 import {flexRender, getCoreRowModel, useReactTable} from '@tanstack/react-table';
 
 import {CellsRepository} from 'Repositories/cells/CellsRepository';
+import {CellNode} from 'src/script/types/cellNode';
 
 import {CellsFilePreviewModal} from './CellsFilePreviewModal/CellsFilePreviewModal';
 import {
@@ -33,8 +34,6 @@ import {
 import {getCellsTableColumns} from './CellsTableColumns/CellsTableColumns';
 import {FilePreviewProvider} from './common/CellsFilePreviewModalContext/CellsFilePreviewModalContext';
 
-import {CellNode} from '../common/cellNode/cellNode';
-
 interface CellsTableProps {
   nodes: CellNode[];
   cellsRepository: CellsRepository;

src/script/components/CellsGlobalView/CellsTable/CellsTableColumns/CellsTableColumns.tsx

@@ -20,6 +20,7 @@
 import {createColumnHelper} from '@tanstack/react-table';
 
 import {CellsRepository} from 'Repositories/cells/CellsRepository';
+import {CellNode} from 'src/script/types/cellNode';
 import {t} from 'Util/LocalizerUtil';
 
 import {CellsConversationColumn} from './CellsConversationColumn/CellsConversationColumn';
@@ -30,8 +31,6 @@ import {CellsTableRowOptions} from './CellsTableRowOptions/CellsTableRowOptions'
 import {CellsTableSharedColumn} from './CellsTableSharedColumn/CellsTableSharedColumn';
 import {CellsTableTagsColumn} from './CellsTableTagsColumn/CellsTableTagsColumn';
 
-import {CellNode} from '../../common/cellNode/cellNode';
-
 const columnHelper = createColumnHelper<CellNode>();
 
 export const getCellsTableColumns = ({cellsRepository}: {cellsRepository: CellsRepository}) => [

src/script/components/CellsGlobalView/CellsTable/CellsTableColumns/CellsTableNameColumn/CellsTableNameColumn.tsx

@@ -21,6 +21,7 @@ import {FolderIcon, PlayIcon} from '@wireapp/react-ui-kit';
 
 import {openFolder} from 'Components/CellsGlobalView/common/openFolder/openFolder';
 import {FileTypeIcon} from 'Components/Conversation/common/FileTypeIcon/FileTypeIcon';
+import {CellFile, CellNode, CellNodeType} from 'src/script/types/cellNode';
 import {getFileExtension} from 'Util/util';
 
 import {
@@ -32,7 +33,6 @@ import {
   wrapperStyles,
 } from './CellsTableNameColumn.styles';
 
-import {CellFile, CellNode} from '../../../common/cellNode/cellNode';
 import {useCellsFilePreviewModal} from '../../common/CellsFilePreviewModalContext/CellsFilePreviewModalContext';
 interface CellsTableNameColumnProps {
   node: CellNode;
@@ -43,7 +43,11 @@ export const CellsTableNameColumn = ({node}: CellsTableNameColumnProps) => {
     <>
       <span css={mobileNameStyles}>{node.name}</span>
       <div css={wrapperStyles}>
-        {node.type === 'file' ? <FileNameColumn file={node} /> : <FolderNameColumn name={node.name} path={node.path} />}
+        {node.type === CellNodeType.FILE ? (
+          <FileNameColumn file={node} />
+        ) : (
+          <FolderNameColumn name={node.name} path={node.path} />
+        )}
       </div>
     </>
   );

src/script/components/CellsGlobalView/CellsTable/CellsTableColumns/CellsTableRowOptions/CellsTableRowOptions.tsx

@@ -21,12 +21,13 @@
 
 import {openFolder} from 'Components/CellsGlobalView/common/openFolder/openFolder';
 import {CellsRepository} from 'Repositories/cells/CellsRepository';
+import {CellNode, CellNodeType} from 'src/script/types/cellNode';
+import {isFileEditable} from 'Util/FileTypeUtil';
 import {t} from 'Util/LocalizerUtil';
 import {forcedDownloadFile} from 'Util/util';
 
 import {buttonStyles, iconStyles, textStyles} from './CellsTableRowOptions.styles';
 
-import {CellNode} from '../../../common/cellNode/cellNode';
 import {useCellsFilePreviewModal} from '../../common/CellsFilePreviewModalContext/CellsFilePreviewModalContext';
 import {showShareModal} from '../CellsShareModal/CellsShareModal';
 
@@ -40,7 +41,8 @@
   const {handleOpenFile} = useCellsFilePreviewModal();
 
   const url = node.url;
-  const name = node.type === 'folder' ? `${node.name}.zip` : node.name;
+  const name = node.type === CellNodeType.FOLDER ? `${node.name}.zip` : node.name;
+  const isEditable = node.type === CellNodeType.FILE && isFileEditable(node.extension!);
 
   return (
     <DropdownMenu>
@@ -52,13 +54,16 @@
       </DropdownMenu.Trigger>
       <DropdownMenu.Content>
         <DropdownMenu.Item
-          onClick={() => (node.type === 'folder' ? openFolder({path: node.path}) : handleOpenFile(node))}
+          onClick={() => (node.type === CellNodeType.FOLDER ? openFolder({path: node.path}) : handleOpenFile(node))}
         >
           {t('cells.options.open')}
         </DropdownMenu.Item>
         <DropdownMenu.Item onClick={() => showShareModal({type: node.type, uuid: node.id, cellsRepository})}>
           {t('cells.options.share')}
         </DropdownMenu.Item>
+        {isEditable && (
+          <DropdownMenu.Item onClick={() => handleOpenFile(node, true)}>{t('cells.options.edit')}</DropdownMenu.Item>
+        )}
         {!!url && (
           <DropdownMenu.Item
             onClick={() =>

src/script/components/CellsGlobalView/CellsTable/common/CellsFilePreviewModalContext/CellsFilePreviewModalContext.tsx

@@ -19,12 +19,13 @@
 
 import {createContext, ReactNode, useContext, useId, useMemo, useState} from 'react';
 
-import {CellFile} from '../../../common/cellNode/cellNode';
+import {CellFile} from 'src/script/types/cellNode';
 
 interface CellsFilePreviewModalContextValue {
   id: string;
   selectedFile: CellFile | null;
-  handleOpenFile: (file: CellFile) => void;
+  isEditMode: boolean;
+  handleOpenFile: (file: CellFile, isEditMode?: boolean) => void;
   handleCloseFile: () => void;
 }
 
@@ -36,17 +37,22 @@ interface FilePreviewProviderProps {
 
 export const FilePreviewProvider = ({children}: FilePreviewProviderProps) => {
   const [selectedFile, setSelectedFile] = useState<CellFile | null>(null);
+  const [isEditMode, setIsEditMode] = useState(false);
 
   const id = useId();
 
   const value = useMemo(
     () => ({
       id,
       selectedFile,
-      handleOpenFile: (file: CellFile) => setSelectedFile(file),
+      isEditMode,
+      handleOpenFile: (file: CellFile, isEditMode?: boolean) => {
+        setSelectedFile(file);
+        setIsEditMode(!!isEditMode);
+      },
       handleCloseFile: () => setSelectedFile(null),
     }),
-    [id, selectedFile],
+    [id, selectedFile, isEditMode],
   );
 
   return <CellsFilePreviewModalContext.Provider value={value}>{children}</CellsFilePreviewModalContext.Provider>;

src/script/components/CellsGlobalView/common/useCellsStore/useCellsStore.ts

@@ -19,7 +19,8 @@
 
 import {create} from 'zustand';
 
-import {CellNode} from '../cellNode/cellNode';
+import {CellNode} from 'src/script/types/cellNode';
+
 import {CellPagination} from '../cellPagination/cellPagination';
 
 export type Status = 'idle' | 'loading' | 'fetchingMore' | 'success' | 'error';

src/script/components/CellsGlobalView/transformCellsNodes/transformCellsNodes.ts

@@ -22,10 +22,10 @@ import {RestNode} from 'cells-sdk-ts';
 
 import {Conversation} from 'Repositories/entity/Conversation';
 import {User} from 'Repositories/entity/User';
+import {CellNode, CellNodeType} from 'src/script/types/cellNode';
 import {TIME_IN_MILLIS} from 'Util/TimeUtil';
 import {formatBytes, getFileExtension} from 'Util/util';
 
-import {CellNode} from '../common/cellNode/cellNode';
 import {getUserQualifiedIdFromNode} from '../common/getUserQualifiedIdFromNode/getUserQualifiedIdFromNode';
 
 export const transformCellsNodes = ({
@@ -65,12 +65,13 @@ export const transformCellsNodes = ({
     if (node.Type === 'COLLECTION') {
       return {
         id,
-        type: 'folder' as const,
+        type: CellNodeType.FOLDER,
         url,
         path,
         owner,
         conversationName,
         name,
+        extension: '',
         sizeMb,
         uploadedAtTimestamp,
         publicLink,
@@ -83,7 +84,7 @@ export const transformCellsNodes = ({
 
     return {
       id,
-      type: 'file' as const,
+      type: CellNodeType.FILE,
       url,
       path,
       owner,

src/script/components/Conversation/ConversationCells/CellsHeader/CellsNewMenu/CellsNewItemModal/CellsNewItemModal.tsx

@@ -22,11 +22,11 @@ import {QualifiedId} from '@wireapp/api-client/lib/user';
 import {CellsNewNodeForm} from 'Components/Conversation/ConversationCells/common/CellsNewNodeForm/CellsNewNodeForm';
 import {useCellsNewItemForm} from 'Components/Conversation/ConversationCells/common/useCellsNewNodeForm/useCellsNewNodeForm';
 import {CellsRepository} from 'Repositories/cells/CellsRepository';
+import {CellNode} from 'src/script/types/cellNode';
 import {t} from 'Util/LocalizerUtil';
 
 import {descriptionStyles} from './CellsNewItemModal.styles';
 
-import {CellNode} from '../../../common/cellNode/cellNode';
 import {CellsModal} from '../../../common/CellsModal/CellsModal';
 
 interface CellsNewItemModalProps {

src/script/components/Conversation/ConversationCells/CellsHeader/CellsNewMenu/CellsNewMenu.tsx

@@ -24,12 +24,12 @@ import {QualifiedId} from '@wireapp/api-client/lib/user';
 import {Button, ButtonVariant, DropdownMenu, PlusIcon} from '@wireapp/react-ui-kit';
 
 import {CellsRepository} from 'Repositories/cells/CellsRepository';
+import {CellNodeType} from 'src/script/types/cellNode';
 import {t} from 'Util/LocalizerUtil';
 
 import {CellsNewItemModal} from './CellsNewItemModal/CellsNewItemModal';
 import {buttonStyles, iconStyles} from './CellsNewMenu.styles';
 
-import {CellNode} from '../../common/cellNode/cellNode';
 import {getCellsFilesPath} from '../../common/getCellsFilesPath/getCellsFilesPath';
 
 interface CellsNewMenuProps {
@@ -40,9 +40,9 @@ interface CellsNewMenuProps {
 
 export const CellsNewMenu = ({cellsRepository, conversationQualifiedId, onRefresh}: CellsNewMenuProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [modalType, setModalType] = useState<CellNode['type']>('file');
+  const [modalType, setModalType] = useState<CellNodeType>(CellNodeType.FILE);
 
-  const openModal = (type: CellNode['type']) => {
+  const openModal = (type: CellNodeType) => {
     setModalType(type);
     setIsModalOpen(true);
   };
@@ -57,7 +57,9 @@ export const CellsNewMenu = ({cellsRepository, conversationQualifiedId, onRefres
           </Button>
         </DropdownMenu.Trigger>
         <DropdownMenu.Content>
-          <DropdownMenu.Item onClick={() => openModal('folder')}>{t('cells.newItemMenu.folder')}</DropdownMenu.Item>
+          <DropdownMenu.Item onClick={() => openModal(CellNodeType.FOLDER)}>
+            {t('cells.newItemMenu.folder')}
+          </DropdownMenu.Item>
         </DropdownMenu.Content>
       </DropdownMenu>
       {isModalOpen && (

src/script/components/Conversation/ConversationCells/CellsTable/CellsFilePreviewModal/CellsFilePreviewModal.tsx

@@ -25,7 +25,7 @@ import {useCellsFilePreviewModal} from '../common/CellsFilePreviewModalContext/C
 // This component is duplicated across global view and conversation view
 // TODO: Abstract when it starts to grow / feels right
 export const CellsFilePreviewModal = () => {
-  const {id, selectedFile, handleCloseFile} = useCellsFilePreviewModal();
+  const {selectedFile, handleCloseFile, isEditMode} = useCellsFilePreviewModal();
 
   if (!selectedFile) {
     return null;
@@ -49,7 +49,7 @@ export const CellsFilePreviewModal = () => {
 
   return (
     <FileFullscreenModal
-      id={id}
+      id={selectedFile.id}
       isOpen={!!selectedFile}
       onClose={handleCloseFile}
       filePreviewUrl={getFileUrl()}
@@ -60,6 +60,7 @@ export const CellsFilePreviewModal = () => {
       senderName={owner}
       timestamp={uploadedAtTimestamp}
       badges={tags}
+      isEditMode={isEditMode}
     />
   );
 };