hippo-fw 0.9.8 → 0.9.9

data/client/hippo/screens/system-settings/mailer-config.jsx

@@ -7,7 +7,7 @@ import Heading from 'grommet/components/Heading';
 import { Form, Field, FormState, nonBlank, validEmail  } from 'hippo/components/form';
 
 @observer
-export default class MailerConfig extends React.PureComponent {
+export default class MailerConfig extends React.Component {
 
     formState = new FormState()
 

data/client/hippo/screens/system-settings/tenant.jsx

@@ -1,19 +1,21 @@
 import React from 'react';
 import { observer } from 'mobx-react';
-import { observable } from 'mobx';
+import { observable, action } from 'mobx';
 import { Row } from 'react-flexbox-grid';
 import Heading from 'grommet/components/Heading';
 import Box from 'grommet/components/Box';
 import { Form, Field, FormState, nonBlank } from 'hippo/components/form';
-
 import Notification from 'grommet/components/Notification';
 import Layer from 'grommet/components/Layer';
 import Paragraph from 'grommet/components/Paragraph';
 import Anchor from 'grommet/components/Anchor';
+import Button from 'grommet/components/Button';
 import LinkIcon from 'grommet/components/icons/base/Link';
-
+import UserAdminIcon from 'grommet/components/icons/base/UserAdmin';
+import ClearIcon from 'grommet/components/icons/base/Clear';
 import Tenant from '../../models/tenant';
 import Config from '../../config';
+import SubscriptionChoiceLayer from '../../access/subscription-choice-layer';
 
 function onTenantSlugChangeClose() { }
 
@@ -33,11 +35,13 @@ function TenantSlugChange({ oldSlug }) {
 }
 
 @observer
-export default class TenantConfig extends React.PureComponent {
+export default class TenantConfig extends React.Component {
 
     formState = new FormState()
 
     @observable slugChangedFrom;
+    @observable isCanceling;
+    @observable showSubscriptionChoice = false;
 
     onSave() {
         const originalSlug = Tenant.current.slug;
@@ -51,10 +55,37 @@ export default class TenantConfig extends React.PureComponent {
             });
     }
 
+    @action.bound onSubscriptionChange() {
+        this.showSubscriptionChoice = {
+            isCanceling: false,
+        };
+    }
+
+    @action.bound onSubscriptionCancel() {
+        this.showSubscriptionChoice = {
+            isCanceling: true,
+        };
+    }
+
+    @action.bound hideSubscriptionChoice() {
+        this.showSubscriptionChoice = false;
+    }
+
     componentWillMount() {
         this.formState.setFromModel(Tenant.current);
     }
 
+    renderSubscriptionChoice() {
+        if (!this.showSubscriptionChoice) { return null; }
+        return (
+            <SubscriptionChoiceLayer
+                displayCancel
+                {...this.showSubscriptionChoice}
+                onCancel={this.hideSubscriptionChoice}
+                onChoice={this.hideSubscriptionChoice} />
+        );
+    }
+
     renderIdChangeWarning() {
         const slug = this.formState.get('slug.value');
         if (!Tenant.current.slug || slug === Tenant.current.slug) {
@@ -71,6 +102,7 @@ export default class TenantConfig extends React.PureComponent {
     render() {
         return (
             <Form tag="div" className="tenant-edit-form" state={this.formState}>
+                {this.renderSubscriptionChoice()}
                 <TenantSlugChange oldSlug={this.slugChangedFrom} />
                 <Heading tag="h3">Account</Heading>
                 <Row>
@@ -81,6 +113,27 @@ export default class TenantConfig extends React.PureComponent {
                     />
                     <Field xs={6} name="name" validate={nonBlank} />
                 </Row>
+                <Row>
+                    <Field
+                        xs={12} type="label"
+                        label="Subscription"
+                        name="subscription_name"
+                        value={
+                            <Box direction="row" justify="between">
+                                <Button
+                                    plain label={Tenant.current.subscription.nameAndCost}
+                                    icon={<UserAdminIcon />}
+                                    onClick={this.onSubscriptionChange}
+                                />
+                                <Button
+                                    plain label="Cancel"
+                                    icon={<ClearIcon />}
+                                    onClick={this.onSubscriptionCancel}
+                                />
+                            </Box>
+                        }
+                    />
+                </Row>
                 {this.renderIdChangeWarning()}
             </Form>
         );

data/client/hippo/screens/user-management.jsx

@@ -14,7 +14,7 @@ import Query from 'hippo/models/query';
 import Editor from './user-management/edit-form';
 
 @observer
-export default class UserManagement extends React.PureComponent {
+export default class UserManagement extends React.Component {
 
     @observable editingId;
 
@@ -53,7 +53,7 @@ export default class UserManagement extends React.PureComponent {
     render() {
         return (
             <Screen {...this.props}>
-                <Heading>Manage User</Heading>
+                <Heading tag="h3">User Management</Heading>
                 <DataTable
                     canCreate
                     query={this.query}

data/client/hippo/screens/user-management/edit-form.jsx

@@ -14,7 +14,7 @@ import Query from '../../models/query';
 import { Form, Field, FormState, nonBlank, validEmail, booleanValue } from '../../components/form';
 
 @observer
-export default class EditForm extends React.PureComponent {
+export default class EditForm extends React.Component {
 
     static propTypes = {
         query:      PropTypes.instanceOf(Query).isRequired,

data/client/hippo/styles/global/fancy-header.scss

@@ -3,7 +3,8 @@
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    min-height: 400px;
+    margin: 50px 0;
+
     :first-child {
         border: 1px solid black;
         border-width: 1px 0;

data/client/hippo/styles/global/mixins.scss

@@ -1,5 +1,18 @@
-@mixin hidden-print {
+@mixin hidden-print() {
   @media print {
       display: none !important;
   }
 }
+
+@mixin workspace-screen-padding($exclude: '.grommetux-header__container--fixed') {
+
+    > *:not(#{$exclude}) {
+        margin: 0.5rem;
+    }
+    > .row {
+        & + .row {
+            margin-top: 0;
+        }
+    }
+
+}

data/client/hippo/testing/index.js

@@ -1,7 +1,14 @@
 /* global jest */
+import Tenant from 'hippo/models/tenant';
+import Config from 'hippo/config';
+import Subscription from 'hippo/models/subscription';
+
 export React from 'react';
 
 export { getScreenInstance, Snapshot } from './screens';
 
+Config.subscription_plans = [new Subscription({ id: 1, price: '42.42' })];
+Tenant.current.subscription_id = Subscription.all[0].id;
+
 jest.mock('hippo/config');
 jest.mock('hippo/models/sync');

data/client/hippo/user.js

@@ -1,6 +1,6 @@
 import { pick, merge, includes, omit } from 'lodash';
-
 import { action } from 'mobx';
+import Sync from './models/sync';
 
 import {
     BaseModel, identifiedBy, field, identifier, computed,
@@ -30,7 +30,7 @@ const ADMIN = 'administrator';
 @identifiedBy('hippo/user')
 export class UserModel extends BaseModel {
 
-    @identifier({ type: 'number' }) id;
+    @identifier id;
     @field login;
     @field name;
     @field email;
@@ -87,6 +87,13 @@ export class UserModel extends BaseModel {
         return merge(this.serialize(), { is_admin: this.is_admin });
     }
 
+    fetch() {
+        return Sync.forModel(this, {
+            url: `${Config.api_path}/${UserModel.identifiedBy}/current`,
+            method: 'GET',
+        });
+    }
+
 }
 
 const current_user = new UserModel();

data/client/hippo/workspace/index.jsx

@@ -14,10 +14,13 @@ import 'hippo/config-data';
 import 'hippo/screen-definitions';
 import Button from 'grommet/components/Button';
 import CirclePlayIcon from 'grommet/components/icons/base/CirclePlay';
+import User from '../user';
+import Tenant from '../models/tenant';
 import Extensions  from '../extensions';
 import Menu        from './menu';
 import Screen      from './screen';
 import LoginDialog from '../access/login-dialog';
+import SubscriptionChoiceLayer from '../access/subscription-choice-layer';
 
 import './styles.scss';
 
@@ -65,28 +68,46 @@ class Workspace extends React.Component {
         this.sidebarOpen = !this.sidebarOpen;
     }
 
+    get isDragSupported() {
+        return Boolean('ontouchstart' in window);
+    }
+
+    renderOpenButton() {
+        if (this.isDragSupported) { return null; }
+        return (
+            <Button
+                primary
+                icon={<CirclePlayIcon />}
+                onClick={this.toggleSidebarDocked}
+                className={cn('sidebar-toggle', { 'is-open': this.sidebarOpen })}
+            />
+        );
+    }
+
+    renderSubscriptionChoice() {
+        if (!User.isLoggedIn || Tenant.current.hasSubscription) { return null; }
+        return <SubscriptionChoiceLayer />;
+    }
+
     render() {
         return (
             <App centered={false}>
                 <LoginDialog />
+                {this.renderSubscriptionChoice()}
                 <Sidebar
                     styles={{ sidebar: { zIndex: 60 }, overlay: { zIndex: 59 } }}
                     sidebar={<Menu
                         isOpen={this.sidebarOpen}
                         isDocked={this.sidebarDocked}
                         onCloseMenu={this.toggleSidebarDocked}
-                        onDockToggle={this.toggleSidebarDocked}
-                    />}
+                        onDockToggle={this.toggleSidebarDocked} />
+                    }
                     open={this.sidebarOpen}
                     docked={this.sidebarDocked}
                     onSetOpen={this.onSetSidebarOpen}
                 >
-                    <Button
-                        primary
-                        icon={<CirclePlayIcon />}
-                        onClick={this.toggleSidebarDocked}
-                        className={cn('sidebar-toggle', { 'is-open': this.sidebarOpen })}
-                    />
+                    {this.renderOpenButton()}
+
                     <Switch>
                         <Route name='screen' path="/:screenId/:identifier?" component={Screen} />
                         <Route component={NoMatch} />

data/client/hippo/workspace/menu-group.jsx

@@ -10,7 +10,7 @@ import MenuOption from './menu-option';
 import Icon  from '../components/icon';
 
 @observer
-export default class Group extends React.PureComponent {
+export default class Group extends React.Component {
 
     static propTypes = {
         group: PropTypes.shape({

data/client/hippo/workspace/menu-option.jsx

@@ -9,6 +9,7 @@ import Icon from '../components/icon';
 export default class MenuOption extends React.Component {
 
     static propTypes = {
+        onSelection: PropTypes.func.isRequired,
         screen: PropTypes.shape({
             title:   PropTypes.string.isRequired,
             icon:    PropTypes.string.isRequired,
@@ -22,6 +23,7 @@ export default class MenuOption extends React.Component {
 
     @action.bound
     activateScreen() {
+        this.props.onSelection(this.props.screen);
         this.props.screen.display();
     }
 

data/client/hippo/workspace/menu.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react';
-import { action } from 'mobx';
+import { action, computed, observe } from 'mobx';
 import { isEmpty, get } from 'lodash';
 import PropTypes from 'prop-types';
 import Box     from 'grommet/components/Box';
@@ -18,18 +18,31 @@ import Config from '../config';
 import Asset from '../models/asset';
 
 @observer
-class Logout extends React.PureComponent {
+class Logout extends React.Component {
 
     static contextTypes = {
         router: PropTypes.object,
     }
 
+    componentWillUnmount() {
+        this.stopObserving();
+    }
+
+    componentWillMount() {
+        this.stopObserving = observe(
+            User, 'isLoggedIn', (change) => {
+                if (change.oldValue && !change.newValue) {
+                    this.context.router.history.replace('/');
+                }
+            },
+        );
+    }
+
     @action.bound
     onLogoutClick(ev) {
         ev.stopPropagation();
         ev.preventDefault();
         User.logout();
-        this.context.router.history.push('/');
     }
 
     render() {
@@ -59,19 +72,30 @@ const Logo = observer(() => {
 });
 
 @observer
-export default class WorkspaceMenu extends React.PureComponent {
+export default class WorkspaceMenu extends React.Component {
 
     renderUnGrouped() {
         if (!User.isLoggedIn || isEmpty(Screens.unGrouped)) { return null; }
         return (
             <Menu direction="column" align="start" justify="between" primary>
-                {Screens.unGrouped.map(s => <MenuOption key={s.id} screen={s} />)}
+                {Screens.unGrouped.map(s =>
+                    <MenuOption
+                        onSelection={this.onMenuSelection}
+                        key={s.id} screen={s} />)}
             </Menu>
         );
     }
 
+    @action.bound onMenuSelection() {
+        if (this.canClose) { this.props.onCloseMenu(); }
+    }
+
+    @computed get canClose() {
+        return (this.props.isOpen && !this.props.isDocked);
+    }
+
     renderClose() {
-        if (this.props.isOpen && !this.props.isDocked) {
+        if (this.canClose) {
             return <Button icon={<CloseIcon />} onClick={this.props.onCloseMenu} plain />;
         }
         return null;

data/client/hippo/workspace/screen.jsx

@@ -42,7 +42,11 @@ export default class Screen extends React.Component {
                 flex="grow"
             >
                 {displaying.models.map(s =>
-                    <ScreenView key={s.id} {...this.props.match.params} screen={s} />)}
+                    <ScreenView
+                        key={s.id}
+                        {...this.props.match.params}
+                        screen={s}
+                    />)}
             </Box>
 
         );

data/client/hippo/workspace/styles.scss

@@ -1,12 +1,13 @@
 @import '../styles/global';
 @import '~grommet/scss/aruba/index';
 
-.screen {
+.hippo-screen {
     flex: 1;
     flex-direction: column;
-    padding: 0.5rem;
+
     display: none;
 
+    @include workspace-screen-padding();
 
     min-height: min-content; min-height: -moz-min-content; min-height: -webkit-min-content;
 
@@ -40,5 +41,23 @@
 }
 
 .screens-wrapper {
-    overflow: auto
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    .async-loading {
+        align-items: center;
+        font-weight: bold;
+        font-size: 28px;
+        justify-content: center;
+        .content {
+            margin-bottom: 20vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            h4 {
+                display: flex;
+                align-items: center;
+                svg { margin-right: 1rem; }
+            }
+        }
+    }
 }