Adding an app for redirects when storing state in session storage (#10822)

* Adding an app for redirects when storing state in session storage

* Removing errant console.log

* Adding early return after reply().redirect

* No longer using the router

* Renaming vars to injectedVarsOverrides

* Putting uiRoutes back in so the code is only executed for this app

* Extracting hash_url to it's own module, and adding tests

* Addressing peer-review comments

src/core_plugins/state_session_storage_redirect/index.js

@@ -0,0 +1,13 @@
+export default function (kibana) {
+  return new kibana.Plugin({
+    uiExports: {
+      app: {
+        require: ['kibana'],
+        title: 'Redirecting',
+        id: 'stateSessionStorageRedirect',
+        main: 'plugins/state_session_storage_redirect',
+        listed: false,
+      }
+    }
+  });
+}

src/core_plugins/state_session_storage_redirect/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "state_session_storage_redirect",
+  "version": "kibana",
+  "description": "When using the state:storeInSessionStorage setting with the short-urls, we need some way to get the full URL's hashed states into sessionStorage, this app will grab the URL from the kbn-initial-state and and put the URL hashed states into sessionStorage before redirecting the user."
+}

src/core_plugins/state_session_storage_redirect/public/index.js

@@ -0,0 +1,19 @@
+import 'ui/autoload/styles';
+import chrome from 'ui/chrome';
+import { hashUrl } from 'ui/state_management/state_hashing';
+import uiRoutes from 'ui/routes';
+
+uiRoutes.enable();
+uiRoutes
+.when('/', {
+  resolve: {
+    url: function (AppState, globalState, $window) {
+      const redirectUrl = chrome.getInjected('redirectUrl');
+
+      const hashedUrl = hashUrl([new AppState(), globalState], redirectUrl);
+      const url = chrome.addBasePath(hashedUrl);
+
+      $window.location = url;
+    }
+  }
+});

src/server/http/index.js

@@ -119,7 +119,18 @@ module.exports = async function (kbnServer, server, config) {
       try {
         const url = await shortUrlLookup.getUrl(request.params.urlId, request);
         shortUrlAssertValid(url);
-        reply().redirect(config.get('server.basePath') + url);
+
+        const uiSettings = server.uiSettings();
+        const stateStoreInSessionStorage = await uiSettings.get(request, 'state:storeInSessionStorage');
+        if (!stateStoreInSessionStorage) {
+          reply().redirect(config.get('server.basePath') + url);
+          return;
+        }
+
+        const app = kbnServer.uiExports.apps.byId.stateSessionStorageRedirect;
+        reply.renderApp(app, {
+          redirectUrl: url,
+        });
       } catch (err) {
         reply(handleShortUrlError(err));
       }

src/ui/index.js

@@ -64,7 +64,7 @@ export default async (kbnServer, server, config) => {
     }
   });
 
-  async function getKibanaPayload({ app, request, includeUserProvidedConfig }) {
+  async function getKibanaPayload({ app, request, includeUserProvidedConfig, injectedVarsOverrides }) {
     const uiSettings = server.uiSettings();
     const translations = await uiI18n.getTranslationsForRequest(request);
 
@@ -85,12 +85,12 @@ export default async (kbnServer, server, config) => {
       vars: await reduceAsync(
         uiExports.injectedVarsReplacers,
         async (acc, replacer) => await replacer(acc, request, server),
-        defaults(await app.getInjectedVars() || {}, uiExports.defaultInjectedVars)
+        defaults(injectedVarsOverrides, await app.getInjectedVars() || {}, uiExports.defaultInjectedVars)
       ),
     };
   }
 
-  async function renderApp({ app, reply, includeUserProvidedConfig = true }) {
+  async function renderApp({ app, reply, includeUserProvidedConfig = true, injectedVarsOverrides = {} }) {
     try {
       const request = reply.request;
       const translations = await uiI18n.getTranslationsForRequest(request);
@@ -100,7 +100,8 @@ export default async (kbnServer, server, config) => {
         kibanaPayload: await getKibanaPayload({
           app,
           request,
-          includeUserProvidedConfig
+          includeUserProvidedConfig,
+          injectedVarsOverrides
         }),
         bundlePath: `${config.get('server.basePath')}/bundles`,
         i18n: key => _.get(translations, key, ''),
@@ -110,11 +111,12 @@ export default async (kbnServer, server, config) => {
     }
   }
 
-  server.decorate('reply', 'renderApp', function (app) {
+  server.decorate('reply', 'renderApp', function (app, injectedVarsOverrides) {
     return renderApp({
       app,
       reply: this,
       includeUserProvidedConfig: true,
+      injectedVarsOverrides,
     });
   });
 

src/ui/public/state_management/state_hashing/__tests__/hash_url.js

@@ -0,0 +1,144 @@
+import expect from 'expect.js';
+import ngMock from 'ng_mock';
+import sinon from 'auto-release-sinon';
+import { parse as parseUrl } from 'url';
+
+import StateProvider from 'ui/state_management/state';
+import { hashUrl } from 'ui/state_management/state_hashing';
+
+describe('hashUrl', function () {
+  let State;
+
+  beforeEach(ngMock.module('kibana'));
+
+  beforeEach(ngMock.inject((Private, config) => {
+    State = Private(StateProvider);
+    sinon.stub(config, 'get').withArgs('state:storeInSessionStorage').returns(true);
+  }));
+
+  describe('throws error', () => {
+    it('if states parameter is null', () => {
+      expect(() => {
+        hashUrl(null, '');
+      }).to.throwError();
+    });
+
+    it('if states parameter is empty array', () => {
+      expect(() => {
+        hashUrl([], '');
+      }).to.throwError();
+    });
+  });
+
+  describe('does nothing', () => {
+    let states;
+    beforeEach(() => {
+      states = [new State('testParam')];
+    });
+    it('if url is empty', () => {
+      const url = '';
+      expect(hashUrl(states, url)).to.be(url);
+    });
+
+    it('if just a host and port', () => {
+      const url = 'https://localhost:5601';
+      expect(hashUrl(states, url)).to.be(url);
+    });
+
+    it('if just a path', () => {
+      const url = 'https://localhost:5601/app/kibana';
+      expect(hashUrl(states, url)).to.be(url);
+    });
+
+    it('if just a path and query', () => {
+      const url = 'https://localhost:5601/app/kibana?foo=bar';
+      expect(hashUrl(states, url)).to.be(url);
+    });
+
+    it('if empty hash with query', () => {
+      const url = 'https://localhost:5601/app/kibana?foo=bar#';
+      expect(hashUrl(states, url)).to.be(url);
+    });
+
+    it('if query parameter matches and there is no hash', () => {
+      const url = 'https://localhost:5601/app/kibana?testParam=(yes:!t)';
+      expect(hashUrl(states, url)).to.be(url);
+    });
+
+    it(`if query parameter matches and it's before the hash`, () => {
+      const url = 'https://localhost:5601/app/kibana?testParam=(yes:!t)';
+      expect(hashUrl(states, url)).to.be(url);
+    });
+
+    it('if empty hash without query', () => {
+      const url = 'https://localhost:5601/app/kibana#';
+      expect(hashUrl(states, url)).to.be(url);
+    });
+
+    it('if empty hash without query', () => {
+      const url = 'https://localhost:5601/app/kibana#';
+      expect(hashUrl(states, url)).to.be(url);
+    });
+
+    it('if hash is just a path', () => {
+      const url = 'https://localhost:5601/app/kibana#/discover';
+      expect(hashUrl(states, url)).to.be(url);
+    });
+
+    it('if hash does not have matching query string vals', () => {
+      const url = 'https://localhost:5601/app/kibana#/discover?foo=bar';
+      expect(hashUrl(states, url)).to.be(url);
+    });
+  });
+
+  describe('replaces querystring value with hash', () => {
+    const getAppQuery = (url) => {
+      const parsedUrl = parseUrl(url);
+      const parsedAppUrl = parseUrl(parsedUrl.hash.slice(1), true);
+
+      return parsedAppUrl.query;
+    };
+
+    it('if using a single State', () => {
+      const stateParamKey = 'testParam';
+      const url = `https://localhost:5601/app/kibana#/discover?foo=bar&${stateParamKey}=(yes:!t)`;
+      const mockHashedItemStore = {
+        getItem: () => null,
+        setItem: sinon.stub().returns(true)
+      };
+      const state = new State(stateParamKey, {}, mockHashedItemStore);
+
+      const actualUrl = hashUrl([state], url);
+
+      expect(mockHashedItemStore.setItem.calledOnce).to.be(true);
+
+      const appQuery = getAppQuery(actualUrl);
+
+      const hashKey = mockHashedItemStore.setItem.firstCall.args[0];
+      expect(appQuery[stateParamKey]).to.eql(hashKey);
+    });
+
+    it('if using multiple States', () => {
+      const stateParamKey1 = 'testParam1';
+      const stateParamKey2 = 'testParam2';
+      const url = `https://localhost:5601/app/kibana#/discover?foo=bar&${stateParamKey1}=(yes:!t)&${stateParamKey2}=(yes:!f)`;
+      const mockHashedItemStore = {
+        getItem: () => null,
+        setItem: sinon.stub().returns(true)
+      };
+      const state1 = new State(stateParamKey1, {}, mockHashedItemStore);
+      const state2 = new State(stateParamKey2, {}, mockHashedItemStore);
+
+      const actualUrl = hashUrl([state1, state2], url);
+
+      expect(mockHashedItemStore.setItem.calledTwice).to.be(true);
+
+      const appQuery = getAppQuery(actualUrl);
+
+      const hashKey1 = mockHashedItemStore.setItem.firstCall.args[0];
+      const hashKey2 = mockHashedItemStore.setItem.secondCall.args[0];
+      expect(appQuery[stateParamKey1]).to.eql(hashKey1);
+      expect(appQuery[stateParamKey2]).to.eql(hashKey2);
+    });
+  });
+});

src/ui/public/state_management/state_hashing/hash_url.js

@@ -0,0 +1,75 @@
+import encodeUriQuery from 'encode-uri-query';
+import rison from 'rison-node';
+import { parse as parseUrl, format as formatUrl } from 'url';
+import { stringify as stringifyQuerystring } from 'querystring';
+
+const conservativeStringifyQuerystring = (query) => {
+  return stringifyQuerystring(query, null, null, {
+    encodeURIComponent: encodeUriQuery
+  });
+};
+
+const hashStateInQuery = (state, query) => {
+  const name = state.getQueryParamName();
+  const value = query[name];
+  if (!value) {
+    return { name, value };
+  }
+
+  const decodedValue = rison.decode(value);
+  const hashedValue = state.toQueryParam(decodedValue);
+  return { name, value: hashedValue };
+};
+
+const hashStatesInQuery = (states, query) => {
+  const hashedQuery = states.reduce((result, state) => {
+    const { name, value } = hashStateInQuery(state, query);
+    if (value) {
+      result[name] = value;
+    }
+    return result;
+  }, {});
+
+
+  return Object.assign({}, query, hashedQuery);
+};
+
+export const hashUrl = (states, redirectUrl) => {
+  // we need states to proceed, throwing an error if we don't have any
+  if (states === null || !states.length) {
+    throw new Error('states parameter must be an Array with length greater than 0');
+  }
+
+  const parsedUrl = parseUrl(redirectUrl);
+  // if we don't have a hash, we return the redirectUrl without hashing anything
+  if (!parsedUrl.hash) {
+    return redirectUrl;
+  }
+
+  // The URLs that we use aren't "conventional" and the hash is sometimes appearing before
+  // the querystring, even though conventionally they appear after it. The parsedUrl
+  // is the entire URL, and the parsedAppUrl is everything after the hash.
+  //
+  // EXAMPLE
+  // parsedUrl: /app/kibana#/visualize/edit/somelongguid?g=()&a=()
+  // parsedAppUrl: /visualize/edit/somelongguid?g=()&a=()
+  const parsedAppUrl = parseUrl(parsedUrl.hash.slice(1), true);
+
+  // the parsedAppUrl actually has the query that we care about
+  const query = parsedAppUrl.query;
+
+  const newQuery = hashStatesInQuery(states, query);
+
+  const newHash = formatUrl({
+    search: conservativeStringifyQuerystring(newQuery),
+    pathname: parsedAppUrl.pathname
+  });
+
+  return formatUrl({
+    hash: `#${newHash}`,
+    host: parsedUrl.host,
+    search: parsedUrl.search,
+    pathname: parsedUrl.pathname,
+    protocol: parsedUrl.protocol,
+  });
+};

src/ui/public/state_management/state_hashing/index.js

@@ -2,6 +2,10 @@ export {
   default as getUnhashableStatesProvider,
 } from './get_unhashable_states_provider';
 
+export {
+  hashUrl,
+} from './hash_url';
+
 export {
   default as unhashQueryString,
 } from './unhash_query_string';