Installer and Extractor were added

package.json

@@ -84,6 +84,7 @@
     "gulp-watch": "4.3.9",
     "marked": "0.3.5",
     "react-bootstrap": "0.30.6",
+    "strip-ansi": "3.0.1",
     "validator": "5.2.0"
   },
   "keywords": [

src-client/api/app/serverApi.js

@@ -136,6 +136,10 @@ export function generateApplication(pagesModel, hasApplicationFiles) {
     return invokeStructor('generateApplication', {pagesModel, hasApplicationFiles});
 }
 
-export function extractNamespace(namespace) {
-	return invokeStructor('extractNamespace', {namespace});
+export function preExtractNamespaces(namespaces) {
+	return invokeStructor('preExtractNamespaces', {namespaces});
+}
+
+export function extractNamespaces(namespaces, dependencies, dirPath) {
+	return invokeStructor('extractNamespaces', {namespaces, dependencies, dirPath});
 }

src-client/assets/app/css/umyproto.deskpage.css

@@ -45,6 +45,12 @@ body {
     background-size: 25em 25em;
 }
 
+.umy-logo-flexible {
+    width: 100%;
+    background: url(img/umylogo-white.svg);
+    background-size: 100%;
+}
+
 .umy-grid-basic-element {
     position: relative;
 }

src-client/components/NamespaceCard.js

@@ -0,0 +1,102 @@
+/*
+ * Copyright 2015 Alexander Pustovalov
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { Component, PropTypes } from 'react';
+import defaultScreenshotSrc from 'assets/app/css/img/screenshot.png';
+
+const containerStyle = {
+    display: 'flex',
+    flexDirection: 'row',
+    flexFlow: 'nowrap',
+    alignItems: 'center',
+	width: '600px',
+};
+const screenshotSectionStyle = {
+    flexGrow: 0,
+    minWidth: '200px',
+    width: '200px',
+    padding: '0.5em',
+};
+const mainSectionStyle = {
+    marginLeft: '0.5em',
+    flexGrow: 2,
+    padding: '0.5em 0.5em 0.5em 0',
+    height: '200px',
+    overflow: 'auto',
+};
+const installBtnSectionStyle = {
+	flexGrow: 0,
+	minWidth: '200px',
+	width: '200px',
+	padding: '0.5em',
+	alignItems: 'center',
+};
+const bottomToolbarStyle = {
+    flexGrow: 2,
+    display: 'flex',
+    flexDirection: 'row',
+	padding: '0.5em 0.5em 0.5em 0',
+	alignItems: 'center',
+};
+
+class NamespaceCard extends Component {
+
+    render() {
+        const {style, namespace, repoName, repoLink, namespaceDescription, stars} = this.props;
+        return (
+            <div style={style}>
+                <div className="panel panel-default">
+                    <div style={containerStyle}>
+                        <div style={screenshotSectionStyle}>
+                            <img
+                                style={{width: '100%'}}
+                                src={defaultScreenshotSrc}
+                                alt=""
+                            />
+                        </div>
+                        <div style={mainSectionStyle}>
+                            <h4>{repoName && repoName.substr(0, 100)}</h4>
+                            <p>{namespace}</p>
+                            <p style={{wordBreak: 'break-all'}}>
+                                {namespaceDescription}
+                            </p>
+                        </div>
+                    </div>
+                    <div style={containerStyle}>
+                        <div style={installBtnSectionStyle}>
+                            <button className="btn btn-default btn-block">
+                                <i className="fa fa-download" />
+                                <span style={{marginLeft: '0.5em'}}>
+                                    Install
+                                </span>
+                            </button>
+                        </div>
+                        <div style={bottomToolbarStyle}>
+                            <div style={{marginRight: '0.5em'}}>
+                                GH Stars: {stars}
+                            </div>
+                            <div style={{marginRight: '0.5em'}}>
+                                <a href="#">{repoLink}</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default NamespaceCard;

src-client/components/OptionInput.js

@@ -76,14 +76,13 @@ class OptionInput extends Component {
     handleChangeInputValue(e) {
         let value = null;
         const {propertyType} = this.state;
-        const {inputElement} = this.refs;
         if(propertyType){
             if(propertyType === 'text'){
-                value = inputElement.value;
+                value = this.inputElement.value;
             } else if(propertyType === 'checkbox'){
-                value = inputElement.checked;
+                value = this.inputElement.checked;
             } else if(propertyType === 'number'){
-                value = parseFloat(inputElement.value);
+                value = parseFloat(this.inputElement.value);
             }
         }
         let valueObject = set({}, this.props.path, value);
@@ -100,7 +99,7 @@ class OptionInput extends Component {
         const {path, onChangeValue} = this.props;
         if(propertyType){
             if(propertyType === 'checkbox'){
-                value = this.refs.inputElement.checked;
+                value = this.inputElement.checked;
             }
         }
         let valueObject = set({}, path, value);
@@ -141,43 +140,56 @@ class OptionInput extends Component {
             height: '1.55em', paddingTop: '2px', paddingBottom: '2px'
         };
         if(propertyType === 'checkbox') {
-            style.width = '1em';
+            style.width = '2em';
             element = (
-                <div style={{position: 'relative'}}>
-                <input ref="inputElement"
-                       type={propertyType}
-                       className="form-control"
-                       checked={this.getValueFromObject()}
-                       onFocus={this.handleFocus}
-                       style={style}
-                       onChange={this.handleChangeCheckboxValue}/>
-                    <span
-                        style={{position: 'absolute', top: '0.5em', left: '-1em', cursor: 'pointer'}}
-                        className="fa fa-trash-o"
-                        onClick={this.handleDelete}/>
+                <div style={{display: 'flex', width: '100%', alignItems: 'center'}}>
+                    <div style={{flexGrow: 0, width: '1em'}}>
+                        <span
+                            style={{cursor: 'pointer'}}
+                            className="fa fa-trash-o"
+                            onClick={this.handleDelete}
+                        />
+                    </div>
+                    <div style={{flexGrow: 2}}>
+                        <input
+                            ref={me => this.inputElement = me}
+                            type={propertyType}
+                            checked={this.getValueFromObject()}
+                            onFocus={this.handleFocus}
+                            style={style}
+                            onChange={this.handleChangeCheckboxValue}
+                        />
+                    </div>
                 </div>
             );
 
         } else if(propertyType === 'text' || propertyType === 'number') {
             element = (
-                <div style={{position: 'relative'}}>
-                    <input ref="inputElement"
-                           type={propertyType}
-                           className="form-control"
-                           value={this.getValueFromObject()}
-                           style={style}
-                           onFocus={this.handleFocus}
-                           onChange={this.handleChangeInputValue}/>
-                    <span
-                        style={{position: 'absolute', top: '0.5em', left: '-1em', cursor: 'pointer'}}
-                        className="fa fa-trash-o"
-                        onClick={this.handleDelete}/>
+                <div style={{display: 'flex', width: '100%', alignItems: 'center'}}>
+                    <div style={{flexGrow: 0, width: '1em'}}>
+                        <span
+                            style={{cursor: 'pointer'}}
+                            className="fa fa-trash-o"
+                            onClick={this.handleDelete}
+                        />
+                    </div>
+                    <div style={{flexGrow: 2}}>
+                        <input
+                            ref={me => this.inputElement = me}
+                            type={propertyType}
+                            className="form-control"
+                            value={this.getValueFromObject()}
+                            style={style}
+                            onFocus={this.handleFocus}
+                            onChange={this.handleChangeInputValue}
+                        />
+                    </div>
                 </div>
             );
         }
         return (
             <div style={this.props.style}>
-                <p style={{marginBottom: '3px'}}>
+                <p style={{marginBottom: '3px', paddingLeft: '1em'}}>
                     <strong>{label}</strong>
                 </p>
                 {element}

src-client/components/index.js

@@ -37,3 +37,4 @@ export StyleNumberInput from './StyleNumberInput';
 export StyleOptionSelect from './StyleOptionSelect';
 export StyleSizeInput from './StyleSizeInput';
 export StyleSwatchesPicker from './StyleSwatchesPicker';
+export NamespaceCard from './NamespaceCard';

src-client/modules/app/containers/AppContainer/actions.js

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import stripAnsi from 'strip-ansi';
 import { bindActionCreators } from 'redux';
 import { success, failed, timeout, close} from 'modules/app/containers/AppMessage/actions';
 import { setReloadPageRequest, executeReloadPageRequest } from 'modules/workspace/containers/DeskPage/actions';
@@ -32,11 +34,12 @@ export const COMPILER_DONE = "AppContainer/COMPILER_DONE";
 export const COMPILER_TIMEOUT = "AppContainer/COMPILER_TIMEOUT";
 
 export const SHOW_DESK = "AppContainer/SHOW_DESK";
-export const SHOW_PROJECTS = "AppContainer/SHOW_PROJECTS";
 export const SHOW_GENERATOR = "AppContainer/SHOW_GENERATOR";
 export const HIDE_GENERATOR = "AppContainer/HIDE_GENERATOR";
-export const SHOW_SANDBOX = "AppContainer/SHOW_SANDBOX";
-export const HIDE_SANDBOX = "AppContainer/HIDE_SANDBOX";
+export const SHOW_INSTALLER = "AppContainer/SHOW_INSTALLER";
+export const HIDE_INSTALLER = "AppContainer/HIDE_INSTALLER";
+export const SHOW_EXTRACTOR = "AppContainer/SHOW_EXTRACTOR";
+export const HIDE_EXTRACTOR = "AppContainer/HIDE_EXTRACTOR";
 
 export const getProjectStatus = () => ({ type: GET_PROJECT_STATUS });
 export const setProjectInfo = (info) => ({ type: SET_PROJECT_INFO, payload: info });
@@ -54,16 +57,18 @@ export const compilerTimeout = () => ({ type: COMPILER_TIMEOUT });
 export const showDesk = () => ({type: SHOW_DESK});
 export const showGenerator = () => ({type: SHOW_GENERATOR});
 export const hideGenerator = () => ({type: HIDE_GENERATOR});
-export const showSandbox = () => ({type: SHOW_SANDBOX});
-export const hideSandbox = () => ({type: HIDE_SANDBOX});
+export const showInstaller = () => ({type: SHOW_INSTALLER});
+export const hideInstaller = () => ({type: HIDE_INSTALLER});
+export const showExtractor = () => ({type: SHOW_EXTRACTOR});
+export const hideExtractor = () => ({type: HIDE_EXTRACTOR});
 
 export const handleCompilerMessage = (message) => (dispatch, getState) => {
     if(message.status === 'start'){
         dispatch(compilerStart());
     } else if(message.status === 'done') {
         if(message.errors && message.errors.length > 0){
             message.errors.forEach( error => {
-                dispatch(failed(error.message ? error.message : error));
+                dispatch(failed(stripAnsi(error.message ? error.message : error)));
             });
             dispatch(setReloadPageRequest());
         } else {

src-client/modules/app/containers/AppContainer/index.js

@@ -27,6 +27,8 @@ import {
     SaveDefaultModelModal
 } from 'modules/workspace';
 import {Generator} from 'modules/generator';
+import {Installer} from 'modules/installer';
+import {Extractor} from 'modules/extractor';
 import SignInModal from 'modules/app/containers/SignInModal';
 import ProxySetupModal from 'modules/app/containers/ProxySetupModal';
 import ConfirmationModal from 'modules/app/containers/ConfirmationModal';
@@ -72,13 +74,29 @@ class Container extends Component {
                     <InformationModal />
                 </div>
             );
+        } else if(workspaceMode === 'installer'){
+            content = (
+                <div style={{width: '100%', height: '100%'}}>
+                    <Installer />
+                    <ConfirmationModal />
+                    <InformationModal />
+                </div>
+            );
+        } else if(workspaceMode === 'extractor'){
+            content = (
+                <div style={{width: '100%', height: '100%'}}>
+                    <Extractor />
+                    <ConfirmationModal />
+                    <InformationModal />
+                </div>
+            );
         } else {
             content = (
                 <div style={{position: 'fixed', top: '0px', left: '0px', right: '0px', bottom: '0px'}}>
                     <div
                         style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%'}}>
                         <div style={{display: 'block'}}>
-                            <div className='umy-logo'></div>
+                            <div className="umy-logo" />
                         </div>
                     </div>
                 </div>

src-client/modules/app/containers/AppContainer/reducer.js

@@ -86,31 +86,33 @@ export default (state = initialState, action = {}) => {
         });
     }
 
-    if(type === actions.SHOW_PROJECTS){
-        return Object.assign({}, state, {
-            workspaceMode: 'projects'
-        });
-    }
-
     if(type === actions.SHOW_GENERATOR){
         return Object.assign({}, state, {
             workspaceMode: 'generator'
         });
     }
 
-    if(type === actions.HIDE_GENERATOR || type === actions.HIDE_SANDBOX){
+    if(type === actions.SHOW_INSTALLER){
         return Object.assign({}, state, {
-            workspaceMode: 'desk'
+            workspaceMode: 'installer'
         });
     }
 
-    if(type === actions.SHOW_SANDBOX){
+    if(type === actions.SHOW_EXTRACTOR){
         return Object.assign({}, state, {
-            workspaceMode: 'sandbox'
+            workspaceMode: 'extractor'
         });
     }
 
-    return state;
+	if(type === actions.HIDE_GENERATOR
+		|| type === actions.HIDE_INSTALLER
+		|| type === actions.HIDE_EXTRACTOR){
+		return Object.assign({}, state, {
+			workspaceMode: 'desk'
+		});
+	}
+
+	return state;
 
 }