Replace $route/$routeParams usages

client/app/components/ApplicationArea/navigateTo.js

@@ -3,7 +3,8 @@ import { history } from "./Router";
 
 const htmlLink = document.createElement("a"); // cache instance
 
-export default function navigateTo(href) {
+// TODO: Implement `reload` option
+export default function navigateTo(href, replace = false, reload = true) {
   // do it async
   setTimeout(() => {
     // Resolve provided link and '' (root) relative to document's base.
@@ -23,6 +24,12 @@ export default function navigateTo(href) {
       return;
     }
 
-    history.push(`/${href.substr(baseHref.length)}`);
+    href = `/${href.substr(baseHref.length)}`;
+
+    if (replace) {
+      history.replace(href);
+    } else {
+      history.push(href);
+    }
   }, 10);
 }

client/app/components/ApplicationHeader/index.jsx

@@ -11,9 +11,9 @@ import Tooltip from "antd/lib/tooltip";
 
 import HelpTrigger from "@/components/HelpTrigger";
 import CreateDashboardDialog from "@/components/dashboards/CreateDashboardDialog";
+import navigateTo from "@/components/ApplicationArea/navigateTo";
 
 import { currentUser, Auth, clientConfig } from "@/services/auth";
-import { $location, $route } from "@/services/ng";
 import { Dashboard } from "@/services/dashboard";
 import { Query } from "@/services/query";
 import frontendVersion from "@/version.json";
@@ -23,8 +23,8 @@ import FavoritesDropdown from "./FavoritesDropdown";
 import "./index.less";
 
 function onSearch(q) {
-  $location.path("/queries").search({ q });
-  $route.reload();
+  // TODO: Does not work, needs to be fixed
+  navigateTo(`/queries?q=${encodeURIComponent(q)}`);
 }
 
 function DesktopNavbar() {

client/app/components/dashboards/CreateDashboardDialog.jsx

@@ -4,7 +4,8 @@ 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 navigateTo from "@/components/ApplicationArea/navigateTo";
+import { $http } from "@/services/ng";
 import recordEvent from "@/services/recordEvent";
 import { policy } from "@/services/policy";
 
@@ -38,10 +39,7 @@ function CreateDashboardDialog({ dialog }) {
 
       $http.post("api/dashboards", { name }).then(({ data }) => {
         dialog.close();
-        $location
-          .path(`/dashboard/${data.slug}`)
-          .search("edit")
-          .replace();
+        navigateTo(`/dashboard/${data.slug}?edit`, true);
       });
       recordEvent("create", "dashboard");
     }

client/app/index.js

@@ -1,17 +1,11 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import ngModule from "@/config";
 import ApplicationArea from "@/components/ApplicationArea";
 
-ngModule.config(($locationProvider, $compileProvider) => {
-  $compileProvider.debugInfoEnabled(false);
-  $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|data|tel|sms|mailto):/);
-  $locationProvider.html5Mode(true);
-});
+// ANGULAR_REMOVE_ME Init angular app to make services working
+import "@/config";
 
 // Hack: wait for ng-app to start application so exports in @/services/ng will be initialized
 setTimeout(() => {
   ReactDOM.render(<ApplicationArea />, document.getElementById("application-root"));
 }, 200);
-
-export default ngModule;

client/app/pages/groups/GroupDataSources.jsx

@@ -26,7 +26,7 @@ import notification from "@/services/notification";
 import { currentUser } from "@/services/auth";
 import { Group } from "@/services/group";
 import { DataSource } from "@/services/data-source";
-import navigateTo from "@/services/navigateTo";
+import navigateTo from "@/components/ApplicationArea/navigateTo";
 
 class GroupDataSources extends React.Component {
   static propTypes = {

client/app/pages/groups/GroupMembers.jsx

@@ -23,7 +23,7 @@ import notification from "@/services/notification";
 import { currentUser } from "@/services/auth";
 import { Group } from "@/services/group";
 import { User } from "@/services/user";
-import navigateTo from "@/services/navigateTo";
+import navigateTo from "@/components/ApplicationArea/navigateTo";
 
 class GroupMembers extends React.Component {
   static propTypes = {

client/app/pages/groups/GroupsList.jsx

@@ -17,7 +17,7 @@ import wrapSettingsTab from "@/components/SettingsWrapper";
 
 import { Group } from "@/services/group";
 import { currentUser } from "@/services/auth";
-import navigateTo from "@/services/navigateTo";
+import navigateTo from "@/components/ApplicationArea/navigateTo";
 
 class GroupsList extends React.Component {
   static propTypes = {

client/app/pages/queries/hooks/useQuery.js

@@ -1,6 +1,6 @@
 import { useState, useMemo } from "react";
 import useUpdateQuery from "./useUpdateQuery";
-import navigateTo from "@/services/navigateTo";
+import navigateTo from "@/components/ApplicationArea/navigateTo";
 
 export default function useQuery(originalQuery) {
   const [query, setQuery] = useState(originalQuery);

client/app/pages/query-snippets/QuerySnippetsList.jsx

@@ -16,7 +16,7 @@ import ItemsTable, { Columns } from "@/components/items-list/components/ItemsTab
 import wrapSettingsTab from "@/components/SettingsWrapper";
 
 import { QuerySnippet } from "@/services/query-snippet";
-import navigateTo from "@/services/navigateTo";
+import navigateTo from "@/components/ApplicationArea/navigateTo";
 import { currentUser } from "@/services/auth";
 import { policy } from "@/services/policy";
 import notification from "@/services/notification";

client/app/pages/users/UsersList.jsx

@@ -25,7 +25,7 @@ import wrapSettingsTab from "@/components/SettingsWrapper";
 import { currentUser } from "@/services/auth";
 import { policy } from "@/services/policy";
 import { User } from "@/services/user";
-import navigateTo from "@/services/navigateTo";
+import navigateTo from "@/components/ApplicationArea/navigateTo";
 import notification from "@/services/notification";
 import { absoluteUrl } from "@/services/utils";
 

client/app/services/ng.js

@@ -1,8 +1,6 @@
 export let $http = null; // eslint-disable-line import/no-mutable-exports
 export let $sanitize = null; // eslint-disable-line import/no-mutable-exports
 export let $location = null; // eslint-disable-line import/no-mutable-exports
-export let $route = null; // eslint-disable-line import/no-mutable-exports
-export let $routeParams = null; // eslint-disable-line import/no-mutable-exports
 export let $q = null; // eslint-disable-line import/no-mutable-exports
 export let $rootScope = null; // eslint-disable-line import/no-mutable-exports
 
@@ -11,8 +9,6 @@ export default function init(ngModule) {
     $http = $injector.get("$http");
     $sanitize = $injector.get("$sanitize");
     $location = $injector.get("$location");
-    $route = $injector.get("$route");
-    $routeParams = $injector.get("$routeParams");
     $q = $injector.get("$q");
     $rootScope = $injector.get("$rootScope");
   });