Landing page

(cherry picked from commit 6eafd0bda82d663504a51e51f50648c6d510b4ba)
(cherry picked from commit 26d893e)
(cherry picked from commit 1b4f75f)
(cherry picked from commit b4bd624)

superset/assets/.eslintrc

@@ -8,6 +8,7 @@
   },
   "globals": {
     "document": true,
+    "window": true,
   },
   "rules": {
     "prefer-template": 0,

superset/assets/package.json

@@ -108,6 +108,7 @@
     "react-split-pane": "^0.1.66",
     "react-sticky": "^6.0.2",
     "react-syntax-highlighter": "^7.0.4",
+    "react-tag-autocomplete": "^5.5.1",
     "react-virtualized": "9.19.1",
     "react-virtualized-select": "^2.4.0",
     "reactable": "1.0.2",
@@ -121,7 +122,8 @@
     "supercluster": "https://github.com/georgeke/supercluster/tarball/ac3492737e7ce98e07af679623aad452373bbc40",
     "underscore": "^1.8.3",
     "urijs": "^1.18.10",
-    "viewport-mercator-project": "^5.0.0"
+    "viewport-mercator-project": "^5.0.0",
+    "whatwg-fetch": "^2.0.4"
   },
   "devDependencies": {
     "babel-cli": "^6.14.0",

superset/assets/spec/javascripts/welcome/App_spec.jsx

@@ -13,10 +13,10 @@ describe('App', () => {
       React.isValidElement(<App {...mockedProps} />),
     ).to.equal(true);
   });
-  it('renders 4 Tab, Panel, and Row components', () => {
+  it('renders Tab, Panel, and Row components', () => {
     const wrapper = shallow(<App {...mockedProps} />);
-    expect(wrapper.find(Tab)).to.have.length(3);
-    expect(wrapper.find(Panel)).to.have.length(3);
-    expect(wrapper.find(Row)).to.have.length(3);
+    expect(wrapper.find(Tab)).to.have.length(4);
+    expect(wrapper.find(Panel)).to.have.length(4);
+    expect(wrapper.find(Row)).to.have.length(5);
   });
 });

superset/assets/src/SqlLab/components/TemplateParamsEditor.jsx

@@ -64,8 +64,9 @@ export default class TemplateParamsEditor extends React.Component {
         Assign a set of parameters as <code>JSON</code> below
         (example: <code>{'{"my_table": "foo"}'}</code>),
         and they become available
-        in your SQL (example: <code>SELECT * FROM {'{{ my_table }}'} </code>)
-        by using&nbsp;
+        in your SQL (example: <code>SELECT * FROM {'{{ my_table }}'}</code>)
+        by using
+        {' '}
         <a
           href="http://superset.apache.org/sqllab.html#templating-with-jinja"
           target="_blank"

superset/assets/src/chart/chartAction.js

@@ -1,3 +1,4 @@
+import URI from 'urijs';
 import { getExploreUrlAndPayload, getAnnotationJsonUrl } from '../explore/exploreUtils';
 import { requiresQuery, ANNOTATION_SOURCE_TYPES } from '../modules/AnnotationTypes';
 import { Logger, LOG_ACTIONS_LOAD_CHART } from '../logger';
@@ -203,19 +204,19 @@ export function runQuery(formData, force = false, timeout = 60, key) {
 
 export function redirectSQLLab(formData) {
   return function () {
-    const { url } = getExploreUrlAndPayload({ formData, endpointType: 'query' });
+    const { url, payload } = getExploreUrlAndPayload({ formData, endpointType: 'query' });
     $.ajax({
-      type: 'GET',
+      type: 'POST',
       url,
+      data: {
+        form_data: JSON.stringify(payload),
+      },
       success: (response) => {
-        const redirectUrl = new URL(window.location);
-        redirectUrl.pathname = '/superset/sqllab';
-        for (const k of redirectUrl.searchParams.keys()) {
-          redirectUrl.searchParams.delete(k);
-        }
-        redirectUrl.searchParams.set('datasourceKey', formData.datasource);
-        redirectUrl.searchParams.set('sql', response.query);
-        window.open(redirectUrl.href, '_blank');
+        const redirectUrl = new URI(window.location);
+        redirectUrl
+          .pathname('/superset/sqllab')
+          .search({ datasourceKey: formData.datasource, sql: response.query });
+        window.open(redirectUrl.href(), '_blank');
       },
       error: () => notify.error(t("The SQL couldn't be loaded")),
     });

superset/assets/src/components/ObjectTags.css

@@ -0,0 +1,195 @@
+/**
+ * <div class="react-tags">
+ *   <div class="react-tags__selected">
+ *     <button class="react-tags__selected-tag">
+ *       <span class="react-tags__selected-tag-name" />
+ *     </button>
+ *   </div>
+ *   <div class="react-tags__search">
+ *     <div class="react-tags__search-input">
+ *       <input />
+ *       <div />
+ *     </div>
+ *     <div class="react-tags__suggestions">
+ *       <ul>
+ *         <li class="is-active">
+ *           <mark />
+ *         </li>
+ *         <li class="is-disabled">
+ *           <mark />
+ *         </li>
+ *       </ul>
+ *     </div>
+ *   </div>
+ */
+.react-tags {
+  position: relative;
+  display: inline-block;
+  padding: 1px 0 0 1px;
+  margin: 0 10px;
+  border: 1px solid #F5F5F5;
+  border-radius: 1px;
+
+  /* shared font styles */
+  font-size: 12px;
+  line-height: 1.2;
+
+  /* clicking anywhere will focus the input */
+  cursor: text;
+}
+
+.react-tags-rw {
+  display: inline-block;
+  margin: 0 10px;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+.react-tags.is-focused {
+  border-color: #F0F0F0;
+}
+
+.react-tags__selected {
+  display: inline;
+}
+
+.react-tags__selected-tag {
+  display: inline-block;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 6px 8px;
+  border: 1px solid #F5F5F5;
+  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: inline-block;
+
+  /* match tag layout */
+  padding: 7px 2px;
+  margin-bottom: 0;
+
+  /* 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 {
+  /* prevent autoresize overflowing the container */
+  max-width: 100%;
+
+  /* remove styles and layout from this element */
+  margin: 0;
+  margin-left: 2px;
+  padding: 0;
+  border: 0;
+  outline: none;
+
+  /* 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%;
+  z-index: 9999;
+}
+
+@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;
+}
+
+.react-tags span.label {
+  margin-left: 5px;
+  padding: 0.3em 0.6em 0.3em;
+}
+
+.react-tags a.deco-none {
+  color: inherit;
+  text-decoration:none;
+}
+
+.react-tags-rw span.label {
+  margin-left: 5px;
+}
+
+.react-tags-rw a.deco-none {
+  color: inherit;
+  text-decoration:none;
+}
+
+.react-tags span.glyphicon {
+  cursor: pointer;
+  margin-left: 3px;
+  top: 2px;
+}