Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mergify merged 5 commits into from
Jan 14, 2026
+50 −65
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6231a0c
refactor(metadata-instance-editor): migrate edit button to BP
kduncanhsu Jan 13, 2026
22f56b1
refactor(metadata-instance-editor): migrate edit button to BP
kduncanhsu Jan 13, 2026
1c90ee5
refactor(metadata-instance-editor): remove unneccesary TooltipProvide…
kduncanhsu Jan 13, 2026
694cc72
refactor(metadata-instance-editor): update snapshots
kduncanhsu Jan 13, 2026
2904a65
Merge branch 'master' into migrate-metadata-edit-button
kduncanhsu Jan 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions flow-typed/npm/@box/blueprint-web-assets_vx.x.x.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ declare module '@box/blueprint-web-assets/icons/Medium' {
declare export var RightSidebarChevronOpen: React$ComponentType<any>;
declare export var MagicWand: React$ComponentType<any>;
declare export var DocGen: React$ComponentType<any>;
declare export var Pencil: React$ComponentType<any>;
}

declare module '@box/blueprint-web-assets/icons/MediumFilled' {
Expand Down
17 changes: 8 additions & 9 deletions src/features/metadata-instance-editor/Instance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@ import isEqual from 'lodash/isEqual';
import cloneDeep from 'lodash/cloneDeep';
import noop from 'lodash/noop';

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';
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';

Expand Down Expand Up @@ -621,17 +621,16 @@ class Instance extends React.PureComponent<Props, State> {
if (canEdit && !isDirty && !isBusy) {
const metadataLabelEditText = intl.formatMessage(messages.metadataEditTooltip);
return (
<Tooltip position="top-left" text={metadataLabelEditText}>
<PlainButton
<Tooltip content={metadataLabelEditText}>
<IconButton
aria-label={metadataLabelEditText}
aria-pressed={isEditing}
className={editClassName}
data-resin-target="metadata-instanceedit"
icon={Pencil}
onClick={this.toggleIsEditing}
type="button"
>
<IconEdit />
</PlainButton>
size="x-small"
/>
</Tooltip>
);
}
Expand Down
9 changes: 1 addition & 8 deletions src/features/metadata-instance-editor/Instance.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,14 @@
}
}

.btn-plain.metadata-instance-editor-instance-edit {
.metadata-instance-editor-instance-edit {
position: absolute;
top: 8px;
right: 25px;
z-index: 10;
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;
Expand Down
88 changes: 40 additions & 48 deletions src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,20 @@ exports[`features/metadata-instance-editor/fields/Instance collapsible isOpen pr
className=""
hasStickyHeader={true}
headerActionItems={
<Tooltip
constrainToScrollParent={false}
constrainToWindow={true}
isDisabled={false}
position="top-left"
theme="default"
>
<PlainButton
<Tooltip>
<IconButton
aria-pressed={false}
className="metadata-instance-editor-instance-edit"
data-resin-target="metadata-instanceedit"
icon={
{
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
}
}
onClick={[Function]}
type="button"
>
<IconEdit />
</PlainButton>
size="x-small"
/>
</Tooltip>
}
isBordered={true}
Expand Down Expand Up @@ -748,22 +746,20 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
className=""
hasStickyHeader={true}
headerActionItems={
<Tooltip
constrainToScrollParent={false}
constrainToWindow={true}
isDisabled={false}
position="top-left"
theme="default"
>
<PlainButton
<Tooltip>
<IconButton
aria-pressed={true}
className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
data-resin-target="metadata-instanceedit"
icon={
{
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
}
}
onClick={[Function]}
type="button"
>
<IconEdit />
</PlainButton>
size="x-small"
/>
</Tooltip>
}
isBordered={true}
Expand Down Expand Up @@ -944,22 +940,20 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
className=""
hasStickyHeader={true}
headerActionItems={
<Tooltip
constrainToScrollParent={false}
constrainToWindow={true}
isDisabled={false}
position="top-left"
theme="default"
>
<PlainButton
<Tooltip>
<IconButton
aria-pressed={true}
className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
data-resin-target="metadata-instanceedit"
icon={
{
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
}
}
onClick={[Function]}
type="button"
>
<IconEdit />
</PlainButton>
size="x-small"
/>
</Tooltip>
}
isBordered={true}
Expand Down Expand Up @@ -1049,22 +1043,20 @@ exports[`features/metadata-instance-editor/fields/Instance should correctly rend
className=""
hasStickyHeader={true}
headerActionItems={
<Tooltip
constrainToScrollParent={false}
constrainToWindow={true}
isDisabled={false}
position="top-left"
theme="default"
>
<PlainButton
<Tooltip>
<IconButton
aria-pressed={true}
className="metadata-instance-editor-instance-edit metadata-instance-editor-instance-is-editing"
data-resin-target="metadata-instanceedit"
icon={
{
"$$typeof": Symbol(react.forward_ref),
"render": [Function],
}
}
onClick={[Function]}
type="button"
>
<IconEdit />
</PlainButton>
size="x-small"
/>
</Tooltip>
}
isBordered={true}
Expand Down