From 4ca2c52a41db8e7ac7e7b3557397a84a16f807e0 Mon Sep 17 00:00:00 2001
From: Jaden Diefenbaugh <jaden.diefenbaugh@idiap.ch>
Date: Fri, 21 Sep 2018 19:02:01 -0700
Subject: [PATCH] [js][tc] change tc channel select into dropdown to show
 colors, closes #121

---
 .../toolchain/ToolchainEditor.spec.jsx        |  4 +-
 .../components/toolchain/ToolchainModal.jsx   | 64 ++++++++++++-------
 2 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/conda/js/src/components/toolchain/ToolchainEditor.spec.jsx b/conda/js/src/components/toolchain/ToolchainEditor.spec.jsx
index b886be33..d0896034 100644
--- a/conda/js/src/components/toolchain/ToolchainEditor.spec.jsx
+++ b/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();
diff --git a/conda/js/src/components/toolchain/ToolchainModal.jsx b/conda/js/src/components/toolchain/ToolchainModal.jsx
index 0d6bb84e..0ed9a03b 100644
--- a/conda/js/src/components/toolchain/ToolchainModal.jsx
+++ b/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>
-- 
GitLab