fix input/output switching in tc modal, closes #129

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

@@ -592,24 +592,28 @@ export class ToolchainEditor extends React.PureComponent<Props, State> {
 
 		// update inputs
 		if(Array.isArray(data.inputs)){
-			data.inputs
+			// first change names
+			// when the modal opens,
+			// a new "change" operation is added to the cache
+			// for each input/output already in the block, with a name === original
+			// to avoid extra processing, skip these if they exist
+			const [oldNames, newNames] = data.inputs.filter(o => o.action === 'change' && o.original !== o.name)
+			.reduce(([oldNames, newNames], o) => [[...oldNames, o.original], [...newNames, o.name]], [[], []]);
+
+			newData = this.updateBlockIONamesFunc(newData, newBlock.name, set, 'input', oldNames, newNames);
+			newBlock = findNewBlock();
+
+			data.inputs.filter(o => o.action !== 'change')
 			.forEach(o => {
 				switch(o.action){
-					case 'change':
-						// when the modal opens,
-						// a new "change" operation is added to the cache
-						// for each input/output already in the block, with a name === original
-						// to avoid extra processing, skip these if they exist
-						if(o.original === o.name)
-							return;
-						newData = this.updateBlockIONameFunc(newData, newBlock.name, set, 'input', o.original, o.name);
-						break;
 					case 'delete':
 						newData = this.deleteBlockIOFunc(newData, newBlock.name, set, 'input', o.original);
 						break;
 					case 'add':
 						newData = this.addBlockIOFunc(newData, newBlock.name, set, 'input', o.name);
 						break;
+					default:
+						break;
 				}
 				newBlock = findNewBlock();
 			});
@@ -617,20 +621,23 @@ export class ToolchainEditor extends React.PureComponent<Props, State> {
 
 		// update outputs
 		if(Array.isArray(data.outputs)){
-			data.outputs
+			const [oldNames, newNames] = data.outputs.filter(o => o.action === 'change' && o.original !== o.name)
+			.reduce(([oldNames, newNames], o) => [[...oldNames, o.original], [...newNames, o.name]], [[], []]);
+
+			newData = this.updateBlockIONamesFunc(newData, newBlock.name, set, 'output', oldNames, newNames);
+			newBlock = findNewBlock();
+
+			data.outputs.filter(o => o.action !== 'change')
 			.forEach(o => {
 				switch(o.action){
-					case 'change':
-						if(o.original === o.name)
-							return;
-						newData = this.updateBlockIONameFunc(newData, newBlock.name, set, 'output', o.original, o.name);
-						break;
 					case 'delete':
 						newData = this.deleteBlockIOFunc(newData, newBlock.name, set, 'output', o.original);
 						break;
 					case 'add':
 						newData = this.addBlockIOFunc(newData, newBlock.name, set, 'output', o.name);
 						break;
+					default:
+						break;
 				}
 				newBlock = findNewBlock();
 			});
@@ -729,31 +736,59 @@ export class ToolchainEditor extends React.PureComponent<Props, State> {
 		};
 	}
 
-	// updates a block's input or output name
-	updateBlockIONameFunc = (oldData: any, blockName: string, set: BlockSet, ioType: 'input' | 'output', oldName: string, newName: string) => {
-		const combinedName = `${ blockName }.${ oldName }`;
+	// update multiple block names at once
+	updateBlockIONamesFunc = (oldData: any, blockName: string, set: BlockSet, ioType: 'input' | 'output', oldNames: string[], newNames: string[]) => {
+		const combinedNames = oldNames.map(oldName => `${ blockName }.${ oldName }`);
+		// gets the new name for the i/o from the old name OR from the old combined name (in the form `${blockName}.${oldName}`)
+		const getNewFromOld = (oldName: string): ?string => {
+			const foundCombined = combinedNames.findIndex(cn => cn === oldName);
+			const found = oldNames.findIndex(o => o === oldName);
+			if(foundCombined > -1){
+				return newNames[foundCombined];
+			} else if(found > -1){
+				return newNames[found];
+			} else {
+				return undefined;
+			}
+		};
+
+		// updates a connection to use the new names
 		const updateConn = (from, to): string[] => {
 			const fromSplit = from.split('.');
-			if(ioType === 'output')
-				fromSplit[1] = from === combinedName ? newName : fromSplit[1];
 			const toSplit = to.split('.');
-			if(ioType === 'input')
-				toSplit[1] = to === combinedName ? newName : toSplit[1];
+
+			if(ioType === 'output')
+				fromSplit[1] = getNewFromOld(from) || fromSplit[1];
+			else if(ioType === 'input')
+				toSplit[1] = getNewFromOld(to) || toSplit[1];
+
 			return [fromSplit.join('.'), toSplit.join('.')];
 		};
-		const rep = {...oldData.contents.representation};
 
-		const newRepConns = Object.entries(rep.connections).map(([name, rep]) => {
-			if(!name.includes(`.${ oldName }`))
-				return [name, rep];
+		const rep = {...oldData.contents.representation};
+		// fix all the names in `contents.representation.connections`
+		const newRepConns = Object.entries(rep.connections).map(([name, crep]) => {
+			if(!oldNames.some(oldName => name.includes(`.${ oldName }`)))
+				return [name, crep];
 
 			const [from, to] = name.split('/');
 			const updated = updateConn(from, to);
 
-			return [updated.join('/'), rep];
+			return [updated.join('/'), crep];
 		})
-		.reduce((cs, [name, map]) => ({...cs, [name]: rep}), {})
+		.reduce((cs, [name, crep]) => ({...cs, [name]: crep}), {})
 		;
+
+		// fix all the connection objects in `contents.connections`
+		const newConns = oldData.contents.connections.map(c => {
+			const updated = updateConn(c.from, c.to);
+			return {
+				...c,
+				from: updated[0],
+				to: updated[1],
+			};
+		});
+
 		const newContents = {
 			...oldData.contents,
 			[set]: oldData.contents[set].map(s => {
@@ -763,21 +798,12 @@ export class ToolchainEditor extends React.PureComponent<Props, State> {
 					...s,
 				};
 				if(ioType === 'input')
-					newBlock.inputs = newBlock.inputs.map(str => str === oldName ? newName : str);
+					newBlock.inputs = newBlock.inputs.map(str => getNewFromOld(str) || str);
 				if(ioType === 'output')
-					newBlock.outputs = newBlock.outputs.map(str => str === oldName ? newName : str);
+					newBlock.outputs = newBlock.outputs.map(str => getNewFromOld(str) || str);
 				return newBlock;
 			}),
-			connections: oldData.contents.connections.map(c => {
-				if(!c.from.includes(`.${ oldName }`) && !c.to.includes(`.${ oldName }`))
-					return c;
-				const updated = updateConn(c.from, c.to);
-				return {
-					...c,
-					from: updated[0],
-					to: updated[1],
-				};
-			}),
+			connections: newConns,
 			representation: {
 				...rep,
 				connections: newRepConns,
@@ -790,7 +816,6 @@ export class ToolchainEditor extends React.PureComponent<Props, State> {
 		};
 	}
 
-
 	// add a new input or output to a block
 	addBlockIOFunc = (oldData: any, blockName: string, set: BlockSet, ioType: 'input' | 'output', newName: string) => {
 		const newContents = {

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

@@ -152,17 +152,18 @@ class ToolchainModal extends React.Component<Props, State> {
 	changeIO = (io: boolean, oldObj: IO, newName: string) => {
 		const arr = io ? 'inputs' : 'outputs';
 		const newObj = {...oldObj, name: newName};
+		const newArr = this.state.cache[arr].map(o => {
+			if(o.original === oldObj.original){
+				return newObj;
+			} else {
+				return o;
+			}
+		});
 
 		this.setState({
 			cache: {
 				...this.state.cache,
-				[arr]: this.state.cache[arr].map(o => {
-					if(o.original === oldObj.original){
-						return newObj;
-					} else {
-						return o;
-					}
-				}),
+				[arr]: newArr,
 			},
 			unsavedChanges: true,