New: NetImport Lists Grouped by Type

Co-Authored-By: ta264 <ta264@users.noreply.github.com>

frontend/src/Settings/NetImport/NetImport/AddNetImportModalContent.js

@@ -10,6 +10,7 @@ import ModalHeader from 'Components/Modal/ModalHeader';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import AddNetImportItem from './AddNetImportItem';
+import titleCase from 'Utilities/String/titleCase';
 import styles from './AddNetImportModalContent.css';
 
 class AddNetImportModalContent extends Component {
@@ -22,7 +23,7 @@ class AddNetImportModalContent extends Component {
       isSchemaFetching,
       isSchemaPopulated,
       schemaError,
-      netImports,
+      listGroups,
       onNetImportSelect,
       onModalClose
     } = this.props;
@@ -53,22 +54,28 @@ class AddNetImportModalContent extends Component {
                   <div>For more information on the individual netImports, clink on the info buttons.</div>
                 </Alert>
 
-                <FieldSet>
-                  <div className={styles.netImports}>
-                    {
-                      netImports.map((netImport) => {
-                        return (
-                          <AddNetImportItem
-                            key={netImport.implementation}
-                            implementation={netImport.implementation}
-                            {...netImport}
-                            onNetImportSelect={onNetImportSelect}
-                          />
-                        );
-                      })
-                    }
-                  </div>
-                </FieldSet>
+                {
+                  Object.keys(listGroups).map((key) => {
+                    return (
+                      <FieldSet legend={`${titleCase(key)} List`} key={key}>
+                        <div className={styles.netImports}>
+                          {
+                            listGroups[key].map((netImport) => {
+                              return (
+                                <AddNetImportItem
+                                  key={netImport.implementation}
+                                  implementation={netImport.implementation}
+                                  {...netImport}
+                                  onNetImportSelect={onNetImportSelect}
+                                />
+                              );
+                            })
+                          }
+                        </div>
+                      </FieldSet>
+                    );
+                  })
+                }
               </div>
           }
         </ModalBody>
@@ -88,7 +95,7 @@ AddNetImportModalContent.propTypes = {
   isSchemaFetching: PropTypes.bool.isRequired,
   isSchemaPopulated: PropTypes.bool.isRequired,
   schemaError: PropTypes.object,
-  netImports: PropTypes.arrayOf(PropTypes.object).isRequired,
+  listGroups: PropTypes.object.isRequired,
   onNetImportSelect: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };

frontend/src/Settings/NetImport/NetImport/AddNetImportModalContentConnector.js

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
@@ -16,11 +17,16 @@ function createMapStateToProps() {
         schema
       } = netImports;
 
+      const listGroups = _.chain(schema)
+        .sortBy((o) => o.listOrder)
+        .groupBy('listType')
+        .value();
+
       return {
         isSchemaFetching,
         isSchemaPopulated,
         schemaError,
-        netImports: schema
+        listGroups
       };
     }
   );