From 6231a0c9a963605ceb71032d06f66ec767076795 Mon Sep 17 00:00:00 2001 From: Duncan Hsu Date: Mon, 12 Jan 2026 17:13:10 -0800 Subject: [PATCH 1/4] refactor(metadata-instance-editor): migrate edit button to BP --- .../metadata-instance-editor/Instance.js | 31 ++-- .../metadata-instance-editor/Instance.scss | 9 +- .../__snapshots__/Instance.test.js.snap | 136 +++++++++--------- 3 files changed, 85 insertions(+), 91 deletions(-) diff --git a/src/features/metadata-instance-editor/Instance.js b/src/features/metadata-instance-editor/Instance.js index 83cfacdf00..f2a16fbe6f 100644 --- a/src/features/metadata-instance-editor/Instance.js +++ b/src/features/metadata-instance-editor/Instance.js @@ -6,15 +6,15 @@ import isEqual from 'lodash/isEqual'; import cloneDeep from 'lodash/cloneDeep'; import noop from 'lodash/noop'; +import { IconButton, TooltipProvider, Tooltip } from '@box/blueprint-web'; +import { Pencil } from '@box/blueprint-web-assets/icons/Medium'; + import type { AgentType } from '@box/box-ai-agent-selector'; import Collapsible from '../../components/collapsible/Collapsible'; import Form from '../../components/form-elements/form/Form'; import LoadingIndicatorWrapper from '../../components/loading-indicator/LoadingIndicatorWrapper'; -import PlainButton from '../../components/plain-button/PlainButton'; -import Tooltip from '../../components/tooltip'; import IconMetadataColored from '../../icons/general/IconMetadataColored'; import IconAlertCircle from '../../icons/general/IconAlertCircle'; -import IconEdit from '../../icons/general/IconEdit'; import { bdlWatermelonRed } from '../../styles/variables'; import { scrollIntoView } from '../../utils/dom'; @@ -621,18 +621,19 @@ class Instance extends React.PureComponent { if (canEdit && !isDirty && !isBusy) { const metadataLabelEditText = intl.formatMessage(messages.metadataEditTooltip); return ( - - - - - + + + + + ); } return null; diff --git a/src/features/metadata-instance-editor/Instance.scss b/src/features/metadata-instance-editor/Instance.scss index 73fdfc8e19..b94253aedb 100644 --- a/src/features/metadata-instance-editor/Instance.scss +++ b/src/features/metadata-instance-editor/Instance.scss @@ -20,7 +20,7 @@ } } -.btn-plain.metadata-instance-editor-instance-edit { +.metadata-instance-editor-instance-edit { position: absolute; top: 8px; right: 25px; @@ -28,13 +28,6 @@ display: flex; align-items: center; justify-content: center; - width: 24px; - height: 24px; - border-radius: $bdl-border-radius-size; - - &:hover svg path { - fill: $bdl-gray; - } &.metadata-instance-editor-instance-is-editing { background-color: $bdl-gray-10; diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap index 3b86242de0..bbf6b67563 100644 --- a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap +++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap @@ -12,23 +12,23 @@ exports[`features/metadata-instance-editor/fields/Instance collapsible isOpen pr className="" hasStickyHeader={true} headerActionItems={ - - - - - + + + + + } isBordered={true} isOpen={true} @@ -748,23 +748,23 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend className="" hasStickyHeader={true} headerActionItems={ - - - - - + + + + + } isBordered={true} isOpen={true} @@ -944,23 +944,23 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend className="" hasStickyHeader={true} headerActionItems={ - - - - - + + + + + } isBordered={true} isOpen={true} @@ -1049,23 +1049,23 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend className="" hasStickyHeader={true} headerActionItems={ - - - - - + + + + + } isBordered={true} isOpen={true} From 22f56b1e168c06fd454358154a16af4fac2435ce Mon Sep 17 00:00:00 2001 From: Duncan Hsu Date: Tue, 13 Jan 2026 15:12:01 -0800 Subject: [PATCH 2/4] refactor(metadata-instance-editor): migrate edit button to BP --- flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js | 1 + 1 file changed, 1 insertion(+) diff --git a/flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js b/flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js index 4237218141..9ae1fa21df 100644 --- a/flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js +++ b/flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js @@ -15,6 +15,7 @@ declare module '@box/blueprint-web-assets/icons/Medium' { declare export var RightSidebarChevronOpen: React$ComponentType; declare export var MagicWand: React$ComponentType; declare export var DocGen: React$ComponentType; + declare export var Pencil: React$ComponentType; } declare module '@box/blueprint-web-assets/icons/MediumFilled' { From 1c90ee50666d514d4b6d41902702403702169f3c Mon Sep 17 00:00:00 2001 From: Duncan Hsu Date: Tue, 13 Jan 2026 15:15:16 -0800 Subject: [PATCH 3/4] refactor(metadata-instance-editor): remove unneccesary TooltipProvider wrapper --- .../metadata-instance-editor/Instance.js | 26 +++++++++---------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/src/features/metadata-instance-editor/Instance.js b/src/features/metadata-instance-editor/Instance.js index f2a16fbe6f..7097fcc738 100644 --- a/src/features/metadata-instance-editor/Instance.js +++ b/src/features/metadata-instance-editor/Instance.js @@ -6,7 +6,7 @@ import isEqual from 'lodash/isEqual'; import cloneDeep from 'lodash/cloneDeep'; import noop from 'lodash/noop'; -import { IconButton, TooltipProvider, Tooltip } from '@box/blueprint-web'; +import { IconButton, Tooltip } from '@box/blueprint-web'; import { Pencil } from '@box/blueprint-web-assets/icons/Medium'; import type { AgentType } from '@box/box-ai-agent-selector'; @@ -621,19 +621,17 @@ class Instance extends React.PureComponent { if (canEdit && !isDirty && !isBusy) { const metadataLabelEditText = intl.formatMessage(messages.metadataEditTooltip); return ( - - - - - + + + ); } return null; From 694cc728743f4356d5b850377d571c306a8b534c Mon Sep 17 00:00:00 2001 From: Duncan Hsu Date: Tue, 13 Jan 2026 15:17:46 -0800 Subject: [PATCH 4/4] refactor(metadata-instance-editor): update snapshots --- .../__snapshots__/Instance.test.js.snap | 120 ++++++++---------- 1 file changed, 56 insertions(+), 64 deletions(-) diff --git a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap index bbf6b67563..c2794c49a8 100644 --- a/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap +++ b/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap @@ -12,23 +12,21 @@ exports[`features/metadata-instance-editor/fields/Instance collapsible isOpen pr className="" hasStickyHeader={true} headerActionItems={ - - - + - - + } + onClick={[Function]} + size="x-small" + /> + } isBordered={true} isOpen={true} @@ -748,23 +746,21 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend className="" hasStickyHeader={true} headerActionItems={ - - - + - - + } + onClick={[Function]} + size="x-small" + /> + } isBordered={true} isOpen={true} @@ -944,23 +940,21 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend className="" hasStickyHeader={true} headerActionItems={ - - - + - - + } + onClick={[Function]} + size="x-small" + /> + } isBordered={true} isOpen={true} @@ -1049,23 +1043,21 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend className="" hasStickyHeader={true} headerActionItems={ - - - + - - + } + onClick={[Function]} + size="x-small" + /> + } isBordered={true} isOpen={true}