Export data for districts

Add Export data button to each district project list
Add modal that links to download for selected or all district data

closes #44

.github/workflows/qa.yml

@@ -20,3 +20,4 @@ jobs:
                 team: ${{secrets.HEROKU_TEAM}}
               env:
                 HD_VITE_ZONING_API_URL: ${{secrets.VITE_ZONING_API_URL}}
+                HD_VITE_CPDB_DATA_URL: ${{secrets.VITE_CPDB_DATA_URL}}

.github/workflows/staging.yml

@@ -23,3 +23,4 @@ jobs:
                 team: ${{secrets.HEROKU_TEAM}}
               env:
                 HD_VITE_ZONING_API_URL: ${{secrets.VITE_ZONING_API_URL}}
+                HD_VITE_CPDB_DATA_URL: ${{secrets.VITE_CPDB_DATA_URL}}

app/components/ExportDataModal.test.tsx

@@ -0,0 +1,49 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { ExportDataModal } from "./ExportDataModal";
+import { act } from "react";
+
+describe("Export Data Modal", () => {
+  const geography = "Community District MN05";
+  const fileName = "community_district_manhattan_05.csv";
+
+  it("should have a button to open the modal", async () => {
+    render(<ExportDataModal geography={geography} fileName={fileName} />);
+
+    expect(screen.queryByText(/Data Export/)).not.toBeInTheDocument();
+    await act(() => fireEvent.click(screen.getByText(/Export Data/)));
+    expect(screen.getByText(/Data Export/)).toBeInTheDocument();
+  });
+
+  it("should show the current district", async () => {
+    render(<ExportDataModal geography={geography} fileName={fileName} />);
+
+    await act(() => fireEvent.click(screen.getByText(/Export Data/)));
+    expect(screen.getByText(geography)).toBeInTheDocument();
+  });
+
+  it("should have a button to download the files", async () => {
+    render(<ExportDataModal geography={geography} fileName={fileName} />);
+
+    await act(() => fireEvent.click(screen.getByText(/Export Data/)));
+    expect(
+      screen.getByRole("link", {
+        name: "Export Data",
+      }),
+    ).toHaveAttribute("href", expect.stringContaining(fileName));
+  });
+
+  it("should let user choose whether to download all districts", async () => {
+    render(<ExportDataModal geography={geography} fileName={fileName} />);
+
+    await act(() => fireEvent.click(screen.getByText(/Export Data/)));
+    await act(() => fireEvent.click(screen.getByText(/Include all districts/)));
+    expect(
+      screen.getByRole("link", {
+        name: "Export Data",
+      }),
+    ).toHaveAttribute(
+      "href",
+      expect.stringContaining("projects_in_geographies.zip"),
+    );
+  });
+});

app/components/ExportDataModal.tsx

