[Dakshx07]

Issue:

Fixes #4102

Currently, the p5.js Web Editor blocks invalid file extensions (such as .obj) during file creation via the file modal. However, it does not perform the same validation when renaming a file. This allows users to bypass the file extension whitelist entirely by creating a valid file (e.g., test.js) and then renaming it to an invalid extension (e.g., test.obj).

This PR fixes the bypass by validating file extensions against the whitelist during the rename operation.

Demo:

(No complex UI layout modifications—it triggers the pre-existing toast error message when an invalid extension is supplied during rename, identical to the behavior in the file creation modal, and reverts the file to its previous valid name).

Changes:

• FileNode.jsx:
  • Imported CREATE_FILE_REGEX (from server/utils/fileUtils.js) and showToast (mapped as showToastAction to resolve ESLint no-shadow rules).
  • Destructured showToast in component props and declared it in propTypes.
  • Updated the validateFileName method to check that renaming a file matches CREATE_FILE_REGEX.
  • If the validation fails, it triggers showToast with the translation key NewFileModal.InvalidType and reverts the filename.
• FileNode.unit.test.jsx:
  • Mocked the showToast prop in the test setup.
  • Adjusted unit tests to use valid whitelisted extensions (.js and .json) for renaming scenarios.
  • Added a new unit test case cannot change to an invalid extension to verify that invalid renames are blocked and trigger showToast.

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• has no typecheck errors (npm run typecheck)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #4102
• meets the standards outlined in the accessibility guidelines

[khanniie]

LGTM! thank you so much!