feat(explorer): validate immutable file number before download

Author: Alenar

mithril-explorer/__tests__/DownloadImmutableFormInput.test.js

@@ -0,0 +1,79 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { test, fc } from "@fast-check/jest";
+import "@testing-library/jest-dom";
+import { DownloadImmutableFormInput } from "#/Artifacts/CardanoDbV2SnapshotsList/DownloadButton";
+
+const maxImmutable = 100000;
+
+function setup(max) {
+  const utils = render(<DownloadImmutableFormInput max={max} />);
+  return {
+    // Note: in `fast-check` tests `screen.getByRole("spinbutton")` find two elements for a reason I don't understand, so
+    // I'm using getAllByRole and selecting the first one to avoid the error.
+    input: screen.getAllByRole("spinbutton")[0],
+    ...utils,
+  };
+}
+
+describe("DownloadImmutableFormInput", () => {
+  it("Empty default to invalid", () => {
+    const { input } = setup(maxImmutable);
+    expect(input.checkValidity()).toBeFalsy();
+    expect(input.value).toBe("");
+  });
+
+  it("Setting empty string is invalid", () => {
+    const { input } = setup(maxImmutable);
+    fireEvent.change(input, { target: { value: "" } });
+    expect(input.checkValidity()).toBeFalsy();
+    expect(input.value).toBe("");
+  });
+
+  test.prop({
+    immutable_file_number: fc.nat({
+      max: maxImmutable,
+    }),
+  })("Immutable below or equal to max allowed", ({ immutable_file_number }) => {
+    const { input } = setup(maxImmutable);
+    fireEvent.change(input, {
+      // target: { value: `${immutable_file_number}` },
+      target: { value: immutable_file_number },
+    });
+
+    expect(input.checkValidity()).toBeTruthy();
+    expect(input.value).toBe(`${immutable_file_number}`);
+  });
+
+  test.prop({
+    immutable_file_number: fc.oneof(fc.integer({ max: -1 }), fc.integer({ min: maxImmutable + 1 })),
+  })("Immutable above max or below 0 is invalid", ({ immutable_file_number }) => {
+    const { input } = setup(maxImmutable);
+    fireEvent.change(input, {
+      target: { value: immutable_file_number },
+    });
+
+    expect(input.checkValidity()).toBeFalsy();
+  });
+
+  test.prop({
+    immutable_file_number: fc.string({ minLength: 1 }).filter((s) => isNaN(parseInt(s))),
+  })("Non-number is invalid", ({ immutable_file_number }) => {
+    const { input } = setup({ maxImmutable });
+    fireEvent.change(input, {
+      target: { value: immutable_file_number },
+    });
+
+    expect(input.checkValidity()).toBeFalsy();
+  });
+
+  test.prop({
+    immutable_file_number: fc.float({ noInteger: true }),
+  })("Float is invalid", ({ immutable_file_number }) => {
+    const { input } = setup({ maxImmutable });
+    fireEvent.change(input, {
+      target: { value: immutable_file_number },
+    });
+
+    expect(input.checkValidity()).toBeFalsy();
+  });
+});

mithril-explorer/src/components/Artifacts/CardanoDbV2SnapshotsList/DownloadButton.js

@@ -44,6 +44,12 @@ function LocationsSelect({ ariaLabel, locations, value, onChange }) {
   );
 }
 
+export function DownloadImmutableFormInput({ max, value, onChange }) {
+  return (
+    <Form.Control type="number" value={value} onChange={onChange} required min={0} max={max} />
+  );
+}
+
 export default function DownloadButton({ artifactUrl, ...props }) {
   const [show, setShow] = useState(false);
   const target = useRef(null);
@@ -54,6 +60,7 @@ export default function DownloadButton({ artifactUrl, ...props }) {
   const [digestLocationIndex, setDigestLocationIndex] = useState(0);
   const [immutableLocationIndex, setImmutableLocationIndex] = useState(0);
   const [ancillaryLocationIndex, setAncillaryLocationIndex] = useState(0);
+  const [showImmutableDownloadValidation, setShowImmutableDownloadValidation] = useState(false);
 
   const handleClose = () => setShow(false);
 
@@ -83,11 +90,20 @@ export default function DownloadButton({ artifactUrl, ...props }) {
     window.open(uri, "_blank", "noopener");
   }
 
-  function downloadImmutable() {
-    const location = artifact?.locations.immutables[immutableLocationIndex];
+  function downloadImmutable(event) {
+    // Prevent page refresh
+    event.preventDefault();
+    const form = event.target;
+
+    if (form.checkValidity() === true) {
+      const location = artifact?.locations.immutables[immutableLocationIndex];
 
-    if (location?.type === "cloud_storage") {
-      directDownload(getImmutableUrlFromTemplate(location.uri.Template, immutableFileNumber));
+      if (location?.type === "cloud_storage") {
+        directDownload(getImmutableUrlFromTemplate(location.uri.Template, immutableFileNumber));
+      }
+      setShowImmutableDownloadValidation(false);
+    } else {
+      setShowImmutableDownloadValidation(true);
     }
   }
 
@@ -141,22 +157,28 @@ export default function DownloadButton({ artifactUrl, ...props }) {
                   </Alert>
 
                   <Form.Text>Immutable (max: {maxImmutableFileNumber})</Form.Text>
-                  <InputGroup>
-                    <Form.Control
-                      type="text"
-                      value={immutableFileNumber}
-                      onChange={(e) => setImmutableFileNumber(e.target.value)}
-                    />
-                    <LocationsSelect
-                      ariaLabel="Immutable locations"
-                      locations={artifact?.locations.immutables}
-                      onChange={(e) => setImmutableLocationIndex(e.target.value)}
-                      value={immutableLocationIndex}
-                    />
-                    <Button variant="primary" onClick={downloadImmutable}>
-                      <DownloadIcon />
-                    </Button>
-                  </InputGroup>
+                  <Form
+                    noValidate
+                    onSubmit={downloadImmutable}
+                    validated={showImmutableDownloadValidation}>
+                    <InputGroup>
+                      <DownloadImmutableFormInput
+                        type="text"
+                        max={maxImmutableFileNumber}
+                        value={immutableFileNumber}
+                        onChange={(e) => setImmutableFileNumber(e.target.value)}
+                      />
+                      <LocationsSelect
+                        ariaLabel="Immutable locations"
+                        locations={artifact?.locations.immutables}
+                        onChange={(e) => setImmutableLocationIndex(e.target.value)}
+                        value={immutableLocationIndex}
+                      />
+                      <Button variant="primary" type="submit">
+                        <DownloadIcon />
+                      </Button>
+                    </InputGroup>
+                  </Form>
 
                   <Form.Text>Digests</Form.Text>
                   <InputGroup>