Replace $http with axios

client/app/components/EditParameterSettingsDialog.jsx

@@ -77,9 +77,7 @@ function EditParameterSettingsDialog(props) {
   useEffect(() => {
     const queryId = props.parameter.queryId;
     if (queryId) {
-      Query.get({ id: queryId }, query => {
-        setInitialQuery(query);
-      });
+      Query.get({ id: queryId }).then(setInitialQuery);
     }
   }, [props.parameter.queryId]);
 

client/app/components/QuerySelector.jsx

@@ -14,14 +14,11 @@ const { Option } = Select;
 function search(term) {
   // get recent
   if (!term) {
-    return Query.recent().$promise.then(results => {
-      const filteredResults = results.filter(item => !item.is_draft); // filter out draft
-      return Promise.resolve(filteredResults);
-    });
+    return Query.recent().then(results => results.filter(item => !item.is_draft)); // filter out draft
   }
 
   // search by query
-  return Query.query({ q: term }).$promise.then(({ results }) => Promise.resolve(results));
+  return Query.query({ q: term }).then(({ results }) => results);
 }
 
 export function QuerySelector(props) {

client/app/components/app-header/components/FavoritesDropdown.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo, useCallback, useEffect } from "react";
 import PropTypes from "prop-types";
-import { isEmpty, template } from "lodash";
+import { isEmpty, template, get } from "lodash";
 
 import Dropdown from "antd/lib/dropdown";
 import Icon from "antd/lib/icon";
@@ -18,8 +18,9 @@ export default function FavoritesDropdown({ fetch, urlTemplate }) {
   const fetchItems = useCallback(
     (showLoadingState = true) => {
       setLoading(showLoadingState);
-      fetch()
-        .$promise.then(({ results }) => {
+      const request = fetch();
+      get(request, "$promise", request)
+        .then(({ results }) => {
           setItems(results);
         })
         .finally(() => {

client/app/components/dashboards/AddWidgetDialog.jsx

@@ -36,7 +36,7 @@ class AddWidgetDialog extends React.Component {
     });
 
     if (selectedQuery) {
-      Query.get({ id: selectedQuery.id }, query => {
+      Query.get({ id: selectedQuery.id }).then(query => {
         if (query) {
           const existingParamNames = map(this.props.dashboard.getParametersDefs(), param => param.name);
           this.setState({

client/app/components/dashboards/CreateDashboardDialog.jsx

@@ -1,10 +1,11 @@
 import { trim } from "lodash";
 import React, { useRef, useState, useEffect } from "react";
+import { axios } from "@/services/axios";
 import Modal from "antd/lib/modal";
 import Input from "antd/lib/input";
 import DynamicComponent from "@/components/DynamicComponent";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
-import { $location, $http } from "@/services/ng";
+import { $location } from "@/services/ng";
 import recordEvent from "@/services/recordEvent";
 import { policy } from "@/services/policy";
 
@@ -36,7 +37,7 @@ function CreateDashboardDialog({ dialog }) {
     if (name !== "") {
       setSaveInProgress(true);
 
-      $http.post("api/dashboards", { name }).then(({ data }) => {
+      axios.post("api/dashboards", { name }).then(data => {
         dialog.close();
         $location
           .path(`/dashboard/${data.slug}`)

client/app/components/groups/CreateGroupDialog.jsx

@@ -2,7 +2,6 @@ import React from "react";
 import Modal from "antd/lib/modal";
 import Input from "antd/lib/input";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
-import { Group } from "@/services/group";
 
 class CreateGroupDialog extends React.Component {
   static propTypes = {
@@ -14,11 +13,9 @@ class CreateGroupDialog extends React.Component {
   };
 
   save = () => {
-    this.props.dialog.close(
-      new Group({
-        name: this.state.name,
-      })
-    );
+    this.props.dialog.close({
+      name: this.state.name,
+    });
   };
 
   render() {

client/app/components/groups/DeleteGroupButton.jsx

@@ -5,6 +5,7 @@ import Button from "antd/lib/button";
 import Modal from "antd/lib/modal";
 import Tooltip from "antd/lib/tooltip";
 import notification from "@/services/notification";
+import Group from "@/services/group";
 
 function deleteGroup(event, group, onGroupDeleted) {
   Modal.confirm({
@@ -14,7 +15,7 @@ function deleteGroup(event, group, onGroupDeleted) {
     okType: "danger",
     cancelText: "No",
     onOk: () => {
-      group.$delete(() => {
+      Group.delete(group).then(() => {
         notification.success("Group deleted successfully.");
         onGroupDeleted();
       });

client/app/components/groups/GroupName.jsx

@@ -2,10 +2,11 @@ import React from "react";
 import PropTypes from "prop-types";
 import { EditInPlace } from "@/components/EditInPlace";
 import { currentUser } from "@/services/auth";
+import Group from "@/services/group";
 
 function updateGroupName(group, name, onChange) {
   group.name = name;
-  group.$save();
+  Group.save(group);
   onChange();
 }
 
@@ -33,7 +34,6 @@ export default function GroupName({ group, onChange, ...props }) {
 GroupName.propTypes = {
   group: PropTypes.shape({
     name: PropTypes.string.isRequired,
-    $save: PropTypes.func.isRequired,
   }),
   onChange: PropTypes.func,
 };

client/app/components/items-list/classes/ItemsSource.js

@@ -1,4 +1,4 @@
-import { isFunction, identity, map, extend } from "lodash";
+import { isFunction, identity, map, extend, get } from "lodash";
 import Paginator from "./Paginator";
 import Sorter from "./Sorter";
 import PromiseRejectionError from "@/lib/promise-rejection-error";
@@ -156,8 +156,9 @@ export class ResourceItemsSource extends ItemsSource {
     super({
       ...rest,
       doRequest: (request, context) => {
-        const resource = getResource(context);
-        return resource(request).$promise;
+        const resource = getResource(context)(request);
+        // ANGULAR_REMOVE_ME just return resource when all Services are migrated
+        return get(resource, "$promise", resource);
       },
       processResults: (results, context) => {
         let processItem = getItemProcessor(context);

client/app/components/permissions-editor/PermissionsEditorDialog.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback } from "react";
+import { axios } from "@/services/axios";
 import PropTypes from "prop-types";
 import { each, debounce, get, find } from "lodash";
 import Button from "antd/lib/button";
@@ -8,12 +9,11 @@ import Select from "antd/lib/select";
 import Tag from "antd/lib/tag";
 import Tooltip from "antd/lib/tooltip";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
-import { $http } from "@/services/ng";
 import { toHuman } from "@/filters";
 import HelpTrigger from "@/components/HelpTrigger";
 import { UserPreviewCard } from "@/components/PreviewCard";
 import notification from "@/services/notification";
-import { User } from "@/services/user";
+import User from "@/services/user";
 
 import "./PermissionsEditorDialog.less";
 
@@ -23,7 +23,7 @@ const DEBOUNCE_SEARCH_DURATION = 200;
 function useGrantees(url) {
   const loadGrantees = useCallback(
     () =>
-      $http.get(url).then(({ data }) => {
+      axios.get(url).then(data => {
         const resultGrantees = [];
         each(data, (grantees, accessType) => {
           grantees.forEach(grantee => {
@@ -38,15 +38,15 @@ function useGrantees(url) {
 
   const addPermission = useCallback(
     (userId, accessType = "modify") =>
-      $http
+      axios
         .post(url, { access_type: accessType, user_id: userId })
         .catch(() => notification.error("Could not grant permission to the user")),
     [url]
   );
 
   const removePermission = useCallback(
     (userId, accessType = "modify") =>
-      $http
+      axios
         .delete(url, { data: { access_type: accessType, user_id: userId } })
         .catch(() => notification.error("Could not remove permission from the user")),
     [url]
@@ -57,7 +57,7 @@ function useGrantees(url) {
 
 const searchUsers = searchTerm =>
   User.query({ q: searchTerm })
-    .$promise.then(({ results }) => results)
+    .then(({ results }) => results)
     .catch(() => []);
 
 function PermissionsEditorDialogHeader({ context }) {

client/app/components/queries/QueryEditor/QueryEditorComponent.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import cx from "classnames";
 import { AceEditor, snippetsModule, updateSchemaCompleter } from "./ace";
 import resizeObserver from "@/services/resizeObserver";
-import { QuerySnippet } from "@/services/query-snippet";
+import QuerySnippet from "@/services/query-snippet";
 
 const editorProps = { $blockScrolling: Infinity };
 
@@ -91,7 +91,7 @@ const QueryEditorComponent = React.forwardRef(function(
       }
     });
 
-    QuerySnippet.query(snippets => {
+    QuerySnippet.query().then(snippets => {
       const snippetManager = snippetsModule.snippetManager;
       const m = {
         snippetText: "",

client/app/components/queries/VisualizationEmbed.jsx

@@ -20,6 +20,7 @@ import QueryResultsLink from "@/components/EditVisualizationButton/QueryResultsL
 import VisualizationName from "@/visualizations/VisualizationName";
 import { VisualizationRenderer } from "@/visualizations/VisualizationRenderer";
 import { VisualizationType } from "@/visualizations";
+import { Query } from "@/services/query";
 
 import logoUrl from "@/assets/images/redash_icon_small.png";
 
@@ -201,10 +202,10 @@ export default function init(ngModule) {
     return Auth.loadConfig();
   }
 
-  function loadQuery($route, Auth, Query) {
+  function loadQuery($route, Auth) {
     "ngInject";
 
-    return loadSession($route, Auth).then(() => Query.get({ id: $route.current.params.queryId }).$promise);
+    return loadSession($route, Auth).then(() => Query.get({ id: $route.current.params.queryId }));
   }
 
   ngModule.config($routeProvider => {

client/app/components/users/ChangePasswordDialog.jsx

@@ -3,7 +3,7 @@ import Form from "antd/lib/form";
 import Modal from "antd/lib/modal";
 import Input from "antd/lib/input";
 import { isFunction } from "lodash";
-import { User } from "@/services/user";
+import User from "@/services/user";
 import notification from "@/services/notification";
 import { UserProfile } from "../proptypes";
 import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
@@ -67,17 +67,15 @@ class ChangePasswordDialog extends React.Component {
 
           this.setState({ updatingPassword: true });
 
-          User.save(
-            userData,
-            () => {
+          User.save(userData)
+            .then(() => {
               notification.success("Saved.");
               this.props.dialog.close({ success: true });
-            },
-            (error = {}) => {
+            })
+            .catch((error = {}) => {
               notification.error((error.data && error.data.message) || "Failed saving.");
               this.setState({ updatingPassword: false });
-            }
-          );
+            });
         } else {
           this.setState(prevState => ({
             currentPassword: { ...prevState.currentPassword, touched: true },

client/app/components/users/UserEdit.jsx

@@ -5,8 +5,8 @@ import Button from "antd/lib/button";
 import Form from "antd/lib/form";
 import Modal from "antd/lib/modal";
 import Tag from "antd/lib/tag";
-import { User } from "@/services/user";
-import { Group } from "@/services/group";
+import User from "@/services/user";
+import Group from "@/services/group";
 import { currentUser } from "@/services/auth";
 import { absoluteUrl } from "@/services/utils";
 import { UserProfile } from "../proptypes";
@@ -33,7 +33,7 @@ export default class UserEdit extends React.Component {
   }
 
   componentDidMount() {
-    Group.query(groups => {
+    Group.query().then(groups => {
       this.setState({
         groups: groups.map(({ id, name }) => ({ value: id, name })),
         loadingGroups: false,
@@ -102,7 +102,7 @@ export default class UserEdit extends React.Component {
     toggleUser(user)
       .then(data => {
         if (data) {
-          this.setState({ user: User.convertUserInfo(data.data) });
+          this.setState({ user: User.convertUserInfo(data) });
         }
       })
       .finally(() => {
@@ -116,16 +116,14 @@ export default class UserEdit extends React.Component {
       ...values,
     };
 
-    User.save(
-      data,
-      user => {
+    User.save(data)
+      .then(user => {
         successCallback("Saved.");
         this.setState({ user: User.convertUserInfo(user) });
-      },
-      (error = {}) => {
+      })
+      .catch((error = {}) => {
         errorCallback((error.data && error.data.message) || "Failed saving.");
-      }
-    );
+      });
   };
 
   renderUserInfoForm() {

client/app/components/users/UserShow.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { includes } from "lodash";
 import Tag from "antd/lib/tag";
-import { Group } from "@/services/group";
+import Group from "@/services/group";
 import { UserProfile } from "../proptypes";
 
 export default class UserShow extends React.Component {
@@ -15,7 +15,7 @@ export default class UserShow extends React.Component {
   }
 
   componentDidMount() {
-    Group.query(groups => {
+    Group.query().then(groups => {
       this.setState({ groups, loadingGroups: false });
     });
   }

client/app/components/users/UserShow.test.js

@@ -1,10 +1,10 @@
 import React from "react";
 import renderer from "react-test-renderer";
-import { Group } from "@/services/group";
+import Group from "@/services/group";
 import UserShow from "./UserShow";
 
 beforeEach(() => {
-  Group.query = jest.fn(dataCallback => dataCallback([]));
+  Group.query = jest.fn().mockResolvedValue([]);
 });
 
 test("renders correctly", () => {

client/app/components/users/__snapshots__/UserShow.test.js.snap

@@ -35,7 +35,7 @@ exports[`renders correctly 1`] = `
       Groups:
     </dt>
     <dd>
-      <div />
+      Loading...
     </dd>
   </dl>
 </div>

client/app/lib/defer.js

@@ -0,0 +1,8 @@
+export default function defer() {
+  const result = {};
+  result.promise = new Promise((resolve, reject) => {
+    result.resolve = resolve;
+    result.reject = reject;
+  });
+  return result;
+}