Add relative path handling to application.navigateToUrl

docs/development/core/public/kibana-plugin-core-public.applicationstart.geturlforapp.md

@@ -4,9 +4,11 @@
 
 ## ApplicationStart.getUrlForApp() method
 
-Returns an URL to a given app, including the global base path. By default, the URL is relative (/basePath/app/my-app). Use the `absolute` option to generate an absolute url (http://host:port/basePath/app/my-app)
+Returns the absolute path (or URL) to a given app, including the global base path.
 
-Note that when generating absolute urls, the origin (protocol, host and port) are determined from the browser's location.
+By default, it returns the absolute path of the application (e.g `/basePath/app/my-app`<!-- -->). Use the `absolute` option to generate a full url instead (e.g `http://host:port/basePath/app/my-app`<!-- -->)
+
+Note that when generating full urls, the origin (protocol, host and port) are determined from the browser's current location.
 
 <b>Signature:</b>
 

docs/development/core/public/kibana-plugin-core-public.applicationstart.md

@@ -23,8 +23,8 @@ export interface ApplicationStart
 
 |  Method | Description |
 |  --- | --- |
-|  [getUrlForApp(appId, options)](./kibana-plugin-core-public.applicationstart.geturlforapp.md) | Returns an URL to a given app, including the global base path. By default, the URL is relative (/basePath/app/my-app). Use the <code>absolute</code> option to generate an absolute url (http://host:port/basePath/app/my-app)<!-- -->Note that when generating absolute urls, the origin (protocol, host and port) are determined from the browser's location. |
+|  [getUrlForApp(appId, options)](./kibana-plugin-core-public.applicationstart.geturlforapp.md) | Returns the absolute path (or URL) to a given app, including the global base path.<!-- -->By default, it returns the absolute path of the application (e.g <code>/basePath/app/my-app</code>). Use the <code>absolute</code> option to generate a full url instead (e.g <code>http://host:port/basePath/app/my-app</code>)<!-- -->Note that when generating full urls, the origin (protocol, host and port) are determined from the browser's current location. |
 |  [navigateToApp(appId, options)](./kibana-plugin-core-public.applicationstart.navigatetoapp.md) | Navigate to a given app |
-|  [navigateToUrl(url)](./kibana-plugin-core-public.applicationstart.navigatetourl.md) | Navigate to given url, which can either be an absolute url or a relative path, in a SPA friendly way when possible.<!-- -->If all these criteria are true for the given url: - (only for absolute URLs) The origin of the URL matches the origin of the browser's current location - The pathname of the URL starts with the current basePath (eg. /mybasepath/s/my-space) - The pathname segment after the basePath matches any known application route (eg. /app/<id>/ or any application's <code>appRoute</code> configuration)<!-- -->Then a SPA navigation will be performed using <code>navigateToApp</code> using the corresponding application and path. Otherwise, fallback to a full page reload to navigate to the url using <code>window.location.assign</code> |
+|  [navigateToUrl(url)](./kibana-plugin-core-public.applicationstart.navigatetourl.md) | Navigate to given url in a SPA friendly way when possible (when the url will redirect to a valid application within the current basePath).<!-- -->The method resolves pathnames the same way browsers do when resolving a <code>&lt;a href&gt;</code> value. The provided url can be: - an absolute url - an absolute path - a path relative to the current url (window.location.href)<!-- -->If all these criteria are true for the given url: - (only for absolute URLs) The origin of the URL matches the origin of the browser's current location - The resolved pathname of the provided URL/path starts with the current basePath (eg. /mybasepath/s/my-space) - The pathname segment after the basePath matches any known application route (eg. /app/<id>/ or any application's <code>appRoute</code> configuration)<!-- -->Then a SPA navigation will be performed using <code>navigateToApp</code> using the corresponding application and path. Otherwise, fallback to a full page reload to navigate to the url using <code>window.location.assign</code> |
 |  [registerMountContext(contextName, provider)](./kibana-plugin-core-public.applicationstart.registermountcontext.md) | Register a context provider for application mounting. Will only be available to applications that depend on the plugin that registered this context. Deprecated, use [CoreSetup.getStartServices](./kibana-plugin-core-public.coresetup.getstartservices.md)<!-- -->. |
 

docs/development/core/public/kibana-plugin-core-public.applicationstart.navigatetourl.md

@@ -4,9 +4,11 @@
 
 ## ApplicationStart.navigateToUrl() method
 
-Navigate to given url, which can either be an absolute url or a relative path, in a SPA friendly way when possible.
+Navigate to given url in a SPA friendly way when possible (when the url will redirect to a valid application within the current basePath).
 
-If all these criteria are true for the given url: - (only for absolute URLs) The origin of the URL matches the origin of the browser's current location - The pathname of the URL starts with the current basePath (eg. /mybasepath/s/my-space) - The pathname segment after the basePath matches any known application route (eg. /app/<id>/ or any application's `appRoute` configuration)
+The method resolves pathnames the same way browsers do when resolving a `<a href>` value. The provided url can be: - an absolute url - an absolute path - a path relative to the current url (window.location.href)
+
+If all these criteria are true for the given url: - (only for absolute URLs) The origin of the URL matches the origin of the browser's current location - The resolved pathname of the provided URL/path starts with the current basePath (eg. /mybasepath/s/my-space) - The pathname segment after the basePath matches any known application route (eg. /app/<id>/ or any application's `appRoute` configuration)
 
 Then a SPA navigation will be performed using `navigateToApp` using the corresponding application and path. Otherwise, fallback to a full page reload to navigate to the url using `window.location.assign`
 
