Add timeout configuration in settings

9 files changed, 448 insertions, 4 deletions

diff --git a/app/features/conference/components/Conference.js b/app/features/conference/components/Conference.js
index 0b8b798..6e39cad 100644
--- a/app/features/conference/components/Conference.js
+++ b/app/features/conference/components/Conference.js
@@ -52,6 +52,11 @@ type Props = {
     _serverURL: string;
 
     /**
+     * Default Jitsi Server Timeout.
+     */
+    _serverTimeout: number;
+
+    /**
      * Start with Audio Muted.
      */
     _startWithAudioMuted: boolean;
@@ -120,6 +125,7 @@ class Conference extends Component<Props, State> {
     componentDidMount() {
         const parentNode = this._ref.current;
         const room = this.props.location.state.room;
+        const serverTimeout = this.props._serverTimeout || config.defaultServerTimeout;
         const serverURL = this.props.location.state.serverURL
             || this.props._serverURL
             || config.defaultServerURL;
@@ -139,7 +145,7 @@ class Conference extends Component<Props, State> {
 
         this._ref.current.appendChild(script);
 
-        // Set a timer for 10s, if we haven't loaded the iframe by then,
+        // Set a timer for a timeout duration, if we haven't loaded the iframe by then,
         // give up.
         this._loadTimer = setTimeout(() => {
             this._navigateToHome(
@@ -151,7 +157,7 @@ class Conference extends Component<Props, State> {
                 },
                 room,
                 serverURL);
-        }, 10000);
+        }, serverTimeout * 1000);
     }
 
     /**
@@ -421,6 +427,7 @@ function _mapStateToProps(state: Object) {
         _email: state.settings.email,
         _name: state.settings.name,
         _serverURL: state.settings.serverURL,
+        _serverTimeout: state.settings.serverTimeout,
         _startWithAudioMuted: state.settings.startWithAudioMuted,
         _startWithVideoMuted: state.settings.startWithVideoMuted
     };
diff --git a/app/features/config/index.js b/app/features/config/index.js
index 64350be..dde9fb3 100644
--- a/app/features/config/index.js
+++ b/app/features/config/index.js
@@ -21,6 +21,11 @@ export default {
     defaultServerURL: 'https://meet.jit.si',
 
     /**
+     * The default server Timeout in seconds.
+     */
+    defaultServerTimeout: 10,
+
+    /**
      * URL to send feedback.
      */
     feedbackURL: 'mailto:support@jitsi.org',
diff --git a/app/features/settings/actionTypes.js b/app/features/settings/actionTypes.js
index 9140940..0c8075f 100644
--- a/app/features/settings/actionTypes.js
+++ b/app/features/settings/actionTypes.js
@@ -60,6 +60,16 @@ export const SET_NAME = Symbol('SET_NAME');
 export const SET_SERVER_URL = Symbol('SET_SERVER_URL');
 
 /**
+ * The type of (redux) action that sets the Server Timeout.
+ *
+ * @type {
+ *     type: SET_SERVER_TIMEOUT,
+ *     serverTimeout: number
+ * }
+ */
+export const SET_SERVER_TIMEOUT = Symbol('SET_SERVER_TIMEOUT');
+
+/**
  * The type of (redux) action that sets Start with Video Muted.
  *
  * @type {
diff --git a/app/features/settings/actions.js b/app/features/settings/actions.js
index a8a481f..7e3c054 100644
--- a/app/features/settings/actions.js
+++ b/app/features/settings/actions.js
@@ -7,6 +7,7 @@ import {
     SET_EMAIL,
     SET_NAME,
     SET_SERVER_URL,
+    SET_SERVER_TIMEOUT,
     SET_VIDEO_MUTED
 } from './actionTypes';
 
@@ -77,6 +78,22 @@ export function setServerURL(serverURL: string) {
 }
 
 /**
+ * Set Server Timeout.
+ *
+ * @param {string} serverTimeout - Server Timeout.
+ * @returns {{
+ *     type: SET_SERVER_TIMEOUT,
+ *     serverTimeout: ?number
+ * }}
+ */
+export function setServerTimeout(serverTimeout: number) {
+    return {
+        type: SET_SERVER_TIMEOUT,
+        serverTimeout
+    };
+}
+
+/**
  * Set start with audio muted.
  *
  * @param {boolean} startWithAudioMuted - Whether to start with audio muted.
diff --git a/app/features/settings/components/ServerTimeoutField.js b/app/features/settings/components/ServerTimeoutField.js
new file mode 100644
index 0000000..41c2434
--- /dev/null
+++ b/app/features/settings/components/ServerTimeoutField.js
@@ -0,0 +1,140 @@
+// @flow
+
+import { FieldTextStateless } from '@atlaskit/field-text';
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import type { Dispatch } from 'redux';
+
+import config from '../../config';
+
+import { setServerTimeout } from '../actions';
+
+type Props = {
+
+    /**
+     * Redux dispatch.
+     */
+    dispatch: Dispatch<*>;
+
+    /**
+     * Default Jitsi Meet Server Timeout in (redux) store.
+     */
+    _serverTimeout: number;
+};
+
+type State = {
+
+     /**
+     * Whether the timeout of the Jitsi Meet Server valid.
+     */
+    isValid: boolean;
+
+    /**
+     * Default Jitsi Meet Server Timeout in (local) state.
+     */
+    serverTimeout: number;
+};
+
+/**
+ * Default Server URL field text placed in the Settings drawer.
+ */
+class ServerTimeoutField extends Component<Props, State> {
+    /**
+     * Initializes a new {@code ServerTimeoutField} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isValid: true,
+            serverTimeout: props._serverTimeout
+        };
+
+        this._onServerTimeoutChange = this._onServerTimeoutChange.bind(this);
+        this._onServerTimeoutSubmit = this._onServerTimeoutSubmit.bind(this);
+    }
+
+    /**
+     * Render function of component.
+     *
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <form onSubmit = { this._onServerTimeoutSubmit }>
+                <FieldTextStateless
+                    invalidMessage
+                        = { 'Invalid Timeout' }
+                    isInvalid = { !this.state.isValid }
+                    isValidationHidden = { this.state.isValid }
+                    label = 'Server Timeout (in seconds)'
+                    onBlur = { this._onServerTimeoutSubmit }
+                    onChange = { this._onServerTimeoutChange }
+                    placeholder = { config.defaultServerTimeout }
+                    shouldFitContainer = { true }
+                    type = 'number'
+                    value = { this.state.serverTimeout } />
+            </form>
+        );
+    }
+
+    _onServerTimeoutChange: (*) => void;
+
+    /**
+     * Updates Server Timeout in (redux) state when it is updated.
+     *
+     * @param {SyntheticInputEvent<HTMLInputElement>} event - Event by which
+     * this function is called.
+     * @returns {void}
+     */
+    _onServerTimeoutChange(event: SyntheticInputEvent<HTMLInputElement>) {
+        this.setState({
+            serverTimeout: Number.parseInt(event.currentTarget.value, 10)
+        }, this._validateServerTimeout);
+    }
+
+    _onServerTimeoutSubmit: (*) => void;
+
+    /**
+     * Updates Server Timeout in (redux) store when it is updated.
+     *
+     * @param {Event} event - Event by which this function is called.
+     * @returns {void}
+     */
+    _onServerTimeoutSubmit(event: Event) {
+        event.preventDefault();
+        if (this.state.isValid) {
+            this.props.dispatch(setServerTimeout(this.state.serverTimeout));
+        }
+    }
+
+    /**
+     * Validates timeout is a valid Number.
+     *
+     * @returns {void}
+     */
+    _validateServerTimeout() {
+        this.setState({
+            isValid: Math.sign(this.state.serverTimeout) === 1
+        });
+    }
+}
+
+/**
+ * Maps (parts of) the redux store to the React props.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {{
+ *     _serverURL: string
+ * }}
+ */
+function _mapStateToProps(state: Object) {
+    return {
+        _serverTimeout: state.settings.serverTimeout
+    };
+}
+
+export default connect(_mapStateToProps)(ServerTimeoutField);
diff --git a/app/features/settings/components/SettingsDrawer.js b/app/features/settings/components/SettingsDrawer.js
index 3d800e4..bba6cb8 100644
--- a/app/features/settings/components/SettingsDrawer.js
+++ b/app/features/settings/components/SettingsDrawer.js
@@ -5,6 +5,7 @@ import FieldText from '@atlaskit/field-text';
 import ArrowLeft from '@atlaskit/icon/glyph/arrow-left';
 import { AkCustomDrawer } from '@atlaskit/navigation';
 import { SpotlightTarget } from '@atlaskit/onboarding';
