chore(cd): map dev branch to wire-builds branch

.github/workflows/publish.yml

@@ -2,7 +2,7 @@ name: Publish
 
 on:
   push:
-    branches: [master, dev, release/*, new-navigation]
+    branches: [master, dev, release/*, new-navigation, feat/cells-service-api-deploy-to-imai]
     tags:
       - '*q1-2024*'
       - '*staging*'
@@ -196,6 +196,9 @@ jobs:
               },
               "q1-2024": {
                 "targets": "[\"q1-2024\"]"
+              },
+              "feat/cells-service-api": {
+                "targets": "[\"wire-cells-dev\"]"
               }
             }
           export_to: log,output

package.json

@@ -15,7 +15,7 @@
     "@wireapp/avs": "9.10.25",
     "@wireapp/avs-debugger": "0.0.7",
     "@wireapp/commons": "5.4.2",
-    "@wireapp/core": "46.19.5",
+    "@wireapp/core": "46.19.6",
     "@wireapp/react-ui-kit": "9.38.0",
     "@wireapp/store-engine-dexie": "2.1.15",
     "@wireapp/telemetry": "0.3.1",

server/config/client.config.ts

@@ -30,6 +30,13 @@ export function generateConfig(params: ConfigGeneratorParams, env: Env) {
     BACKEND_REST: urls.api ?? '',
     BACKEND_WS: urls.ws ?? '',
     BRAND_NAME: env.BRAND_NAME,
+    CELLS_PYDIO_API_KEY: env.CELLS_PYDIO_API_KEY,
+    CELLS_PYDIO_SEGMENT: env.CELLS_PYDIO_SEGMENT,
+    CELLS_PYDIO_URL: env.CELLS_PYDIO_URL,
+    CELLS_S3_API_KEY: env.CELLS_S3_API_KEY,
+    CELLS_S3_BUCKET: env.CELLS_S3_BUCKET,
+    CELLS_S3_REGION: env.CELLS_S3_REGION,
+    CELLS_S3_ENDPOINT: env.CELLS_S3_ENDPOINT,
     COUNTLY_API_KEY: env.COUNTLY_API_KEY,
     COUNTLY_ENABLE_LOGGING: env.COUNTLY_ENABLE_LOGGING == 'true',
     COUNTLY_FORCE_REPORTING: env.COUNTLY_FORCE_REPORTING == 'true',

server/config/env.ts

@@ -46,6 +46,15 @@ export type Env = {
   /** Specifies the name of the application, e.g. Webapp */
   APP_NAME: string;
 
+  /** Specifies configuration for Cells */
+  CELLS_PYDIO_API_KEY: string;
+  CELLS_PYDIO_SEGMENT: string;
+  CELLS_PYDIO_URL: string;
+  CELLS_S3_API_KEY: string;
+  CELLS_S3_BUCKET: string;
+  CELLS_S3_REGION: string;
+  CELLS_S3_ENDPOINT: string;
+
   /** Specifies the name of the backend, e.g. Wire */
   BACKEND_NAME: string;
 

server/config/server.config.ts

@@ -30,7 +30,7 @@ const ROBOTS_ALLOW_FILE = path.join(ROBOTS_DIR, 'robots.txt');
 const ROBOTS_DISALLOW_FILE = path.join(ROBOTS_DIR, 'robots-disallow.txt');
 
 const defaultCSP = {
-  connectSrc: ["'self'", 'blob:', 'data:', 'https://*.giphy.com'],
+  connectSrc: ["'self'", 'blob:', 'data:', 'https://*.giphy.com', 'https://service.zeta.pydiocells.com'],
   defaultSrc: ["'self'"],
   fontSrc: ["'self'", 'data:'],
   frameSrc: [

setupTests.js

@@ -69,3 +69,7 @@ Object.defineProperty(document, 'elementFromPoint', {
 
 const testLib = require('@testing-library/react');
 testLib.configure({testIdAttribute: 'data-uie-name'});
+
+jest.mock('@formkit/auto-animate/react', () => ({
+  useAutoAnimate: () => [null, () => {}],
+}));

src/i18n/en-US.json

@@ -502,6 +502,9 @@
   "conversationFileUploadFailedTooLargeImagesMessage": "Please select images smaller than {maxSize}MB.",
   "conversationFileUploadFailedTooLargeFilesAndImagesMessage": "Please select files smaller than {maxImageSize}MB and images smaller than {maxFileSize}MB.",
   "conversationFileUploadOverlayTitle": "Upload files",
+  "conversationFilePreviewErrorMoreOptions": "More options",
+  "conversationFilePreviewErrorRetry": "Retry",
+  "conversationFilePreviewErrorRemove": "Remove",
   "conversationFileUploadOverlayDescription": "Drag & drop to add files",
   "conversationFoldersEmptyText": "Add your conversations to folders to stay organized.",
   "conversationFoldersEmptyTextLearnMore": "Learn more",
@@ -1754,4 +1757,4 @@
   "paginationLeftArrowAriaLabel": "Go to previous page",
   "paginationRightArrowAriaLabel": "Go to next page",
   "paginationDotAriaLabel": "Go to page {page}"
-}
+}

src/script/cells/CellsRepository.ts

@@ -0,0 +1,47 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {container} from 'tsyringe';
+
+import {createUuid} from 'Util/uuid';
+
+import {APIClient} from '../service/APIClientSingleton';
+
+export class CellsRepository {
+  private readonly basePath = 'wire-cells-web';
+  constructor(private readonly apiClient = container.resolve(APIClient)) {}
+
+  async uploadFile(file: File): Promise<{uuid: string; versionId: string}> {
+    const path = `${this.basePath}/${encodeURIComponent(file.name)}`;
+
+    const uuid = createUuid();
+    const versionId = createUuid();
+
+    await this.apiClient.api.cells.uploadFileDraft({filePath: path, file, uuid, versionId});
+
+    return {
+      uuid,
+      versionId,
+    };
+  }
+
+  async deleteFileDraft({uuid, versionId}: {uuid: string; versionId: string}) {
+    return this.apiClient.api.cells.deleteFileDraft({uuid, versionId});
+  }
+}

src/script/components/Conversation/Conversation.tsx

@@ -19,13 +19,11 @@
 
 import {UIEvent, useCallback, useEffect, useState} from 'react';
 
-import cx from 'classnames';
 import {container} from 'tsyringe';
 
 import {useMatchMedia} from '@wireapp/react-ui-kit';
 
 import {CallingCell} from 'Components/calling/CallingCell';
-import {DropFileArea} from 'Components/DropFileArea';
 import {Giphy} from 'Components/Giphy';
 import {InputBar} from 'Components/InputBar';
 import {MessagesList} from 'Components/MessagesList';
@@ -42,8 +40,9 @@ import {isHittingUploadLimit} from 'Util/isHittingUploadLimit';
 import {t} from 'Util/LocalizerUtil';
 import {getLogger} from 'Util/Logger';
 import {safeMailOpen, safeWindowOpen} from 'Util/SanitizationUtil';
-import {formatBytes, incomingCssClass, removeAnimationsClass} from 'Util/util';
+import {formatBytes} from 'Util/util';
 
+import {ConversationFileDropzone} from './ConversationFileDropzone/ConversationFileDropzone';
 import {useReadReceiptSender} from './hooks/useReadReceipt';
 import {ReadOnlyConversationMessage} from './ReadOnlyConversationMessage';
 import {checkFileSharingPermission} from './utils/checkFileSharingPermission';
@@ -463,12 +462,12 @@ export const Conversation = ({
   );
 
   return (
-    <DropFileArea
+    <ConversationFileDropzone
+      inTeam={inTeam}
+      isCellsEnabled={false}
+      isConversationLoaded={isConversationLoaded}
+      activeConversationId={activeConversation?.id}
       onFileDropped={checkFileSharingPermission(uploadDroppedFiles)}
-      id="conversation"
-      className={cx('conversation', {[incomingCssClass]: isConversationLoaded, loading: !isConversationLoaded})}
-      ref={removeAnimationsClass}
-      key={activeConversation?.id}
     >
       {activeConversation && (
         <>
@@ -561,6 +560,6 @@ export const Conversation = ({
       {isGiphyModalOpen && inputValue && (
         <Giphy giphyRepository={repositories.giphy} inputValue={inputValue} onClose={closeGiphy} />
       )}
-    </DropFileArea>
+    </ConversationFileDropzone>
   );
 };

src/script/components/Conversation/ConversationFileDropzone/ConversationFileDropzone.tsx

@@ -0,0 +1,72 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {ReactNode} from 'react';
+
+import cx from 'classnames';
+
+import {DropFileArea} from 'Components/DropFileArea';
+import {incomingCssClass, removeAnimationsClass} from 'Util/util';
+
+import {FileDropzone} from './FileDropzone/FileDropzone';
+
+interface ConversationFileDropzoneProps {
+  inTeam: boolean;
+  isCellsEnabled: boolean;
+  isConversationLoaded: boolean;
+  activeConversationId?: string;
+  onFileDropped: (files: File[]) => void;
+  children: ReactNode;
+}
+
+export const ConversationFileDropzone = ({
+  inTeam,
+  isCellsEnabled,
+  isConversationLoaded,
+  activeConversationId,
+  onFileDropped,
+  children,
+}: ConversationFileDropzoneProps) => {
+  if (isCellsEnabled) {
+    return (
+      <FileDropzone isTeam={inTeam}>
+        <div
+          id="conversation"
+          className={cx('conversation', {[incomingCssClass]: isConversationLoaded, loading: !isConversationLoaded})}
+          ref={removeAnimationsClass}
+          key={activeConversationId}
+        >
+          {children}
+        </div>
+      </FileDropzone>
+    );
+  }
+
+  return (
+    <DropFileArea
+      onFileDropped={onFileDropped}
+      id="conversation"
+      className={cx('conversation', {[incomingCssClass]: isConversationLoaded, loading: !isConversationLoaded})}
+      ref={removeAnimationsClass}
+      key={activeConversationId}
+    >
+      {children}
+    </DropFileArea>
+  );
+};

src/script/components/Conversation/FileDropzone/FileDropzone.tsx → src/script/components/Conversation/ConversationFileDropzone/FileDropzone/FileDropzone.tsx

@@ -20,9 +20,12 @@
 import {ReactNode, useEffect} from 'react';
 
 import {FileRejection, useDropzone} from 'react-dropzone';
+import {container} from 'tsyringe';
 
+import {CellsRepository} from 'src/script/cells/CellsRepository';
 import {Config} from 'src/script/Config';
 import {t} from 'Util/LocalizerUtil';
+import {getLogger} from 'Util/Logger';
 import {createUuid} from 'Util/uuid';
 
 import {wrapperStyles} from './FileDropzone.styles';
@@ -31,25 +34,42 @@ import {FileDropzoneOverlay} from './FileDropzoneOverlay/FileDropzoneOverlay';
 import {validateFiles, ValidationResult} from './fileValidation/fileValidation';
 import {useIsDragging} from './useIsDragging/useIsDragging';
 
-import {useFileUploadState} from '../useFiles/useFiles';
-import {checkFileSharingPermission} from '../utils/checkFileSharingPermission';
+import {FileWithPreview, useFileUploadState} from '../../useFiles/useFiles';
+import {checkFileSharingPermission} from '../../utils/checkFileSharingPermission';
 
 interface FileDropzoneProps {
   children: ReactNode;
   isTeam: boolean;
+  cellsRepository?: CellsRepository;
 }
 
 const MAX_FILES = 10;
 
 const CONFIG = Config.getConfig();
 
-export const FileDropzone = ({isTeam, children}: FileDropzoneProps) => {
+const logger = getLogger('FileDropzone');
+
+export const FileDropzone = ({
+  isTeam,
+  cellsRepository = container.resolve(CellsRepository),
+  children,
+}: FileDropzoneProps) => {
   const {isDragging, wrapperRef} = useIsDragging();
 
-  const {addFiles, files} = useFileUploadState();
+  const {addFiles, files, updateFile} = useFileUploadState();
 
   const MAX_SIZE = isTeam ? CONFIG.MAXIMUM_ASSET_FILE_SIZE_TEAM : CONFIG.MAXIMUM_ASSET_FILE_SIZE_PERSONAL;
 
+  const uploadFile = async (file: FileWithPreview) => {
+    try {
+      const {uuid, versionId} = await cellsRepository.uploadFile(file);
+      updateFile(file.id, {remoteUuid: uuid, remoteVersionId: versionId, uploadStatus: 'success'});
+    } catch (error) {
+      logger.error('Uploading file failed', error);
+      updateFile(file.id, {uploadStatus: 'error'});
+    }
+  };
+
   const {getRootProps, getInputProps, isDragAccept} = useDropzone({
     maxSize: MAX_SIZE,
     noClick: true,
@@ -78,12 +98,20 @@ export const FileDropzone = ({isTeam, children}: FileDropzoneProps) => {
         return Object.assign(file, {
           id: createUuid(),
           preview: URL.createObjectURL(file),
+          remoteUuid: '',
+          remoteVersionId: '',
+          uploadStatus: 'uploading' as const,
         });
       });
 
       addFiles(acceptedFilesWithPreview);
+
+      acceptedFilesWithPreview.forEach(file => {
+        void uploadFile(file);
+      });
     }),
-    onError: () => {
+    onError: (error: Error) => {
+      logger.error('Dropping files failed', error);
       showFileDropzoneErrorModal({
         title: t('conversationFileUploadFailedHeading'),
         message: t('conversationFileUploadFailedMessage'),

src/script/components/Conversation/useFiles/useFiles.ts

@@ -19,15 +19,32 @@
 
 import {create} from 'zustand';
 
+export type FileUploadStatus = 'pending' | 'uploading' | 'success' | 'error';
+
 export interface FileWithPreview extends File {
   id: string;
   preview: string;
+  remoteUuid: string;
+  remoteVersionId: string;
+  uploadStatus: FileUploadStatus;
 }
 
 interface FileUploadState {
   files: FileWithPreview[];
   addFiles: (files: FileWithPreview[]) => void;
   deleteFile: (fileId: string) => void;
+  updateFile: (
+    fileId: string,
+    {
+      remoteUuid,
+      remoteVersionId,
+      uploadStatus,
+    }: {
+      remoteUuid?: string;
+      remoteVersionId?: string;
+      uploadStatus?: FileUploadStatus;
+    },
+  ) => void;
 }
 
 export const useFileUploadState = create<FileUploadState>(set => ({
@@ -40,4 +57,15 @@ export const useFileUploadState = create<FileUploadState>(set => ({
     set(state => ({
       files: state.files.filter(file => file.id !== fileId),
     })),
+  updateFile: (fileId, {remoteUuid, remoteVersionId, uploadStatus}) =>
+    set(state => ({
+      files: state.files.map(file => {
+        if (file.id === fileId) {
+          file.remoteUuid = remoteUuid ?? file.remoteUuid;
+          file.remoteVersionId = remoteVersionId ?? file.remoteVersionId;
+          file.uploadStatus = uploadStatus ?? file.uploadStatus;
+        }
+        return file;
+      }),
+    })),
 }));