From e77868b656b40d904fc5cc2d5bd7a2c48abbb2d8 Mon Sep 17 00:00:00 2001
From: Mike Salvatore <mike.s.salvatore@gmail.com>
Date: Thu, 28 Jan 2021 13:44:14 -0500
Subject: [PATCH] ui: sort checkbox options alphabetically

Alphabetically sort options in AdvancedMultiSelect to improve usability.
Float "unsafe" options to the bottom so they are grouped together.
---
 .../ui-components/AdvancedMultiSelect.js      | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/AdvancedMultiSelect.js b/monkey/monkey_island/cc/ui/src/components/ui-components/AdvancedMultiSelect.js
index 575dbae8e..6398e85db 100644
--- a/monkey/monkey_island/cc/ui/src/components/ui-components/AdvancedMultiSelect.js
+++ b/monkey/monkey_island/cc/ui/src/components/ui-components/AdvancedMultiSelect.js
@@ -33,10 +33,10 @@ class AdvancedMultiSelect extends React.Component {
   constructor(props) {
     super(props);
 
-    this.enumOptions = props.options.enumOptions;
     this.defaultValues = props.schema.default;
     this.infoPaneRefString = props.schema.items.$ref;
     this.registry = props.registry;
+    this.enumOptions = props.options.enumOptions.sort(this.compareOptions);
 
     this.state = {
       masterCheckboxState: this.getMasterCheckboxState(props.value),
@@ -49,6 +49,27 @@ class AdvancedMultiSelect extends React.Component {
     };
   }
 
+  // Sort options alphabetically. "Unsafe" options float to the bottom"
+  compareOptions = (a, b) => {
+    if (!this.isSafe(a.value) && this.isSafe(b.value)) {
+      return 1;
+    }
+
+    if (this.isSafe(a.value) && !this.isSafe(b.value)) {
+      return -1;
+    }
+
+    if (a.value < b.value) {
+      return -1
+    }
+
+    if (a.value > b.value) {
+      return 1
+    }
+
+    return 0;
+  }
+
   onMasterCheckboxClick = () => {
     if (this.state.masterCheckboxState === MasterCheckboxState.ALL) {
       var newValues = [];