Rocket.Chat icon indicating copy to clipboard operation
Rocket.Chat copied to clipboard

fix: adding validation when adding link to message composer

Open divyanshu-patil opened this issue 1 month ago • 4 comments

Proposed changes (including videos or screenshots)

  • Added regex-based validation to ensure URLs start with http:// or https://.
  • Disabled Add button until the URL is valid (UX improvement).
  • Added i18n keys for the new validation message.
  • Included translations for:
  1. English
  2. Spanish (es)
  3. Portuguese (pt-BR)
  4. Hindi (hi)

Issue(s)

closes #37572

Steps to test or reproduce

affected screens

  • Add Link Modal in message composer

Further comments

  • Please review the new i18n keys for naming consistency.
  • Let me know if additional languages should be included.
  • If the regex or UX behaviour (disabling the button) needs refinement, I can update accordingly

Summary by CodeRabbit

  • New Features

    • Enhanced URL validation in the link composer with real-time feedback—users now see immediate errors if the URL is missing or doesn’t start with http:// or https://.
    • Confirm button is disabled until a valid URL is entered.
  • Localization

    • Added URL validation messages in English, Spanish, Hindi, and Portuguese (Brazil).

✏️ Tip: You can customize this high-level summary in your review settings.

divyanshu-patil avatar Nov 21 '25 13:11 divyanshu-patil

Looks like this PR is not ready to merge, because of the following issues:

  • This PR is missing the 'stat: QA assured' label
  • This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

dionisio-bot[bot] avatar Nov 21 '25 13:11 dionisio-bot[bot]

⚠️ No Changeset found

Latest commit: 1436b2a9d3bf780eb68b8f08e7e3e770f03edd90

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

changeset-bot[bot] avatar Nov 21 '25 13:11 changeset-bot[bot]

CLA assistant check
All committers have signed the CLA.

CLAassistant avatar Nov 21 '25 13:11 CLAassistant

Walkthrough

URL validation was added to the message composer link modal: the form now validates required http/https URLs on change, shows inline error messages, and disables confirm until valid. Translation keys for the validation messages were added in en, es, hi-IN, and pt-BR.

Changes

Cohort / File(s) Summary
Link Composer Validation
apps/meteor/app/ui-message/client/messageBox/AddLinkComposerActionModal.tsx
Switched useForm mode to onChange and read formState; wrapped URL input with Controller adding required and http/https pattern validation; render FieldError from fuselage; disable confirm button when form is invalid.
Localization Files
packages/i18n/src/locales/en.i18n.json, packages/i18n/src/locales/es.i18n.json, packages/i18n/src/locales/hi-IN.i18n.json, packages/i18n/src/locales/pt-BR.i18n.json
Added translation keys URL_is_required and URL_must_start_with_'http://'_or_'https://' with locale-specific messages for URL validation.

Sequence Diagram

sequenceDiagram
    actor User
    participant Modal as AddLinkComposerActionModal
    participant Form as React Hook Form
    participant Validator as URL Pattern Check
    participant UI as FieldError / Confirm Button

    User->>Modal: Open modal & type URL
    Modal->>Form: onChange -> update field value
    Form->>Validator: Validate required + http/https pattern
    alt Valid URL
        Validator-->>Form: validation passed
        Form-->>Modal: formState.isValid = true
        Modal-->>UI: enable Confirm
    else Invalid or empty
        Validator-->>Form: validation failed (error message)
        Form-->>Modal: formState.isValid = false
        Modal-->>UI: show FieldError (translated message) & disable Confirm
    end
    User->>Modal: Click Confirm (only if enabled)
    Modal->>Modal: Submit validated URL

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

  • Review focus:
    • AddLinkComposerActionModal.tsx — verify regex correctness, translation keys usage, and correct wiring of Controller + formState.
    • Localization files — ensure key names match usage and translations are accurate/consistent.

Poem

🐰 I nibbled on a tiny clue,

"http or https," I quietly knew.
No empty hops, no wild link play,
Errors guide — now all's OK.
A little rabbit guards the way. 🥕🔗

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and concisely describes the main change: adding validation for URLs in the message composer's link modal.
Linked Issues check ✅ Passed The PR addresses all requirements from issue #37572: URL validation is implemented via regex pattern (http/https), the confirm button disables until valid, and error messages are provided.
Out of Scope Changes check ✅ Passed All changes are directly related to URL validation in the Add Link modal: component logic, validation rules, and i18n translations for validation messages.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing touches
🧪 Generate unit tests (beta)
  • [ ] Create PR with unit tests
  • [ ] Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

  • Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 001ac86f6738152c37d2dacc1cc4620ed9dfe99f and e0f2346b1074b32affb4f6a3a98085ae48cdf55d.

📒 Files selected for processing (1)
  • packages/i18n/src/locales/en.i18n.json (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/i18n/src/locales/en.i18n.json

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

coderabbitai[bot] avatar Nov 21 '25 13:11 coderabbitai[bot]