Add shortcut for creating sandboxes

Author: Ives van Hoorne

packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/elements.js

@@ -1,35 +1,59 @@
 import styled, { css } from 'styled-components';
+import { Link } from 'react-router-dom';
 import { animated } from 'react-spring';
 
+export const ButtonsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 1.75rem);
+  box-sizing: border-box;
+`;
+
 export const Container = styled.div`
   transition: 0.3s ease background-color;
-
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 300;
-  color: rgba(255, 255, 255, 0.6);
+  font-weight: 600;
+  color: rgba(255, 255, 255, 1);
   font-size: 1.125rem;
   border-radius: 4px;
   width: calc(100% - 2rem);
-  height: calc(100% - 2rem);
-  border: 2px solid ${props => props.theme.secondary.clearer(0.2)};
-  background-color: ${props => props.theme.secondary.clearer(0.9)};
+  height: 100%;
+  border: 2px solid
+    ${props => (props.color || props.theme.secondary).clearer(0.2)};
+  background-color: ${props =>
+    (props.color || props.theme.secondary).clearer(0.9)};
   border-style: dashed;
   overflow: hidden;
   outline: none;
 
   cursor: pointer;
   user-select: none;
+  text-decoration: none;
 
   ${props => props.hide && 'opacity: 0'};
 
