Open 'My Sandboxes' by default if there are no folders

Author: CompuIves

packages/app/src/app/components/ContextMenu/index.js

@@ -102,7 +102,14 @@ class ContextMenu extends React.PureComponent {
       return null;
     }
 
-    const { children, childFunction, items, ...props } = this.props;
+    // remove isDraggingItem from the list of props as it's generating warnings.
+    const {
+      children,
+      childFunction,
+      items,
+      isDraggingItem,
+      ...props
+    } = this.props;
     const { show, x, y, down, left } = this.state;
 
     const mapFunction = (item, i) => {

packages/app/src/app/pages/Dashboard/Sidebar/Item/index.js

@@ -23,14 +23,20 @@ const getContainer = contextItems => {
 
 export default class Item extends React.Component {
   state = {
-    open: undefined,
+    open: this.props.openByDefault,
   };
 
   toggleOpen = e => {
     e.preventDefault();
     this.setState(state => ({ open: !state.open }));
   };
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.openByDefault === true && !this.props.openByDefault) {
+      this.setState({ open: true });
+    }
+  }
+
   render() {
     const { name, contextItems, Icon, path, children, style } = this.props;
 

packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/index.js

@@ -26,7 +26,13 @@ class SandboxesItem extends React.Component {
   };
 
   render() {
-    const { isOver, canDrop, teamId, connectDropTarget } = this.props;
+    const {
+      isOver,
+      canDrop,
+      teamId,
+      connectDropTarget,
+      openByDefault,
+    } = this.props;
 
     const basePath = teamId
       ? `/dashboard/teams/${teamId}/sandboxes`
@@ -35,6 +41,7 @@ class SandboxesItem extends React.Component {
     return connectDropTarget(
       <div>
         <Item
+          openByDefault={openByDefault}
           path={basePath}
           Icon={InfoIcon}
           name={teamId ? 'Our Sandboxes' : 'My Sandboxes'}

packages/app/src/app/pages/Dashboard/Sidebar/index.js

@@ -13,7 +13,7 @@ import Item from './Item';
 import SandboxesItem from './SandboxesItem';
 import TrashItem from './TrashItem';
 import { Items, CategoryHeader, SidebarStyled, InputWrapper } from './elements';
-import { TEAMS_QUERY } from '../queries';
+import { TEAMS_QUERY, PATHED_SANDBOXES_FOLDER_QUERY } from '../queries';
 
 class Sidebar extends React.Component {
   shouldComponentUpdate() {
@@ -47,7 +47,18 @@ class Sidebar extends React.Component {
 
         <Items style={{ marginBottom: '1rem' }}>
           <Item Icon={TimeIcon} path="/dashboard/recent" name="Recent" />
-          <SandboxesItem />
+          <Query
+            variables={{ teamId: undefined }}
+            query={PATHED_SANDBOXES_FOLDER_QUERY}
+          >
+            {({ data }) => {
+              // We open this by default if there are no folders yet, to let the user know
+              // that they can create folders.
+              const openByDefault =
+                data && data.me && data.me.collections.length === 1;
+              return <SandboxesItem openByDefault={openByDefault} />;
+            }}
+          </Query>
           <TrashItem />
         </Items>