@@ -35,11 +37,14 @@ navigateToUrl(url: string): Promise<void>;
 // will call `application.navigateToApp('discover', { path: '/some-path?foo=bar'})`
 application.navigateToUrl('https://kibana:8080/base-path/s/my-space/app/discover/some-path?foo=bar')
 application.navigateToUrl('/base-path/s/my-space/app/discover/some-path?foo=bar')
+application.navigateToUrl('./discover/some-path?foo=bar')
 
 // will perform a full page reload using `window.location.assign`
 application.navigateToUrl('https://elsewhere:8080/base-path/s/my-space/app/discover/some-path') // origin does not match
 application.navigateToUrl('/app/discover/some-path') // does not include the current basePath
 application.navigateToUrl('/base-path/s/my-space/app/unknown-app/some-path') // unknown application
+application.navigateToUrl('../discover') // resolve to `/base-path/s/my-space/discover` which is not a path of a known app.
+application.navigateToUrl('../../other-space/discover') // resolve to `/base-path/s/other-space/discover` which is not within the current basePath.
 
 ```
 

packages/kbn-std/src/index.ts

@@ -24,6 +24,6 @@ export { mapToObject } from './map_to_object';
 export { merge } from './merge';
 export { pick } from './pick';
 export { withTimeout } from './promise';
-export { isRelativeUrl, modifyUrl, URLMeaningfulParts } from './url';
+export { isRelativeUrl, modifyUrl, getUrlOrigin, URLMeaningfulParts } from './url';
 export { unset } from './unset';
 export { getFlattenedObject } from './get_flattened_object';

packages/kbn-std/src/url.test.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { modifyUrl, isRelativeUrl } from './url';
+import { modifyUrl, isRelativeUrl, getUrlOrigin } from './url';
 
 describe('modifyUrl()', () => {
   test('throws an error with invalid input', () => {
@@ -83,3 +83,27 @@ describe('isRelativeUrl()', () => {
     expect(isRelativeUrl(' //evil.com')).toBe(false);
   });
 });
+
+describe('getOrigin', () => {
+  describe('when passing an absolute url', () => {
+    it('return origin without port when the url does not have a port', () => {
+      expect(getUrlOrigin('https://example.com/file/to/path?example')).toEqual(
+        'https://example.com'
+      );
+    });
+    it('return origin with port when the url does have a port', () => {
+      expect(getUrlOrigin('http://example.com:80/path/to/file')).toEqual('http://example.com:80');
+    });
+  });
+  describe('when passing a non absolute url', () => {
+    it('returns null for relative url', () => {
+      expect(getUrlOrigin('./path/to/file')).toBeNull();
+    });
+    it('returns null for absolute path', () => {
+      expect(getUrlOrigin('/path/to/file')).toBeNull();
+    });
+    it('returns null for empty url', () => {
+      expect(getUrlOrigin('')).toBeNull();
+    });
+  });
+});

packages/kbn-std/src/url.ts

@@ -125,3 +125,14 @@ export function isRelativeUrl(candidatePath: string) {
   }
   return true;
 }
+
+/**
+ * Returns the origin (protocol + host + port) from given `url` if `url` is a valid absolute url, or null otherwise
+ */
+export function getUrlOrigin(url: string): string | null {
+  const obj = parseUrl(url);
+  if (!obj.protocol && !obj.hostname) {
+    return null;
+  }
+  return `${obj.protocol}//${obj.hostname}${obj.port ? `:${obj.port}` : ''}`;
+}

src/core/public/application/types.ts

