[js][tc] change tc channel select into dropdown to show colors, closes #121

conda/js/src/components/toolchain/ToolchainEditor.spec.jsx

@@ -463,7 +463,7 @@ describe('<ToolchainEditor />', function() {
 			wrapper.find('rect#block_testing_alg').simulate('click');
 			wrapper.update();
 			expect(wrapper.find('ToolchainModal').props().active).to.equal(true);
-			wrapper.find('.modal select').prop('onChange')( { target: { value: 'testing_data' }});
+			wrapper.find('.modal #channelSelector DropdownItem#channel-testing_data').simulate('click');
 			wrapper.update();
 			wrapper.find('button.close').simulate('click');
 			wrapper.update();
@@ -484,7 +484,7 @@ describe('<ToolchainEditor />', function() {
 			wrapper.find('rect#block_analyzer').simulate('click');
 			wrapper.update();
 			expect(wrapper.find('ToolchainModal').props().active).to.equal(true);
-			wrapper.find('.modal select').prop('onChange')( { target: { value: 'testing_data' }});
+			wrapper.find('.modal #channelSelector DropdownItem#channel-testing_data').simulate('click');
 			wrapper.update();
 			wrapper.find('button.close').simulate('click');
 			wrapper.update();

conda/js/src/components/toolchain/ToolchainModal.jsx

@@ -24,7 +24,7 @@ import {
 	InputGroupAddon,
 	Badge,
 	Modal, ModalBody, ModalHeader, ModalFooter,
-	UncontrolledButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem,
+	UncontrolledDropdown, UncontrolledButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem,
 } from 'reactstrap';
 
 import CacheInput from '../CacheInput.jsx';
@@ -86,6 +86,20 @@ class ToolchainModal extends React.Component<Props, State> {
 		// TODO: right now this is just an escape hatch for channel changing not propogating throughout the network. this needs to be fixed
 		const channelSelectDisabled = false; //Object.keys(this.props.possibleChannels).length === 1;
 
+		const currChannel: string = data.synchronized_channel || '';
+
+		const formatChannel = (channel: string) => {
+			return (
+				<span>
+					<span style={{backgroundColor: this.props.possibleChannels[channel] || '#000000'}}>
+						&nbsp;&nbsp;&nbsp;&nbsp;
+					</span>
+					&nbsp;
+					{ channel === '' ? '<none>' : channel }
+				</span>
+			);
+		};
+
 		return (
 			<Modal
 				isOpen={this.props.active}
@@ -129,27 +143,33 @@ class ToolchainModal extends React.Component<Props, State> {
 						{ data.hasOwnProperty('synchronized_channel')
 							&&
 							<FormGroup>
-								<Label>Channel: {data.synchronized_channel}</Label>
-								<Input
-									type='select'
-									disabled={channelSelectDisabled}
-									value={data.synchronized_channel}
-									onChange={e => this.props.updateBlockChannel(e.target.value)}
-									title={channelSelectDisabled ? 'Cannot change the synchronized channel because there is not more than one to choose from' : undefined}
-								>
-									{ /* TODO: adding the current value in the list of possible values is part of the escape hatch for channel changes not propogating throughout the network. this needs to be fixed */ }
-									{
-										Array.from(new Set([...Object.keys(this.props.possibleChannels), data.synchronized_channel]))
-										.map((channel, i) =>
-											<option
-												key={i}
-												value={channel}
-											>
-												{ channel }
-											</option>
-										)
-									}
-								</Input>
+								<Label>
+									Synchronized channel:&nbsp;
+									<UncontrolledDropdown
+										id='channelSelector'
+										disabled={channelSelectDisabled}
+										style={{display: 'inline-block'}}
+									>
+										<DropdownToggle caret outline>
+											{ formatChannel(currChannel || '') }
+										</DropdownToggle>
+										<DropdownMenu>
+											{
+												Array.from(new Set([...Object.keys(this.props.possibleChannels), currChannel || '']))
+												.filter(c => c !== '')
+												.map((c, i) =>
+													<DropdownItem
+														id={`channel-${ c }`}
+														key={i}
+														onClick={e => this.props.updateBlockChannel(c)}
+													>
+														{ formatChannel(c) }
+													</DropdownItem>
+												)
+											}
+										</DropdownMenu>
+									</UncontrolledDropdown>
+								</Label>
 							</FormGroup>
 						}
 						<Row>