fix: download form (#242)

* feat: displayed the results count instead of the maximum allowed * feat(download-modal): added a close icon * feat: disabled the all button when the input is already set to the max size
istex · Sep 14, 2023 · e156738 · e156738
1 parent 31aa1e8
commit e156738
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 10 deletions.
diff --git a/cypress/e2e/download-page.cy.ts b/cypress/e2e/download-page.cy.ts
@@ -129,6 +129,7 @@ describe("The Download Page", () => {
           cy.get(inputSelector).type("99");
           cy.get(inputSelector).should("have.value", maxSize);
           cy.url().should("include", `size=${maxSize}`);
+          cy.get("button#all-button").should("be.disabled");
         });
     });
   });

diff --git a/src/app/[locale]/(search)/results/@modal/(..)download/DownloadModal.tsx b/src/app/[locale]/(search)/results/@modal/(..)download/DownloadModal.tsx
@@ -1,8 +1,16 @@
 "use client";
 
 import { useState, forwardRef } from "react";
+import { useTranslations } from "next-intl";
 import { useRouter } from "next-intl/client";
-import { Dialog, DialogContent, Slide } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Slide,
+} from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import type { TransitionProps } from "@mui/material/transitions";
 import type { ClientComponent } from "@/types/next";
@@ -17,11 +25,12 @@ const Transition = forwardRef(function Transition(
 const DownloadModal: ClientComponent<Record<string, unknown>, true> = ({
   children,
 }) => {
+  const t = useTranslations("download");
   const [open, setOpen] = useState(true);
   const router = useRouter();
   const theme = useTheme();
 
-  const close = (): void => {
+  const close = () => {
     setOpen(false);
 
     // Wait until the leaving screen animation is over to go back to the /results page
@@ -38,7 +47,20 @@ const DownloadModal: ClientComponent<Record<string, unknown>, true> = ({
       maxWidth="xl"
       scroll="body"
     >
-      <DialogContent sx={{ bgcolor: "colors.white" }}>{children}</DialogContent>
+      <DialogTitle sx={{ bgcolor: "colors.white" }}>{t("title")}</DialogTitle>
+      <IconButton
+        onClick={close}
+        sx={{
+          position: "absolute",
+          right: 8,
+          top: 8,
+        }}
+      >
+        <CloseIcon />
+      </IconButton>
+      <DialogContent dividers sx={{ bgcolor: "colors.white" }}>
+        {children}
+      </DialogContent>
     </Dialog>
   );
 };

diff --git a/src/app/[locale]/download/components/DownloadForm.tsx b/src/app/[locale]/download/components/DownloadForm.tsx
@@ -12,8 +12,14 @@ import UsageSelector from "./UsageSelector";
 import useSearchParams from "@/lib/useSearchParams";
 import type { ClientComponent } from "@/types/next";
 
-const DownloadForm: ClientComponent<{ resultsCount: number }> = ({
+interface DownloadFormProps {
+  resultsCount: number;
+  displayTitle?: boolean;
+}
+
+const DownloadForm: ClientComponent<DownloadFormProps> = ({
   resultsCount,
+  displayTitle,
 }) => {
   const t = useTranslations("download");
   const searchParams = useSearchParams();
@@ -26,9 +32,11 @@ const DownloadForm: ClientComponent<{ resultsCount: number }> = ({
 
   return (
     <>
-      <Typography component="h1" variant="h5" gutterBottom>
-        {t("title")}
-      </Typography>
+      {displayTitle === true && (
+        <Typography component="h1" variant="h5" gutterBottom>
+          {t("title")}
+        </Typography>
+      )}
       <Grid container spacing={2}>
         <Grid item xs={12} md={8}>
           <Paper elevation={0} sx={{ p: 2 }}>

diff --git a/src/app/[locale]/download/components/ResultsSettings.tsx b/src/app/[locale]/download/components/ResultsSettings.tsx
@@ -54,7 +54,7 @@ const ResultsSettings: ClientComponent<{ resultsCount: number }> = ({
         onChange={handleChange}
       />
       <span data-testid="max-size-label">
-        /&nbsp;{maxSize.toLocaleString(locale)}
+        /&nbsp;{resultsCount.toLocaleString(locale)}
       </span>
       {resultsCount > maxSize && (
         <Tooltip
@@ -72,11 +72,13 @@ const ResultsSettings: ClientComponent<{ resultsCount: number }> = ({
         </Tooltip>
       )}
       <Button
+        id="all-button"
         variant="outlined"
-        sx={{ ml: "auto" }}
+        disabled={size === maxSize}
         onClick={() => {
           setSize(maxSize);
         }}
+        sx={{ ml: "auto" }}
       >
         {t("allButton")}
       </Button>

diff --git a/src/app/[locale]/download/page.tsx b/src/app/[locale]/download/page.tsx
@@ -22,7 +22,7 @@ const DownloadPage: Page = async ({ searchParams: nextSearchParams }) => {
 
   return (
     <Container sx={{ py: 6 }}>
-      <DownloadForm resultsCount={resultsCount} />
+      <DownloadForm resultsCount={resultsCount} displayTitle />
     </Container>
   );
 };