1 files changed, 31 insertions, 19 deletions
diff --git a/app/assets/javascripts/snippets/components/snippet_visibility_edit.vue b/app/assets/javascripts/snippets/components/snippet_visibility_edit.vue
index 299bb8fcfad..25ad7c214b2 100644
--- a/app/assets/javascripts/snippets/components/snippet_visibility_edit.vue
+++ b/app/assets/javascripts/snippets/components/snippet_visibility_edit.vue
@@ -1,11 +1,8 @@
 <script>
 import { GlIcon, GlFormGroup, GlFormRadio, GlFormRadioGroup, GlLink } from '@gitlab/ui';
-import {
-  SNIPPET_VISIBILITY,
-  SNIPPET_VISIBILITY_PRIVATE,
-  SNIPPET_VISIBILITY_INTERNAL,
-  SNIPPET_VISIBILITY_PUBLIC,
-} from '~/snippets/constants';
+import defaultVisibilityQuery from '../queries/snippet_visibility.query.graphql';
+import { defaultSnippetVisibilityLevels } from '../utils/blob';
+import { SNIPPET_LEVELS_RESTRICTED, SNIPPET_LEVELS_DISABLED } from '~/snippets/constants';
 
 export default {
   components: {
@@ -15,6 +12,16 @@ export default {
     GlFormRadioGroup,
     GlLink,
   },
+  apollo: {
+    defaultVisibility: {
+      query: defaultVisibilityQuery,
+      manual: true,
+      result({ data: { visibilityLevels, multipleLevelsRestricted } }) {
+        this.visibilityLevels = defaultSnippetVisibilityLevels(visibilityLevels);
+        this.multipleLevelsRestricted = multipleLevelsRestricted;
+      },
+    },
+  },
   props: {
     helpLink: {
       type: String,
@@ -28,19 +35,17 @@ export default {
     },
     value: {
       type: String,
-      required: false,
-      default: SNIPPET_VISIBILITY_PRIVATE,
+      required: true,
     },
   },
-  computed: {
-    visibilityOptions() {
-      return [
-        SNIPPET_VISIBILITY_PRIVATE,
-        SNIPPET_VISIBILITY_INTERNAL,
-        SNIPPET_VISIBILITY_PUBLIC,
-      ].map(key => ({ value: key, ...SNIPPET_VISIBILITY[key] }));
-    },
+  data() {
+    return {
+      visibilityLevels: [],
+      multipleLevelsRestricted: false,
+    };
   },
+  SNIPPET_LEVELS_DISABLED,
+  SNIPPET_LEVELS_RESTRICTED,
 };
 </script>
 <template>
@@ -51,10 +56,10 @@ export default {
         ><gl-icon :size="12" name="question"
       /></gl-link>
     </label>
-    <gl-form-group id="visibility-level-setting">
-      <gl-form-radio-group v-bind="$attrs" :checked="value" stacked v-on="$listeners">
+    <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 visibilityOptions"
+          v-for="option in visibilityLevels"
           :key="option.value"
           :value="option.value"
           class="mb-3"
@@ -71,5 +76,12 @@ export default {
         </gl-form-radio>
       </gl-form-radio-group>
     </gl-form-group>
+
+    <div class="text-muted" data-testid="restricted-levels-info">
+      <template v-if="!visibilityLevels.length">{{ $options.SNIPPET_LEVELS_DISABLED }}</template>
+      <template v-else-if="multipleLevelsRestricted">{{
+        $options.SNIPPET_LEVELS_RESTRICTED
+      }}</template>
+    </div>
   </div>
 </template>