From 8f915807e4699df2d0c9a2764e2e33d1d64e640b Mon Sep 17 00:00:00 2001 From: Danica Shen Date: Thu, 19 Jan 2023 15:05:42 +0000 Subject: [PATCH] fix(mme-14830): fix consistent tab when switching languages (#17155) --- ...onfirm-page-container-content.component.js | 8 ++++++- ui/components/ui/tabs/tab/tab.component.js | 3 +++ ui/components/ui/tabs/tabs.component.js | 24 ++++++++++--------- ui/components/ui/tabs/tabs.stories.js | 8 +++---- .../confirm-transaction-base.component.js | 2 +- .../confirm-transaction.component.js | 2 +- ui/pages/home/home.component.js | 13 ++++++---- .../import-token/import-token.component.js | 4 ++-- ui/pages/swaps/awaiting-swap/awaiting-swap.js | 2 +- 9 files changed, 41 insertions(+), 25 deletions(-) diff --git a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js index dede207a7..474e944ac 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js +++ b/ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js @@ -101,11 +101,16 @@ export default class ConfirmPageContainerContent extends Component { {detailsComponent} {dataComponent && ( - + {dataComponent} )} @@ -113,6 +118,7 @@ export default class ConfirmPageContainerContent extends Component { {dataHexComponent} diff --git a/ui/components/ui/tabs/tab/tab.component.js b/ui/components/ui/tabs/tab/tab.component.js index 63325c025..72f1d2fe8 100644 --- a/ui/components/ui/tabs/tab/tab.component.js +++ b/ui/components/ui/tabs/tab/tab.component.js @@ -11,6 +11,7 @@ const Tab = (props) => { name, onClick, tabIndex, + tabKey, } = props; return ( @@ -24,6 +25,7 @@ const Tab = (props) => { event.preventDefault(); onClick(tabIndex); }} + key={tabKey} > @@ -36,6 +38,7 @@ Tab.propTypes = { 'data-testid': PropTypes.string, isActive: PropTypes.bool, // required, but added using React.cloneElement name: PropTypes.string.isRequired, + tabKey: PropTypes.string.isRequired, // for Tabs selection purpose onClick: PropTypes.func, tabIndex: PropTypes.number, // required, but added using React.cloneElement }; diff --git a/ui/components/ui/tabs/tabs.component.js b/ui/components/ui/tabs/tabs.component.js index 2357bfc35..47e402e3f 100644 --- a/ui/components/ui/tabs/tabs.component.js +++ b/ui/components/ui/tabs/tabs.component.js @@ -4,14 +4,14 @@ import classnames from 'classnames'; export default class Tabs extends Component { static defaultProps = { - defaultActiveTabName: null, + defaultActiveTabKey: null, onTabClick: null, tabsClassName: undefined, subHeader: null, }; static propTypes = { - defaultActiveTabName: PropTypes.string, + defaultActiveTabKey: PropTypes.string, onTabClick: PropTypes.func, children: PropTypes.node.isRequired, tabsClassName: PropTypes.string, @@ -20,12 +20,12 @@ export default class Tabs extends Component { state = { activeTabIndex: Math.max( - this._findChildByName(this.props.defaultActiveTabName), + this._findChildByKey(this.props.defaultActiveTabKey), 0, ), }; - handleTabClick(tabIndex, tabName) { + handleTabClick(tabIndex, tabKey) { const { onTabClick } = this.props; const { activeTabIndex } = this.state; @@ -36,7 +36,7 @@ export default class Tabs extends Component { }, () => { if (onTabClick) { - onTabClick(tabName); + onTabClick(tabKey); } }, ); @@ -47,11 +47,11 @@ export default class Tabs extends Component { const numberOfTabs = React.Children.count(this._getValidChildren()); return React.Children.map(this._getValidChildren(), (child, index) => { - const tabName = child?.props.name; + const tabKey = child?.props.tabKey; return ( child && React.cloneElement(child, { - onClick: (idx) => this.handleTabClick(idx, tabName), + onClick: (idx) => this.handleTabClick(idx, tabKey), tabIndex: index, isActive: numberOfTabs > 1 && index === this.state.activeTabIndex, }) @@ -89,14 +89,16 @@ export default class Tabs extends Component { } /** - * Returns the index of the child with the given name + * Returns the index of the child with the given key * - * @param {string} name - the name to search for + * @param {string} tabKey - the name to search for * @returns {number} the index of the child with the given name * @private */ - _findChildByName(name) { - return this._getValidChildren().findIndex((c) => c?.props.name === name); + _findChildByKey(tabKey) { + return this._getValidChildren().findIndex( + (c) => c?.props.tabKey === tabKey, + ); } // This ignores any 'null' child elements that are a result of a conditional diff --git a/ui/components/ui/tabs/tabs.stories.js b/ui/components/ui/tabs/tabs.stories.js index f3047e491..54659d798 100644 --- a/ui/components/ui/tabs/tabs.stories.js +++ b/ui/components/ui/tabs/tabs.stories.js @@ -11,7 +11,7 @@ export default { control: 'object', name: 'Tabs', }, - defaultActiveTabName: { + defaultActiveTabKey: { control: { type: 'text', }, @@ -29,7 +29,7 @@ export default { function renderTab({ name, content }, index) { return ( - + {content} ); @@ -38,10 +38,10 @@ function renderTab({ name, content }, index) { export const DefaultStory = (args) => { return ( - {args.tabs.map((tabProps, i) => renderTab(tabProps, i))} + {args.tabs.map((tabProps, i) => renderTab(tabProps, i, args.t))} { clearConfirmTransaction(); - setDefaultHomeActiveTabName('Activity').then(() => { + setDefaultHomeActiveTabName('activity').then(() => { history.push(DEFAULT_ROUTE); }); }, diff --git a/ui/pages/confirm-transaction/confirm-transaction.component.js b/ui/pages/confirm-transaction/confirm-transaction.component.js index abb17112c..540a28a07 100644 --- a/ui/pages/confirm-transaction/confirm-transaction.component.js +++ b/ui/pages/confirm-transaction/confirm-transaction.component.js @@ -135,7 +135,7 @@ export default class ConfirmTransaction extends Component { !transactionId && !totalUnapprovedCount ) { - setDefaultHomeActiveTabName('Activity').then(() => { + setDefaultHomeActiveTabName('activity').then(() => { history.replace(DEFAULT_ROUTE); }); } else if ( diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js index 220d5865b..5d77076c3 100644 --- a/ui/pages/home/home.component.js +++ b/ui/pages/home/home.component.js @@ -549,6 +549,7 @@ export default class Home extends PureComponent { render() { const { t } = this.context; + const { defaultHomeActiveTabName, onTabClick, @@ -610,7 +611,8 @@ export default class Home extends PureComponent { @@ -700,7 +703,8 @@ export default class Home extends PureComponent { activeClassName="home__tab--active" className="home__tab" data-testid="home__nfts-tab" - name={t('nfts')} + name={this.context.t('nfts')} + tabKey="nfts" > { @@ -713,7 +717,8 @@ export default class Home extends PureComponent { activeClassName="home__tab--active" className="home__tab" data-testid="home__activity-tab" - name={t('activity')} + name={this.context.t('activity')} + tabKey="activity" > diff --git a/ui/pages/import-token/import-token.component.js b/ui/pages/import-token/import-token.component.js index f9f5b6c35..e1c40da9e 100644 --- a/ui/pages/import-token/import-token.component.js +++ b/ui/pages/import-token/import-token.component.js @@ -625,13 +625,13 @@ class ImportToken extends Component { if (showSearchTab) { tabs.push( - + {this.renderSearchToken()} , ); } tabs.push( - + {this.renderCustomTokenForm()} , ); diff --git a/ui/pages/swaps/awaiting-swap/awaiting-swap.js b/ui/pages/swaps/awaiting-swap/awaiting-swap.js index 506654867..b3edc8462 100644 --- a/ui/pages/swaps/awaiting-swap/awaiting-swap.js +++ b/ui/pages/swaps/awaiting-swap/awaiting-swap.js @@ -307,7 +307,7 @@ export default function AwaitingSwap({ ) { history.push(DEFAULT_ROUTE); } else { - await dispatch(setDefaultHomeActiveTabName('Activity')); + await dispatch(setDefaultHomeActiveTabName('activity')); history.push(DEFAULT_ROUTE); } }}