Add latest changes from gitlab-org/gitlab@master

3 files changed, 100 insertions, 37 deletions

diff --git a/spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap b/spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap
index be75a5bfbdc..8446f0f50c4 100644
--- a/spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap
+++ b/spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap
@@ -20,6 +20,7 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
   </label>
    
   <gl-form-group-stub
+    class="gl-mb-0"
     id="visibility-level-setting"
   >
     <gl-form-radio-group-stub
@@ -90,5 +91,12 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
       </gl-form-radio-stub>
     </gl-form-radio-group-stub>
   </gl-form-group-stub>
+   
+  <div
+    class="text-muted"
+    data-testid="restricted-levels-info"
+  >
+    <!---->
+  </div>
 </div>
 `;
diff --git a/spec/frontend/snippets/components/edit_spec.js b/spec/frontend/snippets/components/edit_spec.js
index 33152591d42..b6abb9f389a 100644
--- a/spec/frontend/snippets/components/edit_spec.js
+++ b/spec/frontend/snippets/components/edit_spec.js
@@ -102,6 +102,13 @@ describe('Snippet Edit app', () => {
         markdownDocsPath: 'http://docs.foo.bar',
         ...props,
       },
+      data() {
+        return {
+          snippet: {
+            visibilityLevel: SNIPPET_VISIBILITY_PRIVATE,
+          },
+        };
+      },
     });
   }
 
diff --git a/spec/frontend/snippets/components/snippet_visibility_edit_spec.js b/spec/frontend/snippets/components/snippet_visibility_edit_spec.js
index 4ba3e906fc3..3919e4d7993 100644
--- a/spec/frontend/snippets/components/snippet_visibility_edit_spec.js
+++ b/spec/frontend/snippets/components/snippet_visibility_edit_spec.js
@@ -1,31 +1,55 @@
 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,
   SNIPPET_VISIBILITY_INTERNAL,
   SNIPPET_VISIBILITY_PUBLIC,
+  SNIPPET_LEVELS_RESTRICTED,
+  SNIPPET_LEVELS_DISABLED,
 } from '~/snippets/constants';
 
 describe('Snippet Visibility Edit component', () => {
   let wrapper;
   const defaultHelpLink = '/foo/bar';
   const defaultVisibilityLevel = 'private';
-
-  function createComponent(propsData = {}, deep = false) {
+  const defaultVisibility = defaultSnippetVisibilityLevels([0, 10, 20]);
+
+  function createComponent({
+    propsData = {},
+    visibilityLevels = defaultVisibility,
+    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,
+        };
+      },
     });
   }
 
-  const findLabel = () => wrapper.find('label');
+  const findLink = () => wrapper.find('label').find(GlLink);
   const findRadios = () => wrapper.find(GlFormRadioGroup).findAll(GlFormRadio);
   const findRadiosData = () =>
     findRadios().wrappers.map(x => {
@@ -47,60 +71,84 @@ describe('Snippet Visibility Edit component', () => {
       expect(wrapper.element).toMatchSnapshot();
     });
 
-    it('renders visibility options', () => {
-      createComponent({}, true);
+    it('renders label help link', () => {
+      createComponent();
+
+      expect(findLink().attributes('href')).toBe(defaultHelpLink);
+    });
+
+    it('when helpLink is not defined, does not render label help link', () => {
+      createComponent({ propsData: { helpLink: null } });
 
-      expect(findRadiosData()).toEqual([
-        {
+      expect(findLink().exists()).toBe(false);
+    });
+
+    describe('Visibility options', () => {
+      const findRestrictedInfo = () => wrapper.find('[data-testid="restricted-levels-info"]');
+      const RESULTING_OPTIONS = {
+        0: {
           value: SNIPPET_VISIBILITY_PRIVATE,
           icon: SNIPPET_VISIBILITY.private.icon,
           text: SNIPPET_VISIBILITY.private.label,
           description: SNIPPET_VISIBILITY.private.description,
         },
-        {
+        10: {
           value: SNIPPET_VISIBILITY_INTERNAL,
           icon: SNIPPET_VISIBILITY.internal.icon,
           text: SNIPPET_VISIBILITY.internal.label,
           description: SNIPPET_VISIBILITY.internal.description,
         },
-        {
+        20: {
           value: SNIPPET_VISIBILITY_PUBLIC,
           icon: SNIPPET_VISIBILITY.public.icon,
           text: SNIPPET_VISIBILITY.public.label,
           description: SNIPPET_VISIBILITY.public.description,
         },
-      ]);
-    });
-
-    it('when project snippet, renders special private description', () => {
-      createComponent({ isProjectSnippet: true }, true);
+      };
 
-      expect(findRadiosData()[0]).toEqual({
-        value: SNIPPET_VISIBILITY_PRIVATE,
-        icon: SNIPPET_VISIBILITY.private.icon,
-        text: SNIPPET_VISIBILITY.private.label,
-        description: SNIPPET_VISIBILITY.private.description_project,
+      it.each`
+        levels         | resultOptions
+        ${undefined}   | ${[]}
+        ${''}          | ${[]}
+        ${[]}          | ${[]}
+        ${[0]}         | ${[RESULTING_OPTIONS[0]]}
+        ${[0, 10]}     | ${[RESULTING_OPTIONS[0], RESULTING_OPTIONS[10]]}
+        ${[0, 10, 20]} | ${[RESULTING_OPTIONS[0], RESULTING_OPTIONS[10], RESULTING_OPTIONS[20]]}
+        ${[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 });
+        expect(findRadiosData()).toEqual(resultOptions);
       });
