RFC: sort keys rule and initial changes (#15534)

.eslintrc.js

@@ -344,5 +344,11 @@ module.exports = {
         sourceType: 'script',
       },
     },
+    {
+      files: ['ui/pages/settings/*.js'],
+      rules: {
+        'sort-keys': ['error', 'asc', { natural: true }],
+      },
+    },
   ],
 };

ui/pages/settings/settings.component.js

@@ -45,20 +45,20 @@ import SettingsSearchList from './settings-search-list';
 
 class SettingsPage extends PureComponent {
   static propTypes = {
+    addNewNetwork: PropTypes.bool,
     addressName: PropTypes.string,
     backRoute: PropTypes.string,
+    breadCrumbTextKey: PropTypes.string,
+    conversionDate: PropTypes.number,
     currentPath: PropTypes.string,
     history: PropTypes.object,
+    initialBreadCrumbKey: PropTypes.string,
+    initialBreadCrumbRoute: PropTypes.string,
     isAddressEntryPage: PropTypes.bool,
     isPopup: PropTypes.bool,
     isSnapViewPage: PropTypes.bool,
-    pathnameI18nKey: PropTypes.string,
-    initialBreadCrumbRoute: PropTypes.string,
-    breadCrumbTextKey: PropTypes.string,
-    initialBreadCrumbKey: PropTypes.string,
     mostRecentOverviewPage: PropTypes.string.isRequired,
-    addNewNetwork: PropTypes.bool,
-    conversionDate: PropTypes.number,
+    pathnameI18nKey: PropTypes.string,
   };
 
   static contextTypes = {
@@ -66,9 +66,9 @@ class SettingsPage extends PureComponent {
   };
 
   state = {
+    isSearchList: false,
     lastFetchedConversionDate: null,
     searchResults: [],
-    isSearchList: false,
     searchText: '',
   };
 
@@ -91,8 +91,8 @@ class SettingsPage extends PureComponent {
     const { history } = this.props;
     history.push(setting.route);
     this.setState({
-      searchResults: '',
       isSearchList: '',
+      searchResults: '',
     });
   }
 
@@ -142,8 +142,8 @@ class SettingsPage extends PureComponent {
             <SettingsSearch
               onSearch={({ searchQuery = '', results = [] }) => {
                 this.setState({
-                  searchResults: results,
                   isSearchList: searchQuery !== '',
+                  searchResults: results,
                   searchText: searchQuery,
                 });
               }}
@@ -255,55 +255,55 @@ class SettingsPage extends PureComponent {
       <TabBar
         tabs={[
           {
-            icon: <i className="fa fa-cog" />,
             content: t('general'),
+            icon: <i className="fa fa-cog" />,
             key: GENERAL_ROUTE,
           },
           {
-            icon: <i className="fas fa-sliders-h" />,
             content: t('advanced'),
+            icon: <i className="fas fa-sliders-h" />,
             key: ADVANCED_ROUTE,
           },
           {
-            icon: <i className="fa fa-address-book" />,
             content: t('contacts'),
+            icon: <i className="fa fa-address-book" />,
             key: CONTACT_LIST_ROUTE,
           },
           ///: BEGIN:ONLY_INCLUDE_IN(flask)
           {
+            content: t('snaps'),
             icon: (
               <i
                 className="fa fa-flask"
                 title={t('snapsSettingsDescription')}
               />
             ),
-            content: t('snaps'),
             key: SNAPS_LIST_ROUTE,
           },
           ///: END:ONLY_INCLUDE_IN
           {
-            icon: <i className="fa fa-lock" />,
             content: t('securityAndPrivacy'),
+            icon: <i className="fa fa-lock" />,
             key: SECURITY_ROUTE,
           },
           {
-            icon: <i className="fa fa-bell" />,
             content: t('alerts'),
+            icon: <i className="fa fa-bell" />,
             key: ALERTS_ROUTE,
           },
           {
-            icon: <i className="fa fa-plug" />,
             content: t('networks'),
+            icon: <i className="fa fa-plug" />,
             key: NETWORKS_ROUTE,
           },
           {
-            icon: <i className="fa fa-flask" />,
             content: t('experimental'),
+            icon: <i className="fa fa-flask" />,
             key: EXPERIMENTAL_ROUTE,
           },
           {
-            icon: <i className="fa fa-info-circle" />,
             content: t('about'),
+            icon: <i className="fa fa-info-circle" />,
             key: ABOUT_US_ROUTE,
           },
         ]}
@@ -311,7 +311,7 @@ class SettingsPage extends PureComponent {
           if (key === GENERAL_ROUTE && currentPath === SETTINGS_ROUTE) {
             return true;
           }
-          return matchPath(currentPath, { path: key, exact: true });
+          return matchPath(currentPath, { exact: true, path: key });
         }}
         onSelect={(key) => history.push(key)}
       />

ui/pages/settings/settings.component.test.js

@@ -10,18 +10,18 @@ describe('SettingsPage', () => {
   let wrapper;
 
   const props = {
-    isAddressEntryPage: false,
+    addNewNetwork: false,
+    addressName: '',
     backRoute: '/',
+    conversionDate: Date.now(),
     currentPath: '/settings',
+    initialBreadCrumbKey: undefined,
+    initialBreadCrumbRoute: undefined,
+    isAddressEntryPage: false,
+    isPopup: false,
     location: '/settings',
     mostRecentOverviewPage: '',
-    isPopup: false,
     pathnameI18nKey: undefined,
-    addressName: '',
-    initialBreadCrumbRoute: undefined,
-    initialBreadCrumbKey: undefined,
-    addNewNetwork: false,
-    conversionDate: Date.now(),
   };
 
   beforeEach(() => {

ui/pages/settings/settings.container.js

@@ -33,21 +33,21 @@ import Settings from './settings.component';
 
 const ROUTES_TO_I18N_KEYS = {
   [ABOUT_US_ROUTE]: 'about',
+  [ADD_NETWORK_ROUTE]: 'networks',
+  [ADD_POPULAR_CUSTOM_NETWORK]: 'addNetwork',
   [ADVANCED_ROUTE]: 'advanced',
   [ALERTS_ROUTE]: 'alerts',
-  [GENERAL_ROUTE]: 'general',
   [CONTACT_ADD_ROUTE]: 'newContact',
   [CONTACT_EDIT_ROUTE]: 'editContact',
   [CONTACT_LIST_ROUTE]: 'contacts',
+  [CONTACT_VIEW_ROUTE]: 'viewContact',
+  [EXPERIMENTAL_ROUTE]: 'experimental',
+  [GENERAL_ROUTE]: 'general',
+  [NETWORKS_FORM_ROUTE]: 'networks',
+  [NETWORKS_ROUTE]: 'networks',
+  [SECURITY_ROUTE]: 'securityAndPrivacy',
   [SNAPS_LIST_ROUTE]: 'snaps',
   [SNAPS_VIEW_ROUTE]: 'snaps',
-  [CONTACT_VIEW_ROUTE]: 'viewContact',
-  [NETWORKS_ROUTE]: 'networks',
-  [NETWORKS_FORM_ROUTE]: 'networks',
-  [ADD_NETWORK_ROUTE]: 'networks',
-  [SECURITY_ROUTE]: 'securityAndPrivacy',
-  [EXPERIMENTAL_ROUTE]: 'experimental',
-  [ADD_POPULAR_CUSTOM_NETWORK]: 'addNetwork',
 };
 
 const mapStateToProps = (state, ownProps) => {
@@ -98,18 +98,18 @@ const mapStateToProps = (state, ownProps) => {
   );
 
   return {
-    isAddressEntryPage,
-    backRoute,
-    currentPath: pathname,
-    isPopup,
-    pathnameI18nKey,
-    addressName,
-    initialBreadCrumbRoute,
-    initialBreadCrumbKey,
-    mostRecentOverviewPage: getMostRecentOverviewPage(state),
     addNewNetwork,
+    addressName,
+    backRoute,
     conversionDate,
+    currentPath: pathname,
+    initialBreadCrumbKey,
+    initialBreadCrumbRoute,
+    isAddressEntryPage,
+    isPopup,
     isSnapViewPage,
+    mostRecentOverviewPage: getMostRecentOverviewPage(state),
+    pathnameI18nKey,
   };
 };
 

ui/pages/settings/settings.stories.js

@@ -21,8 +21,6 @@ import {
 import SettingsPage from './settings.component';
 
 export default {
-  title: 'Pages/SettingsPage',
-  id: __filename,
   decorators: [
     (story) => (
       <MemoryRouter initialEntries={['/settings/general']}>
@@ -30,22 +28,24 @@ export default {
       </MemoryRouter>
     ),
   ],
+  id: __filename,
+  title: 'Pages/SettingsPage',
 };
 
 const ROUTES_TO_I18N_KEYS = {
   [ABOUT_US_ROUTE]: 'about',
   [ADVANCED_ROUTE]: 'advanced',
   [ALERTS_ROUTE]: 'alerts',
-  [GENERAL_ROUTE]: 'general',
   [CONTACT_ADD_ROUTE]: 'newContact',
   [CONTACT_EDIT_ROUTE]: 'editContact',
   [CONTACT_LIST_ROUTE]: 'contacts',
+  [CONTACT_VIEW_ROUTE]: 'viewContact',
+  [GENERAL_ROUTE]: 'general',
+  [NETWORKS_FORM_ROUTE]: 'networks',
+  [NETWORKS_ROUTE]: 'networks',
+  [SECURITY_ROUTE]: 'securityAndPrivacy',
   [SNAPS_LIST_ROUTE]: 'snaps',
   [SNAPS_VIEW_ROUTE]: 'snaps',
-  [CONTACT_VIEW_ROUTE]: 'viewContact',
-  [NETWORKS_ROUTE]: 'networks',
-  [NETWORKS_FORM_ROUTE]: 'networks',
-  [SECURITY_ROUTE]: 'securityAndPrivacy',
 };
 
 global.platform = {