RFC: Support for query params

It would be useful in my app to have feature flags which are switched off but can be switched on via a query param. This would allow specific users to test a feature before it is enabled for all users.

For example www.app.com?enabledFeatures=new-billing,new-settings would turn on the new-billing and new-settings flags.

More details:

• The query param would default to enabledFeatures= but can be configured. (I don’t think this could be called features= because this would have to be a property on the controller and it might conflict with the service).
• This whole query-param option could be switched on or off.

In the future we could also consider:

• Support specifying for each feature flag if it can be toggled via a queryParam
• Support disabling features via query param, although I don’t see this as being as useful…

Please let me know if you think this is a good idea. I’d be happy to submit a PR.

[kategengler]

Thanks for sharing your solution.

I wouldn’t recommend using Ember.Evented nor initializers in new code, so I would stick with the first way, for now.

[rtablada]

We just implemented an augmentation/extension for the features service to support query params and sessionStorage persistence (for tab persistence for FFs), I think a different way would be to have better docs and hooks for enable/disabling features.

This way teams can have a dedicated way to initialize and persist FFs with QPs, dynamic HTML Head, server request, etc.

This is our extended features service:

import Features from 'ember-feature-flags/services/features';
import config from '../config/environment';
import { inject as service } from '@ember/service';

const FEATURE_QP_REGEX = /^feature\[(.*)\]/;

export default class FeaturesService extends Features {
  config = config;
  @service('router') router;

  init() {
    super.init(...arguments);

    if (config.featureFlags) {
      let featureFlags = {
        ...config.featureFlags,
        ...this.sessionFeatureFlags,
        ...this.initQueryFeatureFlags(),
      };

      this.setup(featureFlags);
    }
  }

  get sessionFeatureFlags() {
    return JSON.parse(sessionStorage.featureFlags ?? '{}');
  }

  set sessionFeatureFlags(value = {}) {
    sessionStorage.featureFlags = JSON.stringify(value);
  }

  initQueryFeatureFlags() {
    let featureFlags = {};
    const params = new URLSearchParams(window.location.search);

    // Search query params for feature flags
    params.forEach((value, key) => {
      const matches = key.match(FEATURE_QP_REGEX);
      if (matches) {
        let [, flag] = matches;

        featureFlags[flag] = value !== 'false' ? true : false;
      }
    });

    return featureFlags;
  }

  persistFeatureFlag(flag, value) {
    let sessionFeatureFlags = this.sessionFeatureFlags;

    if (config.featureFlags[flag] == value) {
      delete sessionFeatureFlags[flag];
    } else {
      sessionFeatureFlags[flag] = value;
    }

    this.sessionFeatureFlags = sessionFeatureFlags;
  }

  enable(flag) {
    super.enable(flag);

    this.persistFeatureFlag(flag, true);
  }

  disable(flag) {
    super.disable(flag);

    this.persistFeatureFlag(flag, false);
  }
}

But, I think that there could be an API using initializers to have an app initializer like and the above implementation would become:

import { featureFlagInitializer } from 'ember-feature-flags';
import config from '../../config/environment';

const getSessionFeatureFlags = () =>  JSON.parse(sessionStorage.featureFlags ?? '{}');

const getQueryFeatureFlags = (featureFlags) => {
  let featureFlags = {};
  const params = new URLSearchParams(window.location.search);

  // Search query params for feature flags
  params.forEach((value, key) => {
    const matches = key.match(FEATURE_QP_REGEX);
    if (matches) {
      let [, flag] = matches;

      featureFlags[flag] = value !== 'false' ? true : false;
    }
  });

  return featureFlags;
}

export const initialize = featureFlagInitializer((featuresService, appInstanace) => {
  // New function that is called and passed to `setup`
  featuresService.addFeatureFlagInitializer((featureFlags) => {
    return {
      ...featureFlags,
      ...getSessionFeatureFlags(),
      ...getQueryFeatureFlags(featureFlags),
    }
  });

  featuresService.on('toggleFeature', (flag, value) => {
    let sessionFeatureFlags = getSessionFeatureFlags();

    if (config.featureFlags[flag] == value) {
      delete sessionFeatureFlags[flag];
    } else {
      sessionFeatureFlags[flag] = value;
    }

    sessionStorage.featureFlags = JSON.stringify(sessionFeatureFlags);
  });
});

export default {
    name: 'feature-flags',
    initialize
};

The change would be adding some initialization hook and then using Ember.Evented to an event listener for toggleFeature (I’m using a single event rather than having separate enable/disable but 🤷🏽)