Add new url utilities

New url utilities: isAbsolute, isRootRelative, relativePathToAbsolute

app/assets/javascripts/lib/utils/url_utility.js

@@ -223,13 +223,46 @@ export function getBaseURL() {
   return `${protocol}//${host}`;
 }
 
+/**
+ * Returns true if url is an absolute URL
+ *
+ * @param {String} url
+ */
+export function isAbsolute(url) {
+  return /^https?:\/\//.test(url);
+}
+
+/**
+ * Returns true if url is a root-relative URL
+ *
+ * @param {String} url
+ */
+export function isRootRelative(url) {
+  return /^\//.test(url);
+}
+
 /**
  * Returns true if url is an absolute or root-relative URL
  *
  * @param {String} url
  */
 export function isAbsoluteOrRootRelative(url) {
-  return /^(https?:)?\//.test(url);
+  return isAbsolute(url) || isRootRelative(url);
+}
+
+/**
+ * Converts a relative path to an absolute or a root relative path depending
+ * on what is passed as a basePath.
+ *
+ * @param {String} path       Relative path, eg. ../img/img.png
+ * @param {String} basePath   Absolute or root relative path, eg. /user/project or
+ *                            https://gitlab.com/user/project
+ */
+export function relativePathToAbsolute(path, basePath) {
+  const absolute = isAbsolute(basePath);
+  const base = absolute ? basePath : `file:///${basePath}`;
+  const url = new URL(path, base);
+  return absolute ? url.href : decodeURIComponent(url.pathname);
 }
 
 /**

spec/frontend/lib/utils/url_utility_spec.js

@@ -323,20 +323,76 @@ describe('URL utility', () => {
     });
   });
 
-  describe('isAbsoluteOrRootRelative', () => {
-    const validUrls = ['https://gitlab.com/', 'http://gitlab.com/', '/users/sign_in'];
-
-    const invalidUrls = [' https://gitlab.com/', './file/path', 'notanurl', '<a></a>'];
+  describe('isAbsolute', () => {
+    it.each`
+      url                                      | valid
+      ${'https://gitlab.com/'}                 | ${true}
+      ${'http://gitlab.com/'}                  | ${true}
+      ${'/users/sign_in'}                      | ${false}
+      ${' https://gitlab.com'}                 | ${false}
+      ${'somepath.php?url=https://gitlab.com'} | ${false}
+      ${'notaurl'}                             | ${false}
+      ${'../relative_url'}                     | ${false}
+      ${'<a></a>'}                             | ${false}
+    `('returns $valid for $url', ({ url, valid }) => {
+      expect(urlUtils.isAbsolute(url)).toBe(valid);
+    });
+  });
 
-    it.each(validUrls)(`returns true for %s`, url => {
-      expect(urlUtils.isAbsoluteOrRootRelative(url)).toBe(true);
+  describe('isRootRelative', () => {
+    it.each`
+      url                                       | valid
+      ${'https://gitlab.com/'}                  | ${false}
+      ${'http://gitlab.com/'}                   | ${false}
+      ${'/users/sign_in'}                       | ${true}
+      ${' https://gitlab.com'}                  | ${false}
+      ${'/somepath.php?url=https://gitlab.com'} | ${true}
+      ${'notaurl'}                              | ${false}
+      ${'../relative_url'}                      | ${false}
+      ${'<a></a>'}                              | ${false}
+    `('returns $valid for $url', ({ url, valid }) => {
+      expect(urlUtils.isRootRelative(url)).toBe(valid);
     });
+  });
 
-    it.each(invalidUrls)(`returns false for %s`, url => {
-      expect(urlUtils.isAbsoluteOrRootRelative(url)).toBe(false);
+  describe('isAbsoluteOrRootRelative', () => {
+    it.each`
+      url                                       | valid
+      ${'https://gitlab.com/'}                  | ${true}
+      ${'http://gitlab.com/'}                   | ${true}
+      ${'/users/sign_in'}                       | ${true}
+      ${' https://gitlab.com'}                  | ${false}
+      ${'/somepath.php?url=https://gitlab.com'} | ${true}
+      ${'notaurl'}                              | ${false}
+      ${'../relative_url'}                      | ${false}
+      ${'<a></a>'}                              | ${false}
+    `('returns $valid for $url', ({ url, valid }) => {
+      expect(urlUtils.isAbsoluteOrRootRelative(url)).toBe(valid);
     });
   });
 
+  describe('relativePathToAbsolute', () => {
+    it.each`
+      path                       | base                                  | result
+      ${'./foo'}                 | ${'bar/'}                             | ${'/bar/foo'}
+      ${'../john.md'}            | ${'bar/baz/foo.php'}                  | ${'/bar/john.md'}
+      ${'../images/img.png'}     | ${'bar/baz/foo.php'}                  | ${'/bar/images/img.png'}
+      ${'../images/Image 1.png'} | ${'bar/baz/foo.php'}                  | ${'/bar/images/Image 1.png'}
+      ${'/images/img.png'}       | ${'bar/baz/foo.php'}                  | ${'/images/img.png'}
+      ${'/images/img.png'}       | ${'/bar/baz/foo.php'}                 | ${'/images/img.png'}
+      ${'../john.md'}            | ${'/bar/baz/foo.php'}                 | ${'/bar/john.md'}
+      ${'../john.md'}            | ${'///bar/baz/foo.php'}               | ${'/bar/john.md'}
+      ${'/images/img.png'}       | ${'https://gitlab.com/user/project/'} | ${'https://gitlab.com/images/img.png'}
+      ${'../images/img.png'}     | ${'https://gitlab.com/user/project/'} | ${'https://gitlab.com/user/images/img.png'}
+      ${'../images/Image 1.png'} | ${'https://gitlab.com/user/project/'} | ${'https://gitlab.com/user/images/Image%201.png'}
+    `(
+      'converts relative path "$path" with base "$base" to absolute path => "expected"',
+      ({ path, base, result }) => {
+        expect(urlUtils.relativePathToAbsolute(path, base)).toBe(result);
+      },
+    );
+  });
+
   describe('isSafeUrl', () => {
     const absoluteUrls = [
       'http://example.org',