✨ Enhance ImportApplicationsForm: support for XLS, XLSX, ODS file formats

client/public/locales/en/translation.json

@@ -198,6 +198,7 @@
     "duplicateTag": "A tag with this name already exists. Use a different name.",
     "duplicateWave": "The migration wave could not be created due to a conflict with an existing wave. Make sure the name and start/end dates are unique and try again.",
     "importErrorCheckDocumentation": "For status Error imports, check the documentation to ensure your file is structured correctly.",
+    "unsupportedFileType": "Unsupported file type. Only Excel, ODS, and CSV files are allowed.",
     "insecureTracker": "Insecure mode deactivates certificate verification. Use insecure mode for instances that have self-signed certificates.",
     "inheritedReviewTooltip": "This application is inheriting a review from an archetype.",
     "inheritedReviewTooltip_plural": "This application is inheriting reviews from {{count}} archetypes.",

client/src/app/pages/applications/components/import-applications-form/import-applications-form.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import axios, { AxiosResponse } from "axios";
 import { useTranslation } from "react-i18next";
+import * as XLSX from "xlsx";
 
 import {
   ActionGroup,
@@ -39,13 +40,35 @@ export const ImportApplicationsForm: React.FC<ImportApplicationsFormProps> = ({
     setIsFileRejected(true);
   };
 
-  const onSubmit = () => {
+  const onSubmit = async () => {
     if (!file) {
       return;
     }
+
+    let fileToUpload = file;
+    const fileExtension = file.name.split(".").pop()?.toLowerCase() || "";
+
+    if (["xls", "xlsx", "ods"].includes(fileExtension)) {
+      const data = await file.arrayBuffer();
+      const workbook = XLSX.read(data, { type: "array" });
+
+      const csvData = XLSX.utils.sheet_to_csv(
+        workbook.Sheets[workbook.SheetNames[0]]
+      );
+      const blob = new Blob([csvData], { type: "text/csv" });
+
+      fileToUpload = new File(
+        [blob],
+        file.name.replace(/\.(xls|xlsx|ods)$/, ".csv"),
+        {
+          type: "text/csv",
+        }
+      );
+    }
+
     const formData = new FormData();
-    formData.set("file", file);
-    formData.set("fileName", file.name);
+    formData.set("file", fileToUpload);
+    formData.set("fileName", fileToUpload.name);
     formData.set(
       "createEntities",
       isCreateEntitiesChecked === true ? "true" : "false"
@@ -95,7 +118,13 @@ export const ImportApplicationsForm: React.FC<ImportApplicationsFormProps> = ({
             }
           }}
           dropzoneProps={{
-            accept: { "text/csv": [".csv"] },
+            accept: {
+              "text/csv": [".csv"],
+              "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
+                [".xlsx"],
+              "application/vnd.ms-excel": [".xls"],
+              "application/vnd.oasis.opendocument.spreadsheet": [".ods"],
+            },
             onDropRejected: handleFileRejected,
           }}
           onClearClick={() => {
@@ -106,7 +135,7 @@ export const ImportApplicationsForm: React.FC<ImportApplicationsFormProps> = ({
           <FormHelperText>
             <HelperText>
               <HelperTextItem variant="error">
-                You should select a CSV file.
+                {t("message.unsupportedFileType")}
               </HelperTextItem>
             </HelperText>
           </FormHelperText>

package.json

@@ -79,5 +79,9 @@
     "webpack-dev-server": {
       "express": "$express"
     }
+  },
+  "dependencies": {
+    "@types/xlsx": "^0.0.35",
+    "xlsx": "^0.18.5"
   }
 }