couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From gar...@apache.org
Subject [couchdb-fauxton] branch master updated: add Mango index examples dropdown (#962)
Date Tue, 22 Aug 2017 14:05:36 GMT
This is an automated email from the ASF dual-hosted git repository.

garren pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/couchdb-fauxton.git


The following commit(s) were added to refs/heads/master by this push:
     new ad8759b  add Mango index examples dropdown (#962)
ad8759b is described below

commit ad8759b22d06dfd8881b7567b099095dfd76f8ef
Author: Will Holley <willholley@gmail.com>
AuthorDate: Tue Aug 22 15:05:34 2017 +0100

    add Mango index examples dropdown (#962)
    
    Adds a dropdown to the index editor which includes example
    indexes (single field JSON, multi-field JSON). This can
    be extended to include other index types, primarily text
    indexes.
---
 app/addons/components/components/codeeditor.js     |  2 +-
 app/addons/documents/assets/less/view-editor.less  |  4 +-
 .../documents/mango/__tests__/mango.store.test.js  |  5 +++
 app/addons/documents/mango/mango.actions.js        |  4 +-
 app/addons/documents/mango/mango.actiontypes.js    |  2 +-
 app/addons/documents/mango/mango.components.js     | 27 +++++++++++-
 app/addons/documents/mango/mango.constants.js      | 21 ++++++++++
 app/addons/documents/mango/mango.stores.js         | 49 ++++++++++++----------
 .../documents/mango/tests/mango.componentsSpec.js  | 28 -------------
 9 files changed, 85 insertions(+), 57 deletions(-)

diff --git a/app/addons/components/components/codeeditor.js b/app/addons/components/components/codeeditor.js
index cc605cf..010ab42 100644
--- a/app/addons/components/components/codeeditor.js
+++ b/app/addons/components/components/codeeditor.js
@@ -41,7 +41,7 @@ export const CodeEditor = React.createClass({
       // these two options create auto-resizeable code editors, with a maximum number of
lines
       setHeightToLineCount: false,
       maxLines: 10,
-      minLines: 10,
+      minLines: 11, // show double digits in sidebar
 
       // optional editor key commands (e.g. specific save action)
       editorCommands: [],
diff --git a/app/addons/documents/assets/less/view-editor.less b/app/addons/documents/assets/less/view-editor.less
index 52a712c..cec910e 100644
--- a/app/addons/documents/assets/less/view-editor.less
+++ b/app/addons/documents/assets/less/view-editor.less
@@ -64,7 +64,7 @@
   }
 }
 
-.mango-history {
+.mango-select {
   width: inherit;
   overflow: visible;
 
@@ -72,7 +72,7 @@
     z-index: 100;
   }
 
-  .mango-history-entry {
+  .mango-select-entry {
     background-color: @queryHistoryBGColor;
     color: @queryHistoryColor;
 
diff --git a/app/addons/documents/mango/__tests__/mango.store.test.js b/app/addons/documents/mango/__tests__/mango.store.test.js
index e3d8c00..3b9e69b 100644
--- a/app/addons/documents/mango/__tests__/mango.store.test.js
+++ b/app/addons/documents/mango/__tests__/mango.store.test.js
@@ -119,5 +119,10 @@ describe('Mango Store', () => {
       const code = store.getQueryFindCode();
       assert.equal(history[0].value, code);
     });
+
+    it('initializes default index code with template', () => {
+      const templates = store.getQueryIndexTemplates();
+      assert.equal(2, templates.length);
+    });
   });
 });
diff --git a/app/addons/documents/mango/mango.actions.js b/app/addons/documents/mango/mango.actions.js
index f1540e4..e2a8186 100644
--- a/app/addons/documents/mango/mango.actions.js
+++ b/app/addons/documents/mango/mango.actions.js
@@ -31,9 +31,9 @@ export default {
     });
   },
 