@@ -0,0 +1,103 @@
+import {
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Button,
+  Text,
+  Switch,
+  Heading,
+  FormControl,
+  FormLabel,
+  Box,
+} from "@nycplanning/streetscape";
+
+import { useState } from "react";
+import { LinkBtn } from "./LinkBtn";
+
+export interface ExportDataModalProps {
+  geography: string;
+  fileName: string;
+}
+
+export function ExportDataModal({ geography, fileName }: ExportDataModalProps) {
+  const [allDistricts, setAllDistricts] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const onOpen = () => setIsOpen(true);
+  const onClose = () => setIsOpen(false);
+
+  return (
+    <>
+      <Button size="xs" onClick={onOpen}>
+        Export Data
+      </Button>
+      <Modal onClose={onClose} isOpen={isOpen}>
+        <ModalOverlay />
+        <ModalContent
+          height={"min-content"}
+          width={{ base: "100vw", md: "400px" }}
+        >
+          <Box
+            fontWeight={"bold"}
+            borderBottom={"1px"}
+            borderColor={"gray.200"}
+            borderStyle={"solid"}
+            margin={"1rem"}
+          >
+            <ModalHeader padding={"0.5rem"}>Data Export</ModalHeader>
+            <ModalCloseButton />
+          </Box>
+          <ModalBody>
+            <Box marginBottom={"1rem"}>
+              <Heading
+                as={"h2"}
+                fontWeight={"bold"}
+                fontSize={"xs"}
+                color={"primary.600"}
+                textTransform={"uppercase"}
+              >
+                Geography
+              </Heading>
+              <Text>{geography}</Text>
+            </Box>
+            <Box>
+              <FormControl>
+                <FormLabel htmlFor="export-all-districts">
+                  <Heading
+                    as={"h2"}
+                    fontWeight={"bold"}
+                    fontSize={"xs"}
+                    color={"primary.600"}
+                    textTransform={"uppercase"}
+                  >
+                    Include all districts?
+                  </Heading>
+                </FormLabel>
+                <Switch
+                  id="export-all-districts"
+                  isChecked={allDistricts}
+                  onChange={() =>
+                    setAllDistricts((allDistricts) => !allDistricts)
+                  }
+                />
+              </FormControl>
+            </Box>
+          </ModalBody>
+          <ModalFooter>
+            <LinkBtn
+              isExternal
+              href={`${import.meta.env.VITE_CPDB_DATA_URL}/${allDistricts ? "projects_in_geographies.zip" : fileName}`}
+              width={"full"}
+              textAlign={"center"}
+            >
+              Export Data
+            </LinkBtn>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}

app/components/LinkBtn.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from "@testing-library/react";
+import { LinkBtn } from "./LinkBtn";
+
+describe("LinkBtn", () => {
+  it("should link to url while displaying text", () => {
+    const testUrl = "test.com";
+    const testText = "Test Text";
+    render(<LinkBtn href={testUrl}>{testText}</LinkBtn>);
+    screen.debug();
+    expect(
+      screen.getByRole("link", {
+        name: "Test Text",
+      }),
+    ).toHaveAttribute("href", testUrl);
+  });
+});

app/components/LinkBtn.tsx

@@ -0,0 +1,44 @@
+import { Link, LinkProps } from "@nycplanning/streetscape";
+
+export type LinkBtnProps = LinkProps;
+export function LinkBtn(props: LinkBtnProps) {
+  return (
+    <Link
+      borderRadius={"base"}
+      paddingX={6}
+      paddingY={3}
+      backgroundColor={"primary.600"}
+      color={"white"}
+      boxShadow="0 1.5 1.5 0 rgba(35, 78, 82, 0.08)"
+      minH={11}
+      minW={11}
+      fontSize={"sm"}
+      _disabled={{
+        backgroundColor: "primary.500",
+        color: "white",
+        opacity: 0.64,
+        pointerEvents: "none",
+      }}
+      _hover={{
+        backgroundColor: "brand.50",
+        border: "1px solid",
+        borderColor: "brand.800",
+        boxShadow: "0 1 1.5 0 rgba(217, 107, 39, 0.18)",
+        color: "gray.700",
+        fontWeight: "medium",
+      }}
+      _active={{
+        backgroundColor: "primary.500",
+        border: "none",
+        boxShadow:
+          "0px 4px 4px 0px rgba(0, 0, 0, 0.08) inset, 0px -4px 4px 0px rgba(0, 0, 0, 0.08) inset, 4px 0px 4px 0px rgba(0, 0, 0, 0.08) inset, -4px 0px 4px 0px rgba(0, 0, 0, 0.08) inset;",
+        color: "white",
+        fontWeight: "medium",
+        textDecorationLine: "underline",
+      }}
+      {...props}
+    >
+      {props.children}
+    </Link>
+  );
+}

app/components/WelcomePanel/WelcomeContent.tsx

@@ -37,10 +37,8 @@ export function WelcomeContent() {
         <Text fontSize={"small"}>
           Select a project on the map to learn more about the relevant agencies
           and capital commitments, or filter by specific geographies to see all
-          projects in that area.
-          {/* TODO: add this line when export feature is added */}
-          {/* You can also export your selection as a CSV table
-        or ESRI Shapefile. */}
+          projects in that area. You can also export your selection as a CSV
+          table.
         </Text>
       </Box>
       <Box>

app/routes/boroughs.$boroughId.community-districts.$communityDistrictId.capital-projects.tsx

@@ -2,6 +2,7 @@ import { Flex } from "@nycplanning/streetscape";
 import { json, LoaderFunctionArgs } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { CapitalProjectsPanel } from "~/components/CapitalProjectsList";
+import { ExportDataModal } from "~/components/ExportDataModal";
 import { Pagination } from "~/components/Pagination";
 import {
   findAgencies,
@@ -50,13 +51,14 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
       boroughsPromise,
       projectsByCommunityDistrictPromise,
     ]);
-  const boroughAbbr = boroughsResponse.boroughs.find(
+  const activeBorough = boroughsResponse.boroughs.find(
     (borough) => borough.id === boroughId,
-  )?.abbr;
+  );
   return {
     capitalProjectsResponse,
     agencies: agenciesResponse.agencies,
-    boroughAbbr,
+    boroughAbbr: activeBorough?.abbr,
+    boroughTitle: activeBorough?.title,
     communityDistrictId,
   };
 }
@@ -66,6 +68,7 @@ export default function CapitalProjectsByBoroughIdCommunityDistrictId() {
     capitalProjectsResponse: { total: capitalProjectsTotal, capitalProjects },
     agencies,
     boroughAbbr,
+    boroughTitle,
     communityDistrictId,
   } = useLoaderData<typeof loader>();
 
@@ -82,6 +85,10 @@ export default function CapitalProjectsByBoroughIdCommunityDistrictId() {
         marginTop={"auto"}
       >
         <Pagination total={capitalProjectsTotal} />
+        <ExportDataModal
+          geography={`Community District ${boroughAbbr}${communityDistrictId}`}
+          fileName={`community_district_${boroughTitle?.toLowerCase()}_cd${communityDistrictId}.csv`}
+        />
       </Flex>
     </CapitalProjectsPanel>
   );

app/routes/city-council-districts.$cityCouncilDistrictId.capital-projects.tsx

@@ -4,6 +4,7 @@ import { useLoaderData } from "@remix-run/react";
 import { CapitalProjectsPanel } from "../components/CapitalProjectsList";
 import { Flex } from "@nycplanning/streetscape";
 import { Pagination } from "~/components/Pagination";
+import { ExportDataModal } from "~/components/ExportDataModal";
 
 export async function loader({ request, params }: LoaderFunctionArgs) {
   const url = new URL(request.url);
@@ -62,6 +63,10 @@ export default function CapitalProjectsByCityCouncilDistrict() {
         marginTop={"auto"}
       >
         <Pagination total={capitalProjectsTotal} />
+        <ExportDataModal
+          geography={`City Council District ${cityCouncilDistrictId}`}
+          fileName={`city_council_district_${cityCouncilDistrictId}.csv`}
+        />
       </Flex>
     </CapitalProjectsPanel>
   );

package.json

@@ -27,7 +27,7 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@kubb/swagger-client": "^2.23.2",
-    "@nycplanning/streetscape": "^0.11.0",
+    "@nycplanning/streetscape": "^0.12.0",
     "@remix-run/node": "^2.7.2",
     "@remix-run/react": "^2.7.2",
     "@remix-run/serve": "^2.7.2",

sample.env

@@ -1 +1,2 @@
 VITE_ZONING_API_URL=http://localhost:3000
+VITE_CPDB_DATA_URL=