Merge pull request #2175 from paulkaplan/backpack-step-2

Toggle backpack when backpack host param is available

src/components/asset-panel/asset-panel.css

@@ -16,4 +16,5 @@
     flex-grow: 1;
     flex-shrink: 1;
     border-left: 1px solid $ui-black-transparent;
+    overflow-y: auto;
 }

src/components/backpack/backpack.css

@@ -17,4 +17,21 @@
     color: $text-primary;
     transition: 0.2s;
     cursor: pointer;
+    user-select: none;
+}
+
+.backpack-list {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-right: 1px solid $ui-black-transparent;
+    min-height: 6rem;
+}
+
+.empty-message {
+    width: 100%;
+    text-align: center;
+    font-size: 0.85rem;
+    color: $text-primary;
 }

src/components/backpack/backpack.jsx

 import React from 'react';
+import PropTypes from 'prop-types';
 import {FormattedMessage} from 'react-intl';
 import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
+
 import styles from './backpack.css';
 
-const Backpack = () => (
+const Backpack = ({expanded, onToggle}) => (
     <div className={styles.backpackContainer}>
-        <div className={styles.backpackHeader}>
-            <ComingSoonTooltip place="top">
+        <div
+            className={styles.backpackHeader}
+            onClick={onToggle}
+        >
+            {onToggle ? (
                 <FormattedMessage
                     defaultMessage="Backpack"
                     description="Button to open the backpack"
                     id="gui.backpack.header"
                 />
-            </ComingSoonTooltip>
+            ) : (
+                <ComingSoonTooltip
+                    place="top"
+                    tooltipId="backpack-tooltip"
+                >
+                    <FormattedMessage
+                        defaultMessage="Backpack"
+                        description="Button to open the backpack"
+                        id="gui.backpack.header"
+                    />
+                </ComingSoonTooltip>
+            )}
         </div>
+        {expanded ? (
+            <div className={styles.backpackList}>
+                <div className={styles.emptyMessage}>
+                    <FormattedMessage
+                        defaultMessage="Backpack is empty"
+                        description="Empty backpack message"
+                        id="gui.backpack.emptyBackpack"
+                    />
+                </div>
+            </div>
+        ) : null}
     </div>
 );
 
+Backpack.propTypes = {
+    expanded: PropTypes.bool,
+    onToggle: PropTypes.func
+};
+
+Backpack.defaultProps = {
+    expanded: false,
+    onToggle: null
+};
+
 export default Backpack;

src/components/gui/gui.css

@@ -132,7 +132,6 @@
 .tabs {
     position: relative;
     flex-grow: 1;
-    flex-shrink: 0;
     display: flex;
     flex-direction: column;
 }
@@ -140,7 +139,6 @@
 .tab-panel {
     position: relative;
     flex-grow: 1;
-    flex-shrink: 0;
     display: none;
 }
 

src/components/gui/gui.jsx

@@ -15,8 +15,8 @@ import StageWrapper from '../../containers/stage-wrapper.jsx';
 import Loader from '../loader/loader.jsx';
 import Box from '../box/box.jsx';
 import MenuBar from '../menu-bar/menu-bar.jsx';
-import Backpack from '../backpack/backpack.jsx';
 
+import Backpack from '../../containers/backpack.jsx';
 import PreviewModal from '../../containers/preview-modal.jsx';
 import ImportModal from '../../containers/import-modal.jsx';
 import WebGlModal from '../../containers/webgl-modal.jsx';
@@ -46,7 +46,7 @@ const GUIComponent = props => {
     const {
         activeTabIndex,
         basePath,
-        backpackVisible,
+        backpackOptions,
         blocksTabVisible,
         cardsVisible,
         children,
@@ -205,8 +205,8 @@ const GUIComponent = props => {
                                 {soundsTabVisible ? <SoundTab vm={vm} /> : null}
                             </TabPanel>
                         </Tabs>
-                        {backpackVisible ? (
-                            <Backpack />
+                        {backpackOptions.visible ? (
+                            <Backpack host={backpackOptions.host} />
                         ) : null}
                     </Box>
 
@@ -227,7 +227,10 @@ const GUIComponent = props => {
 };
 GUIComponent.propTypes = {
     activeTabIndex: PropTypes.number,
-    backpackVisible: PropTypes.null,
+    backpackOptions: PropTypes.shape({
+        host: PropTypes.string,
+        visible: PropTypes.bool
+    }),
     basePath: PropTypes.string,
     blocksTabVisible: PropTypes.bool,
     cardsVisible: PropTypes.bool,
@@ -250,7 +253,10 @@ GUIComponent.propTypes = {
     vm: PropTypes.instanceOf(VM).isRequired
 };
 GUIComponent.defaultProps = {
-    backpackVisible: false,
+    backpackOptions: {
+        host: null,
+        visible: false
+    },
     basePath: './'
 };
 export default injectIntl(GUIComponent);

src/containers/backpack.jsx

+import React from 'react';
+import PropTypes from 'prop-types';
+import bindAll from 'lodash.bindall';
+import BackpackComponent from '../components/backpack/backpack.jsx';
+
+class Backpack extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleToggle'
+        ]);
+        this.state = {
+            expanded: false,
+            contents: []
+        };
+    }
+    handleToggle () {
+        this.setState({expanded: !this.state.expanded});
+    }
+    render () {
+        return (
+            <BackpackComponent
+                contents={this.state.contents}
+                expanded={this.state.expanded}
+                onToggle={this.props.host ? this.handleToggle : null}
+            />
+        );
+    }
+}
+
+Backpack.propTypes = {
+    host: PropTypes.string
+};
+
+export default Backpack;

src/playground/index.jsx

@@ -24,4 +24,13 @@ document.body.appendChild(appTarget);
 GUI.setAppElement(appTarget);
 const WrappedGui = HashParserHOC(AppStateHOC(GUI));
 
-ReactDOM.render(<WrappedGui backpackVisible />, appTarget);
+// TODO a hack for testing the backpack, allow backpack host to be set by url param
+const backpackHostMatches = window.location.href.match(/[?&]backpack_host=(.*)&?/);
+const backpackHost = backpackHostMatches ? backpackHostMatches[1] : null;
+
+const backpackOptions = {
+    visible: true,
+    host: backpackHost
+};
+
+ReactDOM.render(<WrappedGui backpackOptions={backpackOptions} />, appTarget);

test/integration/backpack.test.js

+import path from 'path';
+import SeleniumHelper from '../helpers/selenium-helper';
+
+const {
+    clickText,
+    clickXpath,
+    getDriver,
+    getLogs,
+    loadUri
+} = new SeleniumHelper();
+
+const uri = path.resolve(__dirname, '../../build/index.html');
+
+let driver;
+
+describe('Working with the how-to library', () => {
+    beforeAll(() => {
+        driver = getDriver();
+    });
+
+    afterAll(async () => {
+        await driver.quit();
+    });
+
+    test('Backpack is "Coming Soon" without backpack host param', async () => {
+        await loadUri(uri);
+        await clickXpath('//button[@title="tryit"]');
+        // Check that the backpack header is visible and wrapped in a coming soon tooltip
+        await clickText('Backpack', '*[@data-for="backpack-tooltip"]');
+        const logs = await getLogs();
+        await expect(logs).toEqual([]);
+    });
+
+    test('Backpack can be expanded with backpack host param', async () => {
+        await loadUri(`${uri}?backpack_host=some-value`);
+        await clickXpath('//button[@title="tryit"]');
+
+        // Try activating the backpack from the costumes tab to make sure it isn't pushed off
+        await clickText('Costumes');
+
+        // Check that the backpack header is visible and wrapped in a coming soon tooltip
+        await clickText('Backpack'); // Not wrapped in tooltip
+        await clickText('Backpack is empty'); // Make sure it can expand, is empty
+        const logs = await getLogs();
+        await expect(logs).toEqual([]);
+    });
+});