fix(mme-14830): fix consistent tab when switching languages (#17155)

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 {
         <Tab
           className="confirm-page-container-content__tab"
           name={t('details')}
+          tabKey="details"
         >
           {detailsComponent}
         </Tab>
         {dataComponent && (
-          <Tab className="confirm-page-container-content__tab" name={t('data')}>
+          <Tab
+            className="confirm-page-container-content__tab"
+            name={t('data')}
+            tabKey="data"
+          >
             {dataComponent}
           </Tab>
         )}
@@ -113,6 +118,7 @@ export default class ConfirmPageContainerContent extends Component {
           <Tab
             className="confirm-page-container-content__tab"
             name={t('dataHex')}
+            tabKey="dataHex"
           >
             {dataHexComponent}
           </Tab>

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}
     >
       <button>{name}</button>
     </li>
@@ -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
 };

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

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 (
-    <Tab name={name} key={name + index}>
+    <Tab tabKey={name} key={name + index} name={name}>
       {content}
     </Tab>
   );
@@ -38,10 +38,10 @@ function renderTab({ name, content }, index) {
 export const DefaultStory = (args) => {
   return (
     <Tabs
-      defaultActiveTabName={args.defaultActiveTabName}
+      defaultActiveTabKey={args.defaultActiveTabKey}
       onTabClick={args.onTabClick}
     >
-      {args.tabs.map((tabProps, i) => renderTab(tabProps, i))}
+      {args.tabs.map((tabProps, i) => renderTab(tabProps, i, args.t))}
       <DropdownTab
         options={[
           { name: 'Insight Snap', value: 'Insight Snap' },

ui/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -218,7 +218,7 @@ export default class ConfirmTransactionBase extends Component {
       showTransactionConfirmedModal({
         onSubmit: () => {
           clearConfirmTransaction();
-          setDefaultHomeActiveTabName('Activity').then(() => {
+          setDefaultHomeActiveTabName('activity').then(() => {
             history.push(DEFAULT_ROUTE);
           });
         },

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 (

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 {
               <EthOverview />
             </div>
             <Tabs
-              defaultActiveTabName={defaultHomeActiveTabName}
+              t={this.context.t}
+              defaultActiveTabKey={defaultHomeActiveTabName}
               onTabClick={onTabClick}
               tabsClassName="home__tabs"
               subHeader={
@@ -687,7 +689,8 @@ export default class Home extends PureComponent {
                 activeClassName="home__tab--active"
                 className="home__tab"
                 data-testid="home__asset-tab"
-                name={t('assets')}
+                name={this.context.t('assets')}
+                tabKey="assets"
               >
                 <AssetList
                   onClickAsset={(asset) =>
@@ -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"
                 >
                   <CollectiblesTab
                     onAddNFT={() => {
@@ -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"
               >
                 <TransactionList />
               </Tab>

ui/pages/import-token/import-token.component.js

@@ -625,13 +625,13 @@ class ImportToken extends Component {
 
     if (showSearchTab) {
       tabs.push(
-        <Tab name={t('search')} key="search-tab">
+        <Tab name={t('search')} key="search-tab" tabKey="search">
           {this.renderSearchToken()}
         </Tab>,
       );
     }
     tabs.push(
-      <Tab name={t('customToken')} key="custom-tab">
+      <Tab name={t('customToken')} key="custom-tab" tabKey="customToken">
         {this.renderCustomTokenForm()}
       </Tab>,
     );

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);
           }
         }}