fix: put add blueprint plus button behind FF - AB-824

[as-flow]

Summary by CodeRabbit

• New Features

  • Section header add-buttons now show or hide per section based on feature configuration, including explicit enablement for the "Shared Blueprints" section when available.

• Refactor

  • Unified the feature-flag logic used to determine section inclusion and add-button visibility for more consistent behavior.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds per-section add-button visibility to the Builder sidebar component and centralizes the shared_blueprints feature-flag check into a new computed property isSharedBlueprintsEnabled; the blueprints sections now use this flag to determine inclusion and whether their add button is shown.

Changes

Cohort / File(s)	Summary
Blueprints sidebar component src/ui/src/builder/sidebar/BuilderSidebarComponentTree.vue	Introduced isSharedBlueprintsEnabled computed property (wraps shared_blueprints feature flag). Set section.showAddButton for the regular "Blueprints" section using this flag. When adding the "Shared Blueprints" section, explicitly set showAddButton: true. Replaced scattered direct wf.featureFlags...includes("shared_blueprints") checks with the centralized flag.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested reviewers

• madeindjs
• UladzislauK-Writer

Poem

🐰 I hopped through code to tuck a key behind a gate,
A tiny flag decides when pluses celebrate,
One computed whisper, tidy and keen,
Keeps blueprints shared when the switch is green,
A cheerful nibble, and the UI's neat and straight. 🥕

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 summarizes the main change - putting the add blueprint button behind a feature flag, directly addressing the PR's primary objective.
Linked Issues check	✅ Passed	The code changes implement feature flag gating for the add blueprint button, including a new computed flag and conditional section rendering that aligns with AB-824 requirements.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing the feature flag for the add blueprint button as specified in AB-824, with no unrelated modifications present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

📜 Recent 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 b66273b and 580a8b1.

📒 Files selected for processing (1)

• src/ui/src/builder/sidebar/BuilderSidebarComponentTree.vue

🚧 Files skipped from review as they are similar to previous changes (1)

• src/ui/src/builder/sidebar/BuilderSidebarComponentTree.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 (webkit)
• GitHub Check: build (3.12)
• GitHub Check: tests (firefox)
• GitHub Check: build (3.13)
• GitHub Check: build (3.11)
• GitHub Check: build (3.10)
• GitHub Check: build (3.9)
• GitHub Check: tests (chromium)

---

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 enhancing the BuilderSidebarComponentTree Vue component by introducing a computed property to check shared blueprint feature availability. The modification adjusts the blueprint sections computation to conditionally render add buttons based on a feature flag, providing more flexible section configuration with a new `showAddButton` property.

File	Summary
src/ui/src/builder/sidebar/BuilderSidebarComponentTree.vue	Added a new computed property isSharedBlueprintsEnabled and modified the blueprintSections computation to conditionally show add buttons based on feature flag, with a new showAddButton property for each section.

ℹ️ 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/sidebar/BuilderSidebarComponentTree.vue Line 23	The code introduces a potential XSS vulnerability by directly rendering section.title in the template without sanitization. If section.title can be controlled by untrusted sources, it could lead to script injection. The changes on lines 124-126 create a computed property that's used to control UI elements, but the underlying issue is in how section.title is rendered on line 23.

🧰 Analysis tools

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

⏱️ Latest scan covered changes up to commit 580a8b1 (latest)

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/ui/src/builder/sidebar/BuilderSidebarComponentTree.vue (1)

22-34: Indentation inconsistency in template.

The section header block (lines 22-33) uses 3 tabs of indentation, but it should use 4 tabs to match section__content at line 34, since both are children of the <div class="section"> element.

🔎 Suggested fix

-			<div class="section__header">
-				<span class="section__title">{{ section.title }}</span>
-				<WdsButton
-					v-if="section.showAddButton"
-					variant="neutral"
-					size="smallIcon"
-					:data-automation-action="section.addAction"
-					@click="section.onAdd"
-				>
-					<WdsIcon name="plus" />
-				</WdsButton>
-			</div>
+				<div class="section__header">
+					<span class="section__title">{{ section.title }}</span>
+					<WdsButton
+						v-if="section.showAddButton"
+						variant="neutral"
+						size="smallIcon"
+						:data-automation-action="section.addAction"
+						@click="section.onAdd"
+					>
+						<WdsIcon name="plus" />
+					</WdsButton>
+				</div>
 				<div class="section__content">

📜 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 f2793f4 and b66273b.

📒 Files selected for processing (1)

• src/ui/src/builder/sidebar/BuilderSidebarComponentTree.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: tests (webkit)
• GitHub Check: tests (chromium)
• GitHub Check: build (3.13)
• GitHub Check: build (3.12)
• GitHub Check: build (3.9)
• GitHub Check: build (3.10)
• GitHub Check: build (3.11)

🔇 Additional comments (3)

src/ui/src/builder/sidebar/BuilderSidebarComponentTree.vue (3)

63-72: Verify: Footer "Add blueprint" button not behind feature flag.

The section header add button is correctly gated by isSharedBlueprintsEnabled (via showAddButton), but the footer "Add blueprint" button at lines 63-72 remains visible regardless of the feature flag. Is this intentional to provide a fallback, or should this button also be hidden when the shared_blueprints flag is disabled?

Additionally, there's an indentation inconsistency here (3 tabs vs 4 tabs expected to match line 62).

---

124-126: LGTM!

Good refactor to centralize the feature flag check. The optional chaining safely handles cases where featureFlags.value might be null or undefined.

---

128-154: LGTM!

The section configuration correctly implements the feature flag gating:

• Regular "Blueprints" section shows the add button only when the FF is enabled
• "Shared Blueprints" section (which only exists when FF is enabled) always shows its add button

This aligns with the PR objective to control the add button visibility via the feature flag.

[pullrequest]

✅ Graham C 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.

Graham C

---

Reviewed with ❤️ by PullRequest

[pullrequest]

PullRequest reviewed the updates made to #1254 up until the latest commit (580a8b1). No further issues were found.

Reviewed by:

Graham C

[pullrequest]

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