1 files changed, 34 insertions, 13 deletions

diff --git a/app/assets/javascripts/blob/components/blob_edit_header.vue b/app/assets/javascripts/blob/components/blob_edit_header.vue
index e1e1d76f721..2cbbbddceeb 100644
--- a/app/assets/javascripts/blob/components/blob_edit_header.vue
+++ b/app/assets/javascripts/blob/components/blob_edit_header.vue
@@ -1,9 +1,10 @@
 <script>
-import { GlFormInput } from '@gitlab/ui';
+import { GlFormInput, GlButton } from '@gitlab/ui';
 
 export default {
   components: {
     GlFormInput,
+    GlButton,
   },
   inheritAttrs: false,
   props: {
@@ -11,6 +12,16 @@ export default {
       type: String,
       required: true,
     },
+    canDelete: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    showDelete: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -21,17 +32,27 @@ export default {
 </script>
 <template>
   <div class="js-file-title file-title-flex-parent">
-    <gl-form-input
-      id="snippet_file_name"
-      v-model="name"
-      :placeholder="
-        s__('Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby')
-      "
-      name="snippet_file_name"
-      class="form-control js-snippet-file-name"
-      type="text"
-      v-bind="$attrs"
-      @change="$emit('input', name)"
-    />
+    <div class="gl-display-flex gl-align-items-center gl-w-full">
+      <gl-form-input
+        v-model="name"
+        :placeholder="
+          s__('Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby')
+        "
+        name="snippet_file_name"
+        class="form-control js-snippet-file-name"
+        type="text"
+        v-bind="$attrs"
+        @change="$emit('input', name)"
+      />
+      <gl-button
+        v-if="showDelete"
+        class="gl-ml-4"
+        variant="danger"
+        category="secondary"
+        :disabled="!canDelete"
+        @click="$emit('delete')"
+        >{{ s__('Snippets|Delete file') }}</gl-button
+      >
+    </div>
   </div>
 </template>