Add CSV Download button to reports (LG-5913)

[zachmargolis]

• Reuses table data as CSV, with data-csv attribute for
  providing raw data

[zachmargolis]

for most of our pages, the tables are not too big, but this is adding a big-ish string and just letting it hang out in the DOM. maybe if this becomes slow we could make this an async operation

[aduth]

Very cool!

[aduth]

You might be able to avoid some of the forced type-casting below by specifying the props shape of the VNode.

Suggested change

	export type TableCell = string | number | VNode;
	export type TableCell = string | number | VNode<CSVProps>;

(it's gonna require more changes than just the suggestion)

[zachmargolis]

I gave it a shot and colSpan still needed a cast somehow, and these changes caused typechecker errors in the tests where we do some casting too, going to skip for now, but here was my attempted patch

diff --git a/src/components/table.tsx b/src/components/table.tsx
index 39097b7..2633b65 100644
--- a/src/components/table.tsx
+++ b/src/components/table.tsx
@@ -2,7 +2,12 @@ import { VNode, render } from "preact";
 import { csvFormatValue } from "d3-dsv";
 import Icon from "./icon";
 
-export type TableCell = string | number | VNode;
+interface CSVProps {
+  "data-csv": string[];
+  colSpan: number;
+}
+
+export type TableCell = string | number | VNode<CSVProps>;
 export type TableRow = TableCell[];
 
 export interface TableData {
@@ -49,24 +54,19 @@ function Row({
  */
 const doc = document.implementation.createHTMLDocument("");
 
-function textContent(v: VNode): string {
+function textContent(v: VNode | VNode<CSVProps>): string {
   render(v, doc.body);
   return doc.body.textContent || "";
 }
 
-interface CSVProps {
-  "data-csv": string[];
-  colSpan: number;
-}
-
 function toCSVValues(cell: TableCell): string[] {
   if (typeof cell === "object") {
     if ("data-csv" in cell.props) {
-      return (cell.props as unknown as CSVProps)["data-csv"];
+      return cell.props["data-csv"];
     }
 
     const text = textContent(cell);
-    const colspan = (cell.props as unknown as CSVProps).colSpan || 1;
+    const colspan = (cell.props as CSVProps).colSpan || 1;
 
     const empties = Array(colspan - 1).fill("");

[aduth]

Any luck with at least VNode<any> ?

[zachmargolis]

our typescript config said no:

  5:49  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

[aduth]

Could remove it 😄

https://github.com/18F/identity-reporting/blob/e8dd5d6e3323a0113347a5c129b2eb030bb6fabc/.eslintrc.json#L19

(The config predates the published shared TypeScript configuration so we need to update anyways)

[zachmargolis]

I'll clean that up in a second PR

[zachmargolis]

follow-up: #58

[stevegsa]

code looks clear. not a fan of all the comments

[stevegsa]

Looks good!