Add latest changes from gitlab-org/gitlab@master

3 files changed, 37 insertions, 66 deletions

diff --git a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
index af1574f98d9..624ca18eec9 100644
--- a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
+++ b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
@@ -7,21 +7,18 @@ export default {
     BlobHeaderEdit,
     BlobContentEdit,
   },
+  inheritAttrs: false,
   props: {
-    content: {
-      type: String,
-      required: true,
-    },
     fileName: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
   },
-  data() {
-    return {
-      name: this.fileName,
-      blobContent: this.content,
-    };
+  methods: {
+    emitFileNameChange(newFileName) {
+      this.$emit('name-change', newFileName);
+    },
   },
 };
 </script>
@@ -29,8 +26,8 @@ export default {
   <div class="form-group file-editor">
     <label>{{ s__('Snippets|File') }}</label>
     <div class="file-holder snippet">
-      <blob-header-edit v-model="name" />
-      <blob-content-edit v-model="blobContent" :file-name="name" />
+      <blob-header-edit :value="fileName" @input="emitFileNameChange" />
+      <blob-content-edit v-bind="$attrs" :file-name="fileName" v-on="$listeners" />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/snippets/components/snippet_description_edit.vue b/app/assets/javascripts/snippets/components/snippet_description_edit.vue
index 5b70ac5b715..68810f8ab3f 100644
--- a/app/assets/javascripts/snippets/components/snippet_description_edit.vue
+++ b/app/assets/javascripts/snippets/components/snippet_description_edit.vue
@@ -9,11 +9,6 @@ export default {
     MarkdownField,
   },
   props: {
-    description: {
-      type: String,
-      default: '',
-      required: false,
-    },
     markdownPreviewPath: {
       type: String,
       required: true,
@@ -22,11 +17,11 @@ export default {
       type: String,
       required: true,
     },
-  },
-  data() {
-    return {
-      text: this.description,
-    };
+    value: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   mounted() {
     setupCollapsibleInputs();
@@ -37,7 +32,7 @@ export default {
   <div class="form-group js-description-input">
     <label>{{ s__('Snippets|Description (optional)') }}</label>
     <div class="js-collapsible-input">
-      <div class="js-collapsed" :class="{ 'd-none': text }">
+      <div class="js-collapsed" :class="{ 'd-none': value }">
         <gl-form-input
           class="form-control"
           :placeholder="
@@ -50,20 +45,21 @@ export default {
       </div>
       <markdown-field
         class="js-expanded"
-        :class="{ 'd-none': !text }"
+        :class="{ 'd-none': !value }"
         :markdown-preview-path="markdownPreviewPath"
         :markdown-docs-path="markdownDocsPath"
       >
         <textarea
           id="snippet-description"
           slot="textarea"
-          v-model="text"
           class="note-textarea js-gfm-input js-autosize markdown-area
             qa-description-textarea"
           dir="auto"
           data-supports-quick-actions="false"
+          :value="value"
           :aria-label="__('Description')"
           :placeholder="__('Write a comment or drag your files here…')"
+          @input="$emit('input', $event.target.value)"
         >
         </textarea>
       </markdown-field>
diff --git a/app/assets/javascripts/snippets/components/snippet_visibility_edit.vue b/app/assets/javascripts/snippets/components/snippet_visibility_edit.vue
index 93cd2b58c11..80710a88bb2 100644
--- a/app/assets/javascripts/snippets/components/snippet_visibility_edit.vue
+++ b/app/assets/javascripts/snippets/components/snippet_visibility_edit.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlIcon, GlFormGroup, GlFormRadio, GlFormRadioGroup, GlLink } from '@gitlab/ui';
-import { SNIPPET_VISIBILITY } from '~/snippets/constants';
+import { SNIPPET_VISIBILITY, SNIPPET_VISIBILITY_PRIVATE } from '~/snippets/constants';
 
 export default {
   components: {
@@ -21,48 +21,22 @@ export default {
       required: false,
       default: false,
     },
-    visibilityLevel: {
+    value: {
       type: String,
-      default: '0',
       required: false,
+      default: SNIPPET_VISIBILITY_PRIVATE,
     },
   },
-  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;
-      }
+      const options = [];
+      Object.keys(SNIPPET_VISIBILITY).forEach(key => {
+        options.push({
+          value: key,
+          ...SNIPPET_VISIBILITY[key],
+        });
+      });
+      return options;
     },
   },
 };
@@ -76,18 +50,22 @@ export default {
       /></gl-link>
     </label>
     <gl-form-group id="visibility-level-setting">
-      <gl-form-radio-group :checked="selected" stacked @change="updateSelectedOption">
+      <gl-form-radio-group v-bind="$attrs" :checked="value" stacked v-on="$listeners">
         <gl-form-radio
           v-for="option in visibilityOptions"
-          :key="option.icon"
+          :key="option.value"
           :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>
+            <span class="font-weight-bold ml-1 js-visibility-option">{{ option.label }}</span>
           </div>
-          <template #help>{{ option.description }}</template>
+          <template #help>{{
+            isProjectSnippet && option.description_project
+              ? option.description_project
+              : option.description
+          }}</template>
         </gl-form-radio>
       </gl-form-radio-group>
     </gl-form-group>