📁 Added drive file preview support (#2711)

linagora · Feb 1, 2023 · 81a017d · 81a017d
1 parent d21701a
commit 81a017d
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 54 deletions.
diff --git a/twake/frontend/src/app/features/viewer/api/viewer-api-client.ts b/twake/frontend/src/app/features/viewer/api/viewer-api-client.ts
@@ -1,10 +1,12 @@
 import { ChannelType } from 'app/features/channels/types/channel';
+import { Thumbnail } from 'app/features/drive/types';
 import { MessageFileType, MessageWithReplies } from 'app/features/messages/types/message';
 import { UserType } from 'app/features/users/types/user';
 import Api from '../../global/framework/api-service';
 import { TwakeService } from '../../global/framework/registry-decorator-service';
 
-const PREFIX = '/internal/services/messages/v1/companies';
+const MESSAGES_PREFIX = '/internal/services/messages/v1/companies';
+const FILES_PREFIX = '/internal/services/files/v1/companies';
 
 export type MessageFileDetails = MessageFileType & {
   user: UserType;
@@ -22,12 +24,62 @@ export type MessageFileDetails = MessageFileType & {
   };
 };
 
+export type DrivePublicFile = {
+  company_id: string;
+  id: string;
+  user_id: string;
+  application_id: null | string;
+  updated_at: number;
+  created_at: number;
+  metadata: null | {
+    name?: string;
+    mime?: string;
+    thumbnails_status?: 'done' | 'error' | 'waiting';
+    external_id?: string;
+    size?: number;
+  };
+  thumbnails: Thumbnail[];
+  upload_data: null | {
+    size: number;
+    chunks: number;
+  };
+};
+
+export type DriveFileDetails = DrivePublicFile & {
+  navigation: {
+    previous: null | {
+      message_id: string;
+      id: string;
+    };
+    next: null | {
+      message_id: string;
+      id: string;
+    };
+  };
+  message?: null | any;
+  user?: null | any;
+};
+
 @TwakeService('ViewerAPIClientService')
 class ViewerAPIClient {
   async getMessageFile(companyId: string, messageId: string, msgFileId: string) {
-    const route = `${PREFIX}/${companyId}/messages/${messageId}/files/${msgFileId}`;
+    const route = `${MESSAGES_PREFIX}/${companyId}/messages/${messageId}/files/${msgFileId}`;
     return await Api.get<{ resource: MessageFileDetails }>(route);
   }
+
+  async getPublicFile(companyId: string, fileId: string): Promise<{ resource: DriveFileDetails }> {
+    return await Api.get<{ resource: DrivePublicFile }>(
+      `${FILES_PREFIX}/${companyId}/files/${fileId}`,
+    ).then(({ resource }) => ({
+      resource: {
+        ...resource,
+        navigation: {
+          next: null,
+          previous: null,
+        },
+      },
+    }));
+  }
 }
 
 export default new ViewerAPIClient();
diff --git a/twake/frontend/src/app/features/viewer/hooks/use-viewer.ts b/twake/frontend/src/app/features/viewer/hooks/use-viewer.ts
@@ -1,14 +1,15 @@
 import { useGlobalEffect } from 'app/features/global/hooks/use-global-effect';
 import { MessageFileType } from 'app/features/messages/types/message';
-import ViewerAPIClient, { MessageFileDetails } from '../api/viewer-api-client';
+import ViewerAPIClient, { DriveFileDetails, MessageFileDetails } from '../api/viewer-api-client';
 import { atom, useRecoilState } from 'recoil';
 import FileUploadApiClient from 'app/features/files/api/file-upload-api-client';
 import FileUploadService from 'app/features/files/services/file-upload-service';
 import { LoadingState } from 'app/features/global/state/atoms/Loading';
+import UserAPIClient from 'app/features/users/api/user-api-client';
 
 export const FileViewerState = atom<{
   file: null | { company_id?: string; message_id?: string; id?: string };
-  details?: MessageFileDetails;
+  details?: MessageFileDetails | DriveFileDetails;
   loading: boolean;
 }>({
   key: 'FileViewerState',
@@ -43,16 +44,37 @@ export const useFileViewer = () => {
           ...status,
           loading: true,
         });
-        const details = await ViewerAPIClient.getMessageFile(
-          status.file.company_id || '',
-          status.file.message_id || '',
-          status.file.id || '',
-        );
-        setStatus({
-          ...status,
-          details: details.resource || (details as unknown as MessageFileDetails),
-          loading: false,
-        });
+
+        if (status.file.message_id) {
+          const details = await ViewerAPIClient.getMessageFile(
+            status.file.company_id || '',
+            status.file.message_id || '',
+            status.file.id || '',
+          );
+
+          setStatus({
+            ...status,
+            details: details.resource || (details as unknown as MessageFileDetails),
+            loading: false,
+          });
+        } else {
+          const details = await ViewerAPIClient.getPublicFile(
+            status.file.company_id || '',
+            status.file.id || '',
+          );
+
+          const user = (await UserAPIClient.list([details.resource.user_id])).pop();
+
+          setStatus({
+            ...status,
+            details: {
+              ...status.file,
+              ...details.resource,
+              user
+            },
+            loading: false,
+          });
+        }
       }
     },
     [status.file?.id],
