Added Snippet Edit Visibility component

The component mildly updates styles for the component while leaving
the functionality intact

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

+<script>
+import { GlIcon, GlFormGroup, GlFormRadio, GlFormRadioGroup, GlLink } from '@gitlab/ui';
+import { SNIPPET_VISIBILITY } from '~/snippets/constants';
+
+export default {
+  components: {
+    GlIcon,
+    GlFormGroup,
+    GlFormRadio,
+    GlFormRadioGroup,
+    GlLink,
+  },
+  props: {
+    helpLink: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    isProjectSnippet: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    visibilityLevel: {
+      type: String,
+      default: '0',
+      required: false,
+    },
+  },
+  data() {
+    return {
+      selected: this.visibilityLevel,
+    };
+  },
+  computed: {
+    visibilityOptions() {
+      return [
+        {
+          value: '0',
+          icon: 'lock',
+          text: SNIPPET_VISIBILITY.private.label,
+          description: this.isProjectSnippet
+            ? SNIPPET_VISIBILITY.private.description_project
+            : SNIPPET_VISIBILITY.private.description,
+        },
+        {
+          value: '1',
+          icon: 'shield',
+          text: SNIPPET_VISIBILITY.internal.label,
+          description: SNIPPET_VISIBILITY.internal.description,
+        },
+        {
+          value: '2',
+          icon: 'earth',
+          text: SNIPPET_VISIBILITY.public.label,
+          description: SNIPPET_VISIBILITY.public.description,
+        },
+      ];
+    },
+  },
+  methods: {
+    updateSelectedOption(newVal) {
+      if (newVal !== this.selected) {
+        this.selected = newVal;
+      }
+    },
+  },
+};
+</script>
+<template>
+  <div class="form-group">
+    <label>
+      {{ __('Visibility level') }}
+      <gl-link v-if="helpLink" :href="helpLink" target="_blank"
+        ><gl-icon :size="12" name="question"
+      /></gl-link>
+    </label>
+    <gl-form-group id="visibility-level-setting">
+      <gl-form-radio-group :checked="selected" stacked @change="updateSelectedOption">
+        <gl-form-radio
+          v-for="option in visibilityOptions"
+          :key="option.icon"
+          :value="option.value"
+          class="mb-3"
+        >
+          <div class="d-flex align-items-center">
+            <gl-icon :size="16" :name="option.icon" />
+            <span class="font-weight-bold ml-1">{{ option.text }}</span>
+          </div>
+          <template #help>{{ option.description }}</template>
+        </gl-form-radio>
+      </gl-form-radio-group>
+    </gl-form-group>
+  </div>
+</template>

app/assets/javascripts/snippets/constants.js

+import { __ } from '~/locale';
+
 export const SNIPPET_VISIBILITY_PRIVATE = 'private';
 export const SNIPPET_VISIBILITY_INTERNAL = 'internal';
 export const SNIPPET_VISIBILITY_PUBLIC = 'public';
+
+export const SNIPPET_VISIBILITY = {
+  private: {
+    label: __('Private'),
+    description: __('The snippet is visible only to me.'),
+    description_project: __('The snippet is visible only to project members.'),
+  },
+  internal: {
+    label: __('Internal'),
+    description: __('The snippet is visible to any logged in user.'),
+  },
+  public: {
+    label: __('Public'),
+    description: __('The snippet can be accessed without any authentication.'),
+  },
+};

changelogs/unreleased/207242-vsibility-level-vue.yml

+---
+title: Added Edit Visibility Vue compoenent for Snippet
+merge_request: 26799
+author:
+type: added

spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] = `
+<div
+  class="form-group"
+>
+  <label>
+    
+    Visibility level
+    
+    <gl-link-stub
+      href="/foo/bar"
+      target="_blank"
+    >
+      <gl-icon-stub
+        name="question"
+        size="12"
+      />
+    </gl-link-stub>
+  </label>
+   
+  <gl-form-group-stub
+    id="visibility-level-setting"
+  >
+    <gl-form-radio-group-stub
+      checked="0"
+      disabledfield="disabled"
+      htmlfield="html"
+      options=""
+      stacked=""
+      textfield="text"
+      valuefield="value"
+    >
+      <gl-form-radio-stub
+        class="mb-3"
+        value="0"
+      >
+        <div
+          class="d-flex align-items-center"
+        >
+          <gl-icon-stub
+            name="lock"
+            size="16"
+          />
+           
+          <span
+            class="font-weight-bold ml-1"
+          >
+            Private
+          </span>
+        </div>
+      </gl-form-radio-stub>
+      <gl-form-radio-stub
+        class="mb-3"
+        value="1"
+      >
+        <div
+          class="d-flex align-items-center"
+        >
+          <gl-icon-stub
+            name="shield"
+            size="16"
+          />
+           
+          <span
+            class="font-weight-bold ml-1"
+          >
+            Internal
+          </span>
+        </div>
+      </gl-form-radio-stub>
+      <gl-form-radio-stub
+        class="mb-3"
+        value="2"
+      >
+        <div
+          class="d-flex align-items-center"
+        >
+          <gl-icon-stub
+            name="earth"
+            size="16"
+          />
+           
+          <span
+            class="font-weight-bold ml-1"
+          >
+            Public
+          </span>
+        </div>
+      </gl-form-radio-stub>
+    </gl-form-radio-group-stub>
+  </gl-form-group-stub>
+</div>
+`;

spec/frontend/snippets/components/snippet_visibility_edit_spec.js

+import SnippetVisibilityEdit from '~/snippets/components/snippet_visibility_edit.vue';
+import { GlFormRadio } from '@gitlab/ui';
+import { SNIPPET_VISIBILITY } from '~/snippets/constants';
+import { mount, shallowMount } from '@vue/test-utils';
+
+describe('Snippet Visibility Edit component', () => {
+  let wrapper;
+  let radios;
+  const defaultHelpLink = '/foo/bar';
+  const defaultVisibilityLevel = '0';
+
+  function findElements(sel) {
+    return wrapper.findAll(sel);
+  }
+
+  function createComponent(
+    {
+      helpLink = defaultHelpLink,
+      isProjectSnippet = false,
+      visibilityLevel = defaultVisibilityLevel,
+    } = {},
+    deep = false,
+  ) {
+    const method = deep ? mount : shallowMount;
+    wrapper = method.call(this, SnippetVisibilityEdit, {
+      propsData: {
+        helpLink,
+        isProjectSnippet,
+        visibilityLevel,
+      },
+    });
+    radios = findElements(GlFormRadio);
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('rendering', () => {
+    it('matches the snapshot', () => {
+      createComponent();
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it.each`
+      label                                | value
+      ${SNIPPET_VISIBILITY.private.label}  | ${`0`}
+      ${SNIPPET_VISIBILITY.internal.label} | ${`1`}
+      ${SNIPPET_VISIBILITY.public.label}   | ${`2`}
+    `('should render correct $label label', ({ label, value }) => {
+      createComponent();
+      const radio = radios.at(parseInt(value, 10));
+
+      expect(radio.attributes('value')).toBe(value);
+      expect(radio.text()).toContain(label);
+    });
+
+    describe('rendered help-text', () => {
+      it.each`
+        description                                | value  | label
+        ${SNIPPET_VISIBILITY.private.description}  | ${`0`} | ${SNIPPET_VISIBILITY.private.label}
+        ${SNIPPET_VISIBILITY.internal.description} | ${`1`} | ${SNIPPET_VISIBILITY.internal.label}
+        ${SNIPPET_VISIBILITY.public.description}   | ${`2`} | ${SNIPPET_VISIBILITY.public.label}
+      `('should render correct $label description', ({ description, value }) => {
+        createComponent({}, true);
+
+        const help = findElements('.help-text').at(parseInt(value, 10));
+
+        expect(help.text()).toBe(description);
+      });
+
+      it('renders correct Private description for a project snippet', () => {
+        createComponent({ isProjectSnippet: true }, true);
+
+        const helpText = findElements('.help-text')
+          .at(0)
+          .text();
+
+        expect(helpText).not.toContain(SNIPPET_VISIBILITY.private.description);
+        expect(helpText).toBe(SNIPPET_VISIBILITY.private.description_project);
+      });
+    });
+  });
+
+  describe('functionality', () => {
+    it('pre-selects correct option in the list', () => {
+      const pos = 1;
+
+      createComponent({ visibilityLevel: `${pos}` }, true);
+      const radio = radios.at(pos);
+      expect(radio.find('input[type="radio"]').element.checked).toBe(true);
+    });
+  });
+});