From 992d8309f87d2621083ea2213feb05bf3a206482 Mon Sep 17 00:00:00 2001
From: Tony Atkins <tony@raisingthefloor.org>
Date: Tue, 10 Nov 2020 13:56:05 +0100
Subject: [PATCH 01/11] C2LC-248: Initial Implementation of share button.

---
 src/App.js                 |  3 ++
 src/ProgramBlockEditor.js  |  3 ++
 src/ShareButton.js         | 69 ++++++++++++++++++++++++++++++++++++++
 src/ShareCompleteModal.css |  8 +++++
 src/ShareCompleteModal.js  | 34 +++++++++++++++++++
 src/messages.json          |  2 ++
 6 files changed, 119 insertions(+)
 create mode 100644 src/ShareButton.js
 create mode 100644 src/ShareCompleteModal.css
 create mode 100644 src/ShareCompleteModal.js

diff --git a/src/App.js b/src/App.js
index edef982d..e1d06256 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,6 +21,7 @@ import AudioFeedbackToggleSwitch from './AudioFeedbackToggleSwitch';
 import PenDownToggleSwitch from './PenDownToggleSwitch';
 import { programIsEmpty } from './ProgramUtils';
 import ProgramSerializer from './ProgramSerializer';
+import ShareButton from './ShareButton';
 import type { DeviceConnectionStatus, Program, RobotDriver } from './types';
 import * as Utils from './Utils';
 import messages from './messages.json';