@@ -103,13 +125,15 @@ export const useViewerDisplayData = () => {
   const extension = name?.split('.').pop();
 
   const download = FileUploadService.getDownloadRoute({
-    companyId: status?.details?.metadata?.external_id?.company_id,
-    fileId: status?.details?.metadata?.external_id?.id,
+    companyId:
+      (status?.details as MessageFileDetails)?.metadata?.external_id?.company_id ||
+      status.file?.company_id,
+    fileId: (status?.details as MessageFileDetails)?.metadata?.external_id?.id || status.file?.id,
   });
 
   const type = FileUploadApiClient.mimeToType(status?.details?.metadata?.mime || '', extension);
 
-  const id = status?.details?.metadata?.external_id?.id;
+  const id = (status?.details as MessageFileDetails)?.metadata?.external_id?.id || status.file?.id;
 
   return { download, type, name, id };
 };
diff --git a/twake/frontend/src/app/views/applications/drive/item-row/document-row.tsx b/twake/frontend/src/app/views/applications/drive/item-row/document-row.tsx
@@ -56,6 +56,8 @@ export const DocumentRow = ({
   const preview = () => {
     open({
       ...item.last_version_cache,
+      company_id: item.company_id,
+      id: metadata.external_id,
       metadata,
     });
   };

diff --git a/twake/frontend/src/app/views/applications/viewer/viewer.tsx b/twake/frontend/src/app/views/applications/viewer/viewer.tsx
@@ -16,6 +16,7 @@ import { formatSize } from 'app/features/global/utils/format-file-size';
 import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
 import currentUserService from 'app/features/users/services/current-user-service';
 import { UserType } from 'app/features/users/types/user';
+import { DrivePublicFile } from 'app/features/viewer/api/viewer-api-client';
 import {
   useFileViewer,
   useViewerDataLoading,
@@ -143,7 +144,7 @@ const Footer = () => {
 
   return (
     <>
-      {status.details?.message.text && (
+      {status.details?.message && status.details?.message?.text && (
         <div className="z-10 p-5 pb-0 bg-black w-full flex text-white">
           <Text.Base noColor className="block text-white">
             {status.details?.message.text.substring(0, 500)}
@@ -163,8 +164,15 @@ const Footer = () => {
           </Text.Base>
           <Text.Info className="whitespace-nowrap">
             {currentUserService.getFullName(user)} •{' '}
-            {formatDate(status.details?.message?.created_at)} • {extension?.toLocaleUpperCase()},{' '}
-            {formatSize(status.details?.metadata?.size)}
+            {formatDate(
+              (status.details as DrivePublicFile)?.created_at ||
+                status.details?.message?.created_at,
+            )}{' '}
+            • {extension?.toLocaleUpperCase()},{' '}
+            {formatSize(
+              status.details?.metadata?.size ||
+                (status.details as DrivePublicFile)?.upload_data?.size,
+            )}
           </Text.Info>
         </div>
 
@@ -182,42 +190,45 @@ const Footer = () => {
             }}
           />
 
-          <Button
-            iconSize="lg"
-            className="ml-4 !rounded-full"
-            theme="dark"
-            size="lg"
-            icon={VerticalDotsIcon}
-            onClick={e => {
-              e.stopPropagation();
-
-              MenuManager.openMenu(
-                [
-                  {
-                    type: 'menu',
-                    text: Languages.t('scenes.apps.messages.jump'),
-                    onClick: () => {
-                      close();
-                      setChannelAttachmentState(false);
-                      openMessage(status.details?.message as unknown as Message, workspaceId);
+          {
+            status.details?.message && status.details?.message.id &&
+            <Button
+              iconSize="lg"
+              className="ml-4 !rounded-full"
+              theme="dark"
+              size="lg"
+              icon={VerticalDotsIcon}
+              onClick={e => {
+                e.stopPropagation();
+
+                MenuManager.openMenu(
+                  [
+                    {
+                      type: 'menu',
+                      text: Languages.t('scenes.apps.messages.jump'),
+                      onClick: () => {
+                        close();
+                        setChannelAttachmentState(false);
+                        openMessage(status.details?.message as unknown as Message, workspaceId);
+                      },
                     },
-                  },
-                  {
-                    type: 'menu',
-                    text: Languages.t('components.channel_attachement_list.open'),
-                    onClick: () => {
-                      close();
-                      setChannelAttachmentState(true);
+                    {
+                      type: 'menu',
+                      text: Languages.t('components.channel_attachement_list.open'),
+                      onClick: () => {
+                        close();
+                        setChannelAttachmentState(true);
+                      },
                     },
-                  },
-                ],
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                (window as any).getBoundingClientRect(e.target),
-                'top',
-                { margin: 0 },
-              );
-            }}
-          />
+                  ],
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  (window as any).getBoundingClientRect(e.target),
+                  'top',
+                  { margin: 0 },
+                );
+              }}
+            />
+          }
         </div>
       </div>
     </>