-  newQueryCreateIndexCode: function (options) {
+  newQueryCreateIndexTemplate: function (options) {
     FauxtonAPI.dispatch({
-      type: ActionTypes.MANGO_NEW_QUERY_CREATE_INDEX_CODE,
+      type: ActionTypes.MANGO_NEW_QUERY_CREATE_INDEX_TEMPLATE,
       options: options
     });
   },
diff --git a/app/addons/documents/mango/mango.actiontypes.js b/app/addons/documents/mango/mango.actiontypes.js
index 86db14a..40c186b 100644
--- a/app/addons/documents/mango/mango.actiontypes.js
+++ b/app/addons/documents/mango/mango.actiontypes.js
@@ -13,7 +13,7 @@
 export default {
   MANGO_SET_DB: 'MANGO_SET_DB',
   MANGO_NEW_QUERY_FIND_CODE: 'MANGO_NEW_QUERY_FIND_CODE',
-  MANGO_NEW_QUERY_CREATE_INDEX_CODE: 'MANGO_NEW_QUERY_CREATE_INDEX_CODE',
+  MANGO_NEW_QUERY_CREATE_INDEX_TEMPLATE: 'MANGO_NEW_QUERY_CREATE_INDEX_TEMPLATE',
   MANGO_NEW_AVAILABLE_INDEXES: 'MANGO_NEW_AVAILABLE_INDEXES',
   MANGO_EXPLAIN_RESULTS: 'MANGO_EXPLAIN_RESULTS'
 };
diff --git a/app/addons/documents/mango/mango.components.js b/app/addons/documents/mango/mango.components.js
index 290afb5..c78cf74 100644
--- a/app/addons/documents/mango/mango.components.js
+++ b/app/addons/documents/mango/mango.components.js
@@ -137,7 +137,7 @@ var MangoEditor = React.createClass({
         <form className="form-horizontal" onSubmit={this.props.onSubmit}>
           <div className="padded-box">
             <ReactSelect
-                className="mango-history"
+                className="mango-select"
                 options={this.props.history}
                 ref="history"
                 placeholder="Query history"
@@ -168,7 +168,7 @@ var MangoEditor = React.createClass({
   },
 
   setEditorValue: function (value) {
-    return this.refs.field.getEditor().setValue(value);
+    return this.getEditor().setValue(value);
   },
 
   getEditorValue: function () {
@@ -189,6 +189,18 @@ var MangoIndexEditor = React.createClass({
     return (
       <div className="mango-editor-wrapper">
         <form className="form-horizontal" onSubmit={this.props.onSubmit}>
+          <div className="padded-box">
+            <ReactSelect
+                className="mango-select"
+                options={this.props.templates}
+                ref="templates"
+                placeholder="Examples"
+                searchable={false}
+                clearable={false}
+                autosize={false}
+                onChange={this.props.onTemplateSelected}
+                />
+          </div>
           <PaddedBorderedBox>
             <CodeEditorPanel
               id="query-field"
@@ -208,6 +220,10 @@ var MangoIndexEditor = React.createClass({
     );
   },
 
+  setEditorValue: function (value) {
+    return this.getEditor().setValue(value);
+  },
+
   getEditorValue: function () {
     return this.refs.field.getValue();
   },
@@ -230,6 +246,7 @@ var MangoIndexEditorController = React.createClass({
     return {
       queryIndexCode: mangoStore.getQueryIndexCode(),
       database: mangoStore.getDatabase(),
+      templates: mangoStore.getQueryIndexTemplates()
     };
   },
 
@@ -249,6 +266,10 @@ var MangoIndexEditorController = React.createClass({
     return this.refs.mangoIndexEditor;
   },
 
+  templateSelected: function(selectedItem) {
+    this.getMangoEditor().setEditorValue(selectedItem.value);
+  },
+
   render: function () {
     return (
       <MangoIndexEditor
@@ -258,6 +279,8 @@ var MangoIndexEditorController = React.createClass({
         onSubmit={this.saveIndex}
         title="Index"
         docs={getDocUrl('MANGO_INDEX')}
+        templates={this.state.templates}
+        onTemplateSelected={this.templateSelected}
         exampleCode={this.state.queryIndexCode} />
     );
   },
diff --git a/app/addons/documents/mango/mango.constants.js b/app/addons/documents/mango/mango.constants.js
new file mode 100644
index 0000000..aee1c19
--- /dev/null
+++ b/app/addons/documents/mango/mango.constants.js
@@ -0,0 +1,21 @@
+export default {
+  INDEX_TEMPLATES: [{
+    label: 'Single field (json)',
+    code: {
+	  "index": {
+	     "fields": ["foo"]
+	  },
+	  "name": "foo-json-index",
+	  "type" : "json"
+	}
+  }, {
+    label: 'Multiple fields (json)',
+    code: {
+      "index": {
+        "fields": ["foo", "bar"]
+      },
+      "name": "foo-bar-json-index",
+      "type" : "json"
+    }
+  }]
+};
diff --git a/app/addons/documents/mango/mango.stores.js b/app/addons/documents/mango/mango.stores.js
index 399a6de..c1885ad 100644
--- a/app/addons/documents/mango/mango.stores.js
+++ b/app/addons/documents/mango/mango.stores.js
@@ -14,13 +14,7 @@ import app from "../../../app";
 import FauxtonAPI from "../../../core/api";
 import ActionTypes from "./mango.actiontypes";
 import IndexActionTypes from "../index-results/actiontypes";
-
-var defaultQueryIndexCode = {
-  "index": {
-    "fields": ["_id"]
-  },
-  "type" : "json"
-};
+import constants from "./mango.constants";
 
 var defaultQueryFindCode = {
   "selector": {
@@ -36,15 +30,11 @@ Stores.MangoStore = FauxtonAPI.Store.extend({
 
   initialize: function () {
     this.setHistoryKey('default');
-    this._queryIndexCode = defaultQueryIndexCode;
+    this.queryIndexTemplates = [];
   },
 
   getQueryIndexCode: function () {
-    return this.formatCode(this._queryIndexCode);
-  },
-
-  setQueryIndexCode: function (options) {
-    this._queryIndexCode = options.code;
+    return this.getQueryIndexTemplates()[0].value;
   },
 
   getQueryFindCode: function () {
@@ -80,7 +70,7 @@ Stores.MangoStore = FauxtonAPI.Store.extend({
     this._historyKey = key + '_queryhistory';
   },
 
-  createHistoryEntry: function(queryObject) {
+  createSelectItem: function(queryObject) {
     // ensure we're working with a deserialized query object
     const object = typeof queryObject === "string" ? JSON.parse(queryObject) : queryObject;
 
@@ -90,21 +80,21 @@ Stores.MangoStore = FauxtonAPI.Store.extend({
     return {
       label: singleLineValue,
       value: multiLineValue,
-      className: 'mango-history-entry'
+      className: 'mango-select-entry'
     };
   },
 
   addQueryHistory: function (value, label) {
     var history = this.getHistory();
 
-    const historyEntry = this.createHistoryEntry(value);
+    const historyEntry = this.createSelectItem(value);
     historyEntry.label = label || historyEntry.label;
 
     // remove existing entry if it exists
     var indexOfExisting = history.findIndex(i => i.value === historyEntry.value);
     if (indexOfExisting > -1) {
       history.splice(indexOfExisting, 1);
-    }
+  }
 
     // insert item at head of array
     history.splice(0, 0, historyEntry);
@@ -118,13 +108,31 @@ Stores.MangoStore = FauxtonAPI.Store.extend({
   },
 
   getDefaultHistory: function () {
-    return [this.createHistoryEntry(defaultQueryFindCode)];
+    return [this.createSelectItem(defaultQueryFindCode)];
   },
 
   getHistory: function () {
     return app.utils.localStorageGet(this.getHistoryKey()) || this.getDefaultHistory();
   },
 
+  addQueryIndexTemplate: function (value, label) {
+    const templateItem = this.createSelectItem(value);
+    templateItem.label = label || templateItem.label;
+
+    var existing = this.queryIndexTemplates.find(i => i.value === templateItem.value);
+    if (!existing) {
+      this.queryIndexTemplates.push(templateItem);
+    }
+  },
+
+  getQueryIndexTemplates: function () {
+    if (!this.queryIndexTemplates.length) {
+      constants.INDEX_TEMPLATES.forEach(i => this.addQueryIndexTemplate(i.code, i.label));
+    }
+
+    return this.queryIndexTemplates;
+  },
+
   dispatch: function (action) {
     switch (action.type) {
 
@@ -132,8 +140,8 @@ Stores.MangoStore = FauxtonAPI.Store.extend({
         this.setDatabase(action.options);
       break;
 
-      case ActionTypes.MANGO_NEW_QUERY_CREATE_INDEX_CODE:
-        this.setQueryIndexCode(action.options);
+      case ActionTypes.MANGO_NEW_QUERY_CREATE_INDEX_TEMPLATE:
+        this.addQueryIndexTemplate(action.options.code, action.options.label);
       break;
 
       case ActionTypes.MANGO_NEW_QUERY_FIND_CODE:
@@ -151,7 +159,6 @@ Stores.MangoStore = FauxtonAPI.Store.extend({
 
     this.triggerChange();
   }
-
 });
 
 Stores.mangoStore = new Stores.MangoStore();
diff --git a/app/addons/documents/mango/tests/mango.componentsSpec.js b/app/addons/documents/mango/tests/mango.componentsSpec.js
index 4219f6f..599c794 100644
--- a/app/addons/documents/mango/tests/mango.componentsSpec.js
+++ b/app/addons/documents/mango/tests/mango.componentsSpec.js
@@ -19,37 +19,9 @@ import Databases from "../../../databases/resources";
 import utils from "../../../../../test/mocha/testUtils";
 import React from "react";
 import ReactDOM from "react-dom";
-import TestUtils from "react-addons-test-utils";
 
 var assert = utils.assert;
 
-describe('Mango IndexEditor', function () {
-  var database = new Databases.Model({id: 'testdb'}),
-      container,
-      editor;
-
-  beforeEach(function () {
-    container = document.createElement('div');
-    MangoActions.setDatabase({
-      database: database
-    });
-  });
-
-  afterEach(function () {
-    ReactDOM.unmountComponentAtNode(container);
-  });
-
-  it('renders a default index definition', function () {
-    editor = TestUtils.renderIntoDocument(
-      <Views.MangoIndexEditorController description="foo" />,
-      container
-    );
-
-    var payload = JSON.parse(editor.getMangoEditor().getEditorValue());
-    assert.equal(payload.index.fields[0], '_id');
-  });
-});
-
 describe('Mango QueryEditor', function () {
   var database = new Databases.Model({id: 'testdb'}),
       container,

-- 
To stop receiving notification emails like this one, please contact
['"commits@couchdb.apache.org" <commits@couchdb.apache.org>'].

Mime
View raw message