+import Panel from '@atlaskit/panel';
 
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
@@ -17,6 +18,7 @@ import { setEmail, setName } from '../actions';
 
 import AlwaysOnTopWindowToggle from './AlwaysOnTopWindowToggle';
 import ServerURLField from './ServerURLField';
+import ServerTimeoutField from './ServerTimeoutField';
 import StartMutedToggles from './StartMutedToggles';
 
 type Props = {
@@ -140,6 +142,9 @@ class SettingsDrawer extends Component<Props, *> {
                                 <AlwaysOnTopWindowToggle />
                             </SpotlightTarget>
                         </TogglesContainer>
+                        <Panel header = 'Advanced Settings'>
+                            <ServerTimeoutField />
+                        </Panel>
                         <Onboarding section = 'settings-drawer' />
                     </SettingsContainer>
                 </DrawerContainer>
diff --git a/app/features/settings/reducer.js b/app/features/settings/reducer.js
index 3d69e9a..bed9a11 100644
--- a/app/features/settings/reducer.js
+++ b/app/features/settings/reducer.js
@@ -9,6 +9,7 @@ import {
     SET_EMAIL,
     SET_NAME,
     SET_SERVER_URL,
+    SET_SERVER_TIMEOUT,
     SET_VIDEO_MUTED
 } from './actionTypes';
 
@@ -17,6 +18,7 @@ type State = {
     email: string,
     name: string,
     serverURL: ?string,
+    serverTimeout: ?number,
     startWithAudioMuted: boolean,
     startWithVideoMuted: boolean,
     alwaysOnTopWindowEnabled: boolean,
@@ -30,6 +32,7 @@ const DEFAULT_STATE = {
     email: '',
     name: username,
     serverURL: undefined,
+    serverTimeout: undefined,
     startWithAudioMuted: false,
     startWithVideoMuted: false
 };
@@ -79,6 +82,12 @@ export default (state: State = DEFAULT_STATE, action: Object) => {
             serverURL: action.serverURL
         };
 
+    case SET_SERVER_TIMEOUT:
+        return {
+            ...state,
+            serverTimeout: action.serverTimeout
+        };
+
     case SET_VIDEO_MUTED:
         return {
             ...state,
diff --git a/package-lock.json b/package-lock.json
index ac46586..c65f335 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -597,6 +597,79 @@
         "@babel/runtime": "^7.0.0"
       }
     },
+    "@atlaskit/panel": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@atlaskit/panel/-/panel-0.3.5.tgz",
+      "integrity": "sha512-yNqI+2FessLZuPri+0Kgbck/nQl8F+k2cFPbkfyIedvazw3lItMyF0oG7JNM6sg9dRo147hKMvggpdVPbDDXhg==",
+      "requires": {
+        "@atlaskit/button": "^13.3.10",
+        "@atlaskit/icon": "^20.0.1",
+        "@atlaskit/theme": "^9.5.3",
+        "react-animate-height": "^2.0.5",
+        "react-focus-within": "^2.0.1",
+        "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "@atlaskit/analytics-next": {
+          "version": "6.3.6",
+          "resolved": "https://registry.npmjs.org/@atlaskit/analytics-next/-/analytics-next-6.3.6.tgz",
+          "integrity": "sha512-LeByMgFN19rU8Awl+OG+9iERwxv2bg/nPLYV6anvPkL4H9IGgDu9+hLgJZ2muCQXN5AfamNMcxtU4LPGcDKRdQ==",
+          "requires": {
+            "prop-types": "^15.5.10",
+            "tslib": "^1.9.3",
+            "use-memo-one": "^1.1.1"
+          }
+        },
+        "@atlaskit/button": {
+          "version": "13.3.12",
+          "resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-13.3.12.tgz",
+          "integrity": "sha512-kKvX99fxpuPPGBdk6v/saynNC7sTnpcMLDOWxd7fE1gFPsT29IH4rsNxGO3EhA8aOb/HbwflVvLxeS5MxKTUFg==",
+          "requires": {
+            "@atlaskit/analytics-next": "^6.3.6",
+            "@atlaskit/spinner": "^12.1.7",
+            "@atlaskit/theme": "^9.5.3",
+            "@emotion/core": "^10.0.9",
+            "memoize-one": "^5.1.0",
+            "tslib": "^1.9.3"
+          }
+        },
+        "@atlaskit/icon": {
+          "version": "20.1.2",
+          "resolved": "https://registry.npmjs.org/@atlaskit/icon/-/icon-20.1.2.tgz",
+          "integrity": "sha512-cDpE6kfiCxv4VNY4LKtRUPAdXTcx4t2eEU1K5Htm/5i6/rmJMHMITIvpZaRqF2R7XdBH5kE2MLxSfexBHC0DjQ==",
+          "requires": {
+            "@atlaskit/theme": "^9.5.1",
+            "tslib": "^1.9.3",
+            "uuid": "^3.1.0"
+          }
+        },
+        "@atlaskit/spinner": {
+          "version": "12.1.7",
+          "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-12.1.7.tgz",
+          "integrity": "sha512-fGnD6fcBW13RiS1DzGTvrm+M5Ld9Jhlw+Tx3PMs9naFpZvpTqoI5oVyTz+VDoyXhdQGKJAcfk0SntyONFZmDBg==",
+          "requires": {
+            "@atlaskit/theme": "^9.5.1",
+            "react-transition-group": "^2.2.1",
+            "tslib": "^1.9.3"
+          }
+        },
+        "@atlaskit/theme": {
+          "version": "9.5.3",
+          "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-9.5.3.tgz",
+          "integrity": "sha512-GA8zpyDZHO81vPcSJbObQuRt3ajQxOHY+Qz6Zi1yIepr4Y6xz/fXIiFzamP/VJB/TvHQEhyNE0yeQIYVHGuhyg==",
+          "requires": {
+            "exenv": "^1.2.2",
+            "prop-types": "^15.5.10",
+            "tslib": "^1.9.3"
+          }
+        },
+        "memoize-one": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
+          "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
+        }
+      }
+    },
     "@atlaskit/polyfills": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@atlaskit/polyfills/-/polyfills-3.0.5.tgz",
