Query View redesign

client/app/assets/less/redash/query.less

@@ -17,34 +17,6 @@ body.fixed-layout {
   }
 }
 
-.bottom-controller {
-  padding: 10px 15px;
-  background: #fff;
-  display: flex;
-  align-items: center;
-
-  button,
-  div,
-  span {
-    position: relative;
-  }
-
-  div:last-child {
-    flex-grow: 1;
-    text-align: right;
-  }
-
-  &:before {
-    content: "";
-    height: 50px;
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    pointer-events: none;
-    left: 0;
-  }
-}
-
 .p-b-60 {
   padding-bottom: 60px !important;
 }
@@ -153,8 +125,6 @@ body.fixed-layout {
 .page-header--query {
   .page-title {
     display: block;
-    margin-left: 15px;
-    margin-right: 15px;
   }
 
   .tags-control a {
@@ -479,13 +449,6 @@ nav .rg-bottom {
 // Smaller screens
 
 @media (max-width: 880px) {
-  .page-header--query {
-    .page-title {
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
   .query-tags:not(.query-tags__empty) {
     display: none;
   }

client/app/components/EditInPlace.jsx

@@ -11,30 +11,33 @@ export default class EditInPlace extends React.Component {
     placeholder: PropTypes.string,
     value: PropTypes.string,
     onDone: PropTypes.func.isRequired,
+    onStopEditing: PropTypes.func,
     multiline: PropTypes.bool,
     editorProps: PropTypes.object,
+    defaultEditing: PropTypes.bool,
   };
 
   static defaultProps = {
     ignoreBlanks: false,
     isEditable: true,
     placeholder: "",
     value: "",
+    onStopEditing: () => {},
     multiline: false,
     editorProps: {},
+    defaultEditing: false,
   };
 
   constructor(props) {
     super(props);
     this.state = {
-      editing: false,
+      editing: props.defaultEditing,
     };
-    this.inputRef = React.createRef();
   }
 
   componentDidUpdate(_, prevState) {
-    if (this.state.editing && !prevState.editing) {
-      this.inputRef.current.focus();
+    if (!this.state.editing && prevState.editing) {
+      this.props.onStopEditing();
     }
   }
 
@@ -62,25 +65,30 @@ export default class EditInPlace extends React.Component {
     }
   };
 
-  renderNormal = () => (
-    <span
-      role="presentation"
-      onFocus={this.startEditing}
-      onClick={this.startEditing}
-      className={this.props.isEditable ? "editable" : ""}>
-      {this.props.value || this.props.placeholder}
-    </span>
-  );
+  renderNormal = () =>
+    this.props.value ? (
+      <span
+        role="presentation"
+        onFocus={this.startEditing}
+        onClick={this.startEditing}
+        className={this.props.isEditable ? "editable" : ""}>
+        {this.props.value}
+      </span>
+    ) : (
+      <a className="clickable" onClick={this.startEditing}>
+        {this.props.placeholder}
+      </a>
+    );
 
   renderEdit = () => {
     const { multiline, value, editorProps } = this.props;
     const InputComponent = multiline ? Input.TextArea : Input;
     return (
       <InputComponent
-        ref={this.inputRef}
         defaultValue={value}
         onBlur={e => this.stopEditing(e.target.value)}
         onKeyDown={this.handleKeyDown}
+        autoFocus
         {...editorProps}
       />
     );

client/app/components/Parameters.less

@@ -1,4 +1,4 @@
-@import '../assets/less/ant';
+@import "../assets/less/ant";
 
 .parameter-block {
   display: inline-block;
@@ -20,7 +20,8 @@
   }
 
   &.parameter-dragged {
-    box-shadow:  0 4px 9px -3px rgba(102, 136, 153, 0.15);
+    z-index: 2;
+    box-shadow: 0 4px 9px -3px rgba(102, 136, 153, 0.15);
   }
 }
 
@@ -60,7 +61,7 @@
       bottom: -36px;
       left: -15px;
       border-radius: 2px;
-      z-index: 1;
+      z-index: 2;
       transition: opacity 150ms ease-out;
       box-shadow: 0 4px 9px -3px rgba(102, 136, 153, 0.15);
       background-color: #ffffff;
@@ -88,7 +89,9 @@
         height: 27px;
       }
 
-      &:hover, &:focus, &:active {
+      &:hover,
+      &:focus,
+      &:active {
         background-color: #eef7fe;
       }
 

client/app/components/dashboards/dashboard-grid.less

@@ -56,54 +56,6 @@
     }
   }
 
-  .dashboard-widget-wrapper:not(.widget-auto-height-enabled) {
-    .visualization-renderer {
-      display: flex;
-      flex-direction: column;
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-
-      > .visualization-renderer-wrapper {
-        flex-grow: 1;
-        position: relative;
-      }
-
-      > .filters-wrapper {
-        flex-grow: 0;
-      }
-    }
-
-    .sunburst-visualization-container,
-    .sankey-visualization-container,
-    .map-visualization-container,
-    .word-cloud-visualization-container,
-    .box-plot-deprecated-visualization-container,
-    .chart-visualization-container {
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      width: auto;
-      height: auto;
-      overflow: hidden;
-    }
-
-    .counter-visualization-content {
-      position: absolute;
-      left: 10px;
-      top: 15px;
-      right: 10px;
-      bottom: 15px;
-      height: auto;
-      overflow: hidden;
-      padding: 0;
-    }
-  }
-
   .widget-auto-height-enabled {
     .spinner {
       position: static;
@@ -123,6 +75,55 @@
   }
 }
 
+.dashboard-grid .dashboard-widget-wrapper:not(.widget-auto-height-enabled),
+.query-fixed-layout {
+  .visualization-renderer {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    > .visualization-renderer-wrapper {
+      flex-grow: 1;
+      position: relative;
+    }
+
+    > .filters-wrapper {
+      flex-grow: 0;
+    }
+  }
+
+  .sunburst-visualization-container,
+  .sankey-visualization-container,
+  .map-visualization-container,
+  .word-cloud-visualization-container,
+  .box-plot-deprecated-visualization-container,
+  .chart-visualization-container {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: auto;
+    height: auto;
+    overflow: hidden;
+  }
+
+  .counter-visualization-content {
+    position: absolute;
+    left: 10px;
+    top: 15px;
+    right: 10px;
+    bottom: 15px;
+    height: auto;
+    overflow: hidden;
+    padding: 0;
+  }
+}
+
 // react-grid-layout overrides
 .react-grid-item {
   // placeholder color

client/app/components/queries/QueryEditor/QueryEditorControls.jsx

@@ -9,7 +9,7 @@ import KeyboardShortcuts, { humanReadableShortcut } from "@/services/KeyboardSho
 import AutocompleteToggle from "./AutocompleteToggle";
 import "./QueryEditorControls.less";
 
-function ButtonTooltip({ title, shortcut, ...props }) {
+export function ButtonTooltip({ title, shortcut, ...props }) {
   shortcut = humanReadableShortcut(shortcut, 1); // show only primary shortcut
   title =
     title && shortcut ? (

client/app/components/tags-control/TagsControl.jsx

@@ -11,6 +11,7 @@ export class TagsControl extends React.Component {
     getAvailableTags: PropTypes.func,
     onEdit: PropTypes.func,
     className: PropTypes.string,
+    tagsExtra: PropTypes.node,
     children: PropTypes.node,
   };
 
@@ -20,6 +21,7 @@ export class TagsControl extends React.Component {
     getAvailableTags: () => Promise.resolve([]),
     onEdit: () => {},
     className: "",
+    tagsExtra: null,
     children: null,
   };
 
@@ -32,7 +34,10 @@ export class TagsControl extends React.Component {
   renderEditButton() {
     const tags = map(this.props.tags, trim);
     return (
-      <a className="label label-tag" role="none" onClick={() => this.editTags(tags, this.props.getAvailableTags)}>
+      <a
+        className="label label-tag hidden-xs"
+        role="none"
+        onClick={() => this.editTags(tags, this.props.getAvailableTags)}>
         {tags.length === 0 && (
           <React.Fragment>
             <i className="zmdi zmdi-plus m-r-5" />
@@ -54,6 +59,7 @@ export class TagsControl extends React.Component {
           </span>
         ))}
         {this.props.canEdit && this.renderEditButton()}
+        {this.props.tagsExtra}
       </div>
     );
   }

client/app/lib/getQueryResultData.js

@@ -0,0 +1,16 @@
+import { get, invoke } from "lodash";
+
+export default function getQueryResultData(queryResult) {
+  return {
+    status: invoke(queryResult, "getStatus") || null,
+    columns: invoke(queryResult, "getColumns") || [],
+    rows: invoke(queryResult, "getData") || [],
+    filters: invoke(queryResult, "getFilters") || [],
+    updatedAt: invoke(queryResult, "getUpdatedAt") || null,
+    retrievedAt: get(queryResult, "query_result.retrieved_at", null),
+    log: invoke(queryResult, "getLog") || [],
+    error: invoke(queryResult, "getError") || null,
+    runtime: invoke(queryResult, "getRuntime") || null,
+    metadata: get(queryResult, "query_result.data.metadata", {}),
+  };
+}