Disable Previous Button on First Page (#17610)

* disable prev page button

* test added

* test fixes

* tests fixed

* test fix

---------

Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
Co-authored-by: Mike B <32695229+plasmacorral@users.noreply.github.com>

ui/pages/create-account/connect-hardware/account-list.js

@@ -33,6 +33,10 @@ class AccountList extends Component {
     this.setState({ pathValue });
   }
 
+  isFirstPage() {
+    return this.props.accounts[0]?.index === 0;
+  }
+
   renderHdPathSelector() {
     const { device, selectedPath, hdPaths, onPathChange } = this.props;
     const { pathValue } = this.state;
@@ -100,6 +104,7 @@ class AccountList extends Component {
             <div
               className="hw-account-list__item"
               key={account.address}
+              data-testid="hw-account-list__item"
               title={
                 accountAlreadyConnected
                   ? this.context.t('selectAnAccountAlreadyConnected')
@@ -170,7 +175,9 @@ class AccountList extends Component {
       <div className="hw-list-pagination">
         <button
           className="hw-list-pagination__button"
+          disabled={this.isFirstPage()}
           onClick={this.goToPreviousPage}
+          data-testid="hw-list-pagination__prev-button"
         >
           {`< ${this.context.t('prev')}`}
         </button>

ui/pages/create-account/connect-hardware/account-list.test.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { renderWithProvider } from '../../../../test/jest';
+import configureStore from '../../../store/store';
+import mockState from '../../../../test/data/mock-state.json';
+import AccountList from './account-list';
+import { LATTICE_HD_PATHS, LEDGER_HD_PATHS, TREZOR_HD_PATHS } from '.';
+
+const render = () => {
+  const store = configureStore({
+    metamask: {
+      ...mockState.metamask,
+    },
+  });
+
+  const props = {
+    selectedPath: TREZOR_HD_PATHS[0].path,
+    device: 'trezor',
+    accounts: [
+      {
+        address: '0x5E2003....98f417b',
+        balance: '0.005794 ETH',
+        index: 0,
+      },
+      {
+        address: '0x27d17...a5B52E',
+        balance: '0.000000 ETH',
+        index: 1,
+      },
+      {
+        address: '0x7D412C....3041D0f64a',
+        balance: '0.000000 ETH',
+        index: 2,
+      },
+      {
+        address: '0xEb6b4...3e83270C72A',
+        balance: '0.000000 ETH',
+        index: 3,
+      },
+      {
+        address: '0x1BbbdC00...CCFF917',
+        balance: '0.000000 ETH',
+        index: 4,
+      },
+    ],
+    connectedAccounts: [
+      '0x7f132...78a8d6',
+      '0x27d17...a5B52E',
+      '0x5E2003....98f417b',
+    ].map((a) => a.toLowerCase()),
+    selectedAccounts: [],
+    chainId: '0x1',
+    rpcPrefs: {},
+    hdPaths: {
+      ledger: LEDGER_HD_PATHS,
+      lattice: LATTICE_HD_PATHS,
+      trezor: TREZOR_HD_PATHS,
+    },
+    onPathChange: jest.fn(),
+    onAccountChange: jest.fn(),
+    onForgetDevice: jest.fn(),
+    getPage: jest.fn(),
+    onUnlockAccounts: jest.fn(),
+    onCancel: jest.fn(),
+    onAccountRestriction: jest.fn(),
+  };
+  return renderWithProvider(<AccountList {...props} />, store);
+};
+
+describe('AccountList', () => {
+  it('renders AccountList component and shows Select HD path text', () => {
+    render();
+    expect(screen.getByText('Select HD path')).toBeInTheDocument();
+  });
+
+  it('renders AccountList component and has two accounts selected', () => {
+    render();
+    expect(
+      screen.getAllByTitle(
+        'This account has already been connected to MetaMask',
+      ),
+    ).toHaveLength(2);
+  });
+
+  it('disables the Prev button as the first account has an index of 0', () => {
+    render();
+
+    expect(
+      screen.getByTestId('hw-list-pagination__prev-button'),
+    ).toBeDisabled();
+  });
+});

ui/pages/create-account/connect-hardware/index.js

@@ -36,7 +36,7 @@ const U2F_ERROR = 'U2F';
 const LEDGER_LIVE_PATH = `m/44'/60'/0'/0/0`;
 const MEW_PATH = `m/44'/60'/0'`;
 const BIP44_PATH = `m/44'/60'/0'/0`;
-const LEDGER_HD_PATHS = [
+export const LEDGER_HD_PATHS = [
   { name: 'Ledger Live', value: LEDGER_LIVE_PATH },
   { name: 'Legacy (MEW / MyCrypto)', value: MEW_PATH },
   { name: `BIP44 Standard (e.g. MetaMask, Trezor)`, value: BIP44_PATH },
@@ -45,7 +45,7 @@ const LEDGER_HD_PATHS = [
 const LATTICE_STANDARD_BIP44_PATH = `m/44'/60'/0'/0/x`;
 const LATTICE_LEDGER_LIVE_PATH = `m/44'/60'/x'/0/0`;
 const LATTICE_MEW_PATH = `m/44'/60'/0'/x`;
-const LATTICE_HD_PATHS = [
+export const LATTICE_HD_PATHS = [
   {
     name: `Standard (${LATTICE_STANDARD_BIP44_PATH})`,
     value: LATTICE_STANDARD_BIP44_PATH,
@@ -58,7 +58,7 @@ const LATTICE_HD_PATHS = [
 ];
 
 const TREZOR_TESTNET_PATH = `m/44'/1'/0'/0`;
-const TREZOR_HD_PATHS = [
+export const TREZOR_HD_PATHS = [
   { name: `BIP44 Standard (e.g. MetaMask, Trezor)`, value: BIP44_PATH },
   { name: `Trezor Testnets`, value: TREZOR_TESTNET_PATH },
 ];