Merge branch 'develop' into feature/public-edit

packages/client/public/locales/en/ConvertDialog.json

@@ -7,5 +7,7 @@
   "HideMessage": "Do not show this message again",
   "InfoCreateFileIn": "The new '{{fileTitle}}' file is created in '{{folderTitle}}'",
   "OpenFileMessage": "The document file you open will be converted to the Office Open XML format for quick viewing and editing.",
-  "SaveOriginalFormatMessage": "Save the file copy in the original format"
+  "SaveOriginalFormatMessage": "Save the file copy in the original format",
+  "ConversionXmlMessage": "The document file you open will be converted to the Office Open XML format (docx or xlsx) for faster viewing and editing.",
+  "SelectFileType": "Please select a file type:"
 }

packages/client/src/components/dialogs/ConvertDialog/index.js

@@ -30,7 +30,9 @@ import ModalDialogContainer from "../ModalDialogContainer";
 import { ModalDialog } from "@docspace/shared/components/modal-dialog";
 import { Button } from "@docspace/shared/components/button";
 import { Text } from "@docspace/shared/components/text";
+import { Box } from "@docspace/shared/components/box";
 import { Checkbox } from "@docspace/shared/components/checkbox";
+import { RadioButtonGroup } from "@docspace/shared/components/radio-button-group";
 
 import { withTranslation, Trans } from "react-i18next";
 import { inject, observer } from "mobx-react";
@@ -56,6 +58,19 @@ const ConvertDialogComponent = (props) => {
     setIsConvertSingleFile,
   } = props;
 
+  const options = [
+    {
+      label: t("Document"),
+      value: ".docx",
+    },
+    {
+      label: t("Spreadsheet"),
+      value: ".xlsx",
+    },
+  ];
+
+  const isXML = convertItem?.fileExst?.includes(".xml");
+
   let rootFolderTitle = "";
   const convertSingleFile = !!convertItem;
   const sortedFolder = isRecentFolder || isFavoritesFolder || isShareFolder;
@@ -67,11 +82,23 @@ const ConvertDialogComponent = (props) => {
   }
 
   const [hideMessage, setHideMessage] = useState(false);
+  const [selectedOptionType, setSelectedOptionType] = useState(
+    options[0].value,
+  );
+
+  const onChangeRadioButton = (e) => {
+    setSelectedOptionType(e.target.value);
+    setIsConvertSingleFile(false);
+  };
 
   const onChangeFormat = () =>
     setStoreOriginal(!storeOriginalFiles, "storeOriginalFiles");
   const onChangeMessageVisible = () => setHideMessage(!hideMessage);
-  const onClose = () => setConvertDialogVisible(false);
+
+  const onClose = () => {
+    setConvertDialogVisible(false);
+    setIsConvertSingleFile(false);
+  };
 
   const onConvert = () => {
     onClose();
@@ -83,6 +110,13 @@ const ConvertDialogComponent = (props) => {
         toFolderId: folderId,
         action: "convert",
       };
+
+      if (isXML) {
+        item.format = selectedOptionType;
+      } else {
+        item.format = null;
+      }
+
       item.fileInfo = convertItem;
       convertFile(item, t, convertItem.isOpen);
     } else {
@@ -97,16 +131,36 @@ const ConvertDialogComponent = (props) => {
       visible={visible}
       onClose={onClose}
       withFooterCheckboxes
+      autoMaxHeight
     >
       <ModalDialog.Header>
         {convertSingleFile
           ? t("DocumentConversionTitle")
           : t("FileUploadTitle")}
       </ModalDialog.Header>
-      <ModalDialog.Body>
+      <ModalDialog.Body style={{ paddingBottom: "0px" }}>
         <Text>
-          {convertSingleFile ? t("OpenFileMessage") : t("ConversionMessage")}
+          {convertSingleFile
+            ? isXML
+              ? t("ConversionXmlMessage")
+              : t("OpenFileMessage")
+            : t("ConversionMessage")}
         </Text>
+
+        {isXML && (
+          <Box paddingProp="16px 0 0">
+            <Text>{t("SelectFileType")}</Text>
+            <RadioButtonGroup
+              orientation="vertical"
+              options={options}
+              name="convert-file-type"
+              selected={selectedOptionType}
+              onClick={onChangeRadioButton}
+              spacing="12px"
+              style={{ marginTop: "12px" }}
+            />
+          </Box>
+        )}
       </ModalDialog.Body>
       <ModalDialog.Footer>
         <div className="convert_dialog_footer">
@@ -165,7 +219,7 @@ const ConvertDialogComponent = (props) => {
   );
 };
 
-const ConvertDialog = withTranslation(["ConvertDialog", "Common"])(
+const ConvertDialog = withTranslation(["ConvertDialog", "Common", "Files"])(
   ConvertDialogComponent,
 );
 

packages/client/src/store/UploadDataStore.js

@@ -448,7 +448,7 @@ class UploadDataStore {
 
     while (index < len) {
       const conversionItem = filesToConversion[index];
-      const { fileId, toFolderId, password } = conversionItem;
+      const { fileId, toFolderId, password, format } = conversionItem;
       const itemPassword = password ? password : null;
       const file = this.files.find((f) => f.fileId === fileId);
       if (file) runInAction(() => (file.inConversion = true));
@@ -460,7 +460,7 @@ class UploadDataStore {
 
       const numberFiles = this.files.filter((f) => f.needConvert).length;
 
-      const res = convertFile(fileId, itemPassword)
+      const res = convertFile(fileId, format, itemPassword)
         .then((res) => res)
         .catch(() => {
           const error = t("FailedToConvert");
@@ -1033,6 +1033,10 @@ class UploadDataStore {
     if (!currentFile) return resolve();
     const { needConvert } = currentFile;
 
+    const isXML = currentFile.fileInfo?.fileExst?.includes(".xml");
+
+    if (isXML) return resolve();
+
     if (needConvert) {
       runInAction(() => (currentFile.action = "convert"));
 

packages/shared/api/files/index.ts

@@ -789,10 +789,11 @@ export async function getNewFiles(folderId: number) {
 // TODO: update res type
 export async function convertFile(
   fileId: string | number | null,
+  outputType = null,
   password = null,
   sync = false,
 ) {
-  const data = { password, sync };
+  const data = { password, sync, outputType };
 
   const res = (await request({
     method: "put",