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

@@ -36,7 +36,10 @@ 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/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";
 
@@ -67,7 +66,7 @@ export function filterData(rows, filters = []) {
   return result;
 }
 
-export function Filters({ filters, onChange }) {
+function Filters({ filters, onChange }) {
   if (filters.length === 0) {
     return null;
   }
@@ -138,8 +137,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";
@@ -242,8 +241,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

@@ -124,7 +124,7 @@ function VisualizationWidgetFooter({ widget, isPublic, onRefresh, onExpand }) {
     }
   };
 
-  return (
+  return widgetQueryResult ? (
     <>
       <span>
         {!isPublic && !!widgetQueryResult && (
@@ -158,7 +158,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

@@ -104,7 +104,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";