feat: add new formik input for file size, update page media module by tomrndom · Pull Request #791 · fntechgit/summit-admin

tomrndom · 2026-02-13T04:18:39Z

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 that displays/accepts megabytes (integer MB only), shows an "MB" unit, converts to bytes for storage, and is integrated into media request forms with validation and error feedback.
Tests
- Added tests verifying MB↔bytes conversion, display of stored bytes as MB, empty-value handling, input restrictions, and form submission behavior.

…media Signed-off-by: Tomás Castillo <tcastilloboireau@gmail.com>

coderabbitai · 2026-02-13T04:18:56Z

📝 Walkthrough

Walkthrough

Adds a new Formik-bound file-size input component that displays megabytes and stores bytes, a constant for bytes-per-MB, tests for conversions and display, and replaces the previous numeric text field with the new component in the media request module.

Changes

Cohort / File(s)	Summary
New Component & Tests `src/components/mui/formik-inputs/mui-formik-file-size-field.js`, `src/components/mui/__tests__/mui-formik-file-size-field.test.js`	Introduces `MuiFormikFilesizeField` (default export) that shows MB, stores bytes, blocks non-integer keys, includes PropTypes; adds tests verifying MB→bytes conversion, bytes→MB display, and empty/null handling.
Integration Update `src/pages/sponsors-global/page-templates/page-template-popup/modules/page-template-media-request-module.js`	Replaces `MuiFormikTextField` for `max_file_size` with `MuiFormikFilesizeField` and updates imports/props accordingly (removed previous `type="number"`).
Constants `src/utils/constants.js`	Adds exported `BYTES_PER_MB = 1_048_576` and minor formatting adjustment (trailing semicolon).

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Field as MuiFormikFilesizeField
    participant Formik
    participant Module as PageTemplateMediaRequestModule
    participant API

    User->>Field: enters "10" (MB)
    Field->>Formik: setFieldValue("max_file_size", 10 * BYTES_PER_MB)
    Note right of Formik: value stored as bytes
    User->>Formik: submit form
    Formik->>Module: onSubmit payload (max_file_size: bytes)
    Module->>API: send payload
    API-->>Module: response
    Module-->>User: submit result

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

smarcet
romanetar

Poem

🐰 I hop on keys and count each byte,

MBs by day, stored small at night,
Tests nudge numbers till they’re right,
Field and Formik snug and tight,
Sniff, nibble, ship — the code takes flight! 🥕

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Merge Conflict Detection	⚠️ Warning	❌ Merge conflicts detected (3 files): ⚔️ `src/pages/sponsors-global/page-templates/page-template-popup/modules/page-template-media-request-module.js` (content) ⚔️ `src/pages/sponsors/sponsor-forms-tab/index.js` (content) ⚔️ `src/utils/constants.js` (content) These conflicts must be resolved before merging into `master`.	Resolve conflicts locally and push changes to this branch.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: adding a new Formik file size input component and integrating it into the page media module.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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

⚔️ Resolve merge conflicts (beta)

Auto-commit resolved conflicts to branch feature/mui-formik-file-size-input
Create stacked PR with resolved conflicts
Post resolved changes as copyable diffs in a comment

No actionable comments were generated in the recent review. 🎉

_{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.