release channel UI update and cleanup

frontend/css/global.scss

@@ -237,6 +237,25 @@ fieldset {
   }
 }
 
+.os-release-channel {
+  width: 100%;
+  margin-bottom: 0.5rem;
+  label {
+    vertical-align: bottom;
+    margin-bottom: 0.75rem;
+    margin-right: 1rem;
+  }
+  .filter-search {
+    display: inline;
+    span {
+      width: 40%;
+    }
+    .bp3-popover-wrapper {
+      display: inline;
+    }
+  }
+}
+
 .all-content-wrapper {
   margin: 0 auto;
   padding: 11rem 3rem 0;

frontend/devices/actions.ts

@@ -7,7 +7,7 @@ import {
 } from "./interfaces";
 import { Thunk } from "../redux/interfaces";
 import {
-  McuParams, Configuration, TaggedFirmwareConfig, ParameterApplication,
+  McuParams, TaggedFirmwareConfig, ParameterApplication,
   ALLOWED_PIN_MODES,
   FirmwareHardware
 } from "farmbot";
@@ -381,11 +381,11 @@ export function updateMCU(key: ConfigKey, val: string) {
 }
 
 /** Update FBOS setting. */
-export function updateConfig(config: Configuration) {
+export function updateConfig(config: Partial<FbosConfig>) {
   return function (dispatch: Function, getState: () => Everything) {
     const fbosConfig = getFbosConfig(getState().resources.index);
     if (fbosConfig) {
-      dispatch(edit(fbosConfig, config as Partial<FbosConfig>));
+      dispatch(edit(fbosConfig, config));
       dispatch(apiSave(fbosConfig.uuid));
     }
   };

frontend/devices/components/__tests__/boolean_mcu_input_group_test.tsx

@@ -1,36 +1,49 @@
 jest.mock("../../actions", () => ({ settingToggle: jest.fn() }));
+
 import * as React from "react";
 import { mount } from "enzyme";
 import { BooleanMCUInputGroup } from "../boolean_mcu_input_group";
 import { ToggleButton } from "../../../controls/toggle_button";
 import { settingToggle } from "../../actions";
 import { bot } from "../../../__test_support__/fake_state/bot";
+import { BooleanMCUInputGroupProps } from "../interfaces";
 
 describe("BooleanMCUInputGroup", () => {
+  const fakeProps = (): BooleanMCUInputGroupProps => ({
+    sourceFwConfig: x => ({ value: bot.hardware.mcu_params[x], consistent: true }),
+    dispatch: jest.fn(),
+    tooltip: "Tooltip",
+    name: "Name",
+    x: "encoder_invert_x",
+    y: "encoder_invert_y",
+    z: "encoder_invert_z",
+  });
+
+  enum Buttons { xAxis, yAxis, zAxis }
+
   it("triggers callbacks", () => {
-    const dispatch = jest.fn();
-    const el = mount(<BooleanMCUInputGroup
-      sourceFwConfig={(x) => {
-        return { value: bot.hardware.mcu_params[x], consistent: true };
-      }}
-      dispatch={dispatch}
-      tooltip={"Tooltip"}
-      name={"Name"}
-      x={"encoder_invert_x"}
-      y={"encoder_invert_y"}
-      z={"encoder_enabled_z"} />);
-    enum Buttons { xAxis, yAxis, zAxis }
-    const xEl = el.find(ToggleButton).at(Buttons.xAxis);
-    const yEl = el.find(ToggleButton).at(Buttons.yAxis);
-    const zEl = el.find(ToggleButton).at(Buttons.zAxis);
-    xEl.simulate("click");
-    expect(settingToggle)
-      .toHaveBeenCalledWith("encoder_invert_x", expect.any(Function), undefined);
-    yEl.simulate("click");
-    expect(settingToggle)
-      .toHaveBeenCalledWith("encoder_invert_y", expect.any(Function), undefined);
-    zEl.simulate("click");
-    expect(settingToggle)
-      .toHaveBeenCalledWith("encoder_enabled_z", expect.any(Function), undefined);
+    const wrapper = mount(<BooleanMCUInputGroup {...fakeProps()} />);
+    const xAxisButton = wrapper.find(ToggleButton).at(Buttons.xAxis);
+    const yAxisButton = wrapper.find(ToggleButton).at(Buttons.yAxis);
+    const zAxisButton = wrapper.find(ToggleButton).at(Buttons.zAxis);
+    xAxisButton.simulate("click");
+    expect(settingToggle).toHaveBeenLastCalledWith("encoder_invert_x",
+      expect.any(Function), undefined);
+    yAxisButton.simulate("click");
+    expect(settingToggle).toHaveBeenLastCalledWith("encoder_invert_y",
+      expect.any(Function), undefined);
+    zAxisButton.simulate("click");
+    expect(settingToggle).toHaveBeenLastCalledWith("encoder_invert_z",
+      expect.any(Function), undefined);
+  });
+
+  it("displays gray toggles", () => {
+    const p = fakeProps();
+    p.grayscale = { x: true, y: false, z: false };
+    const wrapper = mount(<BooleanMCUInputGroup {...p} />);
+    const xAxisButton = wrapper.find(ToggleButton).at(Buttons.xAxis);
+    expect(xAxisButton.props().grayscale).toBeTruthy();
+    const yAxisButton = wrapper.find(ToggleButton).at(Buttons.yAxis);
+    expect(yAxisButton.props().grayscale).toBeFalsy();
   });
 });

frontend/devices/components/__tests__/send_diagnostic_report_test.tsx

@@ -8,23 +8,12 @@ describe("<SendDiagnosticReport/>", () => {
     dispatch: jest.fn(),
     diagnostics: [fakeDiagnosticDump()],
     expanded: true,
-    shouldDisplay: jest.fn(() => true),
     botOnline: true,
   });
 
   it("renders", () => {
     const p = fakeProps();
-    p.shouldDisplay = jest.fn(() => true);
     const wrapper = render(<SendDiagnosticReport {...p} />);
     expect(wrapper.text()).toContain("DIAGNOSTIC CHECK");
-    expect(p.shouldDisplay).toHaveBeenCalled();
-  });
-
-  it("doesn't render", () => {
-    const p = fakeProps();
-    p.shouldDisplay = jest.fn(() => false);
-    const wrapper = render(<SendDiagnosticReport {...p} />);
-    expect(wrapper.text()).toEqual("");
-    expect(p.shouldDisplay).toHaveBeenCalled();
   });
 });

frontend/devices/components/farmbot_os_settings.tsx

@@ -165,7 +165,6 @@ export class FarmbotOsSettings
             <SendDiagnosticReport
               diagnostics={this.props.diagnostics}
               expanded={this.props.bot.controlPanelState.diagnostic_dumps}
-              shouldDisplay={this.props.shouldDisplay}
               botOnline={isBotOnline(sync_status, botToMqttStatus)}
               dispatch={this.props.dispatch} />
           </MustBeOnline>

frontend/devices/components/fbos_settings/__tests__/auto_update_row_test.tsx

@@ -34,7 +34,7 @@ describe("<AutoUpdateRow/>", () => {
     p.sourceFbosConfig = () => ({ value: 0, consistent: true });
     const wrapper = mount(<AutoUpdateRow {...p} />);
     wrapper.find("button").first().simulate("click");
-    expect(edit).toHaveBeenCalledWith(fakeConfig, { os_auto_update: 1 });
+    expect(edit).toHaveBeenCalledWith(fakeConfig, { os_auto_update: true });
     expect(save).toHaveBeenCalledWith(fakeConfig.uuid);
   });
 
@@ -43,7 +43,7 @@ describe("<AutoUpdateRow/>", () => {
     p.sourceFbosConfig = () => ({ value: 1, consistent: true });
     const wrapper = mount(<AutoUpdateRow {...p} />);
     wrapper.find("button").first().simulate("click");
-    expect(edit).toHaveBeenCalledWith(fakeConfig, { os_auto_update: 0 });
+    expect(edit).toHaveBeenCalledWith(fakeConfig, { os_auto_update: false });
     expect(save).toHaveBeenCalledWith(fakeConfig.uuid);
   });
 });

