From 0ae9d70685f07a39a0b89efe480ee7713be6891e Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Mon, 11 Feb 2019 11:19:41 -0500
Subject: [PATCH 1/2] Support the isDiscrete flag on slider monitors

---
 src/components/monitor-list/monitor-list.jsx | 1 +
 src/components/monitor/slider-monitor.jsx    | 5 ++++-
 src/containers/monitor.jsx                   | 2 ++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/monitor-list/monitor-list.jsx b/src/components/monitor-list/monitor-list.jsx
index f7b02080f..e4da715b0 100644
--- a/src/components/monitor-list/monitor-list.jsx
+++ b/src/components/monitor-list/monitor-list.jsx
@@ -27,6 +27,7 @@ const MonitorList = props => (
                         draggable={props.draggable}
                         height={monitorData.height}
                         id={monitorData.id}
+                        isDiscrete={monitorData.isDiscrete}
                         key={monitorData.id}
                         max={monitorData.sliderMax}
                         min={monitorData.sliderMin}
diff --git a/src/components/monitor/slider-monitor.jsx b/src/components/monitor/slider-monitor.jsx
index b9cebfa14..0271b140a 100644
--- a/src/components/monitor/slider-monitor.jsx
+++ b/src/components/monitor/slider-monitor.jsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import styles from './monitor.css';
 
-const SliderMonitor = ({categoryColor, label, min, max, value, onSliderUpdate}) => (
+const SliderMonitor = ({categoryColor, isDiscrete, label, min, max, value, onSliderUpdate}) => (
     <div className={styles.defaultMonitor}>
         <div className={styles.row}>
             <div className={styles.label}>
@@ -22,6 +22,7 @@ const SliderMonitor = ({categoryColor, label, min, max, value, onSliderUpdate})
                 className={classNames(styles.slider, 'no-drag')} // Class used on parent Draggable to prevent drags
                 max={max}
                 min={min}
+                step={isDiscrete ? 1 : 0.01}
                 type="range"
                 value={value}
                 onChange={onSliderUpdate}
@@ -33,6 +34,7 @@ const SliderMonitor = ({categoryColor, label, min, max, value, onSliderUpdate})
 
 SliderMonitor.propTypes = {
     categoryColor: PropTypes.string.isRequired,
+    isDiscrete: PropTypes.bool,
     label: PropTypes.string.isRequired,
     max: PropTypes.number,
     min: PropTypes.number,
@@ -44,6 +46,7 @@ SliderMonitor.propTypes = {
 };
 
 SliderMonitor.defaultProps = {
+    isDiscrete: true,
     min: 0,
     max: 100
 };
diff --git a/src/containers/monitor.jsx b/src/containers/monitor.jsx
index b35a04bb9..dfcdd3aa4 100644
--- a/src/containers/monitor.jsx
+++ b/src/containers/monitor.jsx
@@ -169,6 +169,7 @@ class Monitor extends React.Component {
                 {...monitorProps}
                 draggable={this.props.draggable}
                 height={this.props.height}
+                isDiscrete={this.props.isDiscrete}
                 max={this.props.max}
                 min={this.props.min}
                 mode={this.props.mode}
@@ -192,6 +193,7 @@ Monitor.propTypes = {
     height: PropTypes.number,
     id: PropTypes.string.isRequired,
     intl: intlShape,
+    isDiscrete: PropTypes.bool,
     max: PropTypes.number,
     min: PropTypes.number,
     mode: PropTypes.oneOf(['default', 'slider', 'large', 'list']),

From 4ef98ec0fe8a99071868141b36f8bdd19e22161b Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Mon, 11 Feb 2019 11:48:18 -0500
Subject: [PATCH 2/2] Add unit test to make sure isDiscrete becomes correct
 step size

---
 test/unit/components/monitor-list.test.jsx | 71 ++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 test/unit/components/monitor-list.test.jsx

diff --git a/test/unit/components/monitor-list.test.jsx b/test/unit/components/monitor-list.test.jsx
new file mode 100644
index 000000000..fa955546e
--- /dev/null
+++ b/test/unit/components/monitor-list.test.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import {mountWithIntl} from '../../helpers/intl-helpers.jsx';
+import MonitorList from '../../../src/components/monitor-list/monitor-list.jsx';
+import {OrderedMap} from 'immutable';
+import configureStore from 'redux-mock-store';
+import {Provider} from 'react-redux';
+
+describe('MonitorListComponent', () => {
+    const store = configureStore()({scratchGui: {
+        monitorLayout: {
+            monitors: {},
+            savedMonitorPositions: {}
+        },
+        vm: {
+            runtime: {
+                requestUpdateMonitor: () => {},
+                getLabelForOpcode: () => ''
+            }
+        }
+    }});
+    const draggable = false;
+    const onMonitorChange = jest.fn();
+    const stageSize = {
+        width: 100,
+        height: 100,
+        widthDefault: 100,
+        heightDefault: 100
+    };
+
+    let monitors = OrderedMap({});
+
+    // Wrap this in a function so it gets test specific states and can be reused.
+    const getComponent = function () {
+        return (
+            <Provider store={store}>
+                <MonitorList
+                    draggable={draggable}
+                    monitors={monitors}
+                    stageSize={stageSize}
+                    onMonitorChange={onMonitorChange}
+                />
+            </Provider>
+        );
+    };
+
+    test('it renders the correct step size for discrete sliders', () => {
+        monitors = OrderedMap({
+            id1: {
+                visible: true,
+                mode: 'slider',
+                isDiscrete: true
+            }
+        });
+        const wrapper = mountWithIntl(getComponent());
+        const input = wrapper.find('input');
+        expect(input.props().step).toBe(1);
+    });
+
+    test('it renders the correct step size for non-discrete sliders', () => {
+        monitors = OrderedMap({
+            id1: {
+                visible: true,
+                mode: 'slider',
+                isDiscrete: false
+            }
+        });
+        const wrapper = mountWithIntl(getComponent());
+        const input = wrapper.find('input');
+        expect(input.props().step).toBe(0.01);
+    });
+});