Island UI: fix a bug that broke completed step checkmarks in the side navigation

monkey/monkey_island/cc/ui/src/components/Main.tsx

@@ -29,6 +29,7 @@ import {DisabledSidebarLayoutComponent} from "./layouts/DisabledSidebarLayoutCom
 import {CompletedSteps} from "./side-menu/CompletedSteps";
 import Timeout = NodeJS.Timeout;
 import IslandHttpClient from "./IslandHttpClient";
+import _ from "lodash";
 
 
 let notificationIcon = require('../images/notification-logo-512x512.png');
@@ -91,18 +92,13 @@ class AppComponent extends AuthComponent {
                 this.authFetch('/api')
                   .then(res => res.json())
                   .then(res => {
+                    let completedSteps = CompletedSteps.buildFromResponse(res.completed_steps);
                     // This check is used to prevent unnecessary re-rendering
-                    let isChanged = false;
-                    for (let step in this.state.completedSteps) {
-                      if (this.state.completedSteps[step] !== res['completed_steps'][step]) {
-                        isChanged = true;
-                        break;
+                    if (_.isEqual(this.state.completedSteps, completedSteps)) {
+                      return;
                     }
-                    }
-                    if (isChanged) {
-                      this.setState({completedSteps: res['completed_steps']});
+                    this.setState({completedSteps: completedSteps});
                     this.showInfectionDoneNotification();
-                    }
                   });
               }
             )

monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx

@@ -22,6 +22,7 @@ type Props = {
 
 
 const SideNavComponent = ({disabled=false, completedSteps}: Props) => {
+
   return (
     <>
       <NavLink to={'/'} exact={true}>

monkey/monkey_island/cc/ui/src/components/side-menu/CompletedSteps.tsx

@@ -9,14 +9,24 @@ export class CompletedSteps {
   public constructor(runServer?: boolean,
                      runMonkey?: boolean,
                      infectinDone?: boolean,
-                     reportDone?: boolean,
-                     isLoggedIn?: boolean,
-                     needsRegistration?: boolean) {
+                     reportDone?: boolean) {
     this.runServer = runServer || false;
     this.runMonkey = runMonkey || false;
     this.infectionDone = infectinDone || false;
     this.reportDone = reportDone || false;
-    this.isLoggedIn = isLoggedIn || false;
-    this.needsRegistration = needsRegistration || false;
+  }
+
+  static buildFromResponse(response: CompletedStepsRequest) {
+    return new CompletedSteps(response.run_server,
+                              response.run_monkey,
+                              response.infection_done,
+                              response.report_done);
   }
 }
+
+type CompletedStepsRequest = {
+  run_server: boolean,
+  run_monkey: boolean,
+  infection_done: boolean,
+  report_done: boolean
+}