From b9093e2a4d6a18a4111429a76dc8da4c2aabcd1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=B1=E9=87=8C?=
 <45264418+TkzcM@users.noreply.github.com>
Date: Thu, 6 Jan 2022 03:04:34 +0800
Subject: [PATCH] Remove bottom space when hiding testnet (#12821)

---
 .../app/dropdowns/network-dropdown.js         | 29 +++++++++----------
 .../app/dropdowns/network-dropdown.test.js    |  8 +++++
 ui/css/itcss/components/network.scss          |  6 ----
 3 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/ui/components/app/dropdowns/network-dropdown.js b/ui/components/app/dropdowns/network-dropdown.js
index 889ba9fa9..c6c5e6091 100644
--- a/ui/components/app/dropdowns/network-dropdown.js
+++ b/ui/components/app/dropdowns/network-dropdown.js
@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { compose } from 'redux';
-import classnames from 'classnames';
 import Button from '../../ui/button';
 import * as actions from '../../../store/actions';
 import { openAlert as displayInvalidCustomNetworkAlert } from '../../../ducks/alerts/invalid-custom-network';
@@ -362,21 +361,19 @@ class NetworkDropdown extends Component {
             this.props.provider,
           )}
 
-          <div
-            className={classnames('network-dropdown-testnets', {
-              'network-dropdown-testnets--no-visibility': !shouldShowTestNetworks,
-            })}
-          >
-            {this.renderNetworkEntry('ropsten')}
-            {this.renderNetworkEntry('kovan')}
-            {this.renderNetworkEntry('rinkeby')}
-            {this.renderNetworkEntry('goerli')}
-            {this.renderCustomRpcList(
-              rpcListDetailForLocalHost,
-              this.props.provider,
-              { isLocalHost: true },
-            )}
-          </div>
+          {shouldShowTestNetworks && (
+            <>
+              {this.renderNetworkEntry('ropsten')}
+              {this.renderNetworkEntry('kovan')}
+              {this.renderNetworkEntry('rinkeby')}
+              {this.renderNetworkEntry('goerli')}
+              {this.renderCustomRpcList(
+                rpcListDetailForLocalHost,
+                this.props.provider,
+                { isLocalHost: true },
+              )}
+            </>
+          )}
         </div>
 
         {this.renderAddCustomButton()}
diff --git a/ui/components/app/dropdowns/network-dropdown.test.js b/ui/components/app/dropdowns/network-dropdown.test.js
index f8546f8b6..7a0eaf3ef 100644
--- a/ui/components/app/dropdowns/network-dropdown.test.js
+++ b/ui/components/app/dropdowns/network-dropdown.test.js
@@ -147,6 +147,10 @@ describe('Network Dropdown', () => {
         'addNetwork',
       );
     });
+
+    it('shows test networks in the dropdown', () => {
+      expect(wrapper.find('.network-dropdown-list li')).toHaveLength(8);
+    });
   });
 
   describe('NetworkDropdown in appState is true and show test networks is false', () => {
@@ -193,5 +197,9 @@ describe('Network Dropdown', () => {
         'addNetwork',
       );
     });
+
+    it('does not show test networks in the dropdown', () => {
+      expect(wrapper.find('.network-dropdown-list li')).toHaveLength(3);
+    });
   });
 });
diff --git a/ui/css/itcss/components/network.scss b/ui/css/itcss/components/network.scss
index 79d4e3800..06c6436f9 100644
--- a/ui/css/itcss/components/network.scss
+++ b/ui/css/itcss/components/network.scss
@@ -141,12 +141,6 @@
   background-color: $scorpion;
 }
 
-.network-dropdown-testnets {
-  &--no-visibility {
-    visibility: hidden;
-  }
-}
-
 .network-dropdown-title {
   @include H4;