hippo-fw 0.9.7 → 0.9.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: cf25cc10af49e41c6a3b48817f8bc1b50853484e
-  data.tar.gz: 7afc125a95df6077aa39e6f6acec0d42c3d926a5
+  metadata.gz: e97da3fa2dce1988dbd6c99f57b23fa97c107804
+  data.tar.gz: 6ddec0b54d142580acde726ad71285a0bd418a60
 SHA512:
-  metadata.gz: 98ee0dc3e62a19bf1d3aa0503781a0b374061a0490c06a73039cb8f3040b455cfb9a18b157ae54c1940ecb27f9cb19f054656e9bd185a5276058809deaf6edad
-  data.tar.gz: 3217e075db4cac207c3b5cad67a8cb269114ca7f59a8396b8112472ce2acef5e347d808ee888baa4f61257d3e5ceaa5d61ba029689ec0505cbef6b6aa1d9aacf
+  metadata.gz: bb9884ee011d186fb0465284b8e537507d64d806b60be2ee687a6c52f16555168640734dd1f87b727f61e7dccf5ea1df349e95c904c8b39e1c388ba87de013d8
+  data.tar.gz: 65bad2b85ca2f0d47ec885120dbf7dd73324f3f75fd3d67177ba7da1207684f39d3b65f51750c175900678059d1415f3b6112f75d41a0f23adc5cb8b943479d3

data/.eslintrc.js

@@ -1,7 +1,4 @@
 module.exports = {
     "extends": "argosity",
     "parser": "babel-eslint",
-    rules: {
-        'no-underscore-dangle': 0,
-    },
 };

data/.nvmrc

@@ -1,2 +1 @@
-v8
-
+stable

data/.ruby-version

@@ -1 +1 @@
-2.4.1
+2.4.2

data/Rakefile

@@ -19,7 +19,7 @@ YARD::Rake::YardocTask.new do |t|
 end
 
 task :npmrelease do
-    sh "npm-release"
+    sh "npm publish"
 end
 
 task :release => :npmrelease

data/client/hippo/access/login-dialog.jsx

@@ -9,6 +9,7 @@ import User from '../user';
 
 @observer
 export default class LoginDialog extends React.Component {
+
     constructor() {
         super();
         bindAll(this, 'attemptLogin');
@@ -33,4 +34,5 @@ export default class LoginDialog extends React.Component {
             </Layer>
         );
     }
+
 }

data/client/hippo/boot.jsx

@@ -2,9 +2,11 @@ import React        from 'react'; // eslint-disable-line no-unused-vars
 import ReactDOM     from 'react-dom';
 import whenDomReady from 'when-dom-ready';
 import { delay } from 'lodash';
+import { unresolvedAssociations } from 'mobx-decorated-models';
 import { AppContainer } from 'react-hot-loader';
 import { onBoot } from './models/pub_sub';
 import './extensions/hippo';
+import Tenant from './models/tenant';
 
 // react-tap-event-plugin is required for material-ui which is used by ory-editor-ui
 require('react-tap-event-plugin')();
