first commit

common/resources/client/datatable/csv-export/data-table-export-csv-button.tsx

@@ -0,0 +1,51 @@
+import {IconButton} from '../../ui/buttons/icon-button';
+import {FileDownloadIcon} from '../../icons/material/FileDownload';
+import React, {Fragment, useState} from 'react';
+import {DialogTrigger} from '../../ui/overlays/dialog/dialog-trigger';
+import {ExportCsvPayload, useExportCsv} from '../requests/use-export-csv';
+import {downloadFileFromUrl} from '../../uploads/utils/download-file-from-url';
+import {CsvExportInfoDialog} from './csv-export-info-dialog';
+
+interface DataTableExportCsvButtonProps {
+  endpoint: string;
+  payload?: ExportCsvPayload;
+}
+export function DataTableExportCsvButton({
+  endpoint,
+  payload,
+}: DataTableExportCsvButtonProps) {
+  const [dialogIsOpen, setDialogIsOpen] = useState(false);
+  const exportCsv = useExportCsv(endpoint);
+
+  return (
+    <Fragment>
+      <IconButton
+        variant="outline"
+        color="primary"
+        size="sm"
+        className="flex-shrink-0"
+        disabled={exportCsv.isPending}
+        onClick={() => {
+          exportCsv.mutate(payload, {
+            onSuccess: response => {
+              if (response.downloadPath) {
+                downloadFileFromUrl(response.downloadPath);
+              } else {
+                setDialogIsOpen(true);
+              }
+            },
+          });
+        }}
+      >
+        <FileDownloadIcon />
+      </IconButton>
+      <DialogTrigger
+        type="modal"
+        isOpen={dialogIsOpen}
+        onOpenChange={setDialogIsOpen}
+      >
+        <CsvExportInfoDialog />
+      </DialogTrigger>
+    </Fragment>
+  );
+}