Query View page design adjustments (#4670)

* Realign Data Source and Refresh Schedule * Adjust execution status height * Rewrite Query Page Header flexibility * Remove margin from QuerySource parameters * Cypress: Visit visualization instead of click in tab * Fix wrong css class name in dashboard-grid
getredash · Feb 24, 2020 · cdfa102 · cdfa102
1 parent 209ee16
commit cdfa102
Show file tree

Hide file tree

Showing 11 changed files with 154 additions and 117 deletions.
diff --git a/client/app/assets/less/inc/base.less b/client/app/assets/less/inc/base.less
@@ -244,18 +244,14 @@ text.slicetext {
   display: flex;
   align-items: center;
 
-  h3 {
-    margin-right: 5px !important;
-  }
-
   .label {
     margin-top: 3px;
     display: inline-block;
   }
 
   .favorites-control {
     font-size: 19px;
-    margin-right: 5px;
+    margin-right: 10px;
   }
 }
 

diff --git a/client/app/assets/less/redash/query.less b/client/app/assets/less/redash/query.less
@@ -411,12 +411,10 @@ nav .rg-bottom {
 .query-tags {
   display: inline-block;
   vertical-align: middle;
-  margin-top: -3px; // padding-top of tags
 }
 
 .query-tags__mobile {
   display: none;
-  padding: 0 0 0 23px;
 }
 
 .table--permission {
@@ -444,14 +442,6 @@ nav .rg-bottom {
 // Smaller screens
 
 @media (max-width: 880px) {
-  .query-tags:not(.query-tags__empty) {
-    display: none;
-  }
-
-  .query-tags__mobile:not(.query-tags__empty) {
-    display: block;
-  }
-
   .btn--showhide,
   .query-actions-menu .dropdown-toggle {
     margin-bottom: 5px;

diff --git a/client/app/components/dashboards/dashboard-grid.less b/client/app/components/dashboards/dashboard-grid.less
@@ -75,7 +75,7 @@
   }
 }
 
-.dashboard-grid .dashboard-widget-wrapper:not(.widget-auto-height-enabled),
+.dashboard-wrapper .dashboard-widget-wrapper:not(.widget-auto-height-enabled),
 .query-fixed-layout {
   .visualization-renderer {
     display: flex;

diff --git a/client/app/pages/dashboards/DashboardPage.less b/client/app/pages/dashboards/DashboardPage.less
@@ -47,7 +47,7 @@
     width: 16px;
     height: 16px;
     border-radius: 100%;
-    margin: 3px 5px 0 0;
+    margin: 3px 5px 0 5px;
   }
 
   .tags-control a {

diff --git a/client/app/pages/queries/QuerySource.less b/client/app/pages/queries/QuerySource.less
@@ -51,7 +51,6 @@
     margin: 15px 0 15px 0;
 
     .query-parameters-wrapper {
-      margin: 15px 0 5px 0;
       flex: 0 0 auto;
     }
 

diff --git a/client/app/pages/queries/QueryView.jsx b/client/app/pages/queries/QueryView.jsx
@@ -145,17 +145,6 @@ function QueryView(props) {
           </div>
         )}
         <div className="query-results m-t-15">
-          {(executionError || isExecuting) && (
-            <div className="query-execution-status">
-              <QueryExecutionStatus
-                status={executionStatus}
-                error={executionError}
-                isCancelling={isExecutionCancelling}
-                onCancel={cancelExecution}
-                updatedAt={updatedAt}
-              />
-            </div>
-          )}
           {loadedInitialResults && (
             <QueryVisualizationTabs
               queryResult={queryResult}
@@ -178,8 +167,8 @@ function QueryView(props) {
               }
             />
           )}
-          {queryResult && !queryResult.getError() && (
-            <div className="query-results-footer">
+          <div className="query-results-footer">
+            {queryResult && !queryResult.getError() && (
               <QueryExecutionMetadata
                 query={query}
                 queryResult={queryResult}
@@ -198,8 +187,19 @@ function QueryView(props) {
                   </QueryViewButton>
                 }
               />
-            </div>
-          )}
+            )}
+            {(executionError || isExecuting) && (
+              <div className="query-execution-status">
+                <QueryExecutionStatus
+                  status={executionStatus}
+                  error={executionError}
+                  isCancelling={isExecutionCancelling}
+                  onCancel={cancelExecution}
+                  updatedAt={updatedAt}
+                />
+              </div>
+            )}
+          </div>
         </div>
         <div className={cx("p-t-15 p-r-15 p-l-15", { hidden: fullscreen })}>
           <QueryMetadata layout="horizontal" query={query} dataSource={dataSource} onEditSchedule={editSchedule} />

diff --git a/client/app/pages/queries/QueryView.less b/client/app/pages/queries/QueryView.less
@@ -8,24 +8,33 @@ page-query-view {
 
   .query-view-content {
     .query-results {
-      position: relative;
       margin: 0px 15px 0px;
 
-      .query-execution-status {
-        position: fixed;
-        min-width: 250px;
-        bottom: 0;
-        right: 0;
-        padding: 15px;
-        z-index: 1000;
+      .query-results-footer {
+        position: relative;
 
-        @media (min-width: 768px) {
-          position: absolute;
-          padding: 5px;
+        .query-execution-status {
+          position: fixed;
+          min-width: 250px;
+          bottom: 0;
+          right: 0;
+          padding: 15px;
+          z-index: 1000;
+
+          @media (min-width: 768px) {
+            display: flex;
+            min-height: 100%;
+            position: absolute;
+            padding: 3px;
+
+            .ant-alert {
+              flex: 1 1;
+            }
+          }
         }
       }
 
-      .query-results-footer {
+      .query-execution-metadata {
         border: 1px solid #d9d9d9;
         border-top-width: 0px;
         box-sizing: border-box;

diff --git a/client/app/pages/queries/components/QueryMetadata.less b/client/app/pages/queries/components/QueryMetadata.less
@@ -54,7 +54,7 @@
     margin: 0 -5px;
     display: flex;
     flex-wrap: wrap;
-    align-items: stretch;
+    align-items: center;
     justify-content: space-between;
 
     @media (max-width: 500px) {
@@ -65,7 +65,6 @@
     }
 
     @media (min-width: 1000px) {
-      align-items: flex-start;
       justify-content: flex-start;
 
       .query-metadata-space {

diff --git a/client/app/pages/queries/components/QueryPageHeader.jsx b/client/app/pages/queries/components/QueryPageHeader.jsx
@@ -1,7 +1,6 @@
-import { extend, map, filter, reduce } from "lodash";
+import { extend, map, filter, reduce, isEmpty } from "lodash";
 import React, { useMemo } from "react";
 import PropTypes from "prop-types";
-import cx from "classnames";
 import Button from "antd/lib/button";
 import Dropdown from "antd/lib/dropdown";
 import Menu from "antd/lib/menu";
@@ -21,6 +20,8 @@ import useDuplicateQuery from "../hooks/useDuplicateQuery";
 import useApiKeyDialog from "../hooks/useApiKeyDialog";
 import usePermissionsEditorDialog from "../hooks/usePermissionsEditorDialog";
 
+import "./QueryPageHeader.less";
+
 function getQueryTags() {
   return getTags("api/queries/tags").then(tags => map(tags, t => t.name));
 }
@@ -132,74 +133,65 @@ export default function QueryPageHeader({
   );
 
   return (
-    <div className="page-header--new page-header--query">
-      <div className="page-title">
-        <div className="d-flex flex-nowrap align-items-center">
-          {!queryFlags.isNew && (
-            <span className="m-r-5">
-              <FavoritesControl item={query} />
-            </span>
-          )}
-          <h3>
-            <EditInPlace isEditable={queryFlags.canEdit} onDone={updateName} ignoreBlanks value={query.name} />
-            <span className={cx("m-l-10", "query-tags", { "query-tags__empty": query.tags.length === 0 })}>
-              <QueryTagsControl
-                tags={query.tags}
-                isDraft={queryFlags.isDraft}
-                isArchived={queryFlags.isArchived}
-                canEdit={queryFlags.canEdit}
-                getAvailableTags={getQueryTags}
-                onEdit={updateTags}
-                tagsExtra={tagsExtra}
-              />
-            </span>
-          </h3>
-          <span className="flex-fill" />
-          {headerExtra}
-          {queryFlags.isDraft && !queryFlags.isArchived && !queryFlags.isNew && queryFlags.canEdit && (
-            <Button className="hidden-xs m-r-5" onClick={publishQuery}>
-              <i className="fa fa-paper-plane m-r-5" /> Publish
-            </Button>
-          )}
-
-          {!queryFlags.isNew && queryFlags.canViewSource && (
-            <span>
-              {!sourceMode && (
-                <Button className="m-r-5" href={query.getUrl(true, selectedVisualization)}>
-                  <i className="fa fa-pencil-square-o" aria-hidden="true" />
-                  <span className="hidden-xs m-l-5">Edit Source</span>
-                </Button>
-              )}
-              {sourceMode && (
-                <Button
-                  className="m-r-5"
-                  href={query.getUrl(false, selectedVisualization)}
-                  data-test="QueryPageShowDataOnly">
-                  <i className="fa fa-table" aria-hidden="true" />
-                  <span className="hidden-xs m-l-5">Show Data Only</span>
-                </Button>
-              )}
-            </span>
-          )}
+    <div className="query-page-header">
+      <div className="title-with-tags">
+        <div className="page-title">
+          <div className="d-flex align-items-center">
+            {!queryFlags.isNew && <FavoritesControl item={query} />}
+            <h3>
+              <EditInPlace isEditable={queryFlags.canEdit} onDone={updateName} ignoreBlanks value={query.name} />
+            </h3>
+          </div>
+        </div>
+        {!isEmpty(query.tags) && (
+          <div className="query-tags">
+            <QueryTagsControl
+              tags={query.tags}
+              isDraft={queryFlags.isDraft}
+              isArchived={queryFlags.isArchived}
+              canEdit={queryFlags.canEdit}
+              getAvailableTags={getQueryTags}
+              onEdit={updateTags}
+              tagsExtra={tagsExtra}
+            />
+          </div>
+        )}
+      </div>
+      <div className="header-actions">
+        {headerExtra}
+        {queryFlags.isDraft && !queryFlags.isArchived && !queryFlags.isNew && queryFlags.canEdit && (
+          <Button className="hidden-xs m-r-5" onClick={publishQuery}>
+            <i className="fa fa-paper-plane m-r-5" /> Publish
+          </Button>
+        )}
 
-          {!queryFlags.isNew && (
-            <Dropdown overlay={moreActionsMenu} trigger={["click"]}>
-              <Button>
-                <Icon type="ellipsis" rotate={90} />
+        {!queryFlags.isNew && queryFlags.canViewSource && (
+          <span>
+            {!sourceMode && (
+              <Button className="m-r-5" href={query.getUrl(true, selectedVisualization)}>
+                <i className="fa fa-pencil-square-o" aria-hidden="true" />
+                <span className="m-l-5">Edit Source</span>
               </Button>
-            </Dropdown>
-          )}
-        </div>
-        <span className={cx("query-tags__mobile", { "query-tags__empty": query.tags.length === 0 })}>
-          <QueryTagsControl
-            tags={query.tags}
-            isDraft={queryFlags.isDraft}
-            isArchived={queryFlags.isArchived}
-            canEdit={queryFlags.canEdit}
-            getAvailableTags={getQueryTags}
-            onEdit={updateTags}
-          />
-        </span>
+            )}
+            {sourceMode && (
+              <Button
+                className="m-r-5"
+                href={query.getUrl(false, selectedVisualization)}
+                data-test="QueryPageShowDataOnly">
+                <i className="fa fa-table" aria-hidden="true" />
+                <span className="m-l-5">Show Data Only</span>
+              </Button>
+            )}
+          </span>
+        )}
+
+        {!queryFlags.isNew && (
+          <Dropdown overlay={moreActionsMenu} trigger={["click"]}>
+            <Button>
+              <Icon type="ellipsis" rotate={90} />
+            </Button>
+          </Dropdown>
+        )}
       </div>
     </div>
   );

diff --git a/client/app/pages/queries/components/QueryPageHeader.less b/client/app/pages/queries/components/QueryPageHeader.less
@@ -0,0 +1,53 @@
+.query-page-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  margin: -5px 0;
+
+  & > div {
+    padding: 5px 0;
+  }
+
+  .title-with-tags {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    flex: 1 1;
+    margin: -5px 0;
+
+    & > div {
+      padding: 5px 0;
+    }
+
+    .page-title {
+      h3 {
+        margin: 0 10px 0 0 !important;
+      }
+    }
+  }
+
+  .query-tags {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .tags-control a {
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  &:hover {
+    .tags-control a {
+      opacity: 1;
+    }
+  }
+
+  .header-actions {
+    display: flex;
+    flex-wrap: nowrap;
+
+    @media (max-width: 515px) {
+      flex-basis: 100%;
+    }
+  }
+}