feat(ui-commons): use DownloadButton in DownloadMatrixButton

webapp/src/components/App/Singlestudy/explore/Results/ResultDetails/index.tsx

@@ -46,7 +46,7 @@ import BooleanFE from "../../../../../common/fieldEditors/BooleanFE";
 import SelectFE from "../../../../../common/fieldEditors/SelectFE";
 import NumberFE from "../../../../../common/fieldEditors/NumberFE";
 import moment from "moment";
-import DownloadMatrixButton from "../../../../../common/DownloadMatrixButton.tsx";
+import DownloadMatrixButton from "../../../../../common/buttons/DownloadMatrixButton.tsx";
 
 function ResultDetails() {
   const { study } = useOutletContext<{ study: StudyMetadata }>();

webapp/src/components/common/MatrixInput/index.tsx

@@ -22,7 +22,7 @@ import ImportDialog from "../dialogs/ImportDialog";
 import MatrixAssignDialog from "./MatrixAssignDialog";
 import { fetchMatrixFn } from "../../App/Singlestudy/explore/Modelization/Areas/Hydro/utils";
 import SplitButton from "../buttons/SplitButton";
-import DownloadMatrixButton from "../DownloadMatrixButton.tsx";
+import DownloadMatrixButton from "../buttons/DownloadMatrixButton.tsx";
 
 interface Props {
   study: StudyMetadata | StudyMetadata["id"];

webapp/src/components/common/buttons/DownloadMatrixButton.tsx

@@ -0,0 +1,65 @@
+import { downloadMatrix } from "../../../services/api/studies/raw";
+import { downloadFile } from "../../../utils/fileUtils";
+import { StudyMetadata } from "../../../common/types";
+import { useTranslation } from "react-i18next";
+import DownloadButton from "./DownloadButton";
+
+export interface DownloadMatrixButtonProps {
+  studyId: StudyMetadata["id"];
+  path: string;
+  disabled?: boolean;
+  label?: string;
+}
+
+const EXPORT_OPTIONS = [
+  { label: "TSV", value: "tsv" },
+  { label: "Excel", value: "xlsx" },
+] as const;
+
+type ExportFormat = (typeof EXPORT_OPTIONS)[number]["value"];
+
+function DownloadMatrixButton(props: DownloadMatrixButtonProps) {
+  const { t } = useTranslation();
+  const { studyId, path, disabled, label = t("global.export") } = props;
+
+  ////////////////////////////////////////////////////////////////
+  // Event Handlers
+  ////////////////////////////////////////////////////////////////
+
+  const handleDownload = async (format: ExportFormat) => {
+    if (!path) {
+      return;
+    }
+
+    const isExcel = format === "xlsx";
+
+    const res = await downloadMatrix({
+      studyId,
+      path,
+      format,
+      header: isExcel,
+      index: isExcel,
+    });
+
+    return downloadFile(
+      res,
+      `matrix_${studyId}_${path.replace("/", "_")}.${format}`,
+    );
+  };
+
+  ////////////////////////////////////////////////////////////////
+  // JSX
+  ////////////////////////////////////////////////////////////////
+
+  return (
+    <DownloadButton
+      formatOptions={[...EXPORT_OPTIONS]}
+      onClick={handleDownload}
+      disabled={!path || disabled}
+    >
+      {label}
+    </DownloadButton>
+  );
+}
+
+export default DownloadMatrixButton;