[Drilldowns] Simpler url parsing in sub url hooks

src/legacy/ui/public/chrome/api/sub_url_hooks.js

@@ -17,11 +17,10 @@
  * under the License.
  */
 
-import url from 'url';
-
 import { unhashUrl } from '../../../../../plugins/kibana_utils/public';
 import { toastNotifications } from '../../notify/toasts';
 import { npSetup } from '../../new_platform';
+import { areHashesDifferentButDecodedHashesEquals } from './sub_url_hooks_utils';
 
 export function registerSubUrlHooks(angularModule, internals) {
   angularModule.run(($rootScope, Private, $location) => {
@@ -49,17 +48,10 @@ export function registerSubUrlHooks(angularModule, internals) {
     $rootScope.$on('$locationChangeStart', (e, newUrl) => {
       // This handler fixes issue #31238 where browser back navigation
       // fails due to angular 1.6 parsing url encoded params wrong.
-      const parsedAbsUrl = url.parse($location.absUrl());
-      const absUrlHash = parsedAbsUrl.hash ? parsedAbsUrl.hash.slice(1) : '';
-      const decodedAbsUrlHash = decodeURIComponent(absUrlHash);
-
-      const parsedNewUrl = url.parse(newUrl);
-      const newHash = parsedNewUrl.hash ? parsedNewUrl.hash.slice(1) : '';
-      const decodedHash = decodeURIComponent(newHash);
-
-      if (absUrlHash !== newHash && decodedHash === decodedAbsUrlHash) {
+      if (areHashesDifferentButDecodedHashesEquals($location.absUrl(), newUrl)) {
         // replace the urlencoded hash with the version that angular sees.
-        $location.url(absUrlHash).replace();
+        const newHash = newUrl.split('#')[1] || '';
+        $location.url(newHash).replace();
       }
     });
 

src/legacy/ui/public/chrome/api/sub_url_hooks_utils.test.ts

@@ -0,0 +1,58 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { areHashesDifferentButDecodedHashesEquals } from './sub_url_hooks_utils';
+
+test('false for different hashes', () => {
+  const url1 = `https://localhost/kibana/#/dashboard/id`;
+  const url2 = `https://localhost/kibana/#/dashboard/DIFFERENT`;
+  expect(areHashesDifferentButDecodedHashesEquals(url1, url2)).toBeFalsy();
+});
+
+test('false for same hashes', () => {
+  const hash = `/dashboard/id?_a=(filters:!(),query:(language:kuery,query:''))&_g=(filters:!(),time:(from:now-120m,to:now))`;
+  const url1 = `https://localhost/kibana/#/${hash}`;
+  expect(areHashesDifferentButDecodedHashesEquals(url1, url1)).toBeFalsy();
+});
+
+test('true for same hashes, but one is encoded', () => {
+  const hash = `/dashboard/id?_a=(filters:!(),query:(language:kuery,query:''))&_g=(filters:!(),time:(from:now-120m,to:now))`;
+  const url1 = `https://localhost/kibana/#/${hash}`;
+  const url2 = `https://localhost/kibana/#/${encodeURIComponent(hash)}`;
+  expect(areHashesDifferentButDecodedHashesEquals(url1, url2)).toBeTruthy();
+});
+
+/**
+ * This edge case occurs when trying to navigate within kibana app using core's `navigateToApp` api
+ * and there is reserved characters in hash (see: query:'' part)
+ * For example:
+ * ```ts
+ * navigateToApp('kibana', {
+ *    path: '#/dashboard/f8bc19f0-6918-11ea-9258-a74c2ded064d?_a=(filters:!(),query:(language:kuery,query:''))&_g=(filters:!(),time:(from:now-120m,to:now))'
+ *  })
+ * ```
+ * Core internally is using url.parse which parses ' -> %27 and performs the navigation
+ * Then angular decodes it back and causes redundant history record if not the fix which is covered by the test below
+ */
+test("true for same hashes, but one has reserved character (') encoded", () => {
+  const hash = `/dashboard/id?_a=(filters:!(),query:(language:kuery,query:''))&_g=(filters:!(),time:(from:now-120m,to:now))`;
+  const url1 = `https://localhost/kibana/#/${hash}`;
+  const url2 = `https://localhost/kibana/#/${hash.replace(/\'/g, '%27')}`;
+  expect(areHashesDifferentButDecodedHashesEquals(url1, url2)).toBeTruthy();
+});

src/legacy/ui/public/chrome/api/sub_url_hooks_utils.ts

@@ -0,0 +1,29 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export function areHashesDifferentButDecodedHashesEquals(urlA: string, urlB: string): boolean {
+  const getHash = (url: string) => url.split('#')[1] ?? '';
+  const hashA = getHash(urlA);
+  const decodedHashA = decodeURIComponent(hashA);
+
+  const hashB = getHash(urlB);
+  const decodedHashB = decodeURIComponent(hashB);
+
+  return hashA !== hashB && decodedHashA === decodedHashB;
+}