+  &:first-child {
+    border-bottom: 0;
+  }
+
+  &:last-child {
+    border-bottom: 2px solid
+      ${props => (props.color || props.theme.secondary).clearer(0.2)};
+    border-style: dashed;
+  }
+
   &:hover,
   &:focus {
-    background-color: ${props => props.theme.secondary.clearer(0.8)};
+    background-color: ${props =>
+      (props.color || props.theme.secondary).clearer(0.8)};
   }
 `;
 
+export const ContainerLink = Container.withComponent(Link);
+
 export const AnimatedModalContainer = styled(animated.div)`
   ${props =>
     props.forking &&

packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/index.js

@@ -2,10 +2,18 @@ import React from 'react';
 import { Spring } from 'react-spring';
 import { inject } from 'mobx-react';
 import { ThemeProvider } from 'styled-components';
+import history from 'app/utils/history';
 
 import theme from 'common/theme';
+import { sandboxUrl } from 'common/utils/url-generator';
 import Portal from 'app/components/Portal';
-import { Container, AnimatedModalContainer } from './elements';
+
+import {
+  ButtonsContainer,
+  Container,
+  AnimatedModalContainer,
+  ContainerLink,
+} from './elements';
 
 import Modal from './Modal';
 
@@ -27,6 +35,11 @@ class CreateNewSandbox extends React.PureComponent {
   }
 
   createSandbox = template => {
+    if (!this.props.collectionId) {
+      history.push(sandboxUrl({ id: template.shortid }));
+      return;
+    }
+
     this.setState({ forking: true }, () => {
       this.props.signals.dashboard.createSandboxClicked({
         sandboxId: template.shortid,
@@ -64,7 +77,7 @@ class CreateNewSandbox extends React.PureComponent {
   };
 
   render() {
-    const { style } = this.props;
+    const { style, collectionId, mostUsedSandboxTemplate } = this.props;
 
     const fromRects = this.ref ? this.ref.getBoundingClientRect() : {};
     const toRects = this.toRef ? this.toRef.getBoundingClientRect() : {};
@@ -82,8 +95,8 @@ class CreateNewSandbox extends React.PureComponent {
         position: 'fixed',
         left: fromRects.x,
         top: fromRects.y,
-        width: fromRects.width,
-        height: fromRects.height,
+        width: fromRects.width + 32,
+        height: fromRects.height + 32,
         overflow: 'hidden',
       },
     ];
@@ -92,6 +105,36 @@ class CreateNewSandbox extends React.PureComponent {
       usedRects = usedRects.reverse();
     }
 
+    let mostUsedSandboxComponent;
+
+    if (mostUsedSandboxTemplate) {
+      const buttonName = `Create ${mostUsedSandboxTemplate.niceName} Sandbox`;
+      if (collectionId) {
+        mostUsedSandboxComponent = (
+          <Container
+            innerRef={node => {
+              this.ref = node;
+            }}
+            onClick={() => this.createSandbox(mostUsedSandboxTemplate)}
+            color={mostUsedSandboxTemplate.color}
+            tabIndex="0"
+            role="button"
+          >
+            {buttonName}
+          </Container>
+        );
+      } else {
+        mostUsedSandboxComponent = (
+          <ContainerLink
+            to={sandboxUrl({ id: mostUsedSandboxTemplate.shortid })}
+            color={mostUsedSandboxTemplate.color}
+          >
+            {buttonName}
+          </ContainerLink>
+        );
+      }
+    }
+
     return (
       <React.Fragment>
         {this.state.creating && (
@@ -129,25 +172,26 @@ class CreateNewSandbox extends React.PureComponent {
           </Portal>
         )}
 
-        <div
-          ref={node => {
-            this.ref = node;
-          }}
-          style={style}
-        >
-          <Container
-            onClick={this.handleClick}
-            tabIndex="0"
-            role="button"
-            hide={this.state.creating}
-            onKeyDown={e => {
-              if (e.keyCode === 13) {
-                this.handleClick();
-              }
-            }}
-          >
-            Create Sandbox
-          </Container>
+        <div style={style}>
+          <ButtonsContainer>
+            <Container
+              innerRef={node => {
+                this.ref = node;
+              }}
+              onClick={this.handleClick}
+              tabIndex="0"
+              role="button"
+              hide={this.state.creating}
+              onKeyDown={e => {
+                if (e.keyCode === 13) {
+                  this.handleClick();
+                }
+              }}
+            >
+              Create Sandbox
+            </Container>
+            {mostUsedSandboxComponent}
+          </ButtonsContainer>
           <Portal>
             <div
               style={{

packages/app/src/app/pages/Dashboard/Content/routes/PathedSandboxes/index.js

@@ -8,6 +8,7 @@ import { basename } from 'path';
 import Sandboxes from '../../Sandboxes';
 import Navigation from './Navigation';
 import CreateNewSandbox from '../../CreateNewSandbox';
+import getMostUsedTemplate from '../utils/getMostUsedTemplate';
 
 import { PATHED_SANDBOXES_CONTENT_QUERY } from '../../../queries';
 
@@ -40,6 +41,15 @@ const PathedSandboxes = props => {
               sandboxes
             );
 
+            let mostUsedTemplate = null;
+            if (!loading) {
+              try {
+                mostUsedTemplate = getMostUsedTemplate(sandboxes);
+              } catch (e) {
+                // Not critical
+              }
+            }
+
             return (
               <Sandboxes
                 ExtraElement={({ style }) => (
@@ -50,6 +60,7 @@ const PathedSandboxes = props => {
                       data.me.collection &&
                       data.me.collection.id
                     }
+                    mostUsedSandboxTemplate={mostUsedTemplate}
                     style={style}
                   />
                 )}

packages/app/src/app/pages/Dashboard/Content/routes/RecentSandboxes/index.js

@@ -1,7 +1,10 @@
 import React from 'react';
 import { observer, inject } from 'mobx-react';
+
 import { Query } from 'react-apollo';
 
+import getMostUsedTemplate from '../utils/getMostUsedTemplate';
+
 import Sandboxes from '../../Sandboxes';
 
 import CreateNewSandbox from '../../CreateNewSandbox';
@@ -22,11 +25,25 @@ const RecentSandboxes = ({ store }) => {
           return <div>Error!</div>;
         }
 
+        let mostUsedTemplate = null;
+        if (!loading) {
+          try {
+            mostUsedTemplate = getMostUsedTemplate(data.me.sandboxes);
+          } catch (e) {
+            // Not critical
+          }
+        }
+
         return (
           <Sandboxes
             isLoading={loading}
             Header="Recent Sandboxes"
-            ExtraElement={({ style }) => <CreateNewSandbox style={style} />}
+            ExtraElement={({ style }) => (
+              <CreateNewSandbox
+                mostUsedSandboxTemplate={mostUsedTemplate}
+                style={style}
+              />
+            )}
             hideFilters
             sandboxes={loading ? [] : data.me.sandboxes}
             page="recent"

packages/app/src/app/pages/Dashboard/Content/routes/utils/getMostUsedTemplate.js

@@ -0,0 +1,26 @@
+import { countBy } from 'lodash-es';
+import getTemplate from 'common/templates';
+
+export default function getMostUsedTemplate(sandboxes) {
+  const countedByTemplates = countBy(sandboxes, s => s.source.template);
+  const mostUsedTemplateInfo = Object.keys(countedByTemplates).reduce(
+    (prev, template) => {
+      const count = countedByTemplates[template];
+      if (count > prev.count) {
+        return {
+          count,
+          template,
+        };
+      }
+
+      return prev;
+    },
+    { count: 0, template: '' }
+  );
+
+  if (mostUsedTemplateInfo.count > 0) {
+    return getTemplate(mostUsedTemplateInfo.template);
+  }
+
+  return null;
+}