Add a Plugin and Mixin to Use Feature Flags in Vue

This allows for arbitrarily-deeply-nested components to inject the
feature flags from Gon without having to access the global window. It
also easily allows for injecting of mock values during unit testing.

app/assets/javascripts/vue_shared/gl_feature_flags_plugin.js

+export default Vue => {
+  Vue.mixin({
+    provide: {
+      glFeatures: { ...(window.gon.features || {}) },
+    },
+  });
+};

app/assets/javascripts/vue_shared/mixins/gl_feature_flags_mixin.js

+export default () => ({
+  inject: {
+    glFeatures: {
+      from: 'glFeatures',
+      default: {},
+    },
+  },
+});

spec/frontend/vue_shared/gl_feature_flags_plugin_spec.js

+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import GlFeatureFlags from '~/vue_shared/gl_feature_flags_plugin';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+
+const localVue = createLocalVue();
+
+describe('GitLab Feature Flags Plugin', () => {
+  beforeEach(() => {
+    window.gon = {
+      features: {
+        aFeature: true,
+        bFeature: false,
+      },
+    };
+
+    localVue.use(GlFeatureFlags);
+  });
+
+  it('should provide glFeatures to components', () => {
+    const component = {
+      template: `<span></span>`,
+      inject: ['glFeatures'],
+    };
+    const wrapper = shallowMount(component, { localVue });
+    expect(wrapper.vm.glFeatures).toEqual({
+      aFeature: true,
+      bFeature: false,
+    });
+  });
+
+  it('should integrate with the glFeatureMixin', () => {
+    const component = {
+      template: `<span></span>`,
+      mixins: [glFeatureFlagsMixin()],
+    };
+    const wrapper = shallowMount(component, { localVue });
+    expect(wrapper.vm.glFeatures).toEqual({
+      aFeature: true,
+      bFeature: false,
+    });
+  });
+});

spec/frontend/vue_shared/mixins/gl_feature_flags_mixin_spec.js

+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+
+const localVue = createLocalVue();
+
+describe('GitLab Feature Flags Mixin', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    const gon = {
+      features: {
+        aFeature: true,
+        bFeature: false,
+      },
+    };
+
+    const component = {
+      template: `<span></span>`,
+      mixins: [glFeatureFlagsMixin()],
+    };
+
+    wrapper = shallowMount(component, {
+      localVue,
+      provide: {
+        glFeatures: { ...(gon.features || {}) },
+      },
+    });
+  });
+
+  it('should provide glFeatures to components', () => {
+    expect(wrapper.vm.glFeatures).toEqual({
+      aFeature: true,
+      bFeature: false,
+    });
+  });
+});