Migrate Dashboard and Public Dashboard to React

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

@@ -234,10 +234,6 @@ text.slicetext {
 }
 
 // page
-.page-header--new .btn-favourite, .page-header--new .btn-archive {
-    font-size: 19px;
-  }
-
   .page-title {
     display: flex;
     align-items: center;
@@ -251,23 +247,10 @@ text.slicetext {
       display: inline-block;
     }
 
-    favorites-control {
+    .favorites-control {
+      font-size: 19px;
       margin-right: 5px;
     }
-
-    @media (max-width: 767px) {
-      display: block;
-
-      favorites-control {
-        float: left;
-      }
-
-      h3 {
-        width: 100%;
-        margin-bottom: 5px !important;
-        display: block !important;
-      }
-    }
   }
 
   .page-header-wrapper, .page-header--new {

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

@@ -246,6 +246,17 @@ edit-in-place p.editable:hover {
     margin-left: 15px;
     margin-right: 15px;
   }
+
+  .tags-control a {
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  &:hover {
+    .tags-control a {
+      opacity: 1;
+    }
+  }
 }
 
 a.label-tag {

client/app/components/BigMessage.jsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { react2angular } from 'react2angular';
 
-export function BigMessage({ message, icon, children, className }) {
+function BigMessage({ message, icon, children, className }) {
   return (
     <div className={'p-15 text-center ' + className}>
       <h3 className="m-t-0 m-b-0">
@@ -28,8 +27,4 @@ BigMessage.defaultProps = {
   className: 'tiled bg-white',
 };
 
-export default function init(ngModule) {
-  ngModule.component('bigMessage', react2angular(BigMessage));
-}
-
-init.init = true;
+export default BigMessage;

client/app/components/FavoritesControl.jsx

@@ -38,7 +38,7 @@ export class FavoritesControl extends React.Component {
     return (
       <a
         title={title}
-        className="btn-favourite"
+        className="favorites-control btn-favourite"
         onClick={event => this.toggleItem(event, item, onChange)}
       >
         <i className={icon} aria-hidden="true" />

client/app/components/Filters.jsx

@@ -2,7 +2,6 @@ import { isArray, indexOf, get, map, includes, every, some, toNumber } from 'lod
 import moment from 'moment';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { react2angular } from 'react2angular';
 import Select from 'antd/lib/select';
 import { formatColumnValue } from '@/filters';
 
@@ -71,7 +70,7 @@ export function filterData(rows, filters = []) {
   return result;
 }
 
-export function Filters({ filters, onChange }) {
+function Filters({ filters, onChange }) {
   if (filters.length === 0) {
     return null;
   }
@@ -133,8 +132,4 @@ Filters.defaultProps = {
   onChange: () => {},
 };
 
-export default function init(ngModule) {
-  ngModule.component('filters', react2angular(Filters));
-}
-
-init.init = true;
+export default Filters;

client/app/components/HelpTrigger.jsx

@@ -5,7 +5,7 @@ import cx from 'classnames';
 import Tooltip from 'antd/lib/tooltip';
 import Drawer from 'antd/lib/drawer';
 import Icon from 'antd/lib/icon';
-import { BigMessage } from '@/components/BigMessage';
+import BigMessage from '@/components/BigMessage';
 import DynamicComponent from '@/components/DynamicComponent';
 
 import './HelpTrigger.less';

client/app/components/NoTaggedObjectsFound.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
-import { BigMessage } from '@/components/BigMessage';
+import BigMessage from '@/components/BigMessage';
 import { TagsControl } from '@/components/tags-control/TagsControl';
 
 export function NoTaggedObjectsFound({ objectType, tags }) {

client/app/components/SelectItemsDialog.jsx

@@ -7,7 +7,7 @@ import Input from 'antd/lib/input';
 import List from 'antd/lib/list';
 import Button from 'antd/lib/button';
 import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
-import { BigMessage } from '@/components/BigMessage';
+import BigMessage from '@/components/BigMessage';
 
 import LoadingState from '@/components/items-list/components/LoadingState';
 import notification from '@/services/notification';

client/app/components/dashboards/DashboardGrid.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { chain, cloneDeep, find } from 'lodash';
-import { react2angular } from 'react2angular';
 import cx from 'classnames';
 import { Responsive, WidthProvider } from 'react-grid-layout';
 import { VisualizationWidget, TextboxWidget, RestrictedWidget } from '@/components/dashboards/dashboard-widget';
@@ -231,8 +230,4 @@ class DashboardGrid extends React.Component {
   }
 }
 
-export default function init(ngModule) {
-  ngModule.component('dashboardGrid', react2angular(DashboardGrid));
-}
-
-init.init = true;
+export default DashboardGrid;

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

@@ -1,3 +1,118 @@
+.dashboard-wrapper {
+  flex-grow: 1;
+  margin-bottom: 70px;
+
+  .layout {
+    margin: -15px -15px 0;
+  }
+
+  .tile {
+    display: flex;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: auto;
+    height: auto;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+  }
+
+  .pivot-table-visualization-container > table,
+  .visualization-renderer > .visualization-renderer-wrapper {
+    overflow: visible;
+  }
+
+  &.preview-mode {
+    .widget-menu-regular {
+      display: block;
+    }
+    .widget-menu-remove {
+      display: none;
+    }
+  }
+
+  &.editing-mode {
+    /* Y axis lines */
+    background: linear-gradient(to right, transparent, transparent 1px, #F6F8F9 1px, #F6F8F9), linear-gradient(to bottom, #B3BABF, #B3BABF 1px, transparent 1px, transparent);
+    background-size: 5px 50px;
+    background-position-y: -8px;
+
+    /* X axis lines */
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 85px;
+      right: 15px;
+      background: linear-gradient(to bottom, transparent, transparent 2px, #F6F8F9 2px, #F6F8F9 5px), linear-gradient(to left, #B3BABF, #B3BABF 1px, transparent 1px, transparent);
+      background-size: calc((100vw - 15px) / 6) 5px;
+      background-position: -7px 1px;
+    }
+  }
+
+  .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;
+    }
+
+    .scrollbox {
+      overflow-y: hidden;
+    }
+  }
+}
+
 .react-grid-layout {
   &.disable-animations {
     & > .react-grid-item {

client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx

@@ -123,10 +123,10 @@ function VisualizationWidgetFooter({ widget, isPublic, onRefresh, onExpand }) {
     }
   };
 
-  return (
+  return widgetQueryResult ? (
     <>
       <span>
-        {(!isPublic && !!widgetQueryResult) && (
+        {!isPublic && (
           <a
             className="refresh-button hidden-print btn btn-sm btn-default btn-transparent"
             onClick={() => refreshWidget(1)}
@@ -162,7 +162,7 @@ function VisualizationWidgetFooter({ widget, isPublic, onRefresh, onExpand }) {
         </a>
       </span>
     </>
-  );
+  ) : null;
 }
 
 VisualizationWidgetFooter.propTypes = {

client/app/components/items-list/components/EmptyState.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BigMessage } from '@/components/BigMessage';
+import BigMessage from '@/components/BigMessage';
 
 // Default "list empty" message for list pages
 export default function EmptyState(props) {

client/app/components/items-list/components/LoadingState.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BigMessage } from '@/components/BigMessage';
+import BigMessage from '@/components/BigMessage';
 
 // Default "loading" message for list pages
 export default function LoadingState(props) {

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

@@ -94,7 +94,6 @@ export const DashboardTagsControl = modelTagsControl({
 
 export default function init(ngModule) {
   ngModule.component('queryTagsControl', react2angular(QueryTagsControl));
-  ngModule.component('dashboardTagsControl', react2angular(DashboardTagsControl));
 }
 
 init.init = true;

client/app/pages/dashboards/DashboardListEmptyState.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { BigMessage } from '@/components/BigMessage';
+import BigMessage from '@/components/BigMessage';
 import { NoTaggedObjectsFound } from '@/components/NoTaggedObjectsFound';
 import EmptyState from '@/components/empty-state/EmptyState';