Merge pull request #1016 from outoftime/click-outside

Clicking outside menus closes them

Author: outoftime

TEST_PLAN.md

@@ -22,20 +22,46 @@ parts that seem relevant to your code changes.
   the message in the error list focuses the cursor on the location in the
   source.
 * Click the pop-out button. Ensure that a new tab opens with the rendered page.
-* Minimize various editors and the output column by clicking the appropriate
-  label. Maximize them by clicking the button in the left column.
+* Minimize various editors by clicking the appropriate label. Maximize them by
+  clicking the bar at the bottom of the editors column.
+* Click the zoom in button. Ensure that the text in the editors gets bigger.
+  Click it again and ensure that the text returns to normal size.
+
+### Persistence
+
+* Log out if you are logged in.
+* Add some content to the HTML.
+* Refresh the browser tab. Verify that your content is still there.
+* Close the browser tab, then open Popcode in a new tab. Verify that your
+  content is still there.
+* Without closing the current tab, open another Popcode instance in a new tab.
+  Verify that the environment contains a fresh project.
 
 ### Libraries
 
 * Type some JavaScript that requires jQuery. Ensure that an error message
-  appears suggesting you enable jQuery. Enable jQuery and ensure that the page
-  now renders and behaves as expected.
+  appears suggesting you enable jQuery.
+* Enable jQuery and ensure that the page now renders and behaves as expected.
+  The menu should stay visible after you select jQuery.
+
+### Snapshots
+
+* Add some content to the page. Click **Snapshot**. Click the prompt to
+  copy.
+* Paste the URL from your clipboard into a new tab. Verify that the project
+  contains the content that you exported.
 