-    });
 
-    it('renders label help link', () => {
-      createComponent();
-
-      expect(
-        findLabel()
-          .find(GlLink)
-          .attributes('href'),
-      ).toBe(defaultHelpLink);
-    });
+      it.each`
+        levels         | levelsRestricted | resultText
+        ${[]}          | ${false}         | ${SNIPPET_LEVELS_DISABLED}
+        ${[]}          | ${true}          | ${SNIPPET_LEVELS_DISABLED}
+        ${[0]}         | ${true}          | ${SNIPPET_LEVELS_RESTRICTED}
+        ${[0]}         | ${false}         | ${''}
+        ${[0, 10, 20]} | ${false}         | ${''}
+      `(
+        'renders correct information about restricted visibility levels for $levels',
+        ({ levels, levelsRestricted, resultText }) => {
+          createComponent({
+            visibilityLevels: defaultSnippetVisibilityLevels(levels),
+            multipleLevelsRestricted: levelsRestricted,
+          });
+          expect(findRestrictedInfo().text()).toBe(resultText);
+        },
+      );
 
-    it('when helpLink is not defined, does not render label help link', () => {
-      createComponent({ helpLink: null });
+      it('when project snippet, renders special private description', () => {
+        createComponent({ propsData: { isProjectSnippet: true }, deep: true });
 
-      expect(
-        findLabel()
-          .find(GlLink)
-          .exists(),
-      ).toBe(false);
+        expect(findRadiosData()[0]).toEqual({
+          value: SNIPPET_VISIBILITY_PRIVATE,
+          icon: SNIPPET_VISIBILITY.private.icon,
+          text: SNIPPET_VISIBILITY.private.label,
+          description: SNIPPET_VISIBILITY.private.description_project,
+        });
+      });
     });
   });
 
@@ -108,7 +156,7 @@ describe('Snippet Visibility Edit component', () => {
     it('pre-selects correct option in the list', () => {
       const value = SNIPPET_VISIBILITY_INTERNAL;
 
-      createComponent({ value });
+      createComponent({ propsData: { value } });
 
       expect(wrapper.find(GlFormRadioGroup).attributes('checked')).toBe(value);
     });