Migrate Dashboards/Queries/Users list pages to React

client/app/assets/less/ant.less

@@ -140,3 +140,35 @@
     }
   }
 }
+
+// Table
+
+.@{table-prefix-cls} {
+  color: inherit;
+
+  * {
+    transition: none !important;
+  }
+
+  &-thead > tr > th {
+    padding: @table-padding-vertical * 2 @table-padding-horizontal;
+  }
+
+  .@{table-prefix-cls}-column-sorters {
+    &:before,
+    &:hover:before {
+      content: none;
+    }
+  }
+
+  &-thead > tr > th {
+    .@{table-prefix-cls}-column-sorter {
+      &-up,
+      &-down {
+        &.on {
+          color: @table-header-icon-active-color;
+        }
+      }
+    }
+  }
+}

client/app/assets/less/inc/ant-variables.less

@@ -50,3 +50,21 @@
 @pagination-disabled-bg:                fade(@redash-gray, 15%);
 @pagination-hover-color:                #333;
 @pagination-hover-bg:                   fade(@redash-gray, 25%);
+
+
+/* --------------------------------------------------------
+    Table
+-----------------------------------------------------------*/
+
+@table-border-radius-base: 0;
+@table-header-color: #333;
+@table-header-bg: fade(@redash-gray, 3%);
+@table-header-icon-color: fade(@text-color, 20%);
+@table-header-icon-active-color: @text-color;
+@table-header-sort-bg: @table-header-bg;
+@table-header-sort-active-bg: @table-header-bg;
+@table-header-filter-active-bg: @table-header-bg;
+@table-body-sort-bg: transparent;
+@table-row-hover-bg: fade(@redash-gray, 5%);
+@table-padding-vertical: 7px;
+@table-padding-horizontal: 10px;

client/app/assets/less/redash/redash-newstyle.less

@@ -172,12 +172,9 @@ body {
   box-shadow: inset 3px 0px 0px @brand-primary;
 }
 
