Initial commit of SendLessonDialog

[jamescodeorg]

This change contains an initial commit of the "send lesson" dialog. The layout should be more or less finished (except where noted). Functionality will be added in future commits.

I've added the new dialog to storyboard. Let me know if there are other tests that I should write.

I haven't written much front-end code before so thanks in advance for keeping me out of trouble!

Links

• spec
• jira

Testing story

Reviewer Checklist:

• Tests provide adequate coverage
• Privacy and Security impacts have been assessed
• Code is well-commented
• New features are translatable or updates will not break translations
• Relevant documentation has been added or updated
• User impact is well-understood and desirable
• Pull Request is labeled appropriately
• Follow-up work items (including potential tech debt) are tracked and linked

Without Google button:

With (placeholder) Google button:

[jmkulwik]

Not required, but convention: The render function is usually the last one in the class.

[jmkulwik]

Convention: The styles object generally goes before the class declaration

[jmkulwik]

Not sure if you're at the point where you want to start writing tests yet, but if you are, this would be a good case to unit test.
Example:

code-dot-org/apps/test/unit/code-studio/components/pairing/StudentSelectorTest.js

Lines 16 to 23 in 325379a

	it('displays warning message', () => {
	const wrapper = shallow(
	<StudentSelector students={students} handleSubmit={() => {}} />
	);
	expect(wrapper.find('p')).to.have.lengthOf(0);
	wrapper.setState({selectedStudentIds: [1, 2, 3, 4]});
	expect(wrapper.find('p')).to.have.lengthOf(1);
	});

[jamescodeorg]

Thanks for the pointer -- I will add this test to check for the google button when I put in the real implementation of the button.

[jamescodeorg]

This is ready for re-review! I did run into a pretty annoying problem with required props and the ExampleDialogButton that is similar to the issue described here. After spending some time on it, I decided to just make the props not required for now and will revisit later if I have time. (As a workaround, I also tried to remove ExampleDialogButton and just render the dialog directly in storybook using the hideBackdrop property but the DialogFooter component is written in such a way that it doesn't render correctly with hideBackdrop.)

[jmkulwik]

Looks great!