feat(SharedBlueprints): add character limit counter - AB-900

[as-flow]

Summary by CodeRabbit

• New Features

  • Added character counter to description field displaying current and maximum character count.
  • Implemented description length validation with maximum limit of 8,192 characters.
  • Publish/propose action button now disables when description exceeds the character limit.

• Style

  • Added styling for character counter and description error state visual indicator.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

A single Vue component is enhanced to enforce a maximum description length of 8192 characters with real-time character count feedback, validation errors, and disabled publish/propose actions when the limit is exceeded.

Changes

Cohort / File(s)

Change Summary

Description length validation and UI src/ui/src/builder/settings/BuilderSettingsDeploySharedBlueprint.vue

Introduces DESCRIPTION_MAX_LENGTH constant (8192), adds computed properties for description length tracking and over-limit detection. Enhances validation to reject descriptions exceeding the limit. Updates textarea error styling to reflect over-limit state. Adds character counter UI element displaying current/max length with distinct styling when over limit. Extends publish/propose button disabling logic to include over-limit condition alongside deployment-in-progress state. Includes new CSS for character counter and error states.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• feat(SharedBlueprints): put global blueprint proposals behind FF - AB… #1253: Modifies the same Vue component's proposal UI by gating the "Propose as global blueprint" option behind a feature flag while adjusting button state logic.

Suggested reviewers

• UladzislauK-Writer
• madeindjs

Poem

🐰 A bunny hops through character counts today,
Eight thousand limits now show the way,
Red warnings flash when we overstay,
Buttons rest until descriptions obey,
Validation brings clarity to the display! ✨

Pre-merge checks

✅ 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 specifically describes the main change: adding a character limit counter for SharedBlueprints, directly corresponding to the file modifications.
Linked Issues check	✅ Passed	The implementation fully satisfies AB-900 requirements: enforces character limit (8192 characters), displays character count UI, and disables publish button when over limit.
Out of Scope Changes check	✅ Passed	All changes are scoped to the BuilderSettingsDeploySharedBlueprint component and directly address the character limit validation requirement in AB-900.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[pullrequest]

HackerOne Code Security Review

🟢 Scan Complete: 1 Issue(s)

Here's how the code changes were interpreted and info about the tools used for scanning.

📖 Summary of Changes

The changes involve implementing description length validation in the BuilderSettingsDeploySharedBlueprint component. A new constant defines the maximum description length, and form validation has been added to prevent publishing when the description exceeds this limit. A character counter is now displayed, and the publish button is disabled if the description is too long.

File	Summary
src/ui/src/builder/settings/BuilderSettingsDeploySharedBlueprint.vue	Added description character limit validation with a new constant DESCRIPTION_MAX_LENGTH, character counter display, and updated form validation to prevent publishing when description exceeds the limit. Disabled publish button when description is too long.

ℹ️ Issues Detected

NOTE: These may not require action!

Below are unvalidated results from the Analysis Tools that ran during the latest scan for transparency. We investigate each of these for accuracy and relevance before surfacing them as a potential problem.

How will I know if something is a problem?
When validation completes, any concerns that warrant attention prior to merge will be posted as inline comments. These will show up in 2 ways:

• Expert review (most cases): Issues will be posted by experts who manually reviewed and validated them. These are real HackerOne engineers (not bots) reviewing through an integrated IDE-like tool. You can communicate with them like any other reviewer. They'll stay assigned and get notified with commit & comment updates.
• Automatically: In cases where our validation checks have highest confidence the problem is legitimate and urgent. These will include a description of contextual reasoning why & actionable next steps.

File & Line	Issue
src/ui/src/builder/settings/BuilderSettingsDeploySharedBlueprint.vue Line 79	No security vulnerabilities were introduced by the changes. The modifications add character counting and validation for the description field, which is a positive change that helps prevent potential issues with overly large inputs.

🧰 Analysis tools

• [ ✅ ] HackerOne AI Code Analysis
• [ ✅ ] HackerOne AI Code Validation
• [ ✅ ] semgrep
• [ ✅ ] bandit

⏱️ Latest scan covered changes up to commit 285cd0f (latest)

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/ui/src/builder/settings/BuilderSettingsDeploySharedBlueprint.vue (1)

132-134: Consider whether the validation error message should be displayed.

The validation correctly sets an error message when the description exceeds the limit. However, unlike the name field (Line 14) which passes :error="errors.name" to WdsTextInput, the textarea doesn't have a mechanism to display errors.description as text. Users will see the red border and red character counter, but not the explanatory error message.

If this is intentional (per the PR requirements focusing on the character counter), this is fine. Otherwise, consider displaying the error message for better UX.

📜 Review details

Configuration used: defaults

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 7a9e941 and 285cd0f.

📒 Files selected for processing (1)

• src/ui/src/builder/settings/BuilderSettingsDeploySharedBlueprint.vue

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)

• GitHub Check: tests (firefox)
• GitHub Check: build (3.12)
• GitHub Check: tests (chromium)
• GitHub Check: tests (webkit)
• GitHub Check: build (3.10)
• GitHub Check: build (3.13)
• GitHub Check: build (3.11)
• GitHub Check: build (3.9)

🔇 Additional comments (6)

src/ui/src/builder/settings/BuilderSettingsDeploySharedBlueprint.vue (6)

119-122: LGTM!

The reactive computed properties correctly track description length and over-limit status. Note that JavaScript's .length counts UTF-16 code units rather than grapheme clusters, so complex emojis may count as multiple characters—ensure the backend uses consistent counting logic.

---

24-27: LGTM!

The conditional error styling correctly provides immediate visual feedback when the description exceeds the limit or has a validation error.

---

29-37: LGTM!

The character counter implementation matches the PR requirements perfectly—it displays the current and maximum character count and applies error styling when the limit is exceeded.

---

278-278: LGTM!

The publish/propose button is correctly disabled when the description exceeds the character limit, preventing invalid submissions as specified in the PR requirements.

---

319-328: LGTM!

The character counter styling is clean and conventional—unobtrusive positioning with clear error state differentiation through color.

---

79-80: Verify the character limit matches backend validation.

The frontend enforces an 8192-character limit for descriptions, but no corresponding backend validation was found for this field in the examined code. Ensure that any backend endpoint accepting descriptions has matching character limit validation to prevent inconsistencies between client and server.

[pullrequest]

✅ Xiaoyong W reviewed all the included code changes and associated automation findings and determined that there were no immediately actionable security flaws. Note that they will continue to be notified of any new commits or comments and follow up as needed throughout the duration of this pull request's lifecycle.

Xiaoyong W

---

Reviewed with ❤️ by PullRequest

[pullrequest]

Due to inactivity, PullRequest has cancelled this review job. You can reactivate the code review job from the PullRequest dashboard.