-.table.table-data {
-  > tbody > tr > td {
+.table-data {
+  tbody > tr > td {
     padding-top: 5px !important;
-  }
-
-  tr:hover {
     cursor: pointer;
   }
 

client/app/components/BigMessage.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
 
-export function BigMessage({ message, icon, children }) {
+export function BigMessage({ message, icon, children, className }) {
   return (
-    <div className="tiled bg-white p-15 text-center">
+    <div className={'p-15 text-center ' + className}>
       <h3 className="m-t-0 m-b-0">
         <i className={'fa ' + icon} />
       </h3>
@@ -19,11 +19,13 @@ BigMessage.propTypes = {
   message: PropTypes.string,
   icon: PropTypes.string.isRequired,
   children: PropTypes.node,
+  className: PropTypes.string,
 };
 
 BigMessage.defaultProps = {
   message: '',
   children: null,
+  className: 'tiled bg-white',
 };
 
 export default function init(ngModule) {

client/app/components/DynamicComponent.jsx

@@ -0,0 +1,50 @@
+import { isFunction, isString } from 'lodash';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const componentsRegistry = new Map();
+const activeInstances = new Set();
+
+export function registerComponent(name, component) {
+  if (isString(name) && (name !== '')) {
+    componentsRegistry[name] = isFunction(component) ? component : null;
+    // Refresh active DynamicComponent instances which use this component
+    activeInstances.forEach((dynamicComponent) => {
+      if (dynamicComponent.props.name === name) {
+        dynamicComponent.forceUpdate();
+      }
+    });
+  }
+}
+
+export function unregisterComponent(name) {
+  registerComponent(name, null);
+}
+
+export default class DynamicComponent extends React.Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    children: PropTypes.node,
+  };
+
+  static defaultProps = {
+    children: null,
+  };
+
+  componentDidMount() {
+    activeInstances.add(this);
+  }
+
+  componentWillUnmount() {
+    activeInstances.delete(this);
+  }
+
+  render() {
+    const { name, children, ...props } = this.props;
+    const RealComponent = componentsRegistry.get(name);
+    if (!RealComponent) {
+      return null;
+    }
+    return <RealComponent {...props}>{children}</RealComponent>;
+  }
+}

client/app/components/FavoritesControl.jsx

@@ -3,48 +3,53 @@ import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
 import { $rootScope } from '@/services/ng';
 
-function toggleItem(event, item, callback) {
-  event.preventDefault();
-  event.stopPropagation();
+export class FavoritesControl extends React.Component {
+  static propTypes = {
+    item: PropTypes.shape({
+      is_favorite: PropTypes.bool.isRequired,
+    }).isRequired,
+    onChange: PropTypes.func,
+    // Force component update when `item` changes.
+    // Remove this when `react2angular` will finally go to hell
+    forceUpdate: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  };
 
-  const action = item.is_favorite ? item.$unfavorite.bind(item) : item.$favorite.bind(item);
-  const savedIsFavorite = item.is_favorite;
+  static defaultProps = {
+    onChange: () => {},
+    forceUpdate: '',
+  };
 
-  action().then(() => {
-    item.is_favorite = !savedIsFavorite;
-    $rootScope.$broadcast('reloadFavorites');
-    callback();
-  });
-}
+  toggleItem(event, item, callback) {
+    event.preventDefault();
+    event.stopPropagation();
 
-export function FavoritesControl({ item, onChange }) {
-  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
-      href="javascript:void(0)"
-      title={title}
-      className="btn-favourite"
-      onClick={event => toggleItem(event, item, onChange)}
-    >
-      <i className={icon} aria-hidden="true" />
-    </a>
-  );
-}
+    const action = item.is_favorite ? item.$unfavorite.bind(item) : item.$favorite.bind(item);
+    const savedIsFavorite = item.is_favorite;
 
-FavoritesControl.propTypes = {
-  item: PropTypes.shape({
-    is_favorite: PropTypes.bool.isRequired,
-  }).isRequired,
-  onChange: PropTypes.func,
-  // Force component update when `item` changes.
-  // Remove this when `react2angular` will finally go to hell
-  forceUpdate: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
-};
+    action().then(() => {
+      item.is_favorite = !savedIsFavorite;
+      this.forceUpdate();
+      $rootScope.$broadcast('reloadFavorites');
+      callback();
+    });
+  }
 
-FavoritesControl.defaultProps = {
-  onChange: () => {},
-};
+  render() {
+    const { item, onChange } = this.props;
+    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
+        href="javascript:void(0)"
+        title={title}
+        className="btn-favourite"
+        onClick={event => this.toggleItem(event, item, onChange)}
+      >
+        <i className={icon} aria-hidden="true" />
+      </a>
+    );
+  }
+}
 
 export default function init(ngModule) {
   ngModule.component('favoritesControlImpl', react2angular(FavoritesControl));

client/app/components/NoTaggedObjectsFound.jsx

@@ -4,7 +4,7 @@ import { react2angular } from 'react2angular';
 import { BigMessage } from '@/components/BigMessage';
 import TagsControl from '@/components/tags-control/TagsControl';
 
-function NoTaggedObjectsFound({ objectType, tags }) {
+export function NoTaggedObjectsFound({ objectType, tags }) {
   return (
     <BigMessage icon="fa-tags">
       No {objectType} found tagged with&nbsp;<TagsControl className="inline-tags-control" tags={Array.from(tags)} />.
@@ -14,7 +14,10 @@ function NoTaggedObjectsFound({ objectType, tags }) {
 
 NoTaggedObjectsFound.propTypes = {
   objectType: PropTypes.string.isRequired,
-  tags: PropTypes.objectOf(Set).isRequired,
+  tags: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.objectOf(Set),
+  ]).isRequired,
 };
 
 export default function init(ngModule) {

client/app/components/TagsList.jsx

@@ -52,7 +52,7 @@ export class TagsList extends React.Component {
     }
     this.forceUpdate();
 
-    this.props.onUpdate(this.state.selectedTags);
+    this.props.onUpdate([...this.state.selectedTags]);
   }
 
   render() {
@@ -63,6 +63,7 @@ export class TagsList extends React.Component {
           {map(allTags, tag => (
             <a
               key={tag.name}
+              href="javascript:void(0)"
               className={classNames('list-group-item', 'max-character', { active: selectedTags.has(tag.name) })}
               onClick={event => this.toggleTag(event, tag.name)}
             >