@@ -3091,6 +3164,137 @@
         }
       }
     },
+    "@emotion/cache": {
+      "version": "10.0.29",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
+      "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
+      "requires": {
+        "@emotion/sheet": "0.9.4",
+        "@emotion/stylis": "0.8.5",
+        "@emotion/utils": "0.11.3",
+        "@emotion/weak-memoize": "0.2.5"
+      },
+      "dependencies": {
+        "@emotion/stylis": {
+          "version": "0.8.5",
+          "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+          "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+        },
+        "@emotion/utils": {
+          "version": "0.11.3",
+          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
+          "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
+        }
+      }
+    },
+    "@emotion/core": {
+      "version": "10.0.28",
+      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.28.tgz",
+      "integrity": "sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@emotion/cache": "^10.0.27",
+        "@emotion/css": "^10.0.27",
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/sheet": "0.9.4",
+        "@emotion/utils": "0.11.3"
+      },
+      "dependencies": {
+        "@emotion/hash": {
+          "version": "0.8.0",
+          "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+          "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+        },
+        "@emotion/memoize": {
+          "version": "0.7.4",
+          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+          "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+        },
+        "@emotion/serialize": {
+          "version": "0.11.16",
+          "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
+          "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
+          "requires": {
+            "@emotion/hash": "0.8.0",
+            "@emotion/memoize": "0.7.4",
+            "@emotion/unitless": "0.7.5",
+            "@emotion/utils": "0.11.3",
+            "csstype": "^2.5.7"
+          }
+        },
+        "@emotion/unitless": {
+          "version": "0.7.5",
+          "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+          "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+        },
+        "@emotion/utils": {
+          "version": "0.11.3",
+          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
+          "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
+        }
+      }
+    },
+    "@emotion/css": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
+      "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
+      "requires": {
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/utils": "0.11.3",
+        "babel-plugin-emotion": "^10.0.27"
+      },
+      "dependencies": {
+        "@emotion/hash": {
+          "version": "0.8.0",
+          "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+          "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+        },
+        "@emotion/memoize": {
+          "version": "0.7.4",
+          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+          "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+        },
+        "@emotion/serialize": {
+          "version": "0.11.16",
+          "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
+          "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
+          "requires": {
+            "@emotion/hash": "0.8.0",
+            "@emotion/memoize": "0.7.4",
+            "@emotion/unitless": "0.7.5",
+            "@emotion/utils": "0.11.3",
+            "csstype": "^2.5.7"
+          }
+        },
+        "@emotion/unitless": {
+          "version": "0.7.5",
+          "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+          "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+        },
+        "@emotion/utils": {
+          "version": "0.11.3",
+          "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
+          "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
+        },
+        "babel-plugin-emotion": {
+          "version": "10.0.33",
+          "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz",
+          "integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==",
+          "requires": {
+            "@babel/helper-module-imports": "^7.0.0",
+            "@emotion/hash": "0.8.0",
+            "@emotion/memoize": "0.7.4",
+            "@emotion/serialize": "^0.11.16",
+            "babel-plugin-macros": "^2.0.0",
+            "babel-plugin-syntax-jsx": "^6.18.0",
+            "convert-source-map": "^1.5.0",
+            "escape-string-regexp": "^1.0.5",
+            "find-root": "^1.1.0",
+            "source-map": "^0.5.7"
+          }
+        }
+      }
+    },
     "@emotion/hash": {
       "version": "0.6.6",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.6.6.tgz",
@@ -3112,6 +3316,11 @@
         "@emotion/utils": "^0.8.2"
       }
     },
