Switched to using provide/inject

Instead of setting up the local Apollo cache for storing
immutable data we benefit the simpler provide/inject
mechanism

app/assets/javascripts/snippets/components/edit.vue

@@ -16,12 +16,7 @@ import { performanceMarkAndMeasure } from '~/performance_utils';
 import UpdateSnippetMutation from '../mutations/updateSnippet.mutation.graphql';
 import CreateSnippetMutation from '../mutations/createSnippet.mutation.graphql';
 import { getSnippetMixin } from '../mixins/snippets';
-import {
-  SNIPPET_CREATE_MUTATION_ERROR,
-  SNIPPET_UPDATE_MUTATION_ERROR,
-  SNIPPET_VISIBILITY_PRIVATE,
-} from '../constants';
-import defaultVisibilityQuery from '../queries/snippet_visibility.query.graphql';
+import { SNIPPET_CREATE_MUTATION_ERROR, SNIPPET_UPDATE_MUTATION_ERROR } from '../constants';
 import { markBlobPerformance } from '../utils/blob';
 
 import SnippetBlobActionsEdit from './snippet_blob_actions_edit.vue';
@@ -41,15 +36,7 @@ export default {
     GlLoadingIcon,
   },
   mixins: [getSnippetMixin],
-  apollo: {
-    defaultVisibility: {
-      query: defaultVisibilityQuery,
-      manual: true,
-      result({ data: { selectedLevel } }) {
-        this.snippet.visibilityLevel = selectedLevel;
-      },
-    },
-  },
+  inject: ['selectedLevel'],
   props: {
     markdownPreviewPath: {
       type: String,
@@ -77,7 +64,7 @@ export default {
       snippet: {
         title: '',
         description: '',
-        visibilityLevel: SNIPPET_VISIBILITY_PRIVATE,
+        visibilityLevel: this.selectedLevel,
       },
     };
   },

app/assets/javascripts/snippets/components/snippet_visibility_edit.vue

 <script>
 import { GlIcon, GlFormGroup, GlFormRadio, GlFormRadioGroup, GlLink } from '@gitlab/ui';
-import defaultVisibilityQuery from '../queries/snippet_visibility.query.graphql';
 import { defaultSnippetVisibilityLevels } from '../utils/blob';
 import { SNIPPET_LEVELS_RESTRICTED, SNIPPET_LEVELS_DISABLED } from '~/snippets/constants';
 
@@ -12,16 +11,7 @@ export default {
     GlFormRadioGroup,
     GlLink,
   },
-  apollo: {
-    defaultVisibility: {
-      query: defaultVisibilityQuery,
-      manual: true,
-      result({ data: { visibilityLevels, multipleLevelsRestricted } }) {
-        this.visibilityLevels = defaultSnippetVisibilityLevels(visibilityLevels);
-        this.multipleLevelsRestricted = multipleLevelsRestricted;
-      },
-    },
-  },
+  inject: ['visibilityLevels', 'multipleLevelsRestricted'],
   props: {
     helpLink: {
       type: String,
@@ -38,11 +28,10 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      visibilityLevels: [],
-      multipleLevelsRestricted: false,
-    };
+  computed: {
+    defaultVisibilityLevels() {
+      return defaultSnippetVisibilityLevels(this.visibilityLevels) || [];
+    },
   },
   SNIPPET_LEVELS_DISABLED,
   SNIPPET_LEVELS_RESTRICTED,
@@ -59,7 +48,7 @@ export default {
     <gl-form-group id="visibility-level-setting" class="gl-mb-0">
       <gl-form-radio-group :checked="value" stacked v-bind="$attrs" v-on="$listeners">
         <gl-form-radio
-          v-for="option in visibilityLevels"
+          v-for="option in defaultVisibilityLevels"
           :key="option.value"
           :value="option.value"
           class="mb-3"
@@ -78,7 +67,9 @@ export default {
     </gl-form-group>
 
     <div class="text-muted" data-testid="restricted-levels-info">
-      <template v-if="!visibilityLevels.length">{{ $options.SNIPPET_LEVELS_DISABLED }}</template>
+      <template v-if="!defaultVisibilityLevels.length">{{
+        $options.SNIPPET_LEVELS_DISABLED
+      }}</template>
       <template v-else-if="multipleLevelsRestricted">{{
         $options.SNIPPET_LEVELS_RESTRICTED
       }}</template>

app/assets/javascripts/snippets/index.js

@@ -24,17 +24,14 @@ export default function appFactory(el, Component) {
     ...restDataset
   } = el.dataset;
 
-  apolloProvider.clients.defaultClient.cache.writeData({
-    data: {
+  return new Vue({
+    el,
+    apolloProvider,
+    provide: {
       visibilityLevels: JSON.parse(visibilityLevels),
       selectedLevel: SNIPPET_LEVELS_MAP[selectedLevel] ?? SNIPPET_VISIBILITY_PRIVATE,
       multipleLevelsRestricted: 'multipleLevelsRestricted' in el.dataset,
     },
-  });
-
-  return new Vue({
-    el,
-    apolloProvider,
     render(createElement) {
       return createElement(Component, {
         props: {

spec/frontend/snippets/components/edit_spec.js

@@ -88,8 +88,8 @@ describe('Snippet Edit app', () => {
     props = {},
     loading = false,
     mutationRes = mutationTypes.RESOLVE,
+    selectedLevel = SNIPPET_VISIBILITY_PRIVATE,
     withApollo = false,
-    apolloData = { selectedLevel: SNIPPET_VISIBILITY_PRIVATE },
   } = {}) {
     let componentData = {
       mocks: {
@@ -100,13 +100,6 @@ describe('Snippet Edit app', () => {
           mutate: mutationRes,
         },
       },
-      data() {
-        return {
-          snippet: {
-            visibilityLevel: SNIPPET_VISIBILITY_PRIVATE,
-          },
-        };
-      },
     };
 
     if (wrapper) {
@@ -119,11 +112,6 @@ describe('Snippet Edit app', () => {
 
       const requestHandlers = [[GetSnippetQuery, GetSnippetQuerySpy]];
       fakeApollo = createMockApollo(requestHandlers);
-      fakeApollo.clients.defaultClient.cache.writeData({
-        data: {
-          ...apolloData,
-        },
-      });
       componentData = {
         localVue,
         apolloProvider: fakeApollo,
@@ -136,6 +124,9 @@ describe('Snippet Edit app', () => {
         ApolloMutation,
         FormFooterActions,
       },
+      provide: {
+        selectedLevel,
+      },
       propsData: {
         snippetGid: 'gid://gitlab/PersonalSnippet/42',
         markdownPreviewPath: 'http://preview.foo.bar',
@@ -273,14 +264,8 @@ describe('Snippet Edit app', () => {
         async visibility => {
           createComponent({
             props: { snippetGid: '' },
-            withApollo: true,
-            apolloData: {
-              selectedLevel: visibility,
-            },
+            selectedLevel: visibility,
           });
-          jest.runOnlyPendingTimers();
-          await wrapper.vm.$nextTick();
-
           expect(wrapper.vm.snippet.visibilityLevel).toEqual(visibility);
         },
       );

spec/frontend/snippets/components/snippet_visibility_edit_spec.js

 import { GlFormRadio, GlIcon, GlFormRadioGroup, GlLink } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import SnippetVisibilityEdit from '~/snippets/components/snippet_visibility_edit.vue';
-import { defaultSnippetVisibilityLevels } from '~/snippets/utils/blob';
 import {
   SNIPPET_VISIBILITY,
   SNIPPET_VISIBILITY_PRIVATE,
@@ -15,36 +14,25 @@ describe('Snippet Visibility Edit component', () => {
   let wrapper;
   const defaultHelpLink = '/foo/bar';
   const defaultVisibilityLevel = 'private';
-  const defaultVisibility = defaultSnippetVisibilityLevels([0, 10, 20]);
 
   function createComponent({
     propsData = {},
-    visibilityLevels = defaultVisibility,
+    visibilityLevels = [0, 10, 20],
     multipleLevelsRestricted = false,
     deep = false,
   } = {}) {
     const method = deep ? mount : shallowMount;
-    const $apollo = {
-      queries: {
-        defaultVisibility: {
-          loading: false,
-        },
-      },
-    };
 
     wrapper = method.call(this, SnippetVisibilityEdit, {
-      mock: { $apollo },
       propsData: {
         helpLink: defaultHelpLink,
         isProjectSnippet: false,
         value: defaultVisibilityLevel,
         ...propsData,
       },
-      data() {
-        return {
-          visibilityLevels,
-          multipleLevelsRestricted,
-        };
+      provide: {
+        visibilityLevels,
+        multipleLevelsRestricted,
       },
     });
   }
@@ -108,7 +96,6 @@ describe('Snippet Visibility Edit component', () => {
 
       it.each`
         levels         | resultOptions
-        ${undefined}   | ${[]}
         ${''}          | ${[]}
         ${[]}          | ${[]}
         ${[0]}         | ${[RESULTING_OPTIONS[0]]}
@@ -117,7 +104,7 @@ describe('Snippet Visibility Edit component', () => {
         ${[0, 20]}     | ${[RESULTING_OPTIONS[0], RESULTING_OPTIONS[20]]}
         ${[10, 20]}    | ${[RESULTING_OPTIONS[10], RESULTING_OPTIONS[20]]}
       `('renders correct visibility options for $levels', ({ levels, resultOptions }) => {
-        createComponent({ visibilityLevels: defaultSnippetVisibilityLevels(levels), deep: true });
+        createComponent({ visibilityLevels: levels, deep: true });
         expect(findRadiosData()).toEqual(resultOptions);
       });
 
@@ -132,7 +119,7 @@ describe('Snippet Visibility Edit component', () => {
         'renders correct information about restricted visibility levels for $levels',
         ({ levels, levelsRestricted, resultText }) => {
           createComponent({
-            visibilityLevels: defaultSnippetVisibilityLevels(levels),
+            visibilityLevels: levels,
             multipleLevelsRestricted: levelsRestricted,
           });
           expect(findRestrictedInfo().text()).toBe(resultText);