From f7e7ff96c09b01f6f988d1597b26f6ca3a0a3e7a Mon Sep 17 00:00:00 2001
From: Nidhi Kumari <nidhi.kumari@consensys.net>
Date: Thu, 27 Apr 2023 21:15:11 +0530
Subject: [PATCH] Ux Multichain: Hide search input for single account (#18798)

* hide search input for single account

* updated test for single account with no search

* nit fix

* nit fix

* added search test for more than one account

---------

Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>
---
 .../account-list-menu/account-list-menu.js    | 25 +++++++++-----
 .../account-list-menu.test.js                 | 33 +++++++++++++++++++
 2 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/ui/components/multichain/account-list-menu/account-list-menu.js b/ui/components/multichain/account-list-menu/account-list-menu.js
index 2e867fa91..a53ab95ac 100644
--- a/ui/components/multichain/account-list-menu/account-list-menu.js
+++ b/ui/components/multichain/account-list-menu/account-list-menu.js
@@ -79,15 +79,22 @@ export const AccountListMenu = ({ onClose }) => {
     >
       <Box className="multichain-account-menu">
         {/* Search box */}
-        <Box paddingLeft={4} paddingRight={4} paddingBottom={4} paddingTop={0}>
-          <TextFieldSearch
-            size={Size.SM}
-            width={BLOCK_SIZES.FULL}
-            placeholder={t('searchAccounts')}
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-          />
-        </Box>
+        {accounts.length > 1 ? (
+          <Box
+            paddingLeft={4}
+            paddingRight={4}
+            paddingBottom={4}
+            paddingTop={0}
+          >
+            <TextFieldSearch
+              size={Size.SM}
+              width={BLOCK_SIZES.FULL}
+              placeholder={t('searchAccounts')}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </Box>
+        ) : null}
         {/* Account list block */}
         <Box className="multichain-account-menu__list">
           {searchResults.length === 0 && searchQuery !== '' ? (
diff --git a/ui/components/multichain/account-list-menu/account-list-menu.test.js b/ui/components/multichain/account-list-menu/account-list-menu.test.js
index 2d34652b7..297ada6cb 100644
--- a/ui/components/multichain/account-list-menu/account-list-menu.test.js
+++ b/ui/components/multichain/account-list-menu/account-list-menu.test.js
@@ -100,4 +100,37 @@ describe('AccountListMenu', () => {
       getByTestId('multichain-account-menu-no-results'),
     ).toBeInTheDocument();
   });
+
+  it('should not render search bar when there is only one account', () => {
+    const mockStore = configureStore({
+      activeTab: {
+        title: 'Eth Sign Tests',
+        origin: 'https://remix.ethereum.org',
+        protocol: 'https:',
+        url: 'https://remix.ethereum.org/',
+      },
+      metamask: {
+        ...mockState.metamask,
+        accounts: {
+          '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': {
+            balance: '0x346ba7725f412cbfdb',
+            address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+          },
+        },
+      },
+    });
+    const props = { onClose: () => jest.fn() };
+    const { container } = renderWithProvider(
+      <AccountListMenu {...props} />,
+      mockStore,
+    );
+    const searchBox = container.querySelector('input[type=search]');
+    expect(searchBox).not.toBeInTheDocument();
+  });
+
+  it('should render search bar when there is more than one account', () => {
+    render();
+    const searchBox = document.querySelector('input[type=search]');
+    expect(searchBox).toBeInTheDocument();
+  });
 });