@@ -27,8 +29,18 @@ whenDomReady().then(() => {
     if (Root) return;
     /* global document: true  */
     Root = document.getElementById('hippo-root');
+
+    Tenant.bootstrap(
+        JSON.parse(document.getElementById('bootstrap-data').innerHTML),
+    );
     /* global document: false */
     renderer(Workspace);
+
+    unresolvedAssociations().forEach(({ model, property }) => {
+        // eslint-disable-next-line no-console
+        console.warn(`The model for ${model.identifiedBy}(${property}) cannot be found`);
+    });
+
     const loading = document.querySelector('.loading');
     if (loading) {
         loading.classList.add('complete');

data/client/hippo/components/asset.jsx

@@ -15,6 +15,7 @@ import './asset.scss';
 
 @observer
 export default class Asset extends React.PureComponent {
+
     static defaultProps = {
         label: '',
         className: '',
@@ -72,7 +73,9 @@ export default class Asset extends React.PureComponent {
 
 
     render() {
-        const { model: _, label: __, name: ___, className, tabIndex, ...col } = this.props;
+        const {
+            model: _, label: __, name: ___, className, tabIndex, ...col
+        } = this.props;
 
         return (
             <Col
@@ -97,4 +100,5 @@ export default class Asset extends React.PureComponent {
             </Col>
         );
     }
+
 }

data/client/hippo/components/asset.scss

@@ -2,6 +2,7 @@
 
 #hippo-root {
     .asset {
+        > .grommetux-form-field { height: 100%; }
         .drop-zone {
             height: 200px;
             padding: 0.5rem;

data/client/hippo/components/data-list.jsx

@@ -6,17 +6,18 @@ import { observer } from 'mobx-react';
 import { autobind } from 'core-decorators';
 import cn from 'classnames';
 import Box from 'grommet/components/Box';
-
 import {
     List, AutoSizer, InfiniteLoader,
 } from 'react-virtualized';
 import 'react-virtualized/styles.css';
 
+import ActivityOverlay from './network-activity-overlay';
 import Query from '../models/query';
 import './data-list/data-list.scss';
 
 @observer
 export default class DataList extends React.Component {
+
     static defaultProps = {
         rowHeight: 40,
     }
@@ -75,12 +76,11 @@ export default class DataList extends React.Component {
                 className={cn('data-list', { selectable: this.props.onRowClick })}
                 align='stretch' flex
             >
-
                 {this.props.header}
-
+                <ActivityOverlay model={query.results} message="Loading…" />
                 <Box className="body" align="stretch" flex>
                     <InfiniteLoader
-                        keyChange={query.results.updateKey}
+                        keyChange={query.results.fingerprint}
                         minimumBatchSize={query.pageSize}
                         isRowLoaded={this.isRowLoaded}
                         loadMoreRows={this.loadMoreRows}
@@ -95,6 +95,7 @@ export default class DataList extends React.Component {
                                 {({ height, width }) =>
                                     <List
                                         {...listProps}
+                                        keyChange={query.results.fingerprint}
                                         height={height}
                                         width={width}
                                         ref={(list) => {
@@ -114,4 +115,5 @@ export default class DataList extends React.Component {
             </Box>
         );
     }
+
 }

data/client/hippo/components/data-table.jsx

@@ -26,6 +26,7 @@ function renderEditTriangle({ rowIndex, columnData: { onEdit } }) {
 
 @observer
 export default class DataTable extends React.Component {
+
     static defaultProps = {
         canCreate: false,
         editRowIndex: null,
@@ -53,8 +54,7 @@ export default class DataTable extends React.Component {
             'calculateRowHeight',
             'isRowLoaded',
             'loadMoreRows',
-            'headerRenderer',
-        );
+            'headerRenderer');
         this.editIndex = props.editRowIndex;
         autorun(() => {
             if (isNumber(this.editIndex) && this.tableRef) {
@@ -130,9 +130,7 @@ export default class DataTable extends React.Component {
                 dataKey: f.dataIndex || f.id,
                 headerRenderer: this.headerRenderer,
             }, pick(f, 'width', 'label', 'flexGrow', 'flexShrink',
-                'cellRenderer', 'className', 'headerClassName'),
-            ),
-        );
+                'cellRenderer', 'className', 'headerClassName')));
         if (this.props.editor) {
             definitions.unshift({
                 key: 'edit-toggle',
@@ -162,7 +160,9 @@ export default class DataTable extends React.Component {
     }
 
     rowRenderer(props) {
-        const { index, className, key, style } = props;
+        const {
+            index, className, key, style,
+        } = props;
         extend(props, this.rowProps);
         if (this.editIndex === index) {
             const { editor: Editor } = this.props;
@@ -242,4 +242,5 @@ export default class DataTable extends React.Component {
             </div>
         );
     }
+
 }

data/client/hippo/components/data-table/header-cell.jsx

@@ -14,6 +14,7 @@ import Field from '../../models/query/field';
 
 @observer
 export default class SortingHeaderCell extends React.Component {
+
     static defaultProps = {
         onAdd: null,
     }
@@ -90,4 +91,5 @@ export default class SortingHeaderCell extends React.Component {
         }
         return label;
     }
+
 }

data/client/hippo/components/date-time.jsx

@@ -25,6 +25,7 @@ const defaultOptions = {
 
 @observer
 export default class DateTimePicker extends React.PureComponent {
+
     static propTypes = {
         defaultValue: PropTypes.string,
         options: PropTypes.object,
@@ -91,7 +92,13 @@ export default class DateTimePicker extends React.PureComponent {
     }
 
     @autobind onChange(dates) {
-        this.props.onChange({ target: { value: dates[0] } });
+        if ('range' === this.props.options.mode) {
+            if (2 === dates.length) {
+                this.props.onChange({ target: { value: dates } });
+            }
+        } else {
+            this.props.onChange({ target: { value: dates[0] } });
+        }
     }
 
     getOptions(props) {
@@ -119,7 +126,9 @@ export default class DateTimePicker extends React.PureComponent {
 
     render() {
         // eslint-disable-next-line no-unused-vars
-        const { options, defaultValue, value, children, ...props } = omit(this.props, hooks);
+        const {
+            options: _, defaultValue, value: __, children: ___, ...props
+        } = omit(this.props, hooks);
 
         return (
             <input
@@ -129,4 +138,5 @@ export default class DateTimePicker extends React.PureComponent {
             />
         );
     }
+
 }

data/client/hippo/components/form/api.js

@@ -7,6 +7,7 @@ import {
 } from 'lodash';
 
 export class FormField {
+
     name: '';
     @observable isTouched = false
     @observable isChanged = false;
@@ -72,10 +73,12 @@ export class FormField {
         this.isTouched = false;
         this.isChanged = false;
     }
+
 }
 
 
 export class FormState {
+
     fields = observable.map();
 
     @action
@@ -138,6 +141,14 @@ export class FormState {
         });
     }
 
+    @action
+    update(values) {
+        each(values, (v, k) => {
+            const field = this.fields.get(k);
+            if (field) { field.value = v; }
+        });
+    }
+
     @action
     setFromModel(model) {
         if (get(model, 'syncInProgress.isFetch')) {
@@ -154,4 +165,5 @@ export class FormState {
         this.fields.forEach((field, name) => (set(model, name, field.value)));
         return Promise.resolve(model);
     }
+
 }

data/client/hippo/components/form/fields.jsx

@@ -12,24 +12,30 @@ import DateWrapper     from './fields/date-wrapper';
 import SelectWrapper   from './fields/select-wrapper';
 import TextWrapper     from './fields/text-wrapper';
 import CheckBoxWrapper from './fields/checkbox-wrapper';
+import TagsWrapper     from './fields/tags-wrapper';
+import TextAreaWrapper from './fields/textarea-wrapper';
 import Label           from './fields/label';
 import TimeZoneSelect  from '../../components/time-zone-select';
 
+
 import './fields/form-field.scss';
 
 const TypesMapping = {
     text:     TextWrapper,
     date:     DateWrapper,
+    tags:     TagsWrapper,
     label:    Label,
     select:   SelectWrapper,
     number:   NumberInput,
     timezone: TimeZoneSelect,
     checkbox: CheckBoxWrapper,
+    textarea: TextAreaWrapper,
 };
 
 @inject('formState')
 @observer
 export default class FormField extends React.PureComponent {
+
     static propTypes = Object.assign({
         label: PropTypes.string,
         name:  PropTypes.string.isRequired,
@@ -73,7 +79,7 @@ export default class FormField extends React.PureComponent {
         const InputTag = TypesMapping[type] || TypesMapping.text;
 
         return (
-            <div className={classnames('form-field', className)}>
+            <div className={classnames('form-field', type, className)}>
                 <Field
                     label={label || titleize(name)}
                     error={this.field.invalidMessage}
@@ -94,4 +100,5 @@ export default class FormField extends React.PureComponent {
             </div>
         );
     }
+
 }

data/client/hippo/components/form/fields/checkbox-wrapper.jsx

@@ -5,6 +5,7 @@ import CheckBox from 'grommet/components/CheckBox';
 
 @observer
 export default class CheckBoxWrapper extends React.PureComponent {
+
     @action.bound onBlur(ev) {
         this.props.onBlur({ target: { value: ev.target.checked } });
     }
@@ -18,4 +19,5 @@ export default class CheckBoxWrapper extends React.PureComponent {
                 onBlur={this.onBlur} checked={!!this.props.value} />
         );
     }
+
 }

data/client/hippo/components/form/fields/date-wrapper.jsx

@@ -7,6 +7,7 @@ import DateTime  from '../../date-time';
 
 @observer
 export default class DateWrapper extends React.PureComponent {
+
     static defaultProps = {
         format: 'M/d/Y h:iK',
     }
@@ -47,4 +48,5 @@ export default class DateWrapper extends React.PureComponent {
             />
         );
     }
+
 }

data/client/hippo/components/form/fields/form-field.scss

@@ -10,3 +10,5 @@
         }
     }
 }
+
+@import './react-tags';

data/client/hippo/components/form/fields/label.jsx

@@ -4,6 +4,7 @@ import Value from 'grommet/components/Value';
 
 @observer
 export default class LabelWrapper extends React.PureComponent {
+
     render() {
         const { value }  = this.props;
 
@@ -11,4 +12,5 @@ export default class LabelWrapper extends React.PureComponent {
             <Value value={value} />
         );
     }
+
 }

data/client/hippo/components/form/fields/react-tags.scss

@@ -0,0 +1,170 @@
+.form-field.tags {
+    .grommetux-form-field.grommetux-form-field--focus {
+        overflow: visible;
+    }
+}
+
+.react-tags {
+  position: relative;
+//  padding: 6px 0 0 6px;
+//  border: 1px solid #D1D1D1;
+  border-radius: 1px;
+
+  /* shared font styles */
+  font-size: 1em;
+  line-height: 1.2;
+  display: flex;
+  /* clicking anywhere will focus the input */
+  cursor: text;
+  flex-wrap: wrap;
+
+  button:not(.grommetux-button):not(.grommetux-button--box) {
+      margin: 0;
+      height: 100%;
+      font-weight: 300;
+      padding: 0 0.4rem;
+      min-width: inherit;
+      border: 1px solid lightgray;
+      height: 28px;
+  }
+
+  .react-tags.is-focused {
+      border-color: #B1B1B1;
+  }
+
+  .react-tags__selected {
+      flex: 0;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-left: 22px;
+      margin-right: 0.5rem;
+  }
+
+  .react-tags__selected-tag {
+      display: inline-block;
+      box-sizing: border-box;
+      margin: 0 6px 6px 0;
+      padding: 6px 8px;
+      border: 1px solid #D1D1D1;
+      border-radius: 2px;
+      background: #F1F1F1;
+
+      /* match the font styles */
+      font-size: inherit;
+      line-height: inherit;
+  }
+
+  .react-tags__selected-tag:after {
+      content: '\2715';
+      color: #AAA;
+      margin-left: 8px;
+  }
+
+  .react-tags__selected-tag:hover,
+  .react-tags__selected-tag:focus {
+      border-color: #B1B1B1;
+  }
+
+  .react-tags__search {
+
+      display: flex;
+      align-items: center;
+
+
+      /* match tag layout */
+//      padding: 7px 2px;
+      // margin-bottom: 6px;
+
+      /* prevent autoresize overflowing the container */
+      max-width: 100%;
+  }
+
+  @media screen and (min-width: 30em) {
+
+      .react-tags__search {
+          /* this will become the offsetParent for suggestions */
+          position: relative;
+      }
+
+  }
+
+  .react-tags__search input:not(.grommetux-input) {
+
+
+      /* prevent autoresize overflowing the container */
+//      max-width: 100%;
+
+      /* remove styles and layout from this element */
+      margin: 0;
+//      padding: 0;
+      border: 0;
+      outline: none;
+      flex: 1;
+      width: inherit !important;
+      padding: 10px 0;
+      &:focus {
+          padding: 10px 0;
+      }
+      /* match the font styles */
+      font-size: inherit;
+      line-height: inherit;
+  }
+
+  .react-tags__search input::-ms-clear {
+      display: none;
+  }
+
+  .react-tags__suggestions {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      width: 100%;
+      background-color: white;
+      z-index: 3;
+  }
+
+  @media screen and (min-width: 30em) {
+
+      .react-tags__suggestions {
+
+          width: 240px;
+      }
+
+  }
+
+  .react-tags__suggestions ul {
+      margin: 4px -1px;
+      padding: 0;
+      list-style: none;
+      background: white;
+//      border: 1px solid #D1D1D1;
+      border-radius: 2px;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  }
+
+  .react-tags__suggestions li {
+      border-bottom: 1px solid #ddd;
+      padding: 6px 8px;
+  }
+
+  .react-tags__suggestions li mark {
+      text-decoration: underline;
+      background: none;
+      font-weight: 600;
+  }
+
+  .react-tags__suggestions li:hover {
+      cursor: pointer;
+      background: #eee;
+  }
+
+  .react-tags__suggestions li.is-active {
+      background: #b7cfe0;
+  }
+
+  .react-tags__suggestions li.is-disabled {
+      opacity: 0.5;
+      cursor: auto;
+  }
+}