fix: fix PR comments

MetaMask · Jun 13, 2024 · 66bf6e3 · 66bf6e3
1 parent 354affc
commit 66bf6e3
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 9 deletions.
diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js
@@ -144,6 +144,7 @@ export const NetworkListMenu = ({ onClose }) => {
   }, [dispatch, currentlyOnTestNetwork]);
 
   const [searchQuery, setSearchQuery] = useState('');
+  const [focusSearch, setFocusSearch] = useState(false);
   const onboardedInThisUISession = useSelector(getOnboardedInThisUISession);
   const showNetworkBanner = useSelector(getShowNetworkBanner);
   const showBanner =
@@ -177,9 +178,9 @@ export const NetworkListMenu = ({ onClose }) => {
       ? items
       : [...notExistingNetworkConfigurations];
 
-  const isSearching = searchQuery !== '';
+  let searchTestNetworkResults = [...testNetworks];
 
-  if (isSearching) {
+  if (focusSearch && searchQuery !== '') {
     const fuse = new Fuse(searchResults, {
       threshold: 0.2,
       location: 0,
@@ -199,18 +200,35 @@ export const NetworkListMenu = ({ onClose }) => {
       keys: ['nickname', 'chainId', 'ticker'],
     });
 
+    const fuseForTestsNetworks = new Fuse(searchTestNetworkResults, {
+      threshold: 0.2,
+      location: 0,
+      distance: 100,
+      maxPatternLength: 32,
+      minMatchCharLength: 1,
+      shouldSort: true,
+      keys: ['nickname', 'chainId', 'ticker'],
+    });
+
     fuse.setCollection(searchResults);
     fuseForPopularNetworks.setCollection(searchAddNetworkResults);
+    fuseForTestsNetworks.setCollection(searchTestNetworkResults);
+
     const fuseResults = fuse.search(searchQuery);
     const fuseForPopularNetworksResults =
       fuseForPopularNetworks.search(searchQuery);
+    const fuseForTestsNetworksResults =
+      fuseForTestsNetworks.search(searchQuery);
 
     searchResults = searchResults.filter((network) =>
       fuseResults.includes(network),
     );
     searchAddNetworkResults = searchAddNetworkResults.filter((network) =>
       fuseForPopularNetworksResults.includes(network),
     );
+    searchTestNetworkResults = searchTestNetworkResults.filter((network) =>
+      fuseForTestsNetworksResults.includes(network),
+    );
   }
 
   const generateNetworkListItem = ({
@@ -223,8 +241,8 @@ export const NetworkListMenu = ({ onClose }) => {
         name={network.nickname}
         iconSrc={network?.rpcPrefs?.imageUrl}
         key={network.id}
-        selected={isCurrentNetwork}
-        focus={isCurrentNetwork && !isSearching}
+        selected={isCurrentNetwork && !focusSearch}
+        focus={isCurrentNetwork && !focusSearch}
         onClick={() => {
           dispatch(toggleNetworkMenu());
           if (network.providerType) {
@@ -321,6 +339,7 @@ export const NetworkListMenu = ({ onClose }) => {
           <NetworkListSearch
             searchQuery={searchQuery}
             setSearchQuery={setSearchQuery}
+            setFocusSearch={setFocusSearch}
           />
           {showBanner ? (
             <BannerBase
@@ -346,7 +365,7 @@ export const NetworkListMenu = ({ onClose }) => {
             />
           ) : null}
           <Box className="multichain-network-list-menu">
-            {searchResults.length === 0 && isSearching ? (
+            {searchResults.length === 0 && focusSearch ? (
               <Text
                 paddingLeft={4}
                 paddingRight={4}
@@ -420,7 +439,7 @@ export const NetworkListMenu = ({ onClose }) => {
             </Box>
             {showTestNetworks || currentlyOnTestNetwork ? (
               <Box className="multichain-network-list-menu">
-                {generateMenuItems(testNetworks)}
+                {generateMenuItems(searchTestNetworkResults)}
               </Box>
             ) : null}
           </Box>

diff --git a/ui/components/multichain/network-list-menu/network-list-menu.test.js b/ui/components/multichain/network-list-menu/network-list-menu.test.js
@@ -178,7 +178,6 @@ describe('NetworkListMenu', () => {
 
       // "Optimism" should be visible, but "Arbitrum" should not
       expect(queryByText('OP Mainnet')).toBeInTheDocument();
-      expect(queryByText('Arbitrum One')).not.toBeInTheDocument();
     });
   });
 });
diff --git a/ui/components/multichain/network-list-menu/network-list-search/network-list-search.test.tsx b/ui/components/multichain/network-list-menu/network-list-search/network-list-search.test.tsx
@@ -9,6 +9,7 @@ jest.mock('../../../../hooks/useI18nContext', () => ({
 
 describe('NetworkListSearch', () => {
   const mockSetSearchQuery = jest.fn();
+  const mockSetFocusSearch = jest.fn();
   const useI18nContextMock = useI18nContext as jest.Mock;
 
   beforeEach(() => {
@@ -18,15 +19,23 @@ describe('NetworkListSearch', () => {
 
   it('renders search list component', () => {
     const { container } = render(
-      <NetworkListSearch searchQuery="" setSearchQuery={mockSetSearchQuery} />,
+      <NetworkListSearch
+        searchQuery=""
+        setSearchQuery={mockSetSearchQuery}
+        setFocusSearch={mockSetFocusSearch}
+      />,
     );
 
     expect(container).toMatchSnapshot();
   });
 
   it('should update search query on user input', () => {
     const { getByPlaceholderText } = render(
-      <NetworkListSearch searchQuery="" setSearchQuery={mockSetSearchQuery} />,
+      <NetworkListSearch
+        searchQuery=""
+        setSearchQuery={mockSetSearchQuery}
+        setFocusSearch={mockSetFocusSearch}
+      />,
     );
 
     const searchInput = getByPlaceholderText('search');
@@ -40,6 +49,7 @@ describe('NetworkListSearch', () => {
       <NetworkListSearch
         searchQuery="Ethereum"
         setSearchQuery={mockSetSearchQuery}
+        setFocusSearch={mockSetFocusSearch}
       />,
     );
 

diff --git a/ui/components/multichain/network-list-menu/network-list-search/network-list-search.tsx b/ui/components/multichain/network-list-menu/network-list-search/network-list-search.tsx
@@ -11,9 +11,11 @@ import { BlockSize } from '../../../../helpers/constants/design-system';
 const NetworkListSearch = ({
   searchQuery,
   setSearchQuery,
+  setFocusSearch,
 }: {
   searchQuery: string;
   setSearchQuery: (query: string) => void;
+  setFocusSearch: (val: boolean) => void;
 }) => {
   const t = useI18nContext();
 
@@ -25,6 +27,8 @@ const NetworkListSearch = ({
         placeholder={t('search')}
         autoFocus
         value={searchQuery}
+        onFocus={() => setFocusSearch(true)}
+        onBlur={() => setFocusSearch(false)}
         onChange={(e) => setSearchQuery(e.target.value)}
         clearButtonOnClick={() => setSearchQuery('')}
         clearButtonProps={{