Migrate Query pages to React: cleanup

client/app/assets/less/main.less

@@ -6,8 +6,6 @@
 
 /** Load Vendors Dependencies **/
 @import '~font-awesome/less/font-awesome';
-@import '~ui-select/dist/select.css';
-@import '~angular-resizable/src/angular-resizable.css';
 @import '~material-design-iconic-font/dist/css/material-design-iconic-font.css';
 @import '~pace-progress/themes/blue/pace-theme-minimal.css';
 
@@ -35,7 +33,6 @@
 @import 'inc/alert';
 @import 'inc/media';
 @import 'inc/modal';
-@import 'inc/tab';
 @import 'inc/panel';
 @import 'inc/tooltips';
 @import 'inc/popover';

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

@@ -17,17 +17,6 @@ body.fixed-layout {
   }
 }
 
-.tab-nav .tab-new-vis {
-  margin: 0 5px;
-
-  > a {
-    color: @headings-color;
-    margin-top: 8px;
-    padding: 7px;
-    font-weight: 400;
-  }
-}
-
 .bottom-controller {
   padding: 10px 15px;
   background: #fff;
@@ -358,10 +347,6 @@ a.label-tag {
     .visualization-renderer > .visualization-renderer-wrapper {
       overflow: visible;
     }
-
-    .tab-nav {
-      flex-shrink: 0;
-    }
   }
   .row {
     background: #fff;
@@ -615,10 +600,6 @@ nav .rg-bottom {
     display: none;
   }
 
-  .tab-nav .tab-new-vis {
-    display: none;
-  }
-
   .query-fullscreen {
     flex-direction: column;
     overflow: hidden;

client/app/components/EditInPlace.jsx

@@ -1,11 +1,10 @@
+import { trim } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
-import { react2angular } from "react2angular";
-import { trim } from "lodash";
 import Input from "antd/lib/input";
 
-export class EditInPlace extends React.Component {
+export default class EditInPlace extends React.Component {
   static propTypes = {
     ignoreBlanks: PropTypes.bool,
     isEditable: PropTypes.bool,
@@ -95,9 +94,3 @@ export class EditInPlace extends React.Component {
     );
   }
 }
-
-export default function init(ngModule) {
-  ngModule.component("editInPlace", react2angular(EditInPlace));
-}
-
-init.init = true;

client/app/components/EditParameterSettingsDialog.jsx

@@ -9,7 +9,7 @@ import Select from "antd/lib/select";
 import Input from "antd/lib/input";
 import Divider from "antd/lib/divider";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
-import { QuerySelector } from "@/components/QuerySelector";
+import QuerySelector from "@/components/QuerySelector";
 import { Query } from "@/services/query";
 
 const { Option } = Select;

client/app/components/EditVisualizationButton/QueryControlDropdown.jsx

@@ -4,11 +4,10 @@ import Dropdown from "antd/lib/dropdown";
 import Menu from "antd/lib/menu";
 import Button from "antd/lib/button";
 import Icon from "antd/lib/icon";
-import { react2angular } from "react2angular";
 
 import QueryResultsLink from "./QueryResultsLink";
 
-export function QueryControlDropdown(props) {
+export default function QueryControlDropdown(props) {
   const menu = (
     <Menu>
       {!props.query.isNew() && (!props.query.is_draft || !props.query.is_archived) && (
@@ -87,9 +86,3 @@ QueryControlDropdown.defaultProps = {
   apiKey: "",
   selectedTab: "",
 };
-
-export default function init(ngModule) {
-  ngModule.component("queryControlDropdown", react2angular(QueryControlDropdown));
-}
-
-init.init = true;

client/app/components/EditVisualizationButton/index.jsx

@@ -2,9 +2,8 @@ import React from "react";
 import PropTypes from "prop-types";
 import Button from "antd/lib/button";
 import Icon from "antd/lib/icon";
-import { react2angular } from "react2angular";
 
-export function EditVisualizationButton(props) {
+export default function EditVisualizationButton(props) {
   return (
     <Button
       data-test="EditVisualization"
@@ -24,9 +23,3 @@ EditVisualizationButton.propTypes = {
 EditVisualizationButton.defaultProps = {
   selectedTab: "",
 };
-
-export default function init(ngModule) {
-  ngModule.component("editVisualizationButton", react2angular(EditVisualizationButton));
-}
-
-init.init = true;

client/app/components/FavoritesControl.jsx

@@ -1,22 +1,17 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { react2angular } from "react2angular";
 import { $rootScope } from "@/services/ng";
 
-export class FavoritesControl extends React.Component {
+export default 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
   };
 
   static defaultProps = {
     onChange: () => {},
-    forceUpdate: "",
   };
 
   toggleItem(event, item, callback) {
@@ -45,33 +40,3 @@ export class FavoritesControl extends React.Component {
     );
   }
 }
-
-export default function init(ngModule) {
-  ngModule.component("favoritesControlImpl", react2angular(FavoritesControl));
-  ngModule.component("favoritesControl", {
-    template: `
-      <favorites-control-impl 
-        ng-if="$ctrl.item" 
-        item="$ctrl.item" 
-        on-change="$ctrl.onChange"
-        force-update="$ctrl.forceUpdateTag"
-      ></favorites-control-impl>
-    `,
-    bindings: {
-      item: "=",
-    },
-    controller($scope) {
-      // See comment for FavoritesControl.propTypes.forceUpdate
-      this.forceUpdateTag = "force" + Date.now();
-      $scope.$on("reloadFavorites", () => {
-        this.forceUpdateTag = "force" + Date.now();
-      });
-
-      this.onChange = () => {
-        $scope.$applyAsync();
-      };
-    },
-  });
-}
-
-init.init = true;

client/app/components/Filters.jsx

@@ -3,7 +3,7 @@ import moment from "moment";
 import React from "react";
 import PropTypes from "prop-types";
 import Select from "antd/lib/select";
-import { formatColumnValue } from "@/filters";
+import { formatColumnValue } from "@/lib/utils";
 
 const ALL_VALUES = "###Redash::Filters::SelectAll###";
 const NONE_VALUES = "###Redash::Filters::Clear###";

client/app/components/NoTaggedObjectsFound.jsx

@@ -1,10 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { react2angular } from "react2angular";
 import BigMessage from "@/components/BigMessage";
 import { TagsControl } from "@/components/tags-control/TagsControl";
 
-export function NoTaggedObjectsFound({ objectType, tags }) {
+export default function NoTaggedObjectsFound({ objectType, tags }) {
   return (
     <BigMessage icon="fa-tags">
       No {objectType} found tagged with&nbsp;
@@ -17,9 +16,3 @@ NoTaggedObjectsFound.propTypes = {
   objectType: PropTypes.string.isRequired,
   tags: PropTypes.oneOfType([PropTypes.array, PropTypes.objectOf(Set)]).isRequired,
 };
-
-export default function init(ngModule) {
-  ngModule.component("noTaggedObjectsFound", react2angular(NoTaggedObjectsFound));
-}
-
-init.init = true;