Scanner order

scanner_order.diff

diff --git a/client/pages/fileset.js b/client/pages/fileset.js
index 3e454dbd..0a074421 100644
--- a/client/pages/fileset.js
+++ b/client/pages/fileset.js
@@ -43,6 +43,7 @@ function create(opts: DefaultPageOptions): Observable {
     filesetId: hg.value(''),
     uri: hg.value(''),
     fileset: hg.varhash({}),
+    scanners: hg.array([]),
     filesetFilesMeta: hg.varhash({}),
     relatedFilesets: relatedFilesets.create(options),
     messages,
@@ -415,6 +416,31 @@ function renderScannerRow(
   );
 }

+const getScannerGroup = ({attributes: {deprecated, is_default}}) => {
+  if (is_default && !deprecated) {
+    return 'active_default';
+  } else if (!deprecated) {
+    return 'active';
+  }
+  return 'deprecated';
+};
+
+function getFilesetScanners(state: Snapshot): ApiScannerRow[] {
+  const filesetScanners = api.getRelatedResourceIdentifiers(
+    state.fileset,
+    'scanners'
+  );
+  const {active_default, active, deprecated} = R.groupBy(getScannerGroup)(
+    state.scanners
+  );
+  const orderedScanners = [
+    ...R.sortBy(R.path(['attributes', 'name']))(active_default),
+    ...R.sortBy(R.path(['attributes', 'name']))(active),
+    ...R.sortBy(R.path(['attributes', 'name']))(deprecated)
+  ];
+  return orderedScanners.map(({id}) => filesetScanners.find(x => x.id === id));
+}
+
 function renderScannerTable(state: Snapshot): VDomElement {
   const fileMetaInfo = api.getRelatedResourceIdentifierMeta(
     state.fileset,
@@ -422,9 +448,7 @@ function renderScannerTable(state: Snapshot): VDomElement {
   );
   const totalFiles = fileMetaInfo ? fileMetaInfo.count : 0;
   const ignoredFiles = fileMetaInfo ? fileMetaInfo.ignored_file_count : 0;
-
-  const rows = api.getRelatedResourceIdentifiers(state.fileset, 'scanners');
-  const renderedRows = rows.map(row =>
+  const renderedRows = getFilesetScanners(state).map(row =>
     renderScannerRow(row, totalFiles, ignoredFiles, state.filesetId)
   );
   const rowsInTbody = h('tbody', renderedRows);
@@ -803,6 +827,7 @@ function getFileset(state: Observable, request: Request): RequestObject {

 function getFilesetSuccess(state: Observable, resp: Object) {
   state.fileset.set(resp.data);
+  state.scanners.set(api.getIncludedResourceByType(resp.included, 'scanners'));
   state.uri.set(resp.data.attributes.uri);
   state.status.set('loaded');
 }

It might be a little cryptic but getScannerForSummaryCreator is a function that returns a function. It returns a closure (because it keeps the fileset variable bound).

Actually if i use function instead of anonymous functions it's a bit clearer. I also put filesetScanners in the enclosing function so api.getRelatedResourceIdentifiers is only called once. Use the below for getScannerForSummaryCreator

function getScannerForSummaryCreator(
  fileset: Snapshot
): GetScannerForSummaryCreator {
  const filesetScanners = api.getRelatedResourceIdentifiers(
    fileset,
    'scanners'
  );
  return function createScannerForSummary(
    orderedScanner: JSONAPIScanner
  ): ?ApiScannerRow {
    const scanner = filesetScanners.find(x => x.id === orderedScanner.id);
    if (scanner) {
      return {...scanner, group: getScannerGroup(orderedScanner)};
    }
  };
}