frontend/devices/components/fbos_settings/__tests__/fbos_details_test.tsx

@@ -1,11 +1,9 @@
-jest.mock("../../../../api/crud", () => ({
-  edit: jest.fn(),
-  save: jest.fn(),
-}));
+jest.mock("../../../actions", () => ({ updateConfig: jest.fn() }));
 
 import * as React from "react";
 import {
-  FbosDetails, colorFromTemp, betaReleaseOptIn, colorFromThrottle, ThrottleType
+  FbosDetails, colorFromTemp, colorFromThrottle, ThrottleType,
+  BetaReleaseOptInButtonProps, BetaReleaseOptIn,
 } from "../fbos_details";
 import { shallow, mount } from "enzyme";
 import { bot } from "../../../../__test_support__/fake_state/bot";
@@ -15,8 +13,8 @@ import { fakeState } from "../../../../__test_support__/fake_state";
 import {
   buildResourceIndex, fakeDevice
 } from "../../../../__test_support__/resource_index_builder";
-import { edit, save } from "../../../../api/crud";
 import { fakeTimeSettings } from "../../../../__test_support__/fake_time_settings";
+import { updateConfig } from "../../../actions";
 
 describe("<FbosDetails/>", () => {
   const fakeConfig = fakeFbosConfig();
@@ -56,7 +54,7 @@ describe("<FbosDetails/>", () => {
       "Firmware commit", "fakeFwCo",
       "FAKETARGET CPU temperature", "48.3", "C",
       "WiFi strength", "-49dBm",
-      "Beta release Opt-In",
+      "OS release channel",
       "Uptime", "0 seconds",
       "Memory usage", "0MB",
       "Disk usage", "0%",
@@ -88,31 +86,6 @@ describe("<FbosDetails/>", () => {
     expect(wrapper.find("a").length).toEqual(0);
   });
 
-  it("toggles os beta opt in setting on", () => {
-    const p = fakeProps();
-    p.sourceFbosConfig = () => ({ value: false, consistent: true });
-    const wrapper = mount(<FbosDetails {...p} />);
-    window.confirm = jest.fn();
-    wrapper.find("button").simulate("click");
-    expect(window.confirm).toHaveBeenCalledWith(
-      expect.stringContaining("you sure?"));
-    expect(edit).not.toHaveBeenCalled();
-    expect(save).not.toHaveBeenCalled();
-    window.confirm = () => true;
-    wrapper.find("button").simulate("click");
-    expect(edit).toHaveBeenCalledWith(fakeConfig, { beta_opt_in: true });
-    expect(save).toHaveBeenCalledWith(fakeConfig.uuid);
-  });
-
-  it("toggles os beta opt in setting off", () => {
-    bot.hardware.configuration.beta_opt_in = true;
-    const wrapper = mount(<FbosDetails {...fakeProps()} />);
-    window.confirm = () => false;
-    wrapper.find("button").simulate("click");
-    expect(edit).toHaveBeenCalledWith(fakeConfig, { beta_opt_in: false });
-    expect(save).toHaveBeenCalledWith(fakeConfig.uuid);
-  });
-
   it("displays N/A when wifi strength value is undefined", () => {
     const p = fakeProps();
     p.botInfoSettings.wifi_level = undefined;
@@ -204,53 +177,33 @@ describe("<FbosDetails/>", () => {
   });
 });
 
-describe("betaReleaseOptIn()", () => {
-  it("uses `beta_opt_in`: beta enabled", () => {
-    const result = betaReleaseOptIn({
-      sourceFbosConfig: () => ({ value: true, consistent: true }),
-      shouldDisplay: () => false
-    });
-    expect(result).toEqual({
-      betaOptIn: { consistent: true, value: true },
-      betaOptInValue: true,
-      update: { beta_opt_in: false }
-    });
-  });
-
-  it("uses `beta_opt_in`: beta disabled", () => {
-    const result = betaReleaseOptIn({
-      sourceFbosConfig: () => ({ value: false, consistent: true }),
-      shouldDisplay: () => false
-    });
-    expect(result).toEqual({
-      betaOptIn: { consistent: true, value: false },
-      betaOptInValue: false,
-      update: { beta_opt_in: true }
-    });
+describe("<BetaReleaseOptIn />", () => {
+  const fakeProps = (): BetaReleaseOptInButtonProps => ({
+    dispatch: jest.fn(),
+    sourceFbosConfig: () => ({ value: true, consistent: true }),
   });
 
-  it("uses `update_channel`: beta enabled", () => {
-    const result = betaReleaseOptIn({
-      sourceFbosConfig: () => ({ value: "beta", consistent: true }),
-      shouldDisplay: () => true
-    });
-    expect(result).toEqual({
-      betaOptIn: { consistent: true, value: true },
-      betaOptInValue: true,
-      update: { update_channel: "stable" }
-    });
+  it("changes to beta channel", () => {
+    const p = fakeProps();
+    p.sourceFbosConfig = () => ({ value: "stable", consistent: true });
+    const wrapper = shallow(<BetaReleaseOptIn {...p} />);
+    window.confirm = jest.fn();
+    wrapper.find("FBSelect").simulate("change", { label: "", value: "" });
+    expect(window.confirm).toHaveBeenCalledWith(
+      expect.stringContaining("you sure?"));
+    expect(updateConfig).not.toHaveBeenCalled();
+    window.confirm = () => true;
+    wrapper.find("FBSelect").simulate("change", { label: "", value: "beta" });
+    expect(updateConfig).toHaveBeenCalledWith({ update_channel: "beta" });
   });
 
-  it("uses `update_channel`: beta disabled", () => {
-    const result = betaReleaseOptIn({
-      sourceFbosConfig: () => ({ value: "stable", consistent: true }),
-      shouldDisplay: () => true
-    });
-    expect(result).toEqual({
-      betaOptIn: { consistent: true, value: false },
-      betaOptInValue: false,
-      update: { update_channel: "beta" }
-    });
+  it("changes to stable channel", () => {
+    const p = fakeProps();
+    p.sourceFbosConfig = () => ({ value: "beta", consistent: true });
+    const wrapper = shallow(<BetaReleaseOptIn {...p} />);
+    window.confirm = () => false;
+    wrapper.find("FBSelect").simulate("change", { label: "", value: "stable" });
+    expect(updateConfig).toHaveBeenCalledWith({ update_channel: "stable" });
   });
 });
 

frontend/devices/components/fbos_settings/__tests__/power_and_reset_test.tsx

@@ -40,10 +40,10 @@ describe("<PowerAndReset/>", () => {
     p.controlPanelState.power_and_reset = true;
     const wrapper = mount(<PowerAndReset {...p} />);
     ["Power and Reset", "Restart", "Shutdown", "Factory Reset",
-      "Automatic Factory Reset", "Connection Attempt Period"]
+      "Automatic Factory Reset", "Connection Attempt Period", "Change Ownership"]
       .map(string => expect(wrapper.text().toLowerCase())
         .toContain(string.toLowerCase()));
-    ["Restart Firmware", "Change Ownership"]
+    ["Restart Firmware"]
       .map(string => expect(wrapper.text().toLowerCase())
         .not.toContain(string.toLowerCase()));
   });
@@ -92,7 +92,6 @@ describe("<PowerAndReset/>", () => {
   it("shows change ownership button", () => {
     const p = fakeProps();
     p.controlPanelState.power_and_reset = true;
-    p.shouldDisplay = () => true;
     const wrapper = mount(<PowerAndReset {...p} />);
     expect(wrapper.text().toLowerCase())
       .toContain("Change Ownership".toLowerCase());

frontend/devices/components/fbos_settings/auto_update_row.tsx

@@ -23,10 +23,9 @@ export function AutoUpdateRow(props: AutoUpdateRowProps) {
     <Col xs={ColWidth.button}>
       <ToggleButton toggleValue={osAutoUpdate.value}
         dim={!osAutoUpdate.consistent}
-        toggleAction={() => {
-          const newOsAutoUpdateNum = !osAutoUpdate.value ? 1 : 0;
-          props.dispatch(updateConfig({ os_auto_update: newOsAutoUpdateNum }));
-        }} />
+        toggleAction={() => props.dispatch(updateConfig({
+          os_auto_update: !osAutoUpdate.value
+        }))} />
     </Col>
   </Row>;
 }