Improve UX of handling templates and add static

CompuIves · CompuIves · commit 687952f85aef · 2018-10-31T15:13:48.000+01:00
- Allow people to switch templates of a sandbox
- Enable new SSE templates
  - Ember
  - Sapper
  - Nest
- Add static template
  - Has no bundling
- Allow editing of the main file
- Disable React Typescript, has been replaced with CRA
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -144,7 +144,7 @@
     "circular-json": "^0.4.0",
     "codemirror": "^5.27.4",
     "codesandbox-api": "^0.0.18",
-    "codesandbox-import-utils": "^1.3.3",
+    "codesandbox-import-utils": "1.3.5",
     "color": "^0.11.4",
     "compare-versions": "^3.1.0",
     "console-feed": "^2.8.0",
diff --git a/packages/app/src/app/components/CodeEditor/Configuration/index.js b/packages/app/src/app/components/CodeEditor/Configuration/index.js
@@ -85,7 +85,7 @@ export default class Configuration extends React.PureComponent<Props>
   };
 
   render() {
-    const { config, width, height } = this.props;
+    const { config, width, height, sandbox } = this.props;
     const currentModule = this.currentModule;
 
     const { ConfigWizard } = getUI(config.type);
@@ -117,7 +117,11 @@ export default class Configuration extends React.PureComponent<Props>
           </a>
         </Description>
 
-        <ConfigWizard updateFile={this.updateFile} file={currentModule.code} />
+        <ConfigWizard
+          sandbox={sandbox}
+          updateFile={this.updateFile}
+          file={currentModule.code}
+        />
       </Container>
     );
   }
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryChildren/ModuleEntry.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryChildren/ModuleEntry.js
@@ -46,8 +46,8 @@ class ModuleEntry extends React.Component {
         depth={depth + 1}
         active={isActive}
         type={type || 'function'}
-        rename={isMainModule ? undefined : renameModule}
-        deleteEntry={isMainModule ? undefined : deleteEntry}
+        rename={renameModule}
+        deleteEntry={deleteEntry}
         isNotSynced={isNotSynced}
         renameValidator={this.validateTitle}
         setCurrentModule={setCurrentModule}
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/elements.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/elements.js
@@ -2,6 +2,8 @@ import styled from 'styled-components';
 import NotSyncedIcon from 'react-icons/lib/go/primitive-dot';
 
 export const Right = styled.div`
+  display: flex;
+  align-items: center;
   position: absolute;
   right: 1rem;
 `;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/index.js
@@ -185,20 +185,29 @@ class Entry extends React.PureComponent {
             {isNotSynced && !state && <NotSyncedIconWithMargin />}
             {state === '' && (
               <Right>
-                {isMainModule ? (
-                  <span style={{ opacity: hovering ? 1 : 0 }}>main</span>
-                ) : (
-                  <EditIcons
-                    hovering={hovering}
-                    onCreateFile={onCreateModuleClick}
-                    onCreateDirectory={onCreateDirectoryClick}
-                    onUploadFile={onUploadFileClick}
-                    onDelete={deleteEntry && this.delete}
-                    onEdit={rename && this.rename}
-                    active={active}
-                    forceShow={window.__isTouch && type === 'directory-open'}
-                  />
+                {isMainModule && (
+                  <span
+                    style={{
+                      fontSize: '.75rem',
+                      fontWeight: 600,
+                      opacity: hovering ? 0.6 : 0,
+                      marginTop: 3,
+                      marginRight: 3,
+                    }}
+                  >
+                    entry
+                  </span>
                 )}
+                <EditIcons
+                  hovering={hovering}
+                  onCreateFile={onCreateModuleClick}
+                  onCreateDirectory={onCreateDirectoryClick}
+                  onUploadFile={onUploadFileClick}
+                  onDelete={deleteEntry && this.delete}
+                  onEdit={rename && this.rename}
+                  active={active}
+                  forceShow={window.__isTouch && type === 'directory-open'}
+                />
               </Right>
             )}
           </EntryContainer>
@@ -209,7 +218,7 @@ class Entry extends React.PureComponent {
 }
 
 const entrySource = {
-  canDrag: props => !!props.id && !props.isMainModule,
+  canDrag: props => !!props.id,
   beginDrag: props => {
     if (props.closeTree) props.closeTree();
 
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/index.js
@@ -121,6 +121,7 @@ const ConfigurationFiles = ({ store, signals }) => {
 
           return (
             <FileConfig
+              key={path}
               openModule={id => {
                 signals.editor.moduleSelected({ id });
               }}
@@ -137,6 +138,7 @@ const ConfigurationFiles = ({ store, signals }) => {
 
           return (
             <FileConfig
+              key={path}
               createModule={title => {
                 signals.files.moduleCreated({ title });
               }}
diff --git a/packages/app/src/app/pages/common/Modals/NewSandbox/index.js b/packages/app/src/app/pages/common/Modals/NewSandbox/index.js
@@ -4,11 +4,13 @@ import { sandboxUrl } from 'common/utils/url-generator';
 
 import NewSandboxModal from '../../../Dashboard/Content/CreateNewSandbox/Modal';
 
-export default () => (
+export default ({ closeModal }) => (
   <NewSandboxModal
     createSandbox={template => {
       history.push(sandboxUrl({ id: template.shortid }));
+      closeModal();
     }}
+    closeOnCreate
     width={925}
   />
 );
diff --git a/packages/app/src/app/pages/common/Modals/index.js b/packages/app/src/app/pages/common/Modals/index.js
@@ -105,7 +105,11 @@ function Modals({ store, signals }) {
       width={modal && modal.width}
       onClose={(isKeyDown: boolean) => signals.modalClosed({ isKeyDown })}
     >
-      {modal ? React.createElement(modal.Component) : null}
+      {modal
+        ? React.createElement(modal.Component, {
+            closeModal: () => signals.modalClosed({ isKeyDown: false }),
+          })
+        : null}
     </Modal>
   );
 }
diff --git a/packages/app/src/app/store/modules/editor/actions.js b/packages/app/src/app/store/modules/editor/actions.js
@@ -1,4 +1,4 @@
-import { fromPairs, toPairs, sortBy } from 'lodash-es';
+import { fromPairs, toPairs, sortBy, mapValues } from 'lodash-es';
 import slugify from 'common/utils/slugify';
 import { clone } from 'mobx-state-tree';
 
@@ -434,14 +434,38 @@ export function updateTemplateIfSSE({ state, api }) {
     const currentTemplate = state.get('editor.currentSandbox.template');
     const templateDefinition = getTemplate(currentTemplate);
 
-    if (templateDefinition.isServer) {
+    const shouldUpdateTemplate = (() => {
+      // We always want to be able to update server template based on its detection.
+      // We only want to update the client template when it's explicitly specified
+      // in the sandbox configuration.
+
+      if (templateDefinition.isServer) {
+        return true;
+      }
+
+      const sandboxConfig = state.get('editor.parsedConfigurations.sandbox');
+
+      if (sandboxConfig.parsed.template) {
+        return true;
+      }
+
+      return false;
+    })();
+
+    if (shouldUpdateTemplate) {
       const { parsed } = state.get('editor.parsedConfigurations.package');
 
-      const newTemplate = computeTemplate(parsed, {}) || 'node';
+      const a = Date.now();
+      const modulesByPath = mapValues(state.get('editor.modulesByPath'), m => ({
+        content: m.code,
+        isBinary: m.isBinary,
+      }));
+
+      const newTemplate = computeTemplate(parsed, modulesByPath) || 'node';
 
       if (
         newTemplate !== currentTemplate &&
-        getTemplate(newTemplate).isServer
+        templateDefinition.isServer === getTemplate(newTemplate).isServer
       ) {
         state.set('editor.currentSandbox.template', newTemplate);
         api.put(`/sandboxes/${state.get('editor.currentSandbox.id')}/`, {
diff --git a/packages/common/components/Preference/PreferenceDropdown.js b/packages/common/components/Preference/PreferenceDropdown.js
@@ -9,11 +9,15 @@ export default class PreferenceInput extends React.PureComponent {
   };
 
   render() {
-    const { value, options } = this.props;
+    const { value, options, mapName } = this.props;
 
     return (
       <Select onChange={this.handleChange} value={value}>
-        {options.map(op => <option key={op}>{op}</option>)}
+        {options.map(op => (
+          <option key={op} value={op}>
+            {mapName ? mapName(op) : op}
+          </option>
+        ))}
       </Select>
     );
   }
diff --git a/packages/common/components/logos/Static.js b/packages/common/components/logos/Static.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+import staticIcon from './static.svg';
+
+export default props => <img alt="static" src={staticIcon} {...props} />;
diff --git a/packages/common/components/logos/static.svg b/packages/common/components/logos/static.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M13 9V3.5L18.5 9M6 2c-1.11 0-2 .89-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6H6z" fill="#3AA855"/></svg>
diff --git a/packages/common/templates/configuration/sandbox/ui.js b/packages/common/templates/configuration/sandbox/ui.js
@@ -1,5 +1,11 @@
 // @flow
 import React from 'react';
+import { sortBy } from 'lodash-es';
+
+import type { Sandbox } from 'common/types';
+
+import * as templates from 'common/templates';
+import type { default as Template } from 'common/templates/template';
 
 import {
   PaddedPreference,
@@ -11,6 +17,7 @@ import {
 type Props = {
   file: string,
   updateFile: (code: string) => void,
+  sandbox: Sandbox,
 };
 
 class ConfigWizard extends React.Component<Props> {
@@ -30,7 +37,7 @@ class ConfigWizard extends React.Component<Props> {
   });
 
   render() {
-    const { file } = this.props;
+    const { file, sandbox } = this.props;
 
     let parsedFile;
     let error;
@@ -48,6 +55,27 @@ class ConfigWizard extends React.Component<Props> {
       return <div>Could not parse sandbox.config.json</div>;
     }
 
+    const currentTemplate = templates.default(sandbox.template);
+
+    // $FlowIssue: Can't detect difference between filter/no-filter
+    const possibleTemplates: Array<Template> = Object.keys(templates)
+      .filter(t => t !== 'default')
+      .map(n => templates[n]);
+
+    const templateOptions = sortBy(
+      possibleTemplates.filter(
+        template =>
+          template.isServer === currentTemplate.isServer &&
+          template.showOnHomePage
+      ),
+      template => template.niceName
+    ).map(template => template.name);
+
+    const templateNameMap = {};
+    possibleTemplates.forEach(template => {
+      templateNameMap[template.name] = template.niceName;
+    });
+
     return (
       <div>
         <PaddedConfig>
@@ -84,13 +112,28 @@ class ConfigWizard extends React.Component<Props> {
               title="Default View"
               type="dropdown"
               options={['browser', 'console', 'tests']}
-              {...this.bindValue(parsedFile, 'view')}
+              {...this.bindValue(parsedFile, 'view') || sandbox.template}
             />
           </ConfigItem>
           <ConfigDescription>
             Which view to show in the preview by default.
           </ConfigDescription>
         </PaddedConfig>
+
+        <PaddedConfig>
+          <ConfigItem>
+            <PaddedPreference
+              title="Template"
+              type="dropdown"
+              options={templateOptions}
+              mapName={name => templateNameMap[name]}
+              {...this.bindValue(parsedFile, 'template')}
+            />
+          </ConfigItem>
+          <ConfigDescription>
+            Which template to use for this sandbox.
+          </ConfigDescription>
+        </PaddedConfig>
       </div>
     );
   }
diff --git a/packages/common/templates/ember.js b/packages/common/templates/ember.js
@@ -25,7 +25,7 @@ export default new Template(
   decorateSelector(() => '#E04E39'),
   {
     isServer: true,
-    showOnHomePage: false,
+    showOnHomePage: true,
     main: false,
   }
 );
diff --git a/packages/common/templates/icons.js b/packages/common/templates/icons.js
@@ -17,6 +17,7 @@ import Nuxt from 'common/components/logos/Nuxt';
 import Node from 'common/components/logos/Node';
 import Apollo from 'common/components/logos/Apollo';
 import Nest from 'common/components/logos/Nest';
+import Static from 'common/components/logos/Static';
 
 import {
   react,
@@ -37,6 +38,7 @@ import {
   apollo,
   nest,
   sapper,
+  staticTemplate,
 } from './';
 
 import type { Template } from './';
@@ -79,6 +81,8 @@ export default function getIcon(theme: Template) {
       return Apollo;
     case nest.name:
       return Nest;
+    case staticTemplate.name:
+      return Static;
     default:
       return React;
   }
diff --git a/packages/common/templates/index.js b/packages/common/templates/index.js
@@ -18,6 +18,7 @@ import node from './node';
 import apollo from './apollo-server';
 import sapper from './sapper';
 import nest from './nest';
+import staticTemplate from './static';
 
 export {
   angular,
@@ -39,6 +40,7 @@ export {
   sapper,
   nest,
   ember,
+  staticTemplate,
 };
 
 export type Template =
@@ -57,7 +59,8 @@ export type Template =
   | 'reason'
   | 'apollo'
   | 'sapper'
-  | 'nest';
+  | 'nest'
+  | 'static';
 
 export default function getDefinition(theme: Template) {
   switch (theme) {
@@ -97,6 +100,8 @@ export default function getDefinition(theme: Template) {
       return sapper;
     case nest.name:
       return nest;
+    case staticTemplate.name:
+      return staticTemplate;
     default:
       return react;
   }
diff --git a/packages/common/templates/nest.js b/packages/common/templates/nest.js
@@ -15,6 +15,6 @@ export default new Template(
     },
     isServer: true,
     mainFile: ['/src/main.ts'],
-    showOnHomePage: false,
+    showOnHomePage: true,
   }
 );
diff --git a/packages/common/templates/react-ts.js b/packages/common/templates/react-ts.js
@@ -13,7 +13,7 @@ export default new Template(
   decorateSelector(() => '#009fff'),
   {
     isTypescript: true,
-    showOnHomePage: true,
+    showOnHomePage: false,
     extraConfigurations: {
       '/tsconfig.json': configurations.tsconfig,
     },
diff --git a/packages/common/templates/react.js b/packages/common/templates/react.js
diff --git a/packages/common/templates/sapper.js b/packages/common/templates/sapper.js
diff --git a/packages/common/templates/static.js b/packages/common/templates/static.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -105,7 +105,11 @@ function Modals({ store, signals }) {`
`105`	`105`	`width={modal && modal.width}`
`106`	`106`	`onClose={(isKeyDown: boolean) => signals.modalClosed({ isKeyDown })}`
`107`	`107`	`>`
`108`		`- {modal ? React.createElement(modal.Component) : null}`
	`108`	`+ {modal`
	`109`	`+ ? React.createElement(modal.Component, {`
	`110`	`+ closeModal: () => signals.modalClosed({ isKeyDown: false }),`
	`111`	`+ })`
	`112`	`+ : null}`
`109`	`113`	`</Modal>`
`110`	`114`	`);`
`111`	`115`	`}`