@@ -593,6 +594,8 @@ export default class App extends React.Component<{}, AppState> {
                         </Row>
                     </Container>
                 </div>
+                <ShareButton/>
+
                 <DashConnectionErrorModal
                     show={this.state.showDashConnectionError}
                     onCancel={this.handleCancelDashConnection}
diff --git a/src/ProgramBlockEditor.js b/src/ProgramBlockEditor.js
index d5dde320..46814566 100644
--- a/src/ProgramBlockEditor.js
+++ b/src/ProgramBlockEditor.js
@@ -41,6 +41,7 @@ type ProgramBlockEditorProps = {
 
 type ProgramBlockEditorState = {
     showConfirmDeleteAll: boolean,
+    showShareComplete: boolean,
     focusedActionPanelOptionName: ?string,
     replaceIsActive: boolean
 };
@@ -63,6 +64,7 @@ class ProgramBlockEditor extends React.Component<ProgramBlockEditorProps, Progra
         this.programSequenceContainerRef = React.createRef();
         this.state = {
             showConfirmDeleteAll : false,
+            showShareComplete: false,
             focusedActionPanelOptionName: null,
             replaceIsActive: false
         }
@@ -444,6 +446,7 @@ class ProgramBlockEditor extends React.Component<ProgramBlockEditorProps, Progra
                         {contents}
                     </div>
                 </div>
+
                 <ConfirmDeleteAllModal
                     show={this.state.showConfirmDeleteAll}
                     onCancel={this.handleCancelDeleteAll}
diff --git a/src/ShareButton.js b/src/ShareButton.js
new file mode 100644
index 00000000..00547e11
--- /dev/null
+++ b/src/ShareButton.js
@@ -0,0 +1,69 @@
+// @flow
+
+import React from 'react';
+import {Button} from 'react-bootstrap';
+import { injectIntl } from 'react-intl';
+import type { IntlShape } from 'react-intl';
+
+import ShareCompleteModal from './ShareCompleteModal';
+
+type ShareButtonProps = {
+    intl: IntlShape,
+    disabled: boolean
+};
+
+type ShareButtonState = {
+    showShareComplete: boolean
+}
+
+class ShareButton extends React.Component<ShareButtonProps, ShareButtonState> {
+    static defaultProps = {
+        disabled: false,
+        showShareComplete: false
+    }
+
+    constructor (props: ShareButtonProps) {
+        super(props);
+        this.state = {
+            showShareComplete: false
+        }
+    }
+
+    handleClickShareButton = () => {
+        // Get the current URL, which represents the current program state.
+        const currentUrl = document.location.href;
+
+        // Copy the URL to the clipboard, see:
+        // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText
+        navigator.clipboard.writeText(currentUrl).then(() => {
+            // TODO: Display modal.
+            this.setState({ showShareComplete: true})
+        });
+    }
+
+    handleModalClose = () => {
+        this.setState({showShareComplete: false});
+    }
+
+    render() {
+        return (
+            <React.Fragment>
+                <Button
+                    variant="dark"
+                    className='ShareButton'
+                    disabled={this.props.disabled}
+                    onClick={this.handleClickShareButton}
+                >
+                    {this.props.intl.formatMessage({id:'ShareButton'})}
+                </Button>
+                <ShareCompleteModal
+                    show={this.state.showShareComplete}
+                    onHide={this.handleModalClose}
+                />
+            </React.Fragment>
+        );
+    }
+}
+
+export default injectIntl(ShareButton);
+
diff --git a/src/ShareCompleteModal.css b/src/ShareCompleteModal.css
new file mode 100644
index 00000000..3ebafb14
--- /dev/null
+++ b/src/ShareCompleteModal.css
@@ -0,0 +1,8 @@
+.ShareCompleteModal {
+    border-radius: 0.25rem;
+}
+
+.ShareCompleteModal__content {
+    border-radius: 0.25rem;
+    background-color: yellow;
+}
\ No newline at end of file
diff --git a/src/ShareCompleteModal.js b/src/ShareCompleteModal.js
new file mode 100644
index 00000000..d11a1a5b
--- /dev/null
+++ b/src/ShareCompleteModal.js
@@ -0,0 +1,34 @@
+// @flow
+import React from 'react';
+import { Modal } from 'react-bootstrap';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import type {IntlShape} from 'react-intl';
+
+import './ShareCompleteModal.css';
+
+type ShareCompleteModalProps = {
+    intl: IntlShape,
+    show: boolean,
+    onHide: Function
+};
+
+class ShareCompleteModal extends React.Component<ShareCompleteModalProps, {}> {
+    static defaultProps = {
+        show: false,
+        onHide: () => {}
+    }
+
+    render () {
+        return(<Modal
+                onHide={this.props.onHide}
+                show={this.props.show}
+                dialogClassName='ShareCompleteModal'
+            >
+            <Modal.Body className='ShareCompleteModal__content'>
+                <FormattedMessage id='ShareCompleteModal.shareComplete' />
+            </Modal.Body>
+        </Modal>);
+    }
+}
+
+export default injectIntl(ShareCompleteModal);
\ No newline at end of file
diff --git a/src/messages.json b/src/messages.json
index 6ba71c4a..8c4d150d 100644
--- a/src/messages.json
+++ b/src/messages.json
@@ -55,6 +55,8 @@
         "ProgramTextEditor.programLabel": "Program:",
         "AudioFeedbackToggleSwitch.audioFeedback": "Audio feedback",
         "Scene": "Scene",
+        "ShareButton": "Share",
+        "ShareCompleteModal.shareComplete": "The URL for your program has been copied to the clipboard.",
         "RefreshButton": "Refresh"
     },
     "fr": {

From 2759efe0e0fae933fd89635d0a9cd6324e8b651f Mon Sep 17 00:00:00 2001
From: Tony Atkins <tony@raisingthefloor.org>
Date: Tue, 10 Nov 2020 16:06:11 +0100
Subject: [PATCH 02/11] C2LC-248: Initial crude integration of share button
 with playback controls.

---
 src/App.js                      | 41 +++++++++++++++++++++------------
 src/ProgramSpeedController.scss |  1 +
 src/ShareButton.css             |  3 +++
 src/ShareButton.js              |  4 ++--
 4 files changed, 32 insertions(+), 17 deletions(-)
 create mode 100644 src/ShareButton.css

diff --git a/src/App.js b/src/App.js
index 7774cebd..e400c6d6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -581,24 +581,35 @@ export default class App extends React.Component<{}, AppState> {
                                 />
                             </Col>
                         </Row>
-                        <div className='App__playControl-container'>
-                            <div className='App__playButton-container'>
-                                <PlayButton
-                                    interpreterIsRunning={this.state.interpreterIsRunning}
-                                    disabled={
-                                        this.state.interpreterIsRunning ||
-                                        programIsEmpty(this.state.program)}
-                                    onClick={this.handleClickPlay}
+                        <Row>
+                            <Col md={4}/>
+                            <Col md={1}>
+                                <div className='App__playControl-container'>
+                                    <div className='App__playButton-container'>
+                                        <PlayButton
+                                            interpreterIsRunning={this.state.interpreterIsRunning}
+                                            disabled={
+                                                this.state.interpreterIsRunning ||
+                                                programIsEmpty(this.state.program)}
+                                            onClick={this.handleClickPlay}
+                                        />
+                                    </div>
+                                </div>
+                            </Col>
+                            <Col md={1}/>
+                            <Col md={3}>
+                                <ProgramSpeedController
+                                    values={this.speedLookUp}
+                                    onChange={this.handleChangeProgramSpeed}
                                 />
-                            </div>
-                            <ProgramSpeedController
-                                values={this.speedLookUp}
-                                onChange={this.handleChangeProgramSpeed}
-                            />
-                        </div>
+                            </Col>
+                            <Col md={1}/>
+                            <Col md={2}>
+                                <ShareButton className="justify-content-end"/>
+                            </Col>
+                        </Row>
                     </Container>
                 </div>
-                <ShareButton/>
 
                 <DashConnectionErrorModal
                     show={this.state.showDashConnectionError}
diff --git a/src/ProgramSpeedController.scss b/src/ProgramSpeedController.scss
index 71692d08..eaf78016 100644
--- a/src/ProgramSpeedController.scss
+++ b/src/ProgramSpeedController.scss
@@ -2,6 +2,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    margin-top: 3rem;
 }
 
 .ProgramSpeedController__slider {
diff --git a/src/ShareButton.css b/src/ShareButton.css
new file mode 100644
index 00000000..0ab68934
--- /dev/null
+++ b/src/ShareButton.css
@@ -0,0 +1,3 @@
+.ShareButton {
+    margin-top: 2.25rem;
+}
\ No newline at end of file
diff --git a/src/ShareButton.js b/src/ShareButton.js
index 00547e11..c7bfe781 100644
--- a/src/ShareButton.js
+++ b/src/ShareButton.js
@@ -7,6 +7,8 @@ import type { IntlShape } from 'react-intl';
 
 import ShareCompleteModal from './ShareCompleteModal';
 
+import './ShareButton.css';
+
 type ShareButtonProps = {
     intl: IntlShape,
     disabled: boolean
@@ -36,7 +38,6 @@ class ShareButton extends React.Component<ShareButtonProps, ShareButtonState> {
         // Copy the URL to the clipboard, see:
         // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText
         navigator.clipboard.writeText(currentUrl).then(() => {
-            // TODO: Display modal.
             this.setState({ showShareComplete: true})
         });
     }
@@ -51,7 +52,6 @@ class ShareButton extends React.Component<ShareButtonProps, ShareButtonState> {
                 <Button
                     variant="dark"
                     className='ShareButton'
-                    disabled={this.props.disabled}
                     onClick={this.handleClickShareButton}
                 >
                     {this.props.intl.formatMessage({id:'ShareButton'})}

From c9d13a174796a4bcf5b9d9237eb72354d0849688 Mon Sep 17 00:00:00 2001
From: Tony Atkins <tony@raisingthefloor.org>
Date: Wed, 11 Nov 2020 15:46:30 +0100
Subject: [PATCH 03/11] Committed work in progress on ShareButton tests for
 review.

---
 src/ShareButton.test.js | 81 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 src/ShareButton.test.js

diff --git a/src/ShareButton.test.js b/src/ShareButton.test.js
new file mode 100644
index 00000000..da07ad17
--- /dev/null
+++ b/src/ShareButton.test.js
@@ -0,0 +1,81 @@
+// @flow
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Adapter from 'enzyme-adapter-react-16';
+import { configure, shallow } from 'enzyme';
+import { createIntl } from 'react-intl';
+import messages from './messages.json';
+
+import ShareButton from './ShareButton';
+
+configure({ adapter: new Adapter()});
+
+const intl = createIntl({
+    locale: 'en',
+    defaultLocale: 'en',
+    messages: messages.en
+});
+
+function createShareButton(props) {
+    const wrapper = shallow(
+        React.createElement(
+            ShareButton.WrappedComponent,
+            Object.assign(
+                {},
+                {
+                    intl: intl
+                },
+                props
+            )
+        )
+    );
+
+    return wrapper;
+}
+
+// TODO: Figure how to do this properly with the required intl infrastructure
+// it('renders without crashing', () => {
+//     const div = document.createElement('div');
+//     ReactDOM.render(<ShareButton intl={intl}/>, div);
+//     ReactDOM.unmountComponentAtNode(div);
+// });
+
+it('hides modal on startup', () => {
+    const wrapper = createShareButton();
+
+    const modal = wrapper.children().at(1);
+    expect(modal.props().show).toBe(false);
+});
+
+it('displays modal on click', () => {
+    const wrapper = createShareButton();
+    const button = wrapper.children().at(0);
+    button.simulate("click");
+
+    const modal = wrapper.children().at(1);
+    expect(modal.props().show).toBe(true);
+});
+
+it('copies URL to clipboard on click', () => {
+    let currentClipboard = "";
+    Object.assign(navigator, {
+        // $FlowFixMe: Flow wants to to mock the full clipboard before we do this.
+        clipboard: {
+            readText: () => {
+                return Promise.resolve(currentClipboard);
+            },
+            writeText: (textToWrite) => {
+                currentClipboard = textToWrite;
+                return Promise.resolve(textToWrite);
+            }
+        }
+    });
+
+    const wrapper = createShareButton();
+    const button = wrapper.children().at(0);
+    button.simulate("click");
+
+    navigator.clipboard.readText().then((clipBoardText) => {
+        expect(clipBoardText).toBe(document.location.href);
+    });
+});

From e11032e54d15106d593cf0466fe85ba86dd590f8 Mon Sep 17 00:00:00 2001
From: Tony Atkins <tony@raisingthefloor.org>
Date: Wed, 11 Nov 2020 15:51:52 +0100
Subject: [PATCH 04/11] Committed second broken share button test for review.

---
 src/ShareButton.test.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/ShareButton.test.js b/src/ShareButton.test.js
index da07ad17..51b456e5 100644
--- a/src/ShareButton.test.js
+++ b/src/ShareButton.test.js
@@ -34,11 +34,11 @@ function createShareButton(props) {
 }
 
 // TODO: Figure how to do this properly with the required intl infrastructure
-// it('renders without crashing', () => {
-//     const div = document.createElement('div');
-//     ReactDOM.render(<ShareButton intl={intl}/>, div);
-//     ReactDOM.unmountComponentAtNode(div);
-// });
+it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<ShareButton intl={intl}/>, div);
+    ReactDOM.unmountComponentAtNode(div);
+});
 
 it('hides modal on startup', () => {
     const wrapper = createShareButton();

From 903bfdf3d889c68959e43f162ef69432c4b4c8dc Mon Sep 17 00:00:00 2001
From: Tony Atkins <tony@raisingthefloor.org>
Date: Wed, 11 Nov 2020 15:59:05 +0100
Subject: [PATCH 05/11] C2LC-248: Committed work in progress on share button
 layout.

---
 src/App.js          | 41 +++++++++++++++--------------------------
 src/ShareButton.css |  5 ++++-
 2 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/src/App.js b/src/App.js
index e400c6d6..c719bc17 100644
--- a/src/App.js
+++ b/src/App.js
@@ -581,33 +581,22 @@ export default class App extends React.Component<{}, AppState> {
                                 />
                             </Col>
                         </Row>
-                        <Row>
-                            <Col md={4}/>
-                            <Col md={1}>
-                                <div className='App__playControl-container'>
-                                    <div className='App__playButton-container'>
-                                        <PlayButton
-                                            interpreterIsRunning={this.state.interpreterIsRunning}
-                                            disabled={
-                                                this.state.interpreterIsRunning ||
-                                                programIsEmpty(this.state.program)}
-                                            onClick={this.handleClickPlay}
-                                        />
-                                    </div>
-                                </div>
-                            </Col>
-                            <Col md={1}/>
-                            <Col md={3}>
-                                <ProgramSpeedController
-                                    values={this.speedLookUp}
-                                    onChange={this.handleChangeProgramSpeed}
+                        <div className='App__playControl-container'>
+                            <div className='App__playButton-container'>
+                                <PlayButton
+                                    interpreterIsRunning={this.state.interpreterIsRunning}
+                                    disabled={
+                                        this.state.interpreterIsRunning ||
+                                        programIsEmpty(this.state.program)}
+                                    onClick={this.handleClickPlay}
                                 />
-                            </Col>
-                            <Col md={1}/>
-                            <Col md={2}>
-                                <ShareButton className="justify-content-end"/>
-                            </Col>
-                        </Row>
+                            </div>
+                            <ProgramSpeedController
+                                values={this.speedLookUp}
+                                onChange={this.handleChangeProgramSpeed}
+                            />
+                            <ShareButton/>
+                        </div>
                     </Container>
                 </div>
 
diff --git a/src/ShareButton.css b/src/ShareButton.css
index 0ab68934..098ed6a2 100644
--- a/src/ShareButton.css
+++ b/src/ShareButton.css
@@ -1,3 +1,6 @@
 .ShareButton {
-    margin-top: 2.25rem;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    margin-top: 3rem;
 }
\ No newline at end of file

From fd5104d1cce8d07383d2d24886f27868a56f0aed Mon Sep 17 00:00:00 2001
From: Tony Atkins <tony@raisingthefloor.org>
Date: Wed, 11 Nov 2020 16:55:26 +0100
Subject: [PATCH 06/11] C2LC-248: Commited work in progress on restyling for
 review.

---
 src/App.js          | 30 +++++++++++++++++-------------
 src/App.scss        | 19 +++++++++++++++++--
 src/ShareButton.css |  7 +++----
 3 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/App.js b/src/App.js
index c719bc17..ed3055d3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -581,21 +581,25 @@ export default class App extends React.Component<{}, AppState> {
                                 />
                             </Col>
                         </Row>
-                        <div className='App__playControl-container'>
-                            <div className='App__playButton-container'>
-                                <PlayButton
-                                    interpreterIsRunning={this.state.interpreterIsRunning}
-                                    disabled={
-                                        this.state.interpreterIsRunning ||
-                                        programIsEmpty(this.state.program)}
-                                    onClick={this.handleClickPlay}
+                        <div className='App__playAndShare-container'>
+                            <div className='App__playControl-container'>
+                                <div className='App__playButton-container'>
+                                    <PlayButton
+                                        interpreterIsRunning={this.state.interpreterIsRunning}
+                                        disabled={
+                                            this.state.interpreterIsRunning ||
+                                            programIsEmpty(this.state.program)}
+                                        onClick={this.handleClickPlay}
+                                    />
+                                </div>
+                                <ProgramSpeedController
+                                    values={this.speedLookUp}
+                                    onChange={this.handleChangeProgramSpeed}
                                 />
                             </div>
-                            <ProgramSpeedController
-                                values={this.speedLookUp}
-                                onChange={this.handleChangeProgramSpeed}
-                            />
-                            <ShareButton/>
+                            <div className='App__shareButton-container'>
+                                <ShareButton/>
+                            </div>
                         </div>
                     </Container>
                 </div>
diff --git a/src/App.scss b/src/App.scss
index 81046636..3d477e5a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -88,15 +88,30 @@ body {
     grid-gap: 1rem;
 }
 
+.App__playAndShare-container {
+    height: 10rem;
+    margin-top: 1rem;
+    background-color: #F1F1F1;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+
+}
+
 .App__playControl-container {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 1rem;
-    background-color: #F1F1F1;
     padding: 0.5rem;
+    grid-column-start: 2;
 }
 
 .App__playButton-container {
     margin-bottom: 1rem;
 }
+
+.App__shareButton-container {
+    display: flex;
+    grid-column-start: 3;
+    grid-column-end: 4;
+    justify-content: flex-end;
+}
diff --git a/src/ShareButton.css b/src/ShareButton.css
index 098ed6a2..95b2a5fd 100644
--- a/src/ShareButton.css
+++ b/src/ShareButton.css
@@ -1,6 +1,5 @@
 .ShareButton {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-end;
-    margin-top: 3rem;
+    margin-top: 1rem;
+    height: 2rem;
+    width: 10rem;
 }
\ No newline at end of file

From 4de7c929a862266736f3dc522bc1e1117736c509 Mon Sep 17 00:00:00 2001
From: Simon Bates <simon@bitstructures.com>
Date: Wed, 11 Nov 2020 17:26:17 -0500
Subject: [PATCH 07/11] C2LC-248: Update ShareButton.test.js

- Use the async form of Jest's test() for the tests which click on the
  Share button, to manage the use of Promises in accessing the clipboard

- Add a callback to ShareButton to receive notification when the modal
  is shown

- Update the test names to use Given, When, Then style

- Add a FakeClipboard class to test interaction with the clipboard
---
 src/ShareButton.js      | 12 +++++++-
 src/ShareButton.test.js | 64 ++++++++++++++++++++++++++++-------------
 2 files changed, 55 insertions(+), 21 deletions(-)

diff --git a/src/ShareButton.js b/src/ShareButton.js
index c7bfe781..c14c9c66 100644
--- a/src/ShareButton.js
+++ b/src/ShareButton.js
@@ -11,7 +11,8 @@ import './ShareButton.css';
 
 type ShareButtonProps = {
     intl: IntlShape,
-    disabled: boolean
+    disabled: boolean,
+    onShowModal?: Function
 };
 
 type ShareButtonState = {
@@ -63,6 +64,15 @@ class ShareButton extends React.Component<ShareButtonProps, ShareButtonState> {
             </React.Fragment>
         );
     }
+
+    componentDidUpdate(prevProps: ShareButtonProps, prevState: ShareButtonState) {
+        if ((this.state.showShareComplete !== prevState.showShareComplete)
+                && this.state.showShareComplete) {
+            if (this.props.onShowModal) {
+                this.props.onShowModal();
+            }
+        }
+    }
 }
 
 export default injectIntl(ShareButton);
diff --git a/src/ShareButton.test.js b/src/ShareButton.test.js
index 51b456e5..26a7f394 100644
--- a/src/ShareButton.test.js
+++ b/src/ShareButton.test.js
@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import ReactDOM from 'react-dom';
+//import ReactDOM from 'react-dom';
 import Adapter from 'enzyme-adapter-react-16';
 import { configure, shallow } from 'enzyme';
 import { createIntl } from 'react-intl';
@@ -10,6 +10,23 @@ import ShareButton from './ShareButton';
 
 configure({ adapter: new Adapter()});
 
+class FakeClipboard {
+    currentClipboardContents: string;
+
+    constructor() {
+        this.currentClipboardContents = '';
+    }
+
+    readText(): Promise<string> {
+        return Promise.resolve(this.currentClipboardContents);
+    }
+
+    writeText(data: string): Promise<void> {
+        this.currentClipboardContents = data;
+        return Promise.resolve();
+    }
+}
+
 const intl = createIntl({
     locale: 'en',
     defaultLocale: 'en',
@@ -34,41 +51,47 @@ function createShareButton(props) {
 }
 
 // TODO: Figure how to do this properly with the required intl infrastructure
+/*
 it('renders without crashing', () => {
     const div = document.createElement('div');
     ReactDOM.render(<ShareButton intl={intl}/>, div);
     ReactDOM.unmountComponentAtNode(div);
 });
+*/
 
-it('hides modal on startup', () => {
+test('The modal should be hidden on startup', () => {
     const wrapper = createShareButton();
-
     const modal = wrapper.children().at(1);
     expect(modal.props().show).toBe(false);
 });
 
-it('displays modal on click', () => {
-    const wrapper = createShareButton();
+test('When the Share button is clicked, then the modal should be displayed', (done) => {
+    expect.assertions(1);
+
+    Object.assign(navigator, {
+        // $FlowFixMe: Flow wants us to mock the full clipboard before we do this.
+        clipboard: new FakeClipboard()
+    });
+
+    const wrapper = createShareButton({
+        // Register a callback to verify that the modal has been shown
+        onShowModal: () => {
+            const modal = wrapper.children().at(1);
+            expect(modal.props().show).toBe(true);
+            done();
+        }
+    });
+
     const button = wrapper.children().at(0);
     button.simulate("click");
-
-    const modal = wrapper.children().at(1);
-    expect(modal.props().show).toBe(true);
 });
 
-it('copies URL to clipboard on click', () => {
-    let currentClipboard = "";
+test('When the Share button is clicked, then the URL should be copied to the clipboard', (done) => {
+    expect.assertions(1);
+
     Object.assign(navigator, {
-        // $FlowFixMe: Flow wants to to mock the full clipboard before we do this.
-        clipboard: {
-            readText: () => {
-                return Promise.resolve(currentClipboard);
-            },
-            writeText: (textToWrite) => {
-                currentClipboard = textToWrite;
-                return Promise.resolve(textToWrite);
-            }
-        }
+        // $FlowFixMe: Flow wants us to mock the full clipboard before we do this.
+        clipboard: new FakeClipboard()
     });
 
     const wrapper = createShareButton();
@@ -77,5 +100,6 @@ it('copies URL to clipboard on click', () => {
 
     navigator.clipboard.readText().then((clipBoardText) => {
         expect(clipBoardText).toBe(document.location.href);
+        done();
     });
 });

From 9ddae379c1a68d242bb91ffc3c8c95efc71a640e Mon Sep 17 00:00:00 2001
From: Tony Atkins <tony@raisingthefloor.org>
Date: Thu, 12 Nov 2020 09:57:50 +0100
Subject: [PATCH 08/11] C2LC-248: Fixed rendering test for ShareButton.

---
 src/ShareButton.test.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/ShareButton.test.js b/src/ShareButton.test.js
index 26a7f394..cb19b393 100644
--- a/src/ShareButton.test.js
+++ b/src/ShareButton.test.js
@@ -1,7 +1,8 @@
 // @flow
 import React from 'react';
-//import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom';
 import Adapter from 'enzyme-adapter-react-16';
+import { IntlProvider } from 'react-intl';
 import { configure, shallow } from 'enzyme';
 import { createIntl } from 'react-intl';
 import messages from './messages.json';
@@ -51,13 +52,16 @@ function createShareButton(props) {
 }
 
 // TODO: Figure how to do this properly with the required intl infrastructure
-/*
-it('renders without crashing', () => {
+test('The component should render without errors.', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<ShareButton intl={intl}/>, div);
+    ReactDOM.render(<IntlProvider
+        locale={intl.locale}
+        messages={intl.messages}
+    >
+        <ShareButton/>
+    </IntlProvider>, div);
     ReactDOM.unmountComponentAtNode(div);
 });
-*/
 
 test('The modal should be hidden on startup', () => {
     const wrapper = createShareButton();

From e3053e5901eee5994026320dbaa56006975f7f3c Mon Sep 17 00:00:00 2001
From: Tony Atkins <tony@raisingthefloor.org>
Date: Thu, 12 Nov 2020 11:16:12 +0100
Subject: [PATCH 09/11] C2LC-248: Fixed layout of share button.

---
 src/App.scss                    | 5 ++++-
 src/ProgramSpeedController.scss | 1 -
 src/ShareButton.css             | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 3d477e5a..19005b51 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -110,8 +110,11 @@ body {
 }
 
 .App__shareButton-container {
+    align-items: flex-end;
     display: flex;
+    flex-direction: column;
     grid-column-start: 3;
     grid-column-end: 4;
-    justify-content: flex-end;
+    justify-content: center;
+    padding-right: 2rem;
 }
diff --git a/src/ProgramSpeedController.scss b/src/ProgramSpeedController.scss
index eaf78016..71692d08 100644
--- a/src/ProgramSpeedController.scss
+++ b/src/ProgramSpeedController.scss
@@ -2,7 +2,6 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin-top: 3rem;
 }
 
 .ProgramSpeedController__slider {
diff --git a/src/ShareButton.css b/src/ShareButton.css
index 95b2a5fd..7f16fdc0 100644
--- a/src/ShareButton.css
+++ b/src/ShareButton.css
@@ -1,5 +1,5 @@
 .ShareButton {
     margin-top: 1rem;
-    height: 2rem;
+    height: 2.25rem;
     width: 10rem;
 }
\ No newline at end of file

From c429e0a93798c702684a2cf25b0d48d8d1060926 Mon Sep 17 00:00:00 2001
From: Tony Atkins <tony@raisingthefloor.org>
Date: Thu, 12 Nov 2020 16:08:07 +0100
Subject: [PATCH 10/11] C2LC-248: Tidied up based on PR feedback.

---
 src/App.scss              | 1 -
 src/ProgramBlockEditor.js | 1 -
 src/ShareButton.css       | 2 --
 src/ShareButton.js        | 6 ------
 src/ShareButton.test.js   | 1 -
 5 files changed, 11 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 19005b51..1d2e477c 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -94,7 +94,6 @@ body {
     background-color: #F1F1F1;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
-
 }
 
 .App__playControl-container {
diff --git a/src/ProgramBlockEditor.js b/src/ProgramBlockEditor.js
index 46814566..6fc7292f 100644
--- a/src/ProgramBlockEditor.js
+++ b/src/ProgramBlockEditor.js
@@ -41,7 +41,6 @@ type ProgramBlockEditorProps = {
 
 type ProgramBlockEditorState = {
     showConfirmDeleteAll: boolean,
-    showShareComplete: boolean,
     focusedActionPanelOptionName: ?string,
     replaceIsActive: boolean
 };
diff --git a/src/ShareButton.css b/src/ShareButton.css
index 7f16fdc0..0f55d6ad 100644
--- a/src/ShareButton.css
+++ b/src/ShareButton.css
@@ -1,5 +1,3 @@
 .ShareButton {
-    margin-top: 1rem;
-    height: 2.25rem;
     width: 10rem;
 }
\ No newline at end of file
diff --git a/src/ShareButton.js b/src/ShareButton.js
index c14c9c66..a64ceff4 100644
--- a/src/ShareButton.js
+++ b/src/ShareButton.js
@@ -11,7 +11,6 @@ import './ShareButton.css';
 
 type ShareButtonProps = {
     intl: IntlShape,
-    disabled: boolean,
     onShowModal?: Function
 };
 
@@ -20,11 +19,6 @@ type ShareButtonState = {
 }
 
 class ShareButton extends React.Component<ShareButtonProps, ShareButtonState> {
-    static defaultProps = {
-        disabled: false,
-        showShareComplete: false
-    }
-
     constructor (props: ShareButtonProps) {
         super(props);
         this.state = {
diff --git a/src/ShareButton.test.js b/src/ShareButton.test.js
index cb19b393..ae521d3d 100644
--- a/src/ShareButton.test.js
+++ b/src/ShareButton.test.js
@@ -51,7 +51,6 @@ function createShareButton(props) {
     return wrapper;
 }
 
-// TODO: Figure how to do this properly with the required intl infrastructure
 test('The component should render without errors.', () => {
     const div = document.createElement('div');
     ReactDOM.render(<IntlProvider

From 2b852778ccf96953cad72d057920bed626313400 Mon Sep 17 00:00:00 2001
From: Tony Atkins <tony@raisingthefloor.org>
Date: Thu, 12 Nov 2020 16:21:24 +0100
Subject: [PATCH 11/11] C2LC-248: Reverted changes to ProgramBlockEditor.

---
 src/ProgramBlockEditor.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/ProgramBlockEditor.js b/src/ProgramBlockEditor.js
index 6fc7292f..d5dde320 100644
--- a/src/ProgramBlockEditor.js
+++ b/src/ProgramBlockEditor.js
@@ -63,7 +63,6 @@ class ProgramBlockEditor extends React.Component<ProgramBlockEditorProps, Progra
         this.programSequenceContainerRef = React.createRef();
         this.state = {
             showConfirmDeleteAll : false,
-            showShareComplete: false,
             focusedActionPanelOptionName: null,
             replaceIsActive: false
         }
@@ -445,7 +444,6 @@ class ProgramBlockEditor extends React.Component<ProgramBlockEditorProps, Progra
                         {contents}
                     </div>
                 </div>
-
                 <ConfirmDeleteAllModal
                     show={this.state.showConfirmDeleteAll}
                     onCancel={this.handleCancelDeleteAll}