refactor(metadata-instance-editor): migrate edit button to BP

[kduncanhsu]

Description

• Migrated the edit button within the MetadataInstanceEditor to use Blueprint components
• Removed redundant CSS
• Updated snapshots

This migration was required following the upgrade to react-tether v3, which caused the tooltip to flicker and resulted in UI integration test failures in EUA. Switching to Blueprint components resolves these issues.

Note: there is some small visual discrepancies in the hover background state due to Blueprint styling (see below screen recordings)

Screenshots

BEFORE

Screen.Recording.2026-01-12.at.5.31.17.PM.mov

AFTER

Screen.Recording.2026-01-12.at.5.32.39.PM.mov

Summary by CodeRabbit

• Style
  • Updated the metadata instance editor's edit button to use a pencil icon with improved accessibility attributes and styling.

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

[coderabbitai]

Walkthrough

Refactors the metadata instance editor's edit control: replaces a PlainButton+IconEdit with an IconButton+Pencil inside a Tooltip, updates accessibility attributes and classes, adjusts SCSS selector and removes several sizing/hover rules, and adds a Pencil export to flow-typed declarations.

Changes

Cohort / File(s)	Summary
Edit button UI & behavior src/features/metadata-instance-editor/Instance.js	Replaced PlainButton + IconEdit with IconButton using Pencil icon inside a Tooltip; added aria attributes (aria-label, aria-pressed), data-resin-target, className, and size="x-small"; onClick still toggles editing.
Stylesheet update src/features/metadata-instance-editor/Instance.scss	Renamed selector from .btn-plain.metadata-instance-editor-instance-edit to .metadata-instance-editor-instance-edit; removed width, height, border-radius, and hover fill rules; retained positioning/layout rules.
Flow type additions flow-typed/.../@box/blueprint-web-assets_vx.x.x.js	Added export declaration for Pencil in @box/blueprint-web-assets/icons/Medium.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• feat(metadata-editor): package bump for new icons #4195 — Adds usage and type export for a new Pencil icon in the metadata instance editor; directly related to the icon addition and UI change.
• feat: metadata-editor and blueprint-web-assets package bump #4137 — Package bump for @box/blueprint-web-assets that brings new icons used by the metadata editor.
• feat(sidebar-nav): update skills and docgen icons to BP (WEBAPP-42958) #4399 — Adds Flow declarations for new icon exports (similar flow-typed updates for other icons).

Suggested labels

ready-to-merge

Suggested reviewers

• tjuanitas
• jsenar

Poem

🐰 A tiny pencil hops into view,
New icon, new tooltip, a fresh UI cue.
I press the button, small and neat—
The editor wakes with nimble feet. ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The pull request title accurately and concisely describes the main change: migrating the edit button component to use Blueprint (BP) components.
Description check	✅ Passed	The pull request description is well-structured with clear sections covering the objective, motivation, visual impact, and supporting evidence (screenshots and recordings).
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

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6231a0c and 2904a65.

⛔ Files ignored due to path filters (1)

• src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap is excluded by !**/*.snap

📒 Files selected for processing (2)

• flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js
• src/features/metadata-instance-editor/Instance.js

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

• src/features/metadata-instance-editor/Instance.js

🧰 Additional context used

🧠 Learnings (3)

📚 Learning: 2025-06-25T13:09:54.538Z

Learnt from: rafalmaksymiuk
Repo: box/box-ui-elements PR: 4160
File: src/elements/content-sidebar/SidebarToggle.js:21-27
Timestamp: 2025-06-25T13:09:54.538Z
Learning: The box-ui-elements project uses Flow for type annotations in JavaScript files, as indicated by flow directives in file headers. Type annotations like `: Props` are valid Flow syntax, not TypeScript syntax.

Applied to files:

• flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js

📚 Learning: 2025-08-12T18:04:17.698Z

Learnt from: tjuanitas
Repo: box/box-ui-elements PR: 4224
File: package.json:296-297
Timestamp: 2025-08-12T18:04:17.698Z
Learning: In the box-ui-elements project, the team is comfortable with raising peerDependency minimum versions when upgrading blueprint-web packages, even if it's a breaking change for consumers.

Applied to files:

• flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js

📚 Learning: 2025-09-03T18:30:44.447Z

Learnt from: fpan225
Repo: box/box-ui-elements PR: 4239
File: src/elements/content-sidebar/SidebarPanels.js:0-0
Timestamp: 2025-09-03T18:30:44.447Z
Learning: In the CustomSidebarPanel type, the component field is required (React.ComponentType<any>), so runtime checks for component existence are unnecessary since Flow will catch missing components at compile time. User fpan225 prefers to rely on the type system rather than adding redundant runtime checks.

Applied to files:

• flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js

🧬 Code graph analysis (1)

flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js (1)

src/features/virtualized-table/BaseVirtualizedTable.js (1)

• any (32-32)

⏰ 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). (3)

• GitHub Check: lint_test_build
• GitHub Check: semgrep-cloud-platform/scan
• GitHub Check: Summary

🔇 Additional comments (1)

flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js (1)

18-18: LGTM!

The Pencil icon declaration is correctly added to the Medium icons module, following the same pattern as other icon exports in this file. This enables proper Flow typing for the Blueprint Pencil icon used in the refactored metadata instance editor.

---

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.}

[shahzadaziz]

Nice clean fix.

[mergify]

Merge Queue Status

✅ The pull request has been merged at 2904a65

This pull request spent 4 seconds in the queue, with no time running CI.
The checks were run in-place.

Required conditions to merge

• #approved-reviews-by >= 1 [🛡 GitHub branch protection]
  • refactor(metadata-instance-editor): migrate edit button to BP #4416
• #changes-requested-reviews-by = 0 [🛡 GitHub branch protection]
  • refactor(metadata-instance-editor): migrate edit button to BP #4416
• #review-threads-unresolved = 0 [🛡 GitHub branch protection]
  • refactor(metadata-instance-editor): migrate edit button to BP #4416
• branch-protection-review-decision = APPROVED [🛡 GitHub branch protection]
  • refactor(metadata-instance-editor): migrate edit button to BP #4416
• any of [🛡 GitHub branch protection]:
  • check-success = Summary
  • check-neutral = Summary
  • check-skipped = Summary
• any of [🛡 GitHub branch protection]:
  • check-success = lint_test_build
  • check-neutral = lint_test_build
  • check-skipped = lint_test_build
• any of [🛡 GitHub branch protection]:
  • check-success = license/cla
  • check-neutral = license/cla
  • check-skipped = license/cla
• any of [🛡 GitHub branch protection]:
  • check-success = lint_pull_request
  • check-neutral = lint_pull_request
  • check-skipped = lint_pull_request