feat: add new formik input for file size, update page media module

[tomrndom]

ref: https://app.clickup.com/t/86b8gnk8b

Signed-off-by: Tomás Castillo tcastilloboireau@gmail.com

Summary by CodeRabbit

• New Features

  • Added a file size input field that accepts megabytes and automatically converts to bytes for storage.
  • Integrated into media request forms with validation and error feedback.

• Tests

  • Added test suite covering file size conversion, display, empty value handling, and form submission scenarios.

[coderabbitai]

📝 Walkthrough

Walkthrough

A new MuiFormikFilesizeField component is introduced to handle file size input in megabytes while internally storing values as bytes. The component integrates with Formik and Material-UI, includes comprehensive tests covering conversion and edge cases, and is implemented in the media request module to replace the previous text-based field.

Changes

Cohort / File(s)	Summary
New MuiFormikFilesizeField Component src/components/mui/formik-inputs/mui-formik-file-size-field.js, src/components/mui/__tests__/mui-formik-file-size-field.test.js	Introduces MuiFormikFilesizeField component that converts between MB (display) and bytes (Formik storage). Includes PropTypes validation, keyboard character blocking (e, E, +, -, ., ,), and MUI TextField integration with MB adornment. Test suite validates MB-to-bytes conversion, bytes-to-MB display, empty value handling, and form submission payloads.
Integration src/pages/sponsors-global/page-templates/page-template-popup/modules/page-template-media-request-module.js	Replaces MuiFormikTextField with MuiFormikFilesizeField for max\_file\_size input, removing the previous type="number" prop and adding import for the new component.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Hops and converses in bytes and MB,
A new field that's quite the key,
Tests ensure conversions run free,
Formik and MUI dance merrily! ✨

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately captures the main changes: adding a new Formik input component for file size and updating the page media module to use it.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into master

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/mui-formik-file-size-input

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@src/components/mui/formik-inputs/mui-formik-file-size-field.js`:
- Line 19: initialValues[name] is incorrect for nested/formik paths like
"modules[0].max_file_size"; use Formik's getIn to read nested values. Replace
the emptyValue computation to use getIn(initialValues, name) (from
useFormikContext) so emptyValue becomes null when the nested initial value is
null and "" otherwise; update any references in mui-formik-file-size-field.js
(the emptyValue variable and its usage) accordingly.
- Around line 14-17: displayValue computation does not guard against undefined
leading to NaN; update the conditional used to compute displayValue in
mui-formik-file-size-field.js (the expression using field.value, BYTES_PER_MB
and Math.floor) to explicitly check for undefined (e.g., ensure field.value is
not null, not undefined, and not an empty string) before performing
Math.floor(field.value / BYTES_PER_MB) so that when field.value is undefined you
return "" instead of computing and producing NaN.

🧹 Nitpick comments (2)

src/components/mui/formik-inputs/mui-formik-file-size-field.js (2)

48-52: Prefer e.preventDefault() over e.nativeEvent.preventDefault().

Using e.nativeEvent is unconventional. React's synthetic event methods (e.preventDefault(), e.stopPropagation()) are sufficient and more idiomatic.

Proposed fix

      onKeyDown={(e) => {
        if (BLOCKED_KEYS.includes(e.key)) {
-         e.nativeEvent.preventDefault();
-         e.nativeEvent.stopImmediatePropagation();
+         e.preventDefault();
+         e.stopPropagation();
        }
      }}

---

33-61: Consider adding required prop support for consistency.

Looking at MuiFormikTextField in the relevant snippets, it supports a required prop that appends * to the label. This component doesn't forward that behavior explicitly, though it may work via ...props spread.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Missing undefined check causes NaN display.

The condition field.value !== null && field.value !== "" evaluates to true when field.value is undefined, causing Math.floor(undefined / BYTES_PER_MB) to return NaN.

Proposed fix

  const displayValue =
-   field.value !== null && field.value !== ""
+   field.value !== null && field.value !== undefined && field.value !== ""
      ? Math.floor(field.value / BYTES_PER_MB)
      : "";

🤖 Prompt for AI Agents

In `@src/components/mui/formik-inputs/mui-formik-file-size-field.js` around lines
14 - 17, displayValue computation does not guard against undefined leading to
NaN; update the conditional used to compute displayValue in
mui-formik-file-size-field.js (the expression using field.value, BYTES_PER_MB
and Math.floor) to explicitly check for undefined (e.g., ensure field.value is
not null, not undefined, and not an empty string) before performing
Math.floor(field.value / BYTES_PER_MB) so that when field.value is undefined you
return "" instead of computing and producing NaN.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Direct property access fails for nested field names.

initialValues[name] doesn't work when name is a path like modules[0].max_file_size. In the actual usage (see page-template-media-request-module.js), buildFieldName produces nested paths, so this will always return undefined, defaulting emptyValue to "" regardless of the actual initial value.

Use Formik's getIn helper which is already imported via useFormikContext.

Proposed fix

-import { useField, useFormikContext } from "formik";
+import { useField, useFormikContext, getIn } from "formik";

-  const emptyValue = initialValues[name] === null ? null : "";
+  const emptyValue = getIn(initialValues, name) === null ? null : "";

🤖 Prompt for AI Agents

In `@src/components/mui/formik-inputs/mui-formik-file-size-field.js` at line 19,
initialValues[name] is incorrect for nested/formik paths like
"modules[0].max_file_size"; use Formik's getIn to read nested values. Replace
the emptyValue computation to use getIn(initialValues, name) (from
useFormikContext) so emptyValue becomes null when the nested initial value is
null and "" otherwise; update any references in mui-formik-file-size-field.js
(the emptyValue variable and its usage) accordingly.