-### Gist import
+### Gist import & project instructions
 
 * Open [a gist import
   URL](http://localhost:3000/?gist=339c841617fb50c98420d9f37654039d) and ensure
   that the gist is imported into the environment
+* Open [a gist with
+  instructions](http://localhost:3000/?gist=911a82a17a280545858d2d8ecc557ef3).
+  Verify that the instructions appear in the left pane of the environment.
+* Click the dark gray bar to the right of the instructions. Ensure that the
+  instructions are hidden.
+* Click it again. Ensure that the instructions are visible.
 
 ### Login
 

package.json

@@ -131,6 +131,7 @@
     "react-dom": "^15.4.1",
     "react-draggable": "^2.2.6",
     "react-ga": "^2.1.2",
+    "react-onclickoutside": "^6.5.0",
     "react-prevent-clickthrough": "^0.0.3",
     "react-redux": "^5.0.3",
     "reduce-reducers": "^0.1.2",
@@ -178,6 +179,7 @@
     "browser-sync": "^2.14.3",
     "bulkify": "^1.4.2",
     "check-dependencies": "^1.0.1",
+    "circular-dependency-plugin": "^4.2.0",
     "cloudflare": "^2.1.1",
     "cssnano": "^3.10.0",
     "doctoc": "^1.2.0",

src/actions/index.js

@@ -34,6 +34,7 @@ import {
   popOutProject,
   toggleEditorTextSize,
   toggleTopBarMenu,
+  closeTopBarMenu,
 } from './ui';
 
 import {
@@ -77,4 +78,5 @@ export {
   repoExportNotDisplayed,
   toggleEditorTextSize,
   toggleTopBarMenu,
+  closeTopBarMenu,
 };

src/actions/ui.js

@@ -59,3 +59,7 @@ export const toggleEditorTextSize = createAction(
 export const toggleTopBarMenu = createAction(
   'TOGGLE_TOP_BAR_MENU',
 );
+
+export const closeTopBarMenu = createAction(
+  'CLOSE_TOP_BAR_MENU',
+);

src/components/Output.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {ErrorReport, Preview} from '../containers';
+import ErrorReport from '../containers/ErrorReport';
+import Preview from '../containers/Preview';
 
 export default function Output({
-  isDraggingColumnDivider,
+  ignorePointerEvents,
   style,
   onRef,
 }) {
@@ -12,7 +13,7 @@ export default function Output({
       className="environment__column"
       ref={onRef}
       style={Object.assign({}, style, {
-        pointerEvents: isDraggingColumnDivider ? 'none' : 'all',
+        pointerEvents: ignorePointerEvents ? 'none' : 'all',
       })}
     >
       <div className="environment__columnContents output">
@@ -24,7 +25,7 @@ export default function Output({
 }
 
 Output.propTypes = {
-  isDraggingColumnDivider: PropTypes.bool.isRequired,
+  ignorePointerEvents: PropTypes.bool.isRequired,
   style: PropTypes.object.isRequired,
   onRef: PropTypes.func.isRequired,
 };

src/components/ProjectPreview.jsx

@@ -1,26 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import moment from 'moment';
 
 const MAX_LENGTH = 50;
 
-export default function ProjectPreview({
-  isSelected,
-  preview,
-  project,
-  onProjectSelected,
-}) {
+export default function ProjectPreview({preview, project}) {
   return (
-    <div
-      className={classnames(
-        'project-preview',
-        'top-bar__menu-item',
-        {'top-bar__menu-item_active': isSelected},
-      )}
-      key={project.projectKey}
-      onClick={onProjectSelected}
-    >
+    <div>
       <div className="project-preview__label">
         {preview.slice(0, MAX_LENGTH)}
       </div>
@@ -32,8 +18,6 @@ export default function ProjectPreview({
 }
 
 ProjectPreview.propTypes = {
-  isSelected: PropTypes.bool.isRequired,
   preview: PropTypes.string.isRequired,
   project: PropTypes.object.isRequired,
-  onProjectSelected: PropTypes.func.isRequired,
 };

src/components/TopBar/CurrentUser.jsx

@@ -1,39 +1,15 @@
-import classnames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import {t} from 'i18next';
 import CurrentUserMenu from './CurrentUserMenu';
 
 export default function CurrentUser({
-  isOpen,
   user,
-  onClick,
   onLogOut,
   onStartLogIn,
 }) {
   if (user.authenticated) {
-    const name = user.displayName;
-
-    return (
-      <div
-        className={classnames(
-          'top-bar__menu-button',
-          'top-bar__current-user',
-          {'top-bar__menu-button_active': isOpen},
-        )}
-        onClick={onClick}
-      >
-        <img
-          className="top-bar__avatar"
-          src={user.avatarUrl}
-        />
-        <span className="top-bar__username">{name}</span>
-        <span className="top-bar__drop-down-button u__icon">
-          &#xf0d7;
-        </span>
-        <CurrentUserMenu isOpen={isOpen} onLogOut={onLogOut} />
-      </div>
-    );
+    return <CurrentUserMenu user={user} onLogOut={onLogOut} />;
   }
   return (
     <div className="top-bar__current-user">
@@ -48,11 +24,9 @@ export default function CurrentUser({
 }
 
 CurrentUser.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
   user: PropTypes.shape({
     authenticated: PropTypes.boolean,
   }).isRequired,
-  onClick: PropTypes.func.isRequired,
   onLogOut: PropTypes.func.isRequired,
   onStartLogIn: PropTypes.func.isRequired,
 };

src/components/TopBar/CurrentUserButton.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function CurrentUserButton({user: {avatarUrl, displayName}}) {
+  return (
+    <div className="top-bar__current-user">
+      <img
+        className="top-bar__avatar"
+        src={avatarUrl}
+      />
+      <span className="top-bar__username">{displayName}</span>
+      <span className="top-bar__drop-down-button u__icon">
+        &#xf0d7;
+      </span>
+    </div>
+  );
+}
+
+CurrentUserButton.propTypes = {
+  user: PropTypes.shape({
+    avatarUrl: PropTypes.string.isRequired,
+    displayName: PropTypes.string.isRequired,
+  }).isRequired,
+};

src/components/TopBar/CurrentUserMenu.jsx

@@ -1,22 +1,24 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import {t} from 'i18next';
+import createMenu, {MenuItem} from './createMenu';
+import CurrentUserButton from './CurrentUserButton';
 
-export default function CurrentUserMenu({isOpen, onLogOut}) {
-  if (!isOpen) {
-    return null;
-  }
+const CurrentUserMenu = createMenu({
+  name: 'currentUser',
 
-  return (
-    <div className="top-bar__menu">
-      <div className="top-bar__menu-item" onClick={onLogOut}>
+  // eslint-disable-next-line react/prop-types
+  renderItems({onLogOut}) {
+    return (
+      <MenuItem onClick={onLogOut}>
         {t('top-bar.session.log-out-prompt')}
-      </div>
-    </div>
-  );
-}
+      </MenuItem>
+    );
+  },
+})(CurrentUserButton);
 
 CurrentUserMenu.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
   onLogOut: PropTypes.func.isRequired,
 };
+
+export default CurrentUserMenu;