Migrate Dashboards/Queries/Users list pages to React

client/app/assets/less/ant.less

@@ -13,6 +13,7 @@
 @import '~antd/lib/radio/style/index';
 @import '~antd/lib/time-picker/style/index';
 @import '~antd/lib/pagination/style/index';
+@import '~antd/lib/table/style/index';
 @import 'inc/ant-variables';
 
 // Remove bold in labels for Ant checkboxes and radio buttons
@@ -135,3 +136,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/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)}
             >

client/app/components/queries/SchedulePhrase.jsx

@@ -7,7 +7,7 @@ import { RefreshScheduleType, RefreshScheduleDefault } from '../proptypes';
 
 import './ScheduleDialog.css';
 
-class SchedulePhrase extends React.Component {
+export class SchedulePhrase extends React.Component {
   static propTypes = {
     schedule: RefreshScheduleType,
     isNew: PropTypes.bool.isRequired,

client/app/config/index.js

@@ -103,7 +103,7 @@ function registerVisualizations() {
 }
 
 function registerPages() {
-  const context = require.context('@/pages', true, /^((?![\\/.]test[\\./]).)*\.js$/);
+  const context = require.context('@/pages', true, /^((?![\\/.]test[\\./]).)*\.jsx?$/);
   const routesCollection = registerAll(context);
   routesCollection.forEach((routes) => {
     ngModule.config(($routeProvider) => {

client/app/filters/datetime.js

@@ -1,21 +1,22 @@
 import moment from 'moment';
+import { clientConfig } from '@/services/auth';
 
-export default function init(ngModule) {
-  ngModule.filter('toMilliseconds', () => value => value * 1000.0);
-
-  ngModule.filter('dateTime', clientConfig => function dateTime(value) {
-    if (!value) {
-      return '';
-    }
+export function formatDateTime(value) {
+  if (!value) {
+    return '';
+  }
 
-    const parsed = moment(value);
+  const parsed = moment(value);
+  if (!parsed.isValid()) {
+    return '-';
+  }
 
-    if (!parsed.isValid()) {
-      return '-';
-    }
+  return parsed.format(clientConfig.dateTimeFormat);
+}
 
-    return parsed.format(clientConfig.dateTimeFormat);
-  });
+export default function init(ngModule) {
+  ngModule.filter('toMilliseconds', () => value => value * 1000.0);
+  ngModule.filter('dateTime', () => formatDateTime);
 }
 
 init.init = true;

client/app/lib/list-ctrl.js

@@ -1,9 +1,11 @@
 import { bind } from 'lodash';
 import $ from 'jquery';
 import { LivePaginator } from '@/lib/pagination';
+import { $location } from '@/services/ng';
+import { currentUser, clientConfig } from '@/services/auth';
 
 export default class ListCtrl {
-  constructor($scope, $location, currentUser, clientConfig, defaultOrder = '-created_at') {
+  constructor($scope, currentPage, resource, defaultOrder = '-created_at') {
     this.searchTerm = $location.search().q || '';
 
     this.page = parseInt($location.search().page || 1, 10);
@@ -20,10 +22,8 @@ export default class ListCtrl {
     }
     this.defaultOptions = {};
 
-    // use $parent because we're using a component as route target instead of controller;
-    // $parent refers to scope created for the page by router
-    this.resource = $scope.$parent.$resolve.resource;
-    this.currentPage = $scope.$parent.$resolve.currentPage;
+    this.currentPage = currentPage;
+    this.resource = resource;
     this.currentUser = currentUser;
 
     this.showEmptyState = false;

client/app/lib/pagination/live-paginator.js

@@ -1,3 +1,5 @@
+import { isBoolean } from 'lodash';
+
 export default class LivePaginator {
   constructor(rowsFetcher, {
     page = 1, itemsPerPage = 20, orderByField, orderByReverse = false,
@@ -6,7 +8,7 @@ export default class LivePaginator {
     this.itemsPerPage = itemsPerPage;
     this.totalCount = 0;
     this.orderByField = orderByField;
-    this.orderByReverse = orderByReverse;
+    this.orderByReverse = !!orderByReverse;
     this.rowsFetcher = rowsFetcher;
     this.fetchPage(page);
   }
@@ -19,7 +21,7 @@ export default class LivePaginator {
     if (pageOrder) {
       this.orderByField = pageOrder;
     }
-    if (pageOrderReverse) {
+    if (isBoolean(pageOrderReverse)) {
       this.orderByReverse = pageOrderReverse;
     }
     if (pageSize) {