Export records from tables #1646
+242
−15
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,151 @@ | ||
| import { useState, useEffect } from "react"; | ||
| import Alert from "react-bootstrap/Alert"; | ||
| import Button from "react-bootstrap/Button"; | ||
| import Modal from "react-bootstrap/Modal"; | ||
| import Spinner from "react-bootstrap/Spinner"; | ||
| import { useQuery } from "@/utils/graphql"; | ||
| import { unparse } from "papaparse"; | ||
| import AlignedLabel from "./AlignedLabel"; | ||
| import { FaCircleInfo, FaDownload } from "react-icons/fa6"; | ||
| import { formatDate } from "@/utils/formatters"; | ||
|
|
||
| /** | ||
| * Generate the CSV export filename | ||
| */ | ||
| const formatFileName = (exportFilename?: string) => | ||
| `${exportFilename || "export"}-${formatDate(new Date().toISOString())}.csv`; | ||
|
|
||
| interface TableExportModalProps { | ||
| /** | ||
| * The name that will be given to the exported file, excluding | ||
| * the file extension | ||
| */ | ||
| exportFilename?: string; | ||
| /** | ||
| * A callback fired when either the modal backdrop is clicked, or the | ||
| * escape key is pressed | ||
| */ | ||
| onClose: () => void; | ||
| /** | ||
| * The graphql query to use | ||
| */ | ||
| query: string; | ||
| /** | ||
| * If the modal should be visible or hidden | ||
| */ | ||
| show: boolean; | ||
| /** | ||
| * The number of records to be exported | ||
| */ | ||
| totalRecordCount: number; | ||
| /** | ||
| * The typename of the query root that will be used to access the rows returned by the query | ||
| */ | ||
| typename: string; | ||
| } | ||
|
|
||
| /** | ||
| * UI component which provides a CSV download of the provided query | ||
| */ | ||
| export default function TableExportModal<T extends Record<string, unknown>>({ | ||
| exportFilename, | ||
| onClose, | ||
| query, | ||
| totalRecordCount, | ||
| show, | ||
| typename, | ||
| }: TableExportModalProps) { | ||
| /** | ||
| * TODO: exclude aggregations from export | ||
| * https://github.com/cityofaustin/atd-data-tech/issues/20481 | ||
| */ | ||
| const [downloadUrl, setDownloadUrl] = useState<string | null>(null); | ||
| const { data, isLoading, error } = useQuery<T>({ | ||
| // don't fetch until this modal is visible | ||
| query: show ? query : null, | ||
| typename, | ||
| hasAggregates: false, | ||
| }); | ||
|
|
||
| /** | ||
| * Hook which updates creates the CSV download blob when data becomes available | ||
| */ | ||
| useEffect(() => { | ||
| if (!isLoading && data) { | ||
| const csvContent = unparse(data, { | ||
| quotes: true, | ||
| header: true, | ||
| }); | ||
| const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" }); | ||
| const url = URL.createObjectURL(blob); | ||
| setDownloadUrl(url); | ||
| return () => { | ||
| // cleanup on unmount | ||
| URL.revokeObjectURL(url); | ||
| setDownloadUrl(null); | ||
| }; | ||
| } | ||
| }, [isLoading, data]); | ||
|
|
||
| if (error) { | ||
| console.error(error); | ||
| } | ||
|
|
||
| return ( | ||
| <Modal show={show} onHide={onClose} animation={false} backdrop="static"> | ||
| <Modal.Header closeButton> | ||
| <Modal.Title>Download data</Modal.Title> | ||
| </Modal.Header> | ||
| <Modal.Body> | ||
| <Alert | ||
| variant="info" | ||
| className="d-flex justify-content-between align-items-center" | ||
| > | ||
| <FaCircleInfo className="me-3 fs-4" /> | ||
| <div> | ||
| You are about to download{" "} | ||
| <span className="fw-bold">{`${totalRecordCount.toLocaleString()} `}</span> | ||
| <span>{`record${totalRecordCount === 1 ? "" : "s"}`}</span> — this | ||
| may take a few minutes for larger downloads | ||
| </div> | ||
| </Alert> | ||
| </Modal.Body> | ||
| <Modal.Footer> | ||
| <Button variant="secondary" onClick={onClose}> | ||
| Cancel | ||
| </Button> | ||
| {downloadUrl && ( | ||
| <Button | ||
| href={downloadUrl || "#"} | ||
| download={formatFileName(exportFilename)} | ||
| as="a" | ||
| > | ||
|
Comment on lines
+118
to
+122
There was a problem hiding this comment. Since the data is pulled together as shown by the spinner on the download button before it can be clicked, can we close this modal automatically once or very shortly after the download button is clicked by the user? I can't see any situation where a user needs to download the same data twice in rapid succession. In fact, I think we want to avoid making that easy to do. The model closing will give the user some visual feedback that the operation has occurred, and as it is, I think this relies too much on the browser's gloss outside of the viewport to telegraph that activity to the user, if it does telegraph it at all. If we can't close the modal because maybe we need to keep it mounted to preserve the URL held in the |
||
| <AlignedLabel> | ||
| <FaDownload className="me-2" /> | ||
| Download | ||
| </AlignedLabel> | ||
| </Button> | ||
| )} | ||
| {error && ( | ||
| <Alert variant="danger"> | ||
| <p>Something went wrong</p> | ||
| <p> | ||
| <details> | ||
| <summary>Error</summary> | ||
| {String(error)} | ||
| </details> | ||
| </p> | ||
| </Alert> | ||
| )} | ||
| {isLoading && ( | ||
| <Button disabled variant="outline-primary"> | ||
| <AlignedLabel> | ||
| <Spinner size="sm" className="me-2" /> | ||
| <span>Loading...</span> | ||
| </AlignedLabel> | ||
| </Button> | ||
| )} | ||
| </Modal.Footer> | ||
| </Modal> | ||
| ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| export const DEFAULT_QUERY_LIMIT = 50; | ||
| export const MAX_RECORD_EXPORT_LIMIT = 1_000_000; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What would you think about including the time in addition to the date string in this default filename? Maybe
<table_name>-20250108-1532.csvfor something downloaded today, the 8th at 3:32PM local time?I know this bleeds slightly outside of the scope of this work here, as it's contained in that utility formatter, but bringing in that change allows for a user more easily keep multiple files downloaded in a set straight. I'm thinking of the use-case of when someone wants to compare multiple sets of crashes in some BI software or something like that. Being able to open up your file browser and easily sort the files in the order in which they were downloaded is valuable.
I guess put another way -- the filename is the only tiny bit of metadata we get to attach to these CSVs, so let's take as much advantage of that as we can, and avoid the browser's behavior that yields stuff like this:
some-name.csv,some-name (1).csv,some-name (2).csv.