peripherals column refactor

frontend/account/labs/labs_features_list_ui.tsx

@@ -1,7 +1,9 @@
 import * as React from "react";
 import { fetchLabFeatures, LabsFeature } from "./labs_features_list_data";
-import { KeyValShowRow } from "../../controls/key_val_show_row";
 import { GetWebAppConfigValue } from "../../config_storage/actions";
+import { Row, Col } from "../../ui";
+import { ToggleButton } from "../../controls/toggle_button";
+import { t } from "../../i18next_wrapper";
 
 interface LabsFeaturesListProps {
   onToggle(feature: LabsFeature): Promise<void>;
@@ -10,19 +12,23 @@ interface LabsFeaturesListProps {
 
 export function LabsFeaturesList(props: LabsFeaturesListProps) {
   return <div>
-    {fetchLabFeatures(props.getConfigValue).map((p, i) => {
-      const displayValue = p.displayInvert ? !p.value : p.value;
-      return <KeyValShowRow key={i}
-        label={p.name}
-        labelPlaceholder=""
-        value={p.description}
-        toggleValue={displayValue ? 1 : 0}
-        valuePlaceholder=""
-        onClick={() => {
-          props.onToggle(p)
-            .then(() => p.callback && p.callback());
-        }}
-        disabled={false} />;
+    {fetchLabFeatures(props.getConfigValue).map((feature, i) => {
+      const displayValue = feature.displayInvert ? !feature.value : feature.value;
+      return <Row key={i}>
+        <Col xs={4}>
+          <label>{feature.name}</label>
+        </Col>
+        <Col xs={6}>
+          <p>{feature.description}</p>
+        </Col>
+        <Col xs={2}>
+          <ToggleButton
+            toggleValue={displayValue ? 1 : 0}
+            toggleAction={() => props.onToggle(feature)
+              .then(() => feature.callback && feature.callback())}
+            customText={{ textFalse: t("off"), textTrue: t("on") }} />
+        </Col>
+      </Row>;
     })}
   </div>;
 }

frontend/controls/__tests__/key_val_show_row_test.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { KeyValShowRow, KeyValRowProps } from "../key_val_show_row";
+
+describe("<KeyValShowRow />", () => {
+  const fakeProps = (): KeyValRowProps => ({
+    label: "label",
+    labelPlaceholder: "",
+    value: "value",
+    valuePlaceholder: "",
+    onClick: jest.fn(),
+    disabled: false,
+  });
+
+  it("renders", () => {
+    const wrapper = mount(<KeyValShowRow {...fakeProps()} />);
+    expect(wrapper.text()).toContain("label");
+    expect(wrapper.text()).toContain("value");
+  });
+});

frontend/controls/peripherals/peripheral_list.tsx

@@ -2,19 +2,31 @@ import * as React from "react";
 import { pinToggle } from "../../devices/actions";
 import { PeripheralListProps } from "./interfaces";
 import { sortResourcesById } from "../../util";
-import { KeyValShowRow } from "../key_val_show_row";
+import { Row, Col } from "../../ui";
+import { ToggleButton } from "../toggle_button";
 import { t } from "../../i18next_wrapper";
 
 export const PeripheralList = (props: PeripheralListProps) =>
   <div className="peripheral-list">
-    {sortResourcesById(props.peripherals).map(p =>
-      <KeyValShowRow key={p.uuid}
-        label={p.body.label}
-        labelPlaceholder=""
-        value={"" + p.body.pin}
-        toggleValue={(props.pins[p.body.pin || -1] || { value: undefined }).value}
-        valuePlaceholder=""
-        title={t(`Toggle ${p.body.label}`)}
-        onClick={() => p.body.pin && pinToggle(p.body.pin)}
-        disabled={!!props.disabled} />)}
+    {sortResourcesById(props.peripherals).map(peripheral => {
+      const toggleValue =
+        (props.pins[peripheral.body.pin || -1] || { value: undefined }).value;
+      return <Row key={peripheral.uuid}>
+        <Col xs={6}>
+          <label>{peripheral.body.label}</label>
+        </Col>
+        <Col xs={4}>
+          <p>{"" + peripheral.body.pin}</p>
+        </Col>
+        <Col xs={2}>
+          <ToggleButton
+            toggleValue={toggleValue}
+            toggleAction={() =>
+              peripheral.body.pin && pinToggle(peripheral.body.pin)}
+            title={t(`Toggle ${peripheral.body.label}`)}
+            customText={{ textFalse: t("off"), textTrue: t("on") }}
+            disabled={!!props.disabled} />
+        </Col>
+      </Row>;
+    })}
   </div>;