@@ -710,11 +710,17 @@ export interface ApplicationStart {
   navigateToApp(appId: string, options?: NavigateToAppOptions): Promise<void>;
 
   /**
-   * Navigate to given url, which can either be an absolute url or a relative path, in a SPA friendly way when possible.
+   * Navigate to given url in a SPA friendly way when possible (when the url will redirect to a valid application
+   * within the current basePath).
+   *
+   * The method resolves pathnames the same way browsers do when resolving a `<a href>` value. The provided url can be:
+   * - an absolute url
+   * - an absolute path
+   * - a path relative to the current url (window.location.href)
    *
    * If all these criteria are true for the given url:
    * - (only for absolute URLs) The origin of the URL matches the origin of the browser's current location
-   * - The pathname of the URL starts with the current basePath (eg. /mybasepath/s/my-space)
+   * - The resolved pathname of the provided URL/path starts with the current basePath (eg. /mybasepath/s/my-space)
    * - The pathname segment after the basePath matches any known application route (eg. /app/<id>/ or any application's `appRoute` configuration)
    *
    * Then a SPA navigation will be performed using `navigateToApp` using the corresponding application and path.
@@ -727,23 +733,27 @@ export interface ApplicationStart {
    * // will call `application.navigateToApp('discover', { path: '/some-path?foo=bar'})`
    * application.navigateToUrl('https://kibana:8080/base-path/s/my-space/app/discover/some-path?foo=bar')
    * application.navigateToUrl('/base-path/s/my-space/app/discover/some-path?foo=bar')
+   * application.navigateToUrl('./discover/some-path?foo=bar')
    *
    * // will perform a full page reload using `window.location.assign`
    * application.navigateToUrl('https://elsewhere:8080/base-path/s/my-space/app/discover/some-path') // origin does not match
    * application.navigateToUrl('/app/discover/some-path') // does not include the current basePath
    * application.navigateToUrl('/base-path/s/my-space/app/unknown-app/some-path') // unknown application
+   * application.navigateToUrl('../discover') // resolve to `/base-path/s/my-space/discover` which is not a path of a known app.
+   * application.navigateToUrl('../../other-space/discover') // resolve to `/base-path/s/other-space/discover` which is not within the current basePath.
    * ```
    *
    * @param url - an absolute url, or a relative path, to navigate to.
    */
   navigateToUrl(url: string): Promise<void>;
 
   /**
-   * Returns an URL to a given app, including the global base path.
-   * By default, the URL is relative (/basePath/app/my-app).
-   * Use the `absolute` option to generate an absolute url (http://host:port/basePath/app/my-app)
+   * Returns the absolute path (or URL) to a given app, including the global base path.
+   *
+   * By default, it returns the absolute path of the application (e.g `/basePath/app/my-app`).
+   * Use the `absolute` option to generate a full url instead (e.g `http://host:port/basePath/app/my-app`)
    *
-   * Note that when generating absolute urls, the origin (protocol, host and port) are determined from the browser's location.
+   * Note that when generating full urls, the origin (protocol, host and port) are determined from the browser's current location.
    *
    * @param appId
    * @param options.path - optional path inside application to deep link to

src/core/public/application/utils/append_app_path.test.ts

@@ -0,0 +1,40 @@
+/*
+ * 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 { appendAppPath } from './append_app_path';
+
+describe('appendAppPath', () => {
+  it('appends the appBasePath with given path', () => {
+    expect(appendAppPath('/app/my-app', '/some-path')).toEqual('/app/my-app/some-path');
+    expect(appendAppPath('/app/my-app/', 'some-path')).toEqual('/app/my-app/some-path');
+    expect(appendAppPath('/app/my-app', 'some-path')).toEqual('/app/my-app/some-path');
+    expect(appendAppPath('/app/my-app', '')).toEqual('/app/my-app');
+  });
+
+  it('preserves the trailing slash only if included in the hash or appPath', () => {
+    expect(appendAppPath('/app/my-app', '/some-path/')).toEqual('/app/my-app/some-path');
+    expect(appendAppPath('/app/my-app', '/some-path#/')).toEqual('/app/my-app/some-path#/');
+    expect(appendAppPath('/app/my-app#/', '')).toEqual('/app/my-app#/');
+    expect(appendAppPath('/app/my-app#', '/')).toEqual('/app/my-app#/');
+    expect(appendAppPath('/app/my-app', '/some-path#/hash/')).toEqual(
+      '/app/my-app/some-path#/hash/'
+    );
+    expect(appendAppPath('/app/my-app', '/some-path#/hash')).toEqual('/app/my-app/some-path#/hash');
+  });
+});

src/core/public/application/utils/append_app_path.ts

@@ -0,0 +1,32 @@
+/*
+ * 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 { removeSlashes } from './remove_slashes';
+
+export const appendAppPath = (appBasePath: string, path: string = '') => {
+  // Only prepend slash if not a hash or query path
+  path = path === '' || path.startsWith('#') || path.startsWith('?') ? path : `/${path}`;
+  // Do not remove trailing slash when in hashbang or basePath
+  const removeTrailing = path.indexOf('#') === -1 && appBasePath.indexOf('#') === -1;
+  return removeSlashes(`${appBasePath}${path}`, {
+    trailing: removeTrailing,
+    duplicates: true,
+    leading: false,
+  });
+};