Sync QueryView and QuerySource

client/app/assets/less/inc/base.less

@@ -261,12 +261,6 @@ text.slicetext {
       favorites-control {
         float: left;
       }
-
-      h3 {
-        width: 100%;
-        margin-bottom: 5px !important;
-        display: block !important;
-      }
     }
   }
 

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

@@ -546,7 +546,6 @@ nav .rg-bottom {
 
 .query-tags__mobile {
   display: none;
-  margin: -5px 0 0 0;
   padding: 0 0 0 23px;
 }
 

client/app/components/FavoritesControl.jsx

@@ -36,7 +36,7 @@ export class FavoritesControl extends React.Component {
     const icon = item.is_favorite ? "fa fa-star" : "fa fa-star-o";
     const title = item.is_favorite ? "Remove from favorites" : "Add to favorites";
     return (
-      <a title={title} className="btn-favourite" onClick={event => this.toggleItem(event, item, onChange)}>
+      <a title={title} className="favorites-control btn-favourite" onClick={event => this.toggleItem(event, item, onChange)}>
         <i className={icon} aria-hidden="true" />
       </a>
     );

client/app/pages/queries/QueryView.jsx

@@ -0,0 +1,110 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+import Divider from 'antd/lib/divider';
+import Button from 'antd/lib/button';
+import Icon from 'antd/lib/icon';
+import { EditInPlace } from '@/components/EditInPlace';
+import { Parameters } from '@/components/Parameters';
+import { TimeAgo } from '@/components/TimeAgo';
+import { currentUser } from '@/services/auth';
+import QueryPageHeader from './components/QueryPageHeader';
+
+import { IMG_ROOT, DataSource } from '@/services/data-source';
+import QueryVisualizationTabs from './components/QueryVisualizationTabs';
+import { EditVisualizationButton } from '@/components/EditVisualizationButton';
+import useQueryResult from '@/lib/hooks/useQueryResult';
+import { pluralize } from '@/filters';
+
+function QueryView({ query }) {
+  const canEdit = useMemo(() => (currentUser.canEdit(query) || query.can_edit), [query]);
+  const parameters = useMemo(() => query.getParametersDefs(), [query]);
+  const [dataSource, setDataSource] = useState();
+  const queryResult = useMemo(() => query.getQueryResult(), [query]);
+  const queryResultData = useQueryResult(queryResult);
+
+  useEffect(() => {
+    DataSource.get({ id: query.data_source_id }).$promise
+      .then(setDataSource);
+  }, [query]);
+  return (
+    <div className="query-page-wrapper">
+      <div className="container">
+        <QueryPageHeader query={query} />
+        <div className="query-metadata tiled bg-white p-15">
+          <EditInPlace
+            className="w-100"
+            value={query.description}
+            isEditable={canEdit}
+            editor="textarea"
+            placeholder="Add description"
+            ignoreBlanks
+          />
+          <Divider />
+          <div className="d-flex flex-wrap">
+            <div className="m-r-20 m-b-10">
+              <img src={query.user.profile_image_url} className="profile__image_thumb" alt={query.user.name} />
+              <strong>{query.user.name}</strong>
+              {' created '}
+              <TimeAgo date={query.created_at} />
+            </div>
+            <div className="m-r-20 m-b-10">
+              <img src={query.last_modified_by.profile_image_url} className="profile__image_thumb" alt={query.last_modified_by.name} />
+              <strong>{query.last_modified_by.name}</strong>
+              {' updated '}
+              <TimeAgo date={query.updated_at} />
+            </div>
+            {dataSource && (
+              <div className="m-r-20 m-b-10">
+                <img src={`${IMG_ROOT}/${dataSource.type}.png`} width="20" alt={dataSource.type} />
+                {dataSource.name}
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="query-content tiled bg-white p-15 m-t-15">
+          {query.hasParameters() && <Parameters parameters={parameters} />}
+          <QueryVisualizationTabs queryResult={queryResult} visualizations={query.visualizations} />
+          <Divider />
+          <div className="d-flex align-items-center">
+            <EditVisualizationButton />
+            <Button className="icon-button hidden-xs">
+              <Icon type="ellipsis" rotate={90} />
+            </Button>
+            <div className="flex-fill m-l-10">
+              {queryResultData && (
+                <span>
+                  <strong>{queryResultData.rows.length}</strong>{' '}
+                  {pluralize('row', queryResultData.rows.length)}
+                </span>
+              )}
+            </div>
+            <Button type="primary">Execute</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+QueryView.propTypes = { query: PropTypes.object.isRequired }; // eslint-disable-line react/forbid-prop-types
+
+export default function init(ngModule) {
+  ngModule.component('pageQueryView', react2angular(QueryView));
+
+  return {
+    '/queries-react/:queryId': {
+      template: '<page-query-view query="$resolve.query"></page-query-view>',
+      reloadOnSearch: false,
+      resolve: {
+        query: (Query, $route) => {
+          'ngInject';
+
+          return Query.get({ id: $route.current.params.queryId }).$promise;
+        },
+      },
+    },
+  };
+}
+
+init.init = true;

client/app/pages/queries/components/QueryPageHeader.jsx

@@ -5,11 +5,16 @@ import cx from 'classnames';
 import Button from 'antd/lib/button';
 import Dropdown from 'antd/lib/dropdown';
 import Menu from 'antd/lib/menu';
+import Icon from 'antd/lib/icon';
 import { EditInPlace } from '@/components/EditInPlace';
 import { FavoritesControl } from '@/components/FavoritesControl';
 import { QueryTagsControl } from '@/components/tags-control/TagsControl';
 import getTags from '@/services/getTags';
 
+function getQueryTags() {
+  return getTags('api/queries/tags').then(tags => map(tags, t => t.name));
+}
+
 function createMenu(menu) {
   const handlers = {};
 
@@ -39,8 +44,6 @@ export default function QueryPageHeader({ query, sourceMode }) {
     console.log('saveName', name);
   }
 
-  const loadTags = () => getTags('api/queries/tags').then(tags => map(tags, t => t.name));
-
   function saveTags(tags) {
     console.log('saveTags', tags);
   }
@@ -89,8 +92,8 @@ export default function QueryPageHeader({ query, sourceMode }) {
   ];
 
   return (
-    <div className="p-b-10 m-l-0 m-r-0 page-header--new page-header--query">
-      <div className="page-title p-0">
+    <div className="p-b-10 page-header--new page-header--query">
+      <div className="page-title">
         <div className="d-flex flex-nowrap align-items-center">
           {!query.isNew() && (
             <span className="m-r-5">
@@ -111,50 +114,46 @@ export default function QueryPageHeader({ query, sourceMode }) {
                 isDraft={query.is_draft}
                 isArchived={query.is_archived}
                 canEdit={query.can_edit}
-                getAvailableTags={loadTags}
+                getAvailableTags={getQueryTags}
                 onEdit={saveTags}
               />
             </span>
           </h3>
+          <span className="flex-fill" />
+          {query.is_draft && !query.isNew() && query.can_edit && (
+            <Button className="hidden-xs m-r-5" onClick={togglePublished}>
+              <i className="fa fa-paper-plane m-r-5" /> Publish
+            </Button>
+          )}
 
-          <span className="flex-fill">&nbsp;</span>
-
-          <Button.Group className="p-0 text-right text-nowrap align-self-start d-flex m-t-5">
-            {query.is_draft && !query.isNew() && query.can_edit && (
-              <Button onClick={togglePublished}>
-                <i className="fa fa-paper-plane m-r-5" /> Publish
-              </Button>
-            )}
-
-            {!query.isNew() && canViewSource && (
-              <span>
-                {!sourceMode && (
-                  <Button href={query.getUrl(true, selectedTab)}>
-                    <i className="fa fa-pencil-square-o m-r-5" aria-hidden="true" /> Edit Source
-                  </Button>
-                )}
-                {sourceMode && (
-                  <Button href={query.getUrl(false, selectedTab)} data-test="QueryPageShowDataOnly">
-                    <i className="fa fa-table m-r-5" aria-hidden="true" /> Show Data Only
-                  </Button>
-                )}
-              </span>
-            )}
+          {!query.isNew() && canViewSource && (
+            <span>
+              {!sourceMode && (
+                <Button className="m-r-5" href={query.getUrl(true, selectedTab)}>
+                  <i className="fa fa-pencil-square-o m-r-5" aria-hidden="true" /> Edit Source
+                </Button>
+              )}
+              {sourceMode && (
+                <Button className="m-r-5" href={query.getUrl(false, selectedTab)} data-test="QueryPageShowDataOnly">
+                  <i className="fa fa-table m-r-5" aria-hidden="true" /> Show Data Only
+                </Button>
+              )}
+            </span>
+          )}
 
-            {!query.isNew() && (
-              <Dropdown overlay={createMenu(moreActionsMenu)} trigger={['click']}>
-                <Button><i className="zmdi zmdi-more" /></Button>
-              </Dropdown>
-            )}
-          </Button.Group>
+          {!query.isNew() && (
+            <Dropdown overlay={createMenu(moreActionsMenu)} trigger={['click']}>
+              <Button><Icon type="ellipsis" rotate={90} /></Button>
+            </Dropdown>
+          )}
         </div>
         <span className={cx('query-tags__mobile', { 'query-tags__empty': query.tags.length === 0 })}>
           <QueryTagsControl
             tags={query.tags}
             isDraft={query.is_draft}
             isArchived={query.is_archived}
             canEdit={query.can_edit}
-            getAvailableTags={loadTags}
+            getAvailableTags={getQueryTags}
             onEdit={saveTags}
           />
         </span>

client/app/pages/queries/components/QueryVisualizationTabs.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { find, orderBy } from 'lodash';
+import Tabs from 'antd/lib/tabs';
+import { VisualizationRenderer } from '@/visualizations/VisualizationRenderer';
+import Button from 'antd/lib/button';
+
+const { TabPane } = Tabs;
+
+export default function QueryVisualizationTabs({ visualizations, queryResult, currentVisualizationId }) {
+  const tabsProps = {};
+  if (find(visualizations, { id: currentVisualizationId })) {
+    tabsProps.activeKey = `${currentVisualizationId}`;
+  }
+
+  const orderedVisualizations = orderBy(visualizations, ['id']);
+
+  return (
+    <Tabs {...tabsProps} tabBarExtraContent={(<Button><i className="fa fa-plus m-r-5" />New Visualization</Button>)}>
+      {orderedVisualizations.map(visualization => (
+        <TabPane key={`${visualization.id}`} tab={visualization.name}>
+          <VisualizationRenderer
+            visualization={visualization}
+            queryResult={queryResult}
+            context="query"
+          />
+        </TabPane>
+      ))}
+    </Tabs>
+  );
+}
+
+QueryVisualizationTabs.propTypes = {
+  queryResult: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  visualizations: PropTypes.arrayOf(PropTypes.object),
+  currentVisualizationId: PropTypes.number,
+};
+QueryVisualizationTabs.defaultProps = { queryResult: null, visualizations: [], currentVisualizationId: null };