Bug 1893936 - Pocket story card context menu is mispositioned when Pocket extension is disabled r=home-newtab-reviewers,nbarrett

Differential Revision: https://phabricator.services.mozilla.com/D208932
This commit is contained in:
Maxx Crawford 2024-05-01 00:08:58 +00:00
parent 145a8d9893
commit 7aaa2535d6
3 changed files with 33 additions and 72 deletions

View file

@ -468,57 +468,34 @@ export class _DSCard extends React.PureComponent {
dispatch={this.props.dispatch}
spocMessageVariant={this.props.spocMessageVariant}
/>
{saveToPocketCard && (
<div className="card-stp-button-hover-background">
<div className="card-stp-button-position-wrapper">
{!this.props.flightId && stpButton()}
<DSLinkMenu
id={this.props.id}
index={this.props.pos}
dispatch={this.props.dispatch}
url={this.props.url}
title={this.props.title}
source={source}
type={this.props.type}
pocket_id={this.props.pocket_id}
shim={this.props.shim}
bookmarkGuid={this.props.bookmarkGuid}
flightId={
!this.props.is_collection ? this.props.flightId : undefined
}
showPrivacyInfo={!!this.props.flightId}
onMenuUpdate={this.onMenuUpdate}
onMenuShow={this.onMenuShow}
saveToPocketCard={saveToPocketCard}
pocket_button_enabled={pocketButtonEnabled}
isRecentSave={isRecentSave}
/>
</div>
<div className="card-stp-button-hover-background">
<div className="card-stp-button-position-wrapper">
{saveToPocketCard && <>{!this.props.flightId && stpButton()}</>}
<DSLinkMenu
id={this.props.id}
index={this.props.pos}
dispatch={this.props.dispatch}
url={this.props.url}
title={this.props.title}
source={source}
type={this.props.type}
pocket_id={this.props.pocket_id}
shim={this.props.shim}
bookmarkGuid={this.props.bookmarkGuid}
flightId={
!this.props.is_collection ? this.props.flightId : undefined
}
showPrivacyInfo={!!this.props.flightId}
onMenuUpdate={this.onMenuUpdate}
onMenuShow={this.onMenuShow}
saveToPocketCard={saveToPocketCard}
pocket_button_enabled={pocketButtonEnabled}
isRecentSave={isRecentSave}
/>
</div>
)}
{!saveToPocketCard && (
<DSLinkMenu
id={this.props.id}
index={this.props.pos}
dispatch={this.props.dispatch}
url={this.props.url}
title={this.props.title}
source={source}
type={this.props.type}
pocket_id={this.props.pocket_id}
shim={this.props.shim}
bookmarkGuid={this.props.bookmarkGuid}
flightId={
!this.props.is_collection ? this.props.flightId : undefined
}
showPrivacyInfo={!!this.props.flightId}
hostRef={this.contextMenuButtonHostRef}
onMenuUpdate={this.onMenuUpdate}
onMenuShow={this.onMenuShow}
pocket_button_enabled={pocketButtonEnabled}
isRecentSave={isRecentSave}
/>
)}
</div>
</article>
);
}

View file

@ -2967,11 +2967,11 @@ class _DSCard extends (external_React_default()).PureComponent {
ctaButtonVariant: ctaButtonVariant,
dispatch: this.props.dispatch,
spocMessageVariant: this.props.spocMessageVariant
}), saveToPocketCard && /*#__PURE__*/external_React_default().createElement("div", {
}), /*#__PURE__*/external_React_default().createElement("div", {
className: "card-stp-button-hover-background"
}, /*#__PURE__*/external_React_default().createElement("div", {
className: "card-stp-button-position-wrapper"
}, !this.props.flightId && stpButton(), /*#__PURE__*/external_React_default().createElement(DSLinkMenu, {
}, saveToPocketCard && /*#__PURE__*/external_React_default().createElement((external_React_default()).Fragment, null, !this.props.flightId && stpButton()), /*#__PURE__*/external_React_default().createElement(DSLinkMenu, {
id: this.props.id,
index: this.props.pos,
dispatch: this.props.dispatch,
@ -2989,25 +2989,7 @@ class _DSCard extends (external_React_default()).PureComponent {
saveToPocketCard: saveToPocketCard,
pocket_button_enabled: pocketButtonEnabled,
isRecentSave: isRecentSave
}))), !saveToPocketCard && /*#__PURE__*/external_React_default().createElement(DSLinkMenu, {
id: this.props.id,
index: this.props.pos,
dispatch: this.props.dispatch,
url: this.props.url,
title: this.props.title,
source: source,
type: this.props.type,
pocket_id: this.props.pocket_id,
shim: this.props.shim,
bookmarkGuid: this.props.bookmarkGuid,
flightId: !this.props.is_collection ? this.props.flightId : undefined,
showPrivacyInfo: !!this.props.flightId,
hostRef: this.contextMenuButtonHostRef,
onMenuUpdate: this.onMenuUpdate,
onMenuShow: this.onMenuShow,
pocket_button_enabled: pocketButtonEnabled,
isRecentSave: isRecentSave
}));
}))));
}
}
_DSCard.defaultProps = {

View file

@ -70,7 +70,9 @@ describe("<DSCard>", () => {
});
it("should render DSLinkMenu", () => {
assert.equal(wrapper.children().at(3).type(), DSLinkMenu);
// Note: <DSLinkMenu> component moved from a direct child element of `.ds-card`. See Bug 1893936
const default_link_menu = wrapper.find(DSLinkMenu);
assert.ok(default_link_menu.exists());
});
it("should start with no .active class", () => {