+    "@emotion/sheet": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
+      "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
+    },
     "@emotion/stylis": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.7.1.tgz",
@@ -3127,6 +3336,11 @@
       "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.8.2.tgz",
       "integrity": "sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw=="
     },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "@sindresorhus/is": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
@@ -3180,6 +3394,20 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-12.12.24.tgz",
       "integrity": "sha512-1Ciqv9pqwVtW6FsIUKSZNB82E5Cu1I2bBTj1xuIHXLe/1zYLl3956Nbhg2MzSYHVfl9/rmanjbQIb7LibfCnug=="
     },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
+    },
+    "@types/react": {
+      "version": "16.9.35",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.35.tgz",
+      "integrity": "sha512-q0n0SsWcGc8nDqH2GJfWQWUOmZSJhXV64CjVN5SvcNti3TdEaA3AH0D8DwNmMdzjMAC/78tB8nAZIlV8yTz+zQ==",
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^2.2.0"
+      }
+    },
     "@types/semver": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.1.0.tgz",
@@ -6214,8 +6442,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "eslint": {
       "version": "6.5.1",
@@ -10111,6 +10338,15 @@
       "resolved": "https://registry.npmjs.org/react-addons-text-content/-/react-addons-text-content-0.0.4.tgz",
       "integrity": "sha1-0uJZ/clR0diQbAiQIAIQjc6HkuU="
     },
+    "react-animate-height": {
+      "version": "2.0.21",
+      "resolved": "https://registry.npmjs.org/react-animate-height/-/react-animate-height-2.0.21.tgz",
+      "integrity": "sha512-CZHdjMD8qqp10tYtWmauWYASXxxv9vYeljxFGFtbcrbNXhsUv0w3IjxVK+0yCnyfk7769WfMZKHra4vRcbMnQg==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.6.1"
+      }
+    },
     "react-clientside-effect": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz",
@@ -10141,6 +10377,15 @@
         "react-clientside-effect": "^1.2.0"
       }
     },
+    "react-focus-within": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/react-focus-within/-/react-focus-within-2.0.1.tgz",
+      "integrity": "sha512-lsP9+UW/9iSoqAqZ34wARnypP2izt3BjQ14+5+VpfvTnsNet1wFn071GtJYMmUR0pT6Pa59WnW+HhSguFGXVQg==",
+      "requires": {
+        "@types/react": "^15.0.0 || ^16.0.0",
+        "prop-types": "^15.6.1"
+      }
+    },
     "react-is": {
       "version": "16.10.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.2.tgz",
@@ -12104,6 +12349,11 @@
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
       "dev": true
     },
+    "use-memo-one": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.1.tgz",
+      "integrity": "sha512-oFfsyun+bP7RX8X2AskHNTxu+R3QdE/RC5IefMbqptmACAA/gfol1KDD5KRzPsGMa62sWxGZw+Ui43u6x4ddoQ=="
+    },
     "utf8-byte-length": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz",
diff --git a/package.json b/package.json
index 36593e5..e4f47ee 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
     "@atlaskit/navigation": "33.3.8",
     "@atlaskit/onboarding": "6.1.14",
     "@atlaskit/page": "8.0.12",
+    "@atlaskit/panel": "0.3.5",
     "@atlaskit/spinner": "9.0.13",
     "@atlaskit/theme": "7.0.1",
     "@atlaskit/toggle": "5.0.14",