fix: use ember-local-storage for both read & write FF

addon/components/feature-controls.js

@@ -3,7 +3,6 @@ import layout from "../templates/components/feature-controls"
 import { inject as service } from "@ember/service"
 import { action, set } from "@ember/object"
 import { assign } from "@ember/polyfills"
-import { storageFor } from "ember-local-storage"
 import config from "ember-get-config"
 import windowUtil from "ember-feature-controls/utils/window"
 
@@ -13,7 +12,7 @@ export default Component.extend({
   layout,
   tagName: '',
   features: service(),
-  featuresLS: storageFor("feature-controls"),
+  featureControlStorage: service(),
   showRefresh: true,
   showReset: true,
   featureControls,
@@ -49,11 +48,11 @@ export default Component.extend({
       }
       let isFlagLS =
         this.featureControls.useLocalStorage &&
-        this.get(`featuresLS.${key}`) !== undefined
+        this.get(`featureControlStorage.featuresLS.${key}`) !== undefined
       let featureFlag = {
         key,
         isEnabled: isFlagLS
-          ? this.get(`featuresLS.${key}`)
+          ? this.get(`featureControlStorage.featuresLS.${key}`)
           : this.features.isEnabled(key),
         default: defaults[key] || false
       }
@@ -70,7 +69,7 @@ export default Component.extend({
     })
     // If we use local storage then we want to clear the stored data
     if (this.featureControls.useLocalStorage) {
-      this.featuresLS.reset()
+      this.featureControlStorage.featuresLS.reset()
     }
   }),
 
@@ -97,7 +96,7 @@ export default Component.extend({
   doToggleFeature: action(function(key, checkboxState) {
     this.updateFeature(key, !checkboxState)
     if (this.featureControls.useLocalStorage) {
-      this.set(`featuresLS.${key}`, !checkboxState)
+      this.set(`featureControlStorage.featuresLS.${key}`, !checkboxState)
     }
   }),
 })

addon/instance-initializers/load-feature-controls.js

@@ -1,21 +1,21 @@
-import { getStorage } from "ember-local-storage/helpers/storage"
 import config from "ember-get-config"
 
 const { featureControls } = config
 
 export function initialize(appInstance) {
   const features = appInstance.lookup("service:features")
   if (featureControls && featureControls.useLocalStorage) {
-    let featureControlsJSON = getStorage("local")["storage:feature-controls"]
-    if (featureControlsJSON) {
-      const flags = JSON.parse(featureControlsJSON)
-      if (flags) {
-        Object.keys(flags).forEach(flag => {
-          if (features.get("flags").includes(flag)) {
-            flags[flag] ? features.enable(flag) : features.disable(flag)
-          }
-        })
-      }
+
+    const controlStorageService = appInstance.lookup("service:feature-control-storage")
+    // result of controlStorageService.get('featuresLS') is an ObjectProxy we need to use "content"
+    let { content: featureControls } = controlStorageService.get('featuresLS')
+    if (featureControls) {
+      Object.keys(featureControls).forEach(flag => {
+        if (features.get("flags").includes(flag)) {
+          featureControls[flag] ? features.enable(flag) : features.disable(flag)
+        }
+      })
+
     }
   }
 }

addon/services/feature-control-storage.js

@@ -0,0 +1,6 @@
+import Service from '@ember/service'
+import { storageFor } from "ember-local-storage"
+
+export default class FeatureControlStorageService extends Service {
+  @storageFor("feature-controls") featuresLS
+}

app/services/feature-control-storage.js

@@ -0,0 +1 @@
+export { default } from 'ember-feature-controls/services/feature-control-storage';

tests/acceptance/local-storage-env-test.js

@@ -40,7 +40,7 @@ module("Acceptance | local storage env", function(hooks) {
     await click("[data-test-checkbox-flag=showBacon]")
     assert.equal(
       window.localStorage.getItem("storage:feature-controls"),
-      null,
+      '{}',
       "local storage is empty"
     )
   })

tests/integration/components/feature-controls-test.js

@@ -48,10 +48,12 @@ const featureControls = {
   ]
 }
 
-const storageMock = function(assert) {
+const storageServiceMock = function(assert) {
   return {
-    reset() {
-      assert.ok(true, "storageMock.reset() called")
+    featuresLS: {
+      reset() {
+        assert.ok(true, "storageMock.reset() called")
+      }
     }
   }
 }
@@ -61,7 +63,7 @@ const testProperties = function(assert) {
     features: featuresMock(assert),
     featureControls,
     featureFlags,
-    featuresLS: storageMock(assert)
+    featureControlStorage: storageServiceMock(assert)
   }
 }
 
@@ -120,7 +122,7 @@ module("Integration | Component | feature-controls", function(hooks) {
     assert.expect(3)
     this.setProperties(testProperties(assert))
     await render(
-      hbs`{{feature-controls featureControls=featureControls features=features featureFlags=featureFlags featuresLS=featuresLS}}`
+      hbs`{{feature-controls featureControls=featureControls features=features featureFlags=featureFlags featureControlStorage=featureControlStorage}}`
     )
     await click('[data-test-checkbox-flag="flagFalse"]')
     assert
@@ -135,7 +137,7 @@ module("Integration | Component | feature-controls", function(hooks) {
     assert.expect(3)
     this.setProperties(testProperties(assert))
     await render(
-      hbs`{{feature-controls featureControls=featureControls features=features featureFlags=featureFlags featuresLS=featuresLS}}`
+      hbs`{{feature-controls featureControls=featureControls features=features featureFlags=featureFlags featureControlStorage=featureControlStorage}}`
     )
     await click('[data-test-checkbox-flag="flagTrue"]')
     assert
@@ -150,7 +152,7 @@ module("Integration | Component | feature-controls", function(hooks) {
     assert.expect(5)
     this.setProperties(testProperties(assert))
     await render(
-      hbs`{{feature-controls featureControls=featureControls features=features featureFlags=featureFlags featuresLS=featuresLS}}`
+      hbs`{{feature-controls featureControls=featureControls features=features featureFlags=featureFlags featureControlStorage=featureControlStorage}}`
     )
     await click('[data-test-checkbox-flag="flagTrue"]')
     await click("[data-test-button-reset]")
@@ -164,7 +166,7 @@ module("Integration | Component | feature-controls", function(hooks) {
     this.setProperties(testProperties(assert))
     this.set("featureControls.useLocalStorage", true)
     await render(
-      hbs`{{feature-controls featureControls=featureControls features=features featureFlags=featureFlags featuresLS=featuresLS}}`
+      hbs`{{feature-controls featureControls=featureControls features=features featureFlags=featureFlags featureControlStorage=featureControlStorage}}`
     )
     await click('[data-test-checkbox-flag="flagTrue"]')
     await click("[data-test-button-reset]")

tests/unit/services/feature-control-storage-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit'
+import { setupTest } from 'ember-qunit'
+
+module('Unit | Service | feature-control-storage', function(hooks) {
+  setupTest(hooks)
+
+  test('it exists', function(assert) {
+    let service = this.owner.lookup('service:feature-control-storage')
+    assert.ok(service)
+  })
+})