Add latest changes from gitlab-org/gitlab@master

2 files changed, 113 insertions, 0 deletions

diff --git a/app/assets/javascripts/snippets/components/snippet_visibility_edit.vue b/app/assets/javascripts/snippets/components/snippet_visibility_edit.vue
new file mode 100644
index 00000000000..93cd2b58c11
--- /dev/null
+++ b/app/assets/javascripts/snippets/components/snippet_visibility_edit.vue
@@ -0,0 +1,95 @@
+<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>
diff --git a/app/assets/javascripts/snippets/constants.js b/app/assets/javascripts/snippets/constants.js
index 87e3fe360a3..ed2f1156292 100644
--- a/app/assets/javascripts/snippets/constants.js
+++ b/app/assets/javascripts/snippets/constants.js
@@ -1,3 +1,21 @@
+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.'),
+  },
+};