ES6ify Instructions components

[islemaster]

Removes React.createClass from InstructionsWithWorkspace and InstructionsDialogWrapper, while adding test coverage for each.

[epeach]

Looks good. I've got a few questions, but overall, it's nice to see more ES6 happening!

[epeach]

With this name change, are the places that import this function going to need to be updated?

[epeach]

Also, what's the benefit of adding 'unwrapped' to the name?

[islemaster]

The default export for this file (which is unchanged by this PR) is at the end of the file, where we use react-redux's connect method to generate a new, "wrapped" version of the component that is the preferred way to use it. (See Radium for another example of wrapped/higher-order components.)

code-dot-org/apps/src/templates/instructions/InstructionsWithWorkspace.jsx

Lines 105 to 115 in 6cb9db4

	export default connect(function propsFromStore(state) {
	return {
	instructionsHeight: state.instructions.renderedHeight
	};
	}, function propsFromDispatch(dispatch) {
	return {
	setInstructionsMaxHeightAvailable(maxHeight) {
	dispatch(setInstructionsMaxHeightAvailable(maxHeight));
	}
	};
	})(UnwrappedInstructionsWithWorkspace);

Changing the name of the unwrapped component doesn't require us to update any of the places that import this file because default exports are unnamed - the importing file doesn't know or care what the export was named, behind the scenes it's just 'default' and can be renamed on import.

// InstructionsWithWorkspace.jsx
export default class InstructionsWithWorkspace {...}

// Consumer.jsx
import FruitSalad from './InstructionsWithWorkspace'; // works fine!

You can read more about the difference between default and named exports on the MDN page for the export keyword.

Testing Redux-connected components can require quite a bit of setup, though, so here I'm making the unwrapped version of the component a second, non-default export for unit testing purposes. The unit tests import and rename the unwrapped component:

code-dot-org/apps/test/unit/templates/instructions/InstructionsWithWorkspaceTest.jsx

Lines 6 to 8 in 6cb9db4

	import {
	UnwrappedInstructionsWithWorkspace as InstructionsWithWorkspace
	} from '@cdo/apps/templates/instructions/InstructionsWithWorkspace';

I could actually get away with not adding "Unwrapped" to the name, but it can lead to some confusion because there's a subtle distinction in how you import it:

// InstructionsWithWorkspace.jsx
export class InstructionsWithWorkspace {...}
export default connect(...)(InstructionsWithWorkspace);

// Consumer.jsx
// import wrapped version
import InstructionsWithWorkspace from './InstructionsWithWorkspace';
// import unwrapped version
import {InstructionsWithWorkspace} from './InstructionsWithWorkspace';

...so I prefer to add something to the name making it obviously the unwrapped version.

[epeach]

Awesome! Thanks for the info!