Fix UI splitting

Author: Ives van Hoorne

packages/app/src/app/components/CodeEditor/Configuration/index.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
 import type { Module } from 'common/types';
+import getUI from 'common/templates/configuration/ui';
 import getType from 'app/utils/get-type';
 import Tooltip from 'common/components/Tooltip';
 
@@ -56,7 +57,7 @@ export default class Configuration extends React.PureComponent<Props>
     const { config, width, height } = this.props;
     const currentModule = this.currentModule;
 
-    const { ConfigWizard } = config.ui;
+    const { ConfigWizard } = getUI(config.type);
 
     return (
       <Container style={{ width, height }}>

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

@@ -5,6 +5,7 @@ import Loadable from 'react-loadable';
 import Loading from 'app/components/Loading';
 import Title from 'app/components/Title';
 import SubTitle from 'app/components/SubTitle';
+import getUI from 'common/templates/configuration/ui';
 import Centered from 'common/components/flex/Centered';
 import Margin from 'common/components/spacing/Margin';
 import isImage from 'common/utils/is-image';
@@ -85,7 +86,7 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
       module.id
     );
     const config = template.configurationFiles[modulePath];
-    if (config && config.ui && this.state.showConfigUI) {
+    if (config && getUI(config.type) && this.state.showConfigUI) {
       return (
         <Configuration
           {...props}
@@ -140,7 +141,7 @@ export default class CodeEditor extends React.PureComponent<Props, State> {
         }}
       >
         {config &&
-          (config.ui ? (
+          (getUI(config.type) ? (
             <Icons>
               <Tooltip title="Switch to UI Configuration">
                 <Icon onClick={this.toggleConfigUI}>

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/ConfigurationFiles/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import getDefinition from 'common/templates';
+import getUI from 'common/templates/configuration/ui';
 import { Module, Configuration } from 'common/types';
 import { resolveModule } from 'common/sandbox/modules';
 
@@ -60,7 +61,7 @@ const FileConfig = ({
             <BookIcon />
           </a>
         </Tooltip>
-        {config.ui && (
+        {getUI(config.type) && (
           <Tooltip title="Editable with UI">
             <UIIcon style={{ marginLeft: '.5rem' }} />
           </Tooltip>

packages/common/templates/configuration/prettierRC/index.js

@@ -2,14 +2,12 @@
 import DEFAULT_PRETTIER_CONFIG from 'common/prettify-default-config';
 
 import type { ConfigurationFile } from '../types';
-import ui from './ui';
 
 const config: ConfigurationFile = {
   title: '.prettierrc',
   type: 'prettier',
   description: 'Defines how all files will be prettified by Prettier.',
   moreInfoUrl: 'https://prettier.io/docs/en/configuration.html',
-  ui,
   generateFileFromState: state =>
     JSON.stringify(
       {

packages/common/templates/configuration/sandbox/index.js

@@ -1,14 +1,12 @@
 // @flow
 import type { ConfigurationFile } from '../types';
-import ui from './ui';
 
 const config: ConfigurationFile = {
   title: 'sandbox.config.json',
   type: 'sandbox',
   description: 'Configuration specific to the current sandbox.',
   moreInfoUrl:
     'https://codesandbox.io/docs/configuration#sandbox-configuration',
-  ui,
   getDefaultCode: () =>
     JSON.stringify(
       {

packages/common/templates/configuration/types.js

@@ -1,5 +1,4 @@
 // @flow
-import type { ComponentType } from 'react';
 import type { Sandbox } from 'common/types';
 
 export type ConfigurationFile = {
@@ -15,13 +14,6 @@ export type ConfigurationFile = {
   generateFileFromState?: (state: any) => string,
   generateFileFromSandbox?: (sandbox: Sandbox) => string,
 
-  ui?: {
-    ConfigWizard: ComponentType<{
-      file: string,
-      updateFile: (code: string) => void,
-    }>,
-  },
-
   schema?: string,
   partialSupportDisclaimer?: string,
 };

packages/common/templates/configuration/ui.js

@@ -0,0 +1,19 @@
+// @flow
+import configs from './';
+
+import prettierUI from './prettierRC/ui';
+import sandboxUI from './sandbox/ui';
+
+export default function getUI(configType: string) {
+  switch (configType) {
+    case configs.prettier.type: {
+      return prettierUI;
+    }
+    case configs.sandbox.type: {
+      return sandboxUI;
+    }
+    default: {
+      return null;
+    }
+  }
+}