Migrate Query Source page to React: metadata, schedule and description blocks

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

@@ -34,7 +34,9 @@ body.fixed-layout {
   display: flex;
   align-items: center;
 
-  button, div, span {
+  button,
+  div,
+  span {
     position: relative;
   }
 
@@ -44,7 +46,7 @@ body.fixed-layout {
   }
 
   &:before {
-    content: '';
+    content: "";
     height: 50px;
     position: fixed;
     bottom: 0;
@@ -55,7 +57,7 @@ body.fixed-layout {
 }
 
 .p-b-60 {
- padding-bottom: 60px !important;
+  padding-bottom: 60px !important;
 }
 
 .bottom-controller-container {
@@ -69,14 +71,16 @@ body.fixed-layout {
   margin: 0 10px;
 }
 
-.bottom-controller, .bottom-controller-container {
+.bottom-controller,
+.bottom-controller-container {
   .query-metadata__property {
     margin-right: 5px;
   }
 }
 
 // Editor
-edit-in-place p, span.editable {
+edit-in-place p,
+span.editable {
   display: inline-block;
 }
 
@@ -126,7 +130,6 @@ edit-in-place p.editable:hover {
   }
 
   ._query-metadata__time {
-
   }
 }
 
@@ -139,7 +142,7 @@ edit-in-place p.editable:hover {
 
 .editor__left {
   height: 100% !important;
-  width: calc(~'25% - 10px');
+  width: calc(~"25% - 10px");
   margin-right: 10px;
 
   .form-control {
@@ -171,7 +174,6 @@ edit-in-place p.editable:hover {
 }
 
 .embed__vis {
-
 }
 
 .query__vis {
@@ -256,7 +258,8 @@ a.label-tag {
   display: flex;
   width: 100vw;
 
-  .tile, .tiled {
+  .tile,
+  .tiled {
     box-shadow: none;
     padding: 15px 0 !important;
   }
@@ -282,14 +285,17 @@ a.label-tag {
       border-top: 1px solid #efefef;
     }
 
-    .query-metadata, .editor__left__schema, .editor__left__data-source {
+    .query-metadata,
+    .editor__left__schema,
+    .editor__left__data-source {
       padding: 15px;
     }
 
     .editor__left__data-source {
       .ant-select {
         .ant-select-selection-selected-value {
-          img, span {
+          img,
+          span {
             vertical-align: middle;
           }
         }
@@ -381,7 +387,10 @@ a.label-tag {
       transition: none !important;
     }
   }
-  .rg-right, .rg-left, .rg-top, .rg-bottom {
+  .rg-right,
+  .rg-left,
+  .rg-top,
+  .rg-bottom {
     display: block;
     width: 10px;
     height: 10px;
@@ -396,32 +405,34 @@ a.label-tag {
       border: 1px solid #ccc;
     }
   }
-  .rg-right, .rg-left {
+  .rg-right,
+  .rg-left {
     span {
       border-width: 0 1px;
       top: 50%;
-      margin: -10px 0 0 @spacing/4;
+      margin: -10px 0 0 @spacing / 4;
       height: 20px;
       width: 3px;
     }
   }
-  .rg-top, .rg-bottom {
+  .rg-top,
+  .rg-bottom {
     span {
       border-width: 1px 0;
       left: 50%;
-      margin: @spacing/4 0 0 -10px;
+      margin: @spacing / 4 0 0 -10px;
       width: 20px;
       height: 3px;
     }
   }
-  .rg-top     {
+  .rg-top {
     cursor: row-resize;
     width: 100%;
     top: 0;
     left: 0;
-    margin-top: -@spacing/2;
+    margin-top: -@spacing / 2;
   }
-  .rg-right   {
+  .rg-right {
     cursor: col-resize;
     border-right: 1px solid #efefef;
     height: 100%;
@@ -433,7 +444,7 @@ a.label-tag {
       background: fade(@redash-gray, 6%);
     }
   }
-  .rg-bottom  {
+  .rg-bottom {
     cursor: row-resize;
     background: #fff;
     width: 100%;
@@ -445,7 +456,7 @@ a.label-tag {
       background: fade(@redash-gray, 6%);
     }
   }
-  .rg-left    {
+  .rg-left {
     cursor: col-resize;
     height: 100%;
     left: 0;
@@ -462,7 +473,6 @@ a.label-tag {
   display: none;
 }
 
-
 // Visualization editor
 .modal-xl .modal-content {
   border: none;
@@ -547,7 +557,15 @@ nav .rg-bottom {
 }
 
 .edit-visualization {
-    margin-right: 5px;
+  margin-right: 5px;
+}
+
+@media (min-width: 880px) {
+  .query-fullscreen {
+    .query-metadata-new.query-metadata-horizontal {
+      display: none;
+    }
+  }
 }
 
 // Smaller screens
@@ -657,7 +675,8 @@ nav .rg-bottom {
 }
 
 @media (max-width: 768px) {
-  .editor__left__schema, .editor__left__data-source {
+  .editor__left__schema,
+  .editor__left__data-source {
     display: none;
   }
 

client/app/components/queries/SchedulePhrase.jsx

@@ -12,11 +12,13 @@ export class SchedulePhrase extends React.Component {
     schedule: RefreshScheduleType,
     isNew: PropTypes.bool.isRequired,
     isLink: PropTypes.bool,
+    onClick: PropTypes.func,
   };
 
   static defaultProps = {
     schedule: RefreshScheduleDefault,
     isLink: false,
+    onClick: () => {},
   };
 
   get content() {
@@ -49,7 +51,13 @@ export class SchedulePhrase extends React.Component {
     const [short, full] = this.content;
     const content = full ? <Tooltip title={full}>{short}</Tooltip> : short;
 
-    return this.props.isLink ? <a className="schedule-phrase">{content}</a> : content;
+    return this.props.isLink ? (
+      <a className="schedule-phrase" onClick={this.props.onClick}>
+        {content}
+      </a>
+    ) : (
+      content
+    );
   }
 }
 

client/app/pages/queries/QuerySource.jsx

@@ -1,16 +1,18 @@
-import { isEmpty, extend, filter, find, map, includes, reduce } from "lodash";
+import { isEmpty, isArray, filter, find, map, extend, reduce, includes, intersection } from "lodash";
 import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
 import PropTypes from "prop-types";
 import { react2angular } from "react2angular";
 import { useDebouncedCallback } from "use-debounce";
 import Select from "antd/lib/select";
 import { Parameters } from "@/components/Parameters";
+import { EditInPlace } from "@/components/EditInPlace";
 import { EditVisualizationButton } from "@/components/EditVisualizationButton";
 import { QueryControlDropdown } from "@/components/EditVisualizationButton/QueryControlDropdown";
 import QueryEditor from "@/components/queries/QueryEditor";
 import { TimeAgo } from "@/components/TimeAgo";
 import EmbedQueryDialog from "@/components/queries/EmbedQueryDialog";
 import AddToDashboardDialog from "@/components/queries/AddToDashboardDialog";
+import ScheduleDialog from "@/components/queries/ScheduleDialog";
 import EditParameterSettingsDialog from "@/components/EditParameterSettingsDialog";
 import { routesToAngularRoutes } from "@/lib/utils";
 import { durationHumanize, prettySize } from "@/filters";
@@ -20,9 +22,12 @@ import { DataSource, SCHEMA_NOT_SUPPORTED } from "@/services/data-source";
 import notification from "@/services/notification";
 import recordEvent from "@/services/recordEvent";
 import navigateTo from "@/services/navigateTo";
+import { policy } from "@/services/policy";
+import { clientConfig } from "@/services/auth";
 import localOptions from "@/lib/localOptions";
 
 import QueryPageHeader from "./components/QueryPageHeader";
+import QueryMetadata from "./components/QueryMetadata";
 import QueryVisualizationTabs from "./components/QueryVisualizationTabs";
 import QueryExecutionStatus from "./components/QueryExecutionStatus";
 import SchemaBrowser from "./components/SchemaBrowser";
@@ -225,6 +230,31 @@ function QuerySource(props) {
     [query]
   );
 
+  const editSchedule = useCallback(() => {
+    const canScheduleQuery = true; // TODO: Use real value
+    if (!query.can_edit || !canScheduleQuery) {
+      return;
+    }
+
+    const intervals = clientConfig.queryRefreshIntervals;
+    const allowedIntervals = policy.getQueryRefreshIntervals();
+    const refreshOptions = isArray(allowedIntervals) ? intersection(intervals, allowedIntervals) : intervals;
+
+    ScheduleDialog.showModal({
+      schedule: query.schedule,
+      refreshOptions,
+    }).result.then(schedule => {
+      updateQuery(query, { schedule }).then(setQuery);
+    });
+  }, [query]);
+
+  const updateQueryDescription = useCallback(
+    description => {
+      updateQuery(query, { description }).then(setQuery);
+    },
+    [query]
+  );
+
   const openAddNewParameterDialog = useCallback(() => {
     EditParameterSettingsDialog.showModal({
       parameter: {
@@ -300,6 +330,22 @@ function QuerySource(props) {
           <div className="editor__left__schema">
             <SchemaBrowser schema={schema} onRefresh={() => reloadSchema(true)} onItemSelect={handleSchemaItemSelect} />
           </div>
+
+          {!query.isNew() && (
+            <div className="query-metadata query-metadata--description">
+              <EditInPlace
+                editor="textarea"
+                isEditable={query.can_edit}
+                markdown
+                ignoreBlanks={false}
+                placeholder="Add description"
+                value={query.description}
+                onDone={updateQueryDescription}
+              />
+            </div>
+          )}
+
+          {!query.isNew() && <QueryMetadata layout="table" query={query} onEditSchedule={editSchedule} />}
         </nav>
 
         <div className="content">
@@ -368,6 +414,8 @@ function QuerySource(props) {
                 </section>
               </div>
 
+              {!query.isNew() && <QueryMetadata layout="horizontal" query={query} onEditSchedule={editSchedule} />}
+
               <section className="flex-fill p-relative t-body query-visualizations-wrapper">
                 <div
                   className="d-flex flex-column p-b-15 p